File Tree

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { provide, ref, watch } from 'vue'
import { FileTreeKey } from './context'

interface Props extends /* @vue-ignore */ HTMLAttributes {
  class?: HTMLAttributes['class']
  expanded?: Set<string>
  defaultExpanded?: Set<string>
  selectedPath?: string
}

const props = withDefaults(defineProps<Props>(), {
  defaultExpanded: () => new Set(),
})

const emit = defineEmits<{
  (e: 'update:selectedPath', path: string): void
  (e: 'expandedChange', expanded: Set<string>): void
}>()

const internalExpanded = ref(new Set(props.defaultExpanded))
const internalSelectedPath = ref(props.selectedPath)

watch(
  () => props.expanded,
  (newVal) => {
    if (newVal) {
      internalExpanded.value = newVal
    }
  },
  { immediate: true },
)

watch(
  () => props.selectedPath,
  (newVal) => {
    internalSelectedPath.value = newVal
  },
)

function togglePath(path: string) {
  const newExpanded = new Set(internalExpanded.value)
  if (newExpanded.has(path)) {
    newExpanded.delete(path)
  }
  else {
    newExpanded.add(path)
  }
  internalExpanded.value = newExpanded
  emit('expandedChange', newExpanded)
}

function onSelect(path: string) {
  internalSelectedPath.value = path
  emit('update:selectedPath', path)
}

provide(FileTreeKey, {
  expandedPaths: internalExpanded,
  togglePath,
  selectedPath: internalSelectedPath,
  onSelect,
})
</script>

<template>
  <div
    :class="cn('rounded-lg border bg-background font-mono text-sm', props.class)"
    role="tree"
    v-bind="$attrs"
  >
    <div class="p-2">
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@repo/shadcn-vue/components/ui/collapsible'
import { cn } from '@repo/shadcn-vue/lib/utils'
import {
  ChevronRightIcon,
  FolderIcon,
  FolderOpenIcon,
} from 'lucide-vue-next'
import { computed, provide } from 'vue'
import { FileTreeFolderKey, useFileTreeContext } from './context'
import FileTreeIcon from './FileTreeIcon.vue'
import FileTreeName from './FileTreeName.vue'

interface Props extends /* @vue-ignore */ HTMLAttributes {
  path: string
  name: string
  class?: HTMLAttributes['class']
}

const props = defineProps<Props>()

const { expandedPaths, togglePath, selectedPath, onSelect } = useFileTreeContext()

const isExpanded = computed(() => expandedPaths.value.has(props.path))
const isSelected = computed(() => selectedPath.value === props.path)

provide(FileTreeFolderKey, {
  path: props.path,
  name: props.name,
  isExpanded: isExpanded.value,
})
</script>

<template>
  <Collapsible :open="isExpanded" @update:open="() => togglePath(props.path)">
    <div
      :class="cn('', props.class)"
      role="treeitem"
      tabindex="0"
      v-bind="$attrs"
    >
      <CollapsibleTrigger as-child>
        <button
          :class="
            cn(
              'flex w-full items-center gap-1 rounded px-2 py-1 text-left transition-colors hover:bg-muted/50',
              isSelected && 'bg-muted',
            )
          "
          type="button"
          @click="() => onSelect(props.path)"
        >
          <ChevronRightIcon
            :class="
              cn(
                'size-4 shrink-0 text-muted-foreground transition-transform',
                isExpanded && 'rotate-90',
              )
            "
          />
          <FileTreeIcon>
            <FolderOpenIcon v-if="isExpanded" class="size-4 text-blue-500" />
            <FolderIcon v-else class="size-4 text-blue-500" />
          </FileTreeIcon>
          <FileTreeName>{{ props.name }}</FileTreeName>
        </button>
      </CollapsibleTrigger>
      <CollapsibleContent>
        <div class="ml-4 border-l pl-2">
          <slot />
        </div>
      </CollapsibleContent>
    </div>
  </Collapsible>
</template>

<script setup lang="ts">
import type { HTMLAttributes, VNode } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { FileIcon } from 'lucide-vue-next'
import { computed, provide } from 'vue'
import { FileTreeFileKey, useFileTreeContext } from './context'
import FileTreeIcon from './FileTreeIcon.vue'
import FileTreeName from './FileTreeName.vue'

interface Props extends /* @vue-ignore */ HTMLAttributes {
  path: string
  name: string
  icon?: VNode
  class?: HTMLAttributes['class']
}

const props = defineProps<Props>()

const { selectedPath, onSelect } = useFileTreeContext()

const isSelected = computed(() => selectedPath.value === props.path)

provide(FileTreeFileKey, {
  path: props.path,
  name: props.name,
})
</script>

<template>
  <div
    :class="
      cn(
        'flex cursor-pointer items-center gap-1 rounded px-2 py-1 transition-colors hover:bg-muted/50',
        isSelected && 'bg-muted',
        props.class,
      )
    "
    role="treeitem"
    tabindex="0"
    v-bind="$attrs"
    @click="() => onSelect(props.path)"
    @keydown.enter="() => onSelect(props.path)"
    @keydown.space="() => onSelect(props.path)"
  >
    <slot>
      <span class="size-4" /> <!-- Spacer for alignment -->
      <FileTreeIcon>
        <component :is="props.icon" v-if="props.icon" />
        <FileIcon v-else class="size-4 text-muted-foreground" />
      </FileTreeIcon>
      <FileTreeName>{{ props.name }}</FileTreeName>
    </slot>
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'

interface Props extends /* @vue-ignore */ HTMLAttributes {
  class?: HTMLAttributes['class']
}

const props = defineProps<Props>()
</script>

<template>
  <span :class="cn('shrink-0', props.class)" v-bind="$attrs">
    <slot />
  </span>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'

interface Props extends /* @vue-ignore */ HTMLAttributes {
  class?: HTMLAttributes['class']
}

const props = defineProps<Props>()
</script>

<template>
  <span :class="cn('truncate', props.class)" v-bind="$attrs">
    <slot />
  </span>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'

interface Props extends /* @vue-ignore */ HTMLAttributes {
  class?: HTMLAttributes['class']
}

const props = defineProps<Props>()
</script>

<template>
  <div
    :class="cn('ml-auto flex items-center gap-1', props.class)"
    role="group"
    v-bind="$attrs"
    @click.stop
    @keydown.enter.stop
    @keydown.space.stop
  >
    <slot />
  </div>
</template>

import type { InjectionKey, Ref } from 'vue'
import { inject } from 'vue'

export interface FileTreeContextValue {
  expandedPaths: Ref<Set<string>>
  togglePath: (path: string) => void
  selectedPath: Ref<string | undefined>
  onSelect: (path: string) => void
}

export const FileTreeKey: InjectionKey<FileTreeContextValue> = Symbol('FileTree')

export function useFileTreeContext(): FileTreeContextValue {
  const context = inject(FileTreeKey)
  if (!context) {
    throw new Error('useFileTreeContext must be used within FileTree')
  }
  return context
}

export interface FileTreeFolderContextValue {
  path: string
  name: string
  isExpanded: boolean
}

export const FileTreeFolderKey: InjectionKey<FileTreeFolderContextValue> = Symbol('FileTreeFolder')

export interface FileTreeFileContextValue {
  path: string
  name: string
}

export const FileTreeFileKey: InjectionKey<FileTreeFileContextValue> = Symbol('FileTreeFile')

export { default as FileTree } from './FileTree.vue'
export { default as FileTreeActions } from './FileTreeActions.vue'
export { default as FileTreeFile } from './FileTreeFile.vue'
export { default as FileTreeFolder } from './FileTreeFolder.vue'
export { default as FileTreeIcon } from './FileTreeIcon.vue'
export { default as FileTreeName } from './FileTreeName.vue'