@oneclick.dev/cms-kit 0.0.1

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

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

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

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

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

package/components/ui/menubar/MenubarCheckboxItem.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { cn } from '../../../lib/utils'
+import { Check } from 'lucide-vue-next'
+import {
+  MenubarCheckboxItem,
+  type MenubarCheckboxItemEmits,
+  type MenubarCheckboxItemProps,
+  MenubarItemIndicator,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<MenubarCheckboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarCheckboxItem
+    data-slot="menubar-checkbox-item"
+    v-bind="forwarded"
+    :class="cn(
+      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+      props.class,
+    )"
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <MenubarItemIndicator>
+        <Check class="size-4" />
+      </MenubarItemIndicator>
+    </span>
+    <slot />
+  </MenubarCheckboxItem>
+</template>

package/components/ui/menubar/MenubarContent.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { cn } from '../../../lib/utils'
+import {
+  MenubarContent,
+  type MenubarContentProps,
+  MenubarPortal,
+  useForwardProps,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = withDefaults(
+  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    align: 'start',
+    alignOffset: -4,
+    sideOffset: 8,
+  },
+)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarPortal>
+    <MenubarContent
+      data-slot="menubar-content"
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--reka-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </MenubarContent>
+  </MenubarPortal>
+</template>

package/components/ui/menubar/MenubarGroup.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { MenubarGroup, type MenubarGroupProps } from 'reka-ui'
+
+const props = defineProps<MenubarGroupProps>()
+</script>
+
+<template>
+  <MenubarGroup
+    data-slot="menubar-group"
+    v-bind="props"
+  >
+    <slot />
+  </MenubarGroup>
+</template>

package/components/ui/menubar/MenubarItem.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import {
+  MenubarItem,
+  type MenubarItemEmits,
+  type MenubarItemProps,
+  useForwardPropsEmits,
+} from 'reka-ui'
+
+const props = defineProps<MenubarItemProps & {
+  class?: HTMLAttributes['class']
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}>()
+
+const emits = defineEmits<MenubarItemEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class', 'inset', 'variant')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarItem
+    data-slot="menubar-item"
+    :data-inset="inset ? '' : undefined"
+    :data-variant="variant"
+    v-bind="forwarded"
+    :class="cn(
+      `focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+      props.class,
+    )"
+  >
+    <slot />
+  </MenubarItem>
+</template>

package/components/ui/menubar/MenubarLabel.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { MenubarLabel, type MenubarLabelProps } from 'reka-ui'
+
+const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+const delegatedProps = reactiveOmit(props, 'class', 'inset')
+</script>
+
+<template>
+  <MenubarLabel
+    :data-inset="inset ? '' : undefined"
+    v-bind="delegatedProps"
+    :class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
+  >
+    <slot />
+  </MenubarLabel>
+</template>

package/components/ui/menubar/MenubarMenu.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { MenubarMenu, type MenubarMenuProps } from 'reka-ui'
+
+const props = defineProps<MenubarMenuProps>()
+</script>
+
+<template>
+  <MenubarMenu
+    data-slot="menubar-menu"
+    v-bind="props"
+  >
+    <slot />
+  </MenubarMenu>
+</template>

package/components/ui/menubar/MenubarRadioGroup.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import {
+  MenubarRadioGroup,
+  type MenubarRadioGroupEmits,
+  type MenubarRadioGroupProps,
+  useForwardPropsEmits,
+} from 'reka-ui'
+
+const props = defineProps<MenubarRadioGroupProps>()
+const emits = defineEmits<MenubarRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <MenubarRadioGroup
+    data-slot="menubar-radio-group"
+    v-bind="forwarded"
+  >
+    <slot />
+  </MenubarRadioGroup>
+</template>

package/components/ui/menubar/MenubarRadioItem.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { cn } from '../../../lib/utils'
+import { Circle } from 'lucide-vue-next'
+import {
+  MenubarItemIndicator,
+  MenubarRadioItem,
+  type MenubarRadioItemEmits,
+  type MenubarRadioItemProps,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<MenubarRadioItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarRadioItem
+    data-slot="menubar-radio-item"
+    v-bind="forwarded"
+    :class="cn(
+      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+      props.class,
+    )"
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <MenubarItemIndicator>
+        <Circle class="size-2 fill-current" />
+      </MenubarItemIndicator>
+    </span>
+    <slot />
+  </MenubarRadioItem>
+</template>

package/components/ui/menubar/MenubarSeparator.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { cn } from '../../../lib/utils'
+import { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarSeparator
+    data-slot="menubar-separator"
+    :class=" cn('bg-border -mx-1 my-1 h-px', props.class)"
+    v-bind="forwardedProps"
+  />
+</template>

package/components/ui/menubar/MenubarShortcut.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="menubar-shortcut"
+    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
+  >
+    <slot />
+  </span>
+</template>

package/components/ui/menubar/MenubarSub.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'reka-ui'
+
+interface MenubarSubRootProps {
+  defaultOpen?: boolean
+  open?: boolean
+}
+
+const props = defineProps<MenubarSubRootProps>()
+const emits = defineEmits<MenubarSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <MenubarSub
+    data-slot="menubar-sub"
+    v-bind="forwarded"
+  >
+    <slot />
+  </MenubarSub>
+</template>

package/components/ui/menubar/MenubarSubContent.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { cn } from '../../../lib/utils'
+import {
+  MenubarPortal,
+  MenubarSubContent,
+  type MenubarSubContentEmits,
+  type MenubarSubContentProps,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<MenubarSubContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarPortal>
+    <MenubarSubContent
+      data-slot="menubar-sub-content"
+      v-bind="forwarded"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </MenubarSubContent>
+  </MenubarPortal>
+</template>