@oneclick.dev/cms-kit 0.0.1 → 0.0.3

package/components/ui/table/TableCell.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <td
-    data-slot="table-cell"
-    :class="
-      cn(
-        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </td>
-</template>

package/components/ui/table/TableEmpty.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { computed, type HTMLAttributes } from 'vue'
-import TableCell from './TableCell.vue'
-import TableRow from './TableRow.vue'
-
-const props = withDefaults(defineProps<{
-  class?: HTMLAttributes['class']
-  colspan?: number
-}>(), {
-  colspan: 1,
-})
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <TableRow>
-    <TableCell
-      :class="
-        cn(
-          'p-4 whitespace-nowrap align-middle text-sm text-foreground',
-          props.class,
-        )
-      "
-      v-bind="delegatedProps"
-    >
-      <div class="flex items-center justify-center py-10">
-        <slot />
-      </div>
-    </TableCell>
-  </TableRow>
-</template>

package/components/ui/table/TableFooter.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <tfoot
-    data-slot="table-footer"
-    :class="cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', props.class)"
-  >
-    <slot />
-  </tfoot>
-</template>

package/components/ui/table/TableHead.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <th
-    data-slot="table-head"
-    :class="cn('text-muted-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)"
-  >
-    <slot />
-  </th>
-</template>

package/components/ui/table/TableHeader.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <thead
-    data-slot="table-header"
-    :class="cn('[&_tr]:border-b', props.class)"
-  >
-    <slot />
-  </thead>
-</template>

package/components/ui/table/TableRow.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <tr
-    data-slot="table-row"
-    :class="cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', props.class)"
-  >
-    <slot />
-  </tr>
-</template>

package/components/ui/table/index.ts

@@ -1,9 +0,0 @@
-export { default as Table } from './Table.vue'
-export { default as TableBody } from './TableBody.vue'
-export { default as TableCaption } from './TableCaption.vue'
-export { default as TableCell } from './TableCell.vue'
-export { default as TableEmpty } from './TableEmpty.vue'
-export { default as TableFooter } from './TableFooter.vue'
-export { default as TableHead } from './TableHead.vue'
-export { default as TableHeader } from './TableHeader.vue'
-export { default as TableRow } from './TableRow.vue'

package/components/ui/table/utils.ts

@@ -1,9 +0,0 @@
-import type { Updater } from '@tanstack/vue-table'
-import type { Ref } from 'vue'
-
-export function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
-  ref.value
-    = typeof updaterOrValue === 'function'
-      ? updaterOrValue(ref.value)
-      : updaterOrValue
-}

package/components/ui/tabs/Tabs.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { TabsRootEmits, TabsRootProps } from 'reka-ui'
-import { TabsRoot, useForwardPropsEmits } from 'reka-ui'
-
-const props = defineProps<TabsRootProps>()
-const emits = defineEmits<TabsRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <TabsRoot v-bind="forwarded">
-    <slot />
-  </TabsRoot>
-</template>

package/components/ui/tabs/TabsContent.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { TabsContent, type TabsContentProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <TabsContent
-    :class="cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)"
-    v-bind="delegatedProps"
-  >
-    <slot />
-  </TabsContent>
-</template>

package/components/ui/tabs/TabsList.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { TabsList, type TabsListProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <TabsList
-    v-bind="delegatedProps"
-    :class="cn(
-      'inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
-      props.class,
-    )"
-  >
-    <slot />
-  </TabsList>
-</template>

package/components/ui/tabs/TabsTrigger.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <TabsTrigger
-    v-bind="forwardedProps"
-    :class="cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
-      props.class,
-    )"
-  >
-    <span class="truncate">
-      <slot />
-    </span>
-  </TabsTrigger>
-</template>

package/components/ui/tabs/index.ts

@@ -1,4 +0,0 @@
-export { default as Tabs } from './Tabs.vue'
-export { default as TabsContent } from './TabsContent.vue'
-export { default as TabsList } from './TabsList.vue'
-export { default as TabsTrigger } from './TabsTrigger.vue'

package/components/ui/tailwind-color-picker/TailwindColorPicker.vue

@@ -1,58 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { useVModel } from '@vueuse/core'
-
-const tailwindColors = ['yellow', 'green', 'cyan', 'blue', 'purple', 'pink', 'red']
-
-const props = defineProps<{
-  defaultValue?: string
-  modelValue?: string
-  class?: HTMLAttributes['class']
-}>()
-
-const emits = defineEmits<{
-  (e: 'update:modelValue', payload: string): void
-}>()
-
-const modelValue = useVModel(props, 'modelValue', emits, {
-  passive: true,
-  defaultValue: props.defaultValue ?? '',
-})
-
-const selectColor = (color: string) => {
-  if (color === modelValue.value) {
-    emits('update:modelValue', props.defaultValue ?? '')
-  } else {
-    emits('update:modelValue', color)
-  }
-}
-</script>
-
-<template>
-  <Popover>
-    <PopoverTrigger as-child>
-      <Button variant="outline" class="w-44">
-        <span v-if="modelValue" class="flex items-center gap-2">
-          <div :class="`bg-${modelValue}`" class="size-5 rounded-full"></div>
-          {{modelValue.split('-')[0]}}
-          {{modelValue.split('-')[1]}}
-        </span>
-        <span v-else>
-          Select color
-        </span>
-      </Button>
-    </PopoverTrigger>
-    <PopoverContent class="w-[170px]">
-      <div class="flex gap-1 mb-1" v-for="colorPalette in tailwindColors" :key="colorPalette">
-        <div
-          v-for="i in 5"
-          :key="i"
-          class="flex flex-col items-center cursor-pointer size-6 rounded-full cursor-pointer transition-all"
-          :class="`bg-${colorPalette}-${(i + 2) * 100} ${modelValue === `${colorPalette}-${(i + 2) * 100}` ? 'scale-110 z-10 outline-2 outline-white' : ''}`"
-          @click="selectColor(`${colorPalette}-${(i + 2) * 100}`)"
-        >
-        </div>
-      </div>
-    </PopoverContent>
-  </Popover>
-</template>

package/components/ui/tailwind-color-picker/index.ts

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

package/components/ui/textarea/Textarea.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-import { useVModel } from '@vueuse/core'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-  defaultValue?: string | number
-  modelValue?: string | number
-}>()
-
-const emits = defineEmits<{
-  (e: 'update:modelValue', payload: string | number): void
-}>()
-
-const modelValue = useVModel(props, 'modelValue', emits, {
-  passive: true,
-  defaultValue: props.defaultValue,
-})
-</script>
-
-<template>
-  <textarea
-    v-model="modelValue"
-    data-slot="textarea"
-    :class="cn('border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', props.class)"
-  />
-</template>

package/components/ui/textarea/index.ts

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

package/components/ui/toggle/Toggle.vue

@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-import { reactiveOmit } from '@vueuse/core'
-import { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui'
-import { type ToggleVariants, toggleVariants } from '.'
-
-const props = withDefaults(defineProps<ToggleProps & {
-  class?: HTMLAttributes['class']
-  variant?: ToggleVariants['variant']
-  size?: ToggleVariants['size']
-}>(), {
-  variant: 'default',
-  size: 'default',
-  disabled: false,
-})
-
-const emits = defineEmits<ToggleEmits>()
-
-const delegatedProps = reactiveOmit(props, 'class', 'size', 'variant')
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <Toggle
-    data-slot="toggle"
-    v-bind="forwarded"
-    :class="cn(toggleVariants({ variant, size }), props.class)"
-  >
-    <slot />
-  </Toggle>
-</template>

package/components/ui/toggle/index.ts

@@ -1,27 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority'
-
-export { default as Toggle } from './Toggle.vue'
-
-export const toggleVariants = cva(
-  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap',
-  {
-    variants: {
-      variant: {
-        default: 'bg-transparent',
-        outline:
-          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
-      },
-      size: {
-        default: 'h-9 px-2 min-w-9',
-        sm: 'h-8 px-1.5 min-w-8',
-        lg: 'h-10 px-2.5 min-w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-)
-
-export type ToggleVariants = VariantProps<typeof toggleVariants>

package/components/ui/tooltip/Tooltip.vue

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

package/components/ui/tooltip/TooltipContent.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-import { reactiveOmit } from '@vueuse/core'
-import { TooltipArrow, TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
-  sideOffset: 4,
-})
-
-const emits = defineEmits<TooltipContentEmits>()
-
-const delegatedProps = reactiveOmit(props, 'class')
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <TooltipPortal>
-    <TooltipContent
-      data-slot="tooltip-content"
-      v-bind="{ ...forwarded, ...$attrs }"
-      :class="cn('bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 w-fit rounded-md px-3 py-1.5 text-xs text-balance', props.class)"
-    >
-      <slot />
-
-      <TooltipArrow class="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
-    </TooltipContent>
-  </TooltipPortal>
-</template>

package/components/ui/tooltip/TooltipProvider.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import { TooltipProvider, type TooltipProviderProps } from 'reka-ui'
-
-const props = withDefaults(defineProps<TooltipProviderProps>(), {
-  delayDuration: 0,
-})
-</script>
-
-<template>
-  <TooltipProvider v-bind="props">
-    <slot />
-  </TooltipProvider>
-</template>

package/components/ui/tooltip/TooltipTrigger.vue

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

package/components/ui/tooltip/index.ts

@@ -1,4 +0,0 @@
-export { default as Tooltip } from './Tooltip.vue'
-export { default as TooltipContent } from './TooltipContent.vue'
-export { default as TooltipProvider } from './TooltipProvider.vue'
-export { default as TooltipTrigger } from './TooltipTrigger.vue'

package/composables/useCms.ts

@@ -1,11 +0,0 @@
-export function useCms() {
-  const breadcrumbs = inject('breadcrumbs')
-  const project = inject('currentProject')
-
-  if (!breadcrumbs || !project) {
-    throw new Error('Not inside CMS context')
-  }
-
-  return { breadcrumbs, project }
-}
-  

package/index.ts

@@ -1,10 +0,0 @@
-export * from './composables/useCms'
-export * from './types'
-
-const modules = import.meta.glob('./components/ui/**/index.ts', { eager: true })
-
-export const components = {}
-
-for (const mod of Object.values(modules)) {
-  Object.assign(components, mod)
-}

package/lib/interpolation.ts

@@ -1,77 +0,0 @@
-export function interpolateTemplateFromVariableContext(template: string, variableContext: Variable[]): string {
-  if (!template) return "";
-  const context: Record<string, any> = variableContext?.reduce((acc, variable) => {
-    acc[variable.name] = variable.value
-    return acc
-  }, {}) ?? {}
-
-  return interpolateTemplate(template, sanitizeContext(context))
-}
-
-export function interpolateTemplateFromVariableObject(template: string, variableContext: Record<string, any>): string {
-  return interpolateTemplate(template, sanitizeContext(variableContext))
-}
-
-
-// HELPER INTERFACES & FUNCTIONS
-interface Variable {
-  name: string,
-  type: string,
-  value: any
-}
-
-function isValidIdentifier(name: string): boolean {
-  return /^[$A-Z_][0-9A-Z_$]*$/i.test(name)
-}
-
-function sanitizeContext(context: Record<string, any>): Record<string, any> {
-  const blacklist = ['__proto__', 'constructor', 'prototype']
-  const deepSanitize = (obj: any): any => {
-    if (Array.isArray(obj)) return obj.map(deepSanitize)
-    if (obj && typeof obj === 'object') {
-      const result: Record<string, any> = {}
-      for (const key in obj) {
-        if (!blacklist.includes(key) && isValidIdentifier(key)) {
-          result[key] = deepSanitize(obj[key])
-        }
-      }
-      return result
-    }
-    return obj
-  }
-  return deepSanitize(context)
-}
-
-function interpolateTemplate(template: string, context: Record<string, any>): string {
-  return template.replace(/\{\{\s*(.+?)\s*\}\}/gs, (_, rawExpr) => {
-    const expr = rawExpr.trim()
-    if (!expr) return ''
-
-    // 🧠 Detect all referenced variable names
-    const usedVars = extractIdentifiers(expr)
-
-    // 🛡 Build guaranteed-safe context
-    const fullContext: Record<string, any> = { ...context }
-    for (const key of usedVars) {
-      if (!(key in fullContext)) fullContext[key] = undefined
-    }
-
-    const keys = Object.keys(fullContext)
-    const values = Object.values(fullContext)
-
-    try {
-      const func = new Function(...keys, `'use strict'; return (${expr})`)
-      const result = func(...values)
-      return typeof result === 'string' ? result : JSON.stringify(result, null, 2)
-    } catch (err) {
-      console.warn(`Interpolation failed for expression: "${rawExpr}"`, err)
-      return ''
-    }
-  })
-}
-
-function extractIdentifiers(expr: string): string[] {
-  const matches = expr.match(/\b[a-zA-Z_][a-zA-Z0-9_]*\b/g) || []
-  const reserved = new Set(['true', 'false', 'null', 'undefined', 'return', 'if', 'else', 'try', 'catch', 'typeof'])
-  return [...new Set(matches.filter(word => !reserved.has(word)))]
-}

package/lib/utils.ts

@@ -1,24 +0,0 @@
-import type { Updater } from '@tanstack/vue-table'
-import type { Ref } from 'vue'
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
-
-export function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
-  ref.value = typeof updaterOrValue === 'function'
-    ? updaterOrValue(ref.value)
-    : updaterOrValue
-}
-
-export function formatFileSize(size: number) {
-  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-  let i = 0
-  while (size >= 1024 && i < units.length - 1) {
-    size /= 1024
-    i++
-  }
-  return `${size.toFixed(2)} ${units[i]}`
-}