@oneclick.dev/cms-kit 0.0.2 → 0.0.4

package/components/ui/code-editor/CodeEditor.vue

@@ -1,88 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, onMounted, onBeforeUnmount, defineProps, defineEmits } from 'vue'
-import { EditorView, keymap, ViewUpdate, placeholder } from '@codemirror/view'
-import { EditorState } from '@codemirror/state'
-import { javascript } from '@codemirror/lang-javascript'
-import { autocompletion, Completion, CompletionContext } from '@codemirror/autocomplete'
-import { oneDark } from '@codemirror/theme-one-dark'
-import { highlightInterpolation } from './interpolationHighlight'
-import { defaultKeymap, indentWithTab } from '@codemirror/commands'
-import { indentUnit } from '@codemirror/language'
-
-interface Variable {
-  name: string,
-  type: string,
-  value: any
-}
-
-const props = defineProps({
-  modelValue: { type: String, required: true },
-  variables: { type: Array as () => Variable[], default: () => [] },
-  language: { type: String, default: 'javascript' },
-  placeholder: { type: String, default: '' }
-})
-const emit = defineEmits(['update:modelValue'])
-
-const editor = ref<HTMLElement | null>(null)
-let view: EditorView | null = null
-
-// Autocomplete source for variables
-function variableCompletion(context: CompletionContext) {
-  const word = context.matchBefore(/\w*/)
-  if (!word || (word.from == word.to && !context.explicit)) return null
-  return {
-    from: word.from,
-    options: props.variables.map(v => ({
-      label: v.name,
-      type: v.type,
-      info: `Available variable: ${v.name}`
-    })) as Completion[],
-  }
-}
-
-onMounted(() => {
-  view = new EditorView({
-    state: EditorState.create({
-      doc: props.modelValue,
-      extensions: [
-        oneDark,
-        highlightInterpolation(),
-        props.language === 'javascript' ? javascript() : [],
-        autocompletion({ override: [variableCompletion] }),
-        EditorView.updateListener.of((v: ViewUpdate) => {
-          if (v.docChanged) {
-            emit('update:modelValue', v.state.doc.toString())
-          }
-        }),
-        EditorView.lineWrapping,
-        EditorView.editable.of(true),
-        keymap.of([indentWithTab, ...defaultKeymap]),
-        indentUnit.of("  "),
-        placeholder(props.placeholder)
-      ],
-    }),
-    parent: editor.value!,
-  })
-})
-
-watch(() => props.modelValue, (newVal) => {
-  if (view && view.state.doc.toString() !== newVal) {
-    view.dispatch({
-      changes: { from: 0, to: view.state.doc.length, insert: newVal }
-    })
-  }
-})
-
-onBeforeUnmount(() => {
-  if (view) {
-    view.destroy()
-    view = null
-  }
-})
-</script>
-
-<template>
-  <div>
-    <div ref="editor" style="height: 100%; width: 100%;" />
-  </div>
-</template>

package/components/ui/code-editor/index.ts

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

package/components/ui/code-editor/interpolationHighlight.ts

@@ -1,39 +0,0 @@
-import { Extension } from '@codemirror/state'
-import { Decoration, ViewPlugin, ViewUpdate, DecorationSet, EditorView } from '@codemirror/view'
-
-export function highlightInterpolation(): Extension {
-  return ViewPlugin.fromClass(class {
-    decorations: DecorationSet
-
-    constructor(view: EditorView) {
-      this.decorations = this.buildDecorations(view)
-    }
-
-    update(update: ViewUpdate) {
-      if (update.docChanged || update.viewportChanged) {
-        this.decorations = this.buildDecorations(update.view)
-      }
-    }
-
-    buildDecorations(view: EditorView) {
-      const deco: Range<Decoration>[] = []
-      const re = /\{\{[^}]*\}\}/g
-
-      for (const { from, to } of view.visibleRanges) {
-        const text = view.state.doc.sliceString(from, to)
-        let match
-        while ((match = re.exec(text))) {
-          const start = from + match.index
-          const end = start + match[0].length
-          deco.push(Decoration.mark({
-            class: 'cm-interpolation'
-          }).range(start, end))
-        }
-      }
-
-      return Decoration.set(deco)
-    }
-  }, {
-    decorations: v => v.decorations
-  })
-}

package/components/ui/collapsible/Collapsible.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'
-import { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'
-
-const props = defineProps<CollapsibleRootProps>()
-const emits = defineEmits<CollapsibleRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <CollapsibleRoot
-    v-slot="{ open }"
-    data-slot="collapsible"
-    v-bind="forwarded"
-  >
-    <slot :open="open" />
-  </CollapsibleRoot>
-</template>

package/components/ui/collapsible/CollapsibleContent.vue

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

package/components/ui/collapsible/CollapsibleTrigger.vue

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

package/components/ui/collapsible/index.ts

@@ -1,3 +0,0 @@
-export { default as Collapsible } from './Collapsible.vue'
-export { default as CollapsibleContent } from './CollapsibleContent.vue'
-export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'

package/components/ui/combobox/Combobox.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { ComboboxRoot, type ComboboxRootEmits, type ComboboxRootProps, useForwardPropsEmits } from 'reka-ui'
-
-const props = defineProps<ComboboxRootProps>()
-const emits = defineEmits<ComboboxRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <ComboboxRoot
-    data-slot="combobox"
-    v-bind="forwarded"
-  >
-    <slot />
-  </ComboboxRoot>
-</template>

package/components/ui/combobox/ComboboxAnchor.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import type { ComboboxAnchorProps } from 'reka-ui'
-import { cn } from '../../../lib/utils'
-import { ComboboxAnchor, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<ComboboxAnchorProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <ComboboxAnchor
-    data-slot="combobox-anchor"
-    v-bind="forwarded"
-    :class="cn('w-[200px]', props.class)"
-  >
-    <slot />
-  </ComboboxAnchor>
-</template>

package/components/ui/combobox/ComboboxEmpty.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import type { ComboboxEmptyProps } from 'reka-ui'
-import { cn } from '../../../lib/utils'
-import { ComboboxEmpty } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <ComboboxEmpty
-    data-slot="combobox-empty"
-    v-bind="delegatedProps"
-    :class="cn('py-6 text-center text-sm', props.class)"
-  >
-    <slot />
-  </ComboboxEmpty>
-</template>

package/components/ui/combobox/ComboboxGroup.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import type { ComboboxGroupProps } from 'reka-ui'
-import { cn } from '../../../lib/utils'
-import { ComboboxGroup, ComboboxLabel } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<ComboboxGroupProps & {
-  class?: HTMLAttributes['class']
-  heading?: string
-}>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <ComboboxGroup
-    data-slot="combobox-group"
-    v-bind="delegatedProps"
-    :class="cn('overflow-hidden p-1 text-foreground', props.class)"
-  >
-    <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
-      {{ heading }}
-    </ComboboxLabel>
-    <slot />
-  </ComboboxGroup>
-</template>

package/components/ui/combobox/ComboboxInput.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { SearchIcon } from 'lucide-vue-next'
-import { ComboboxInput, type ComboboxInputEmits, type ComboboxInputProps, useForwardPropsEmits } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps<ComboboxInputProps & {
-  class?: HTMLAttributes['class']
-  hideIcon?: boolean
-}>()
-
-const emits = defineEmits<ComboboxInputEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <div
-    data-slot="command-input-wrapper"
-    class="relative"
-  >
-    <SearchIcon class="absolute top-2.5 left-3 size-4 shrink-0 opacity-50" v-if="!props.hideIcon" />
-    <ComboboxInput
-      data-slot="command-input"
-      :class="cn(
-        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex items-center h-9 w-full min-w-0 rounded-md border bg-background px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        props.hideIcon ? '' : 'pl-10',
-        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive'
-      )"
-
-      v-bind="{ ...forwarded, ...$attrs }"
-    >
-      <slot />
-    </ComboboxInput>
-  </div>
-</template>

package/components/ui/combobox/ComboboxItem.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'
-import { cn } from '../../../lib/utils'
-import { ComboboxItem, useForwardPropsEmits } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<ComboboxItemEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <ComboboxItem
-    data-slot="combobox-item"
-    v-bind="forwarded"
-    :class="cn(`data-[highlighted]:bg-accent data-[highlighted]:text-accent-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=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, props.class)"
-  >
-    <slot />
-  </ComboboxItem>
-</template>

package/components/ui/combobox/ComboboxItemIndicator.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import type { ComboboxItemIndicatorProps } from 'reka-ui'
-import { cn } from '../../../lib/utils'
-import { ComboboxItemIndicator, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<ComboboxItemIndicatorProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <ComboboxItemIndicator
-    data-slot="combobox-item-indicator"
-    v-bind="forwarded"
-    :class="cn('ml-auto', props.class)"
-  >
-    <slot />
-  </ComboboxItemIndicator>
-</template>

package/components/ui/combobox/ComboboxList.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-import { reactiveOmit } from '@vueuse/core'
-import { ComboboxContent, ComboboxPortal, useForwardPropsEmits } from 'reka-ui'
-
-const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'], viewportClass?: HTMLAttributes['class'] }>(), {
-  position: 'popper',
-  align: 'center',
-  sideOffset: 4,
-})
-const emits = defineEmits<ComboboxContentEmits>()
-
-const delegatedProps = reactiveOmit(props, 'class', 'viewportClass')
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <ComboboxPortal>
-    <ComboboxContent
-      data-slot="combobox-list"
-      v-bind="forwarded"
-      align="start"
-      side="bottom"
-      :class="cn('z-50 w-[200px] rounded-md border border-popover-border bg-popover text-popover-foreground origin-(--reka-combobox-content-transform-origin) overflow-hidden shadow-md outline-none 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', props.class)"
-    >
-      <slot />
-    </ComboboxContent>
-  </ComboboxPortal>
-</template>

package/components/ui/combobox/ComboboxSeparator.vue

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

package/components/ui/combobox/ComboboxTrigger.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import type { ComboboxTriggerProps } from 'reka-ui'
-import { cn } from '../../../lib/utils'
-import { ComboboxTrigger, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<ComboboxTriggerProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <ComboboxTrigger
-    data-slot="combobox-trigger"
-    v-bind="forwarded"
-    :class="cn('', props.class)"
-    tabindex="0"
-  >
-    <slot />
-  </ComboboxTrigger>
-</template>

package/components/ui/combobox/ComboboxViewport.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import type { ComboboxViewportProps } from 'reka-ui'
-import { cn } from '../../../lib/utils'
-import { ComboboxViewport, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<ComboboxViewportProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <ComboboxViewport
-    data-slot="combobox-viewport"
-    v-bind="forwarded"
-    :class="cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)"
-  >
-    <slot />
-  </ComboboxViewport>
-</template>

package/components/ui/combobox/index.ts

@@ -1,12 +0,0 @@
-export { default as Combobox } from './Combobox.vue'
-export { default as ComboboxAnchor } from './ComboboxAnchor.vue'
-export { default as ComboboxEmpty } from './ComboboxEmpty.vue'
-export { default as ComboboxGroup } from './ComboboxGroup.vue'
-export { default as ComboboxInput } from './ComboboxInput.vue'
-export { default as ComboboxItem } from './ComboboxItem.vue'
-export { default as ComboboxItemIndicator } from './ComboboxItemIndicator.vue'
-export { default as ComboboxList } from './ComboboxList.vue'
-export { default as ComboboxSeparator } from './ComboboxSeparator.vue'
-export { default as ComboboxViewport } from './ComboboxViewport.vue'
-
-export { ComboboxCancel, ComboboxTrigger } from 'reka-ui'

package/components/ui/command/Command.vue

@@ -1,93 +0,0 @@
-<script setup lang="ts">
-import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui'
-import { cn } from '../../../lib/utils'
-import { ListboxRoot, useFilter, useForwardPropsEmits } from 'reka-ui'
-import { computed, type HTMLAttributes, reactive, ref, watch } from 'vue'
-import { provideCommandContext } from '.'
-
-const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes['class'] }>(), {
-  modelValue: '',
-})
-
-const emits = defineEmits<ListboxRootEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-
-const allItems = ref<Map<string, string>>(new Map())
-const allGroups = ref<Map<string, Set<string>>>(new Map())
-
-const { contains } = useFilter({ sensitivity: 'base' })
-const filterState = reactive({
-  search: '',
-  filtered: {
-    /** The count of all visible items. */
-    count: 0,
-    /** Map from visible item id to its search score. */
-    items: new Map() as Map<string, number>,
-    /** Set of groups with at least one visible item. */
-    groups: new Set() as Set<string>,
-  },
-})
-
-function filterItems() {
-  if (!filterState.search) {
-    filterState.filtered.count = allItems.value.size
-    // Do nothing, each item will know to show itself because search is empty
-    return
-  }
-
-  // Reset the groups
-  filterState.filtered.groups = new Set()
-  let itemCount = 0
-
-  // Check which items should be included
-  for (const [id, value] of allItems.value) {
-    const score = contains(value, filterState.search)
-    filterState.filtered.items.set(id, score ? 1 : 0)
-    if (score)
-      itemCount++
-  }
-
-  // Check which groups have at least 1 item shown
-  for (const [groupId, group] of allGroups.value) {
-    for (const itemId of group) {
-      if (filterState.filtered.items.get(itemId)! > 0) {
-        filterState.filtered.groups.add(groupId)
-        break
-      }
-    }
-  }
-
-  filterState.filtered.count = itemCount
-}
-
-function handleSelect() {
-  filterState.search = ''
-}
-
-watch(() => filterState.search, () => {
-  filterItems()
-})
-
-provideCommandContext({
-  allItems,
-  allGroups,
-  filterState,
-})
-</script>
-
-<template>
-  <ListboxRoot
-    data-slot="command"
-    v-bind="forwarded"
-    :class="cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', props.class)"
-  >
-    <slot />
-  </ListboxRoot>
-</template>

package/components/ui/command/CommandDialog.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../dialog'
-import { useForwardPropsEmits } from 'reka-ui'
-import Command from './Command.vue'
-
-const props = withDefaults(defineProps<DialogRootProps & {
-  title?: string
-  description?: string
-}>(), {
-  title: 'Command Palette',
-  description: 'Search for a command to run...',
-})
-const emits = defineEmits<DialogRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <Dialog v-bind="forwarded">
-    <DialogHeader class="sr-only">
-      <DialogTitle>{{ title }}</DialogTitle>
-      <DialogDescription>{{ description }}</DialogDescription>
-    </DialogHeader>
-    <DialogContent class="overflow-hidden p-0 ">
-      <Command>
-        <slot />
-      </Command>
-    </DialogContent>
-  </Dialog>
-</template>

package/components/ui/command/CommandEmpty.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import type { PrimitiveProps } from 'reka-ui'
-import { cn } from '../../../lib/utils'
-import { Primitive } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-import { useCommand } from '.'
-
-const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const { filterState } = useCommand()
-const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,
-)
-</script>
-
-<template>
-  <Primitive
-    v-if="isRender"
-    data-slot="command-empty"
-    v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)"
-  >
-    <slot />
-  </Primitive>
-</template>