@oneclick.dev/cms-kit 0.0.2 → 0.0.3

package/components/ui/pagination/PaginationPrev.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import {
-  Button,
-} from '../button'
-import { ChevronLeft } from 'lucide-vue-next'
-import { PaginationPrev, type PaginationPrevProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {
-  asChild: true,
-})
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <PaginationPrev v-bind="delegatedProps">
-    <Button :class="cn('size-10 p-0', props.class)" variant="outline">
-      <slot>
-        <ChevronLeft class="size-4" />
-      </slot>
-    </Button>
-  </PaginationPrev>
-</template>

package/components/ui/pagination/index.ts

@@ -1,10 +0,0 @@
-export { default as PaginationEllipsis } from './PaginationEllipsis.vue'
-export { default as PaginationFirst } from './PaginationFirst.vue'
-export { default as PaginationLast } from './PaginationLast.vue'
-export { default as PaginationNext } from './PaginationNext.vue'
-export { default as PaginationPrev } from './PaginationPrev.vue'
-export {
-  PaginationRoot as Pagination,
-  PaginationList,
-  PaginationListItem,
-} from 'reka-ui'

package/components/ui/popover/Popover.vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'
-import { PopoverRoot, useForwardPropsEmits } from 'reka-ui'
-
-const props = defineProps<PopoverRootProps>()
-const emits = defineEmits<PopoverRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <PopoverRoot
-    data-slot="popover"
-    v-bind="forwarded"
-  >
-    <slot />
-  </PopoverRoot>
-</template>

package/components/ui/popover/PopoverAnchor.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { PopoverAnchorProps } from 'reka-ui'
-import { PopoverAnchor } from 'reka-ui'
-
-const props = defineProps<PopoverAnchorProps>()
-</script>
-
-<template>
-  <PopoverAnchor
-    data-slot="popover-anchor"
-    v-bind="props"
-  >
-    <slot />
-  </PopoverAnchor>
-</template>

package/components/ui/popover/PopoverContent.vue

@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import {
-  PopoverContent,
-  type PopoverContentEmits,
-  type PopoverContentProps,
-  PopoverPortal,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(
-  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
-  {
-    align: 'center',
-    sideOffset: 4,
-  },
-)
-const emits = defineEmits<PopoverContentEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <PopoverPortal>
-    <PopoverContent
-      data-slot="popover-content"
-      v-bind="{ ...forwarded, ...$attrs }"
-      :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 w-72 rounded-md border border-popover-border p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',
-          props.class,
-        )
-      "
-    >
-      <slot />
-    </PopoverContent>
-  </PopoverPortal>
-</template>

package/components/ui/popover/PopoverTrigger.vue

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

package/components/ui/popover/index.ts

@@ -1,4 +0,0 @@
-export { default as Popover } from './Popover.vue'
-export { default as PopoverAnchor } from './PopoverAnchor.vue'
-export { default as PopoverContent } from './PopoverContent.vue'
-export { default as PopoverTrigger } from './PopoverTrigger.vue'

package/components/ui/query-builder-dialog/QueryBuilderDialog.vue

@@ -1,389 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, watch, nextTick } from 'vue';
-import { ExternalLink, ChevronsUpDown } from 'lucide-vue-next'
-
-const route = useRoute()
-const projectId = route.params.slug as string
-
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    default: () => ({})
-  },
-  integrationId: {
-    type: String
-  },
-  needPredefinedIntegration: {
-    type: Boolean,
-    default: false
-  },
-  noTrigger: {
-    type: Boolean,
-    default: false
-  }
-})
-
-const dialogIsOpen = ref(false)
-
-const openDialog = async (query: any) => {
-  dialogIsOpen.value = true
-  await nextTick();
-
-  if (query) {
-    selectedIntegrationId.value = query.integration.id
-    resource.value = query.resource
-    filters.value = query.filters
-    sorts.value = query.sorts
-    limit.value = query.limit
-    offset.value = query.offset
-    startAt.value = query.startAt
-    endAt.value = query.endAt
-    groupBy.value = query.groupBy
-    distinct.value = query.distinct
-  }
-}
-
-watch(dialogIsOpen, (val) => {
-  if (val) {
-    let modelValue = JSON.parse(JSON.stringify(props.modelValue))
-    selectedIntegrationId.value = modelValue?.integration?.id || null
-    resource.value = modelValue?.resource || ''
-    filters.value = modelValue?.filters || []
-    sorts.value = modelValue?.sorts || []
-    limit.value = modelValue?.limit || null
-    offset.value = modelValue?.offset || null
-    startAt.value = modelValue?.startAt || null
-    endAt.value = modelValue?.endAt || null
-    groupBy.value = modelValue?.groupBy || ''
-    distinct.value = modelValue?.distinct || false
-  }
-})
-
-const emit = defineEmits(['update:modelValue', 'saved'])
-
-const { getProjectIntegrations } = useIntegrations()
-const integrations = ref<any[]>([])
-integrations.value = await getProjectIntegrations(projectId)
-
-const { buildFirebaseQuery, buildSQLQuery } = useQueryBuilder();
-
-const selectedIntegrationId = ref<string | null>(props.integrationId)
-
-const integration = computed(() => {
-  if (props.integrationId) {
-    return integrations.value.find(integration => integration.id === props.integrationId)
-  }
-  return integrations.value.find(integration => integration.id === selectedIntegrationId.value)
-})
-
-const errorMessage = ref<string | null>(null)
-const indexUrl = ref<string | null>(null)
-
-// Resource selector
-const resource = ref('');
-const resourceOptions = ref<string[]>(['team-building-requests', 'users', 'projects']); // Example options
-
-// Filters
-interface Filter {
-  field: string;
-  operator: string;
-  value: string | number | boolean;
-}
-const filters = ref<Filter[]>([]);
-const operatorOptions = [
-  { label: '=', value: '==' },
-  { label: '≠', value: '!=' },
-  { label: '<', value: '<' },
-  { label: '≤', value: '<=' },
-  { label: '≥', value: '>=' },
-  { label: '>', value: '>' },
-  { label: 'IN', value: 'in' },
-  { label: 'NOT IN', value: 'not-in' },
-  { label: 'CONTAINS', value: 'array-contains' },
-  { label: 'CONTAINS ANY', value: 'array-contains-any' }
-]
-
-async function addFilter() {
-  filters.value.push({ field: '', operator: '==', value: '' });
-  await nextTick()
-  const filterFields = document.querySelectorAll('#query_builder_dialog_filters .filter-field')
-  if (filterFields.length) {
-    (filterFields[filterFields.length - 1] as HTMLInputElement).focus()
-  }
-}
-
-function removeFilter(idx: number) {
-  filters.value.splice(idx, 1);
-}
-
-// Sorts
-interface Sort {
-  field: string;
-  direction: 'asc' | 'desc';
-}
-const sorts = ref<Sort[]>([]);
-function addSort() {
-  sorts.value.push({ field: '', direction: 'asc' });
-}
-function removeSort(idx: number) {
-  sorts.value.splice(idx, 1);
-}
-
-// Advanced options
-const showAdvanced = ref(false);
-const limit = ref<number | null>(null);
-const offset = ref<number | null>(null);
-const startAt = ref<any>(null);
-const endAt = ref<any>(null);
-const groupBy = ref<string>('');
-const distinct = ref(false);
-
-// Query preview
-const queryPreview = ref('');
-const queryResult = ref<any>(null);
-
-function resetOutput() {
-  queryPreview.value = '';
-  queryResult.value = null;
-  errorMessage.value = null;
-  indexUrl.value = null;
-}
-
-function previewQuery() {
-  resetOutput()
-  if (integration.value.type === 'FIREBASE') {
-    queryPreview.value = buildFirebaseQuery({
-      resource: resource.value,
-      filters: filters.value,
-      sorts: sorts.value,
-      limit: limit.value,
-      startAt: startAt.value,
-      endAt: endAt.value
-    })
-  } else {
-    queryPreview.value = buildSQLQuery({
-      resource: resource.value,
-      filters: filters.value,
-      sorts: sorts.value,
-      limit: limit.value,
-      offset: offset.value,
-      groupBy: groupBy.value,
-      distinct: distinct.value
-    })
-  }
-}
-
-async function runQuery() {
-  resetOutput()
-  if (integration.value.type === 'FIREBASE') {
-    try {
-      const { find } = useFirebaseIntegration(selectedIntegrationId.value)
-      let res = await find(resource.value, {
-        filters: filters.value,
-        sorts: sorts.value,
-        limit: limit.value,
-        startAt: startAt.value,
-        endAt: endAt.value
-      })
-      queryResult.value = `Found ${res.length} results`
-    } catch (error: any) {
-      errorMessage.value = error.response.data?.message || 'Failed to run query'
-      indexUrl.value = error.response.data?.data?.indexUrl || null
-    }
-  } else {
-    try {
-      queryResult.value = buildSQLQuery({
-      resource: resource.value,
-      filters: filters.value,
-      sorts: sorts.value,
-      limit: limit.value,
-      offset: offset.value,
-      groupBy: groupBy.value,
-      distinct: distinct.value
-    })
-    } catch (error: any) {
-      errorMessage.value = error.response.data?.message || 'Failed to run query'
-    }
-  }
-}
-
-const closeDialog = () => {
-  dialogIsOpen.value = false
-  resetOutput()
-}
-
-const saveQuery = () => {
-  let newValue = {
-    integration: {
-      id: selectedIntegrationId.value,
-      type: integration.value.type
-    },
-    resource: resource.value,
-    filters: filters.value,
-    sorts: sorts.value,
-    limit: limit.value,
-    offset: offset.value,
-    groupBy: groupBy.value,
-    distinct: distinct.value,
-    startAt: startAt.value,
-    endAt: endAt.value
-  };
-
-  emit('update:modelValue', newValue)
-  emit('saved', newValue)
-
-  closeDialog()
-}
-
-defineExpose({
-  openDialog
-})
-</script>
-
-<template>
-  <Dialog v-model:open="dialogIsOpen">
-    <DialogTrigger as-child v-if="!noTrigger">
-      <slot>
-        <Button :disabled="!integrationId && needPredefinedIntegration">
-          <span v-if="modelValue">Update Query</span>
-          <span v-else>Build Query</span>
-        </Button>
-      </slot>
-    </DialogTrigger>
-    <DialogContent class="sm:max-w-xl w-full">
-      <DialogHeader>
-        <DialogTitle>Query Builder</DialogTitle>
-      </DialogHeader>
-      <div class="space-y-6 py-4">
-        <ResourceSelect v-model="selectedIntegrationId" />
-
-        <div>
-          <Label for="query_builder_dialog_resource" class="block text-sm font-medium text-muted-foreground mb-2">Resource</Label>
-          <Input v-model="resource" placeholder="team-building-requests" id="query_builder_dialog_resource" />
-          <!-- <Combobox v-model="resource">
-            <ComboboxInput placeholder="team-building-requests" />
-            <ComboboxList>
-              <ComboboxItem v-for="option in resourceOptions" :key="option" :value="option">
-                {{ option }}
-              </ComboboxItem>
-            </ComboboxList>
-          </Combobox> -->
-        </div>
-
-        <div id="query_builder_dialog_filters">
-          <Label class="block text-sm font-medium text-muted-foreground mb-2">Filters</Label>
-          <div class="space-y-2">
-            <div v-for="(filter, idx) in filters" :key="idx" class="flex items-center gap-2">
-              <Input v-model="filter.field" placeholder="Field" class="w-32 filter-field" />
-              <Select v-model="filter.operator">
-                <SelectTrigger class="w-[170px]">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectItem v-for="op in operatorOptions" :key="op.value" :value="op.value">{{ op.label }}</SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-              <Input v-model="filter.value" placeholder="Value" class="w-32" />
-              <Button variant="ghost" @click="removeFilter(idx)" title="Remove filter">✕</Button>
-            </div>
-            <Button variant="outline" @click="addFilter">+ Add Filter</Button>
-          </div>
-        </div>
-
-        <!-- 3. Sort Section -->
-        <div>
-          <Label class="block text-sm font-medium text-muted-foreground mb-2">Sort</Label>
-          <div class="space-y-2">
-            <div v-for="(sort, idx) in sorts" :key="idx" class="flex items-center gap-2">
-              <Input v-model="sort.field" placeholder="Sort By" class="w-32" />
-              <Select v-model="sort.direction">
-                <SelectTrigger class="w-[180px]">
-                  <SelectValue placeholder="Sort by" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectItem value="asc">ASC</SelectItem>
-                    <SelectItem value="desc">DESC</SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-              <Button variant="ghost" @click="removeSort(idx)" title="Remove sort">✕</Button>
-            </div>
-            <Button variant="outline" @click="addSort">+ Add Sort</Button>
-          </div>
-        </div>
-
-        <!-- 4. Advanced Options -->
-        <Collapsible v-model="showAdvanced">
-          <div class="flex items-center justify-between space-x-4 px-4">
-            <h4 class="text-sm font-semibold">
-              Advanced Options
-            </h4>
-            <CollapsibleTrigger as-child>
-              <Button variant="ghost" size="sm" class="w-9 p-0">
-                <ChevronsUpDown class="size-4" />
-                <span class="sr-only">Toggle</span>
-              </Button>
-            </CollapsibleTrigger>
-          </div>
-          <CollapsibleContent>
-            <div class="grid grid-cols-2 gap-4 mt-2">
-              <div>
-                <Label for="limit">Limit</Label>
-                <Input type="number" v-model="limit" placeholder="Limit" />
-              </div>
-              <div>
-                <Label for="offset">Offset</Label>
-                <Input type="number" v-model="offset" placeholder="Offset" />
-              </div>
-              <div>
-                <Label for="startAt">StartAt</Label>
-                <Input v-model="startAt" placeholder="StartAt (optional)" />
-              </div>
-              <div>
-                <Label for="endAt">EndAt</Label>
-                <Input v-model="endAt" placeholder="EndAt (optional)" />
-              </div>
-              <div v-if="integration?.type !== 'FIREBASE'">
-                <Label for="groupBy">Group By</Label>
-                <Input v-model="groupBy" placeholder="Group By" />
-              </div>
-              <div class="flex items-center gap-2 col-span-2">
-                <Checkbox v-model="distinct" id="distinct" />
-                <Label for="distinct">DISTINCT</Label>
-              </div>
-            </div>
-          </CollapsibleContent>
-        </Collapsible>
-
-        <!-- 5. Preview & Actions -->
-        <div class="space-y-2">
-          <div class="flex gap-2 mb-4">
-            <Button @click="previewQuery">Preview Query</Button>
-            <Button variant="secondary" @click="runQuery">Run Query</Button>
-          </div>
-          <div v-if="queryPreview" class="bg-gray-100/10 rounded p-2 text-xs font-mono text-gray-300 border border-gray-500">
-            {{ queryPreview }}
-          </div>
-
-          <div v-if="queryResult" class="bg-green-100/10 rounded p-2 text-xs font-bold text-green-500 border border-green-500">
-            {{ queryResult }}
-          </div>
-
-          <div class="flex gap-2 flex-col bg-red-100/10 rounded-lg p-4 pt-3 border border-red-500" v-if="errorMessage">
-            <p class="text-red-500 text-xs font-bold mb-1">{{ errorMessage }}</p>
-            <a v-if="indexUrl" :href="indexUrl" target="_blank">
-              <Button size="sm">Create index in Firebase Console <ExternalLink class="size-3.5 ml-0.5" /></Button>
-            </a>
-          </div>
-        </div>
-      </div>
-      <DialogFooter>
-        <Button variant="ghost" @click="closeDialog">Close</Button>
-        <Button @click="saveQuery">Save Query</Button>
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
-</template>

package/components/ui/query-builder-dialog/index.ts

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

package/components/ui/radio-group/RadioGroup.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'], orientation?: 'vertical' | 'horizontal' }>()
-const emits = defineEmits<RadioGroupRootEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <RadioGroupRoot
-    data-slot="radio-group"
-    :class="cn(
-      'flex gap-3', 
-      props.orientation === 'vertical' ? 'flex-col' : 'flex-row',
-      props.class
-    )"
-    v-bind="forwarded"
-  >
-    <slot />
-  </RadioGroupRoot>
-</template>

package/components/ui/radio-group/RadioGroupItem.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import type { RadioGroupItemProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-import { CircleIcon } from 'lucide-vue-next'
-import {
-  RadioGroupIndicator,
-  RadioGroupItem,
-
-  useForwardProps,
-} from 'reka-ui'
-import { computed } from 'vue'
-
-const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <RadioGroupItem
-    data-slot="radio-group-item"
-    v-bind="forwardedProps"
-    :class="
-      cn(
-        'border-input text-primary 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 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
-        props.class,
-      )
-    "
-  >
-    <RadioGroupIndicator
-      data-slot="radio-group-indicator"
-      class="relative flex items-center justify-center"
-    >
-      <CircleIcon class="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
-    </RadioGroupIndicator>
-  </RadioGroupItem>
-</template>

package/components/ui/radio-group/index.ts

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

package/components/ui/range-calendar/RangeCalendar.vue

@@ -1,57 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'reka-ui'
-import { cn } from '../../../lib/utils'
-import { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'
-
-const props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()
-
-const emits = defineEmits<RangeCalendarRootEmits>()
-
-const delegatedProps = reactiveOmit(props, 'class')
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <RangeCalendarRoot
-    v-slot="{ grid, weekDays }"
-    :class="cn('p-3', props.class)"
-    v-bind="forwarded"
-  >
-    <RangeCalendarHeader>
-      <RangeCalendarPrevButton />
-      <RangeCalendarHeading />
-      <RangeCalendarNextButton />
-    </RangeCalendarHeader>
-
-    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
-      <RangeCalendarGrid v-for="month in grid" :key="month.value.toString()">
-        <RangeCalendarGridHead>
-          <RangeCalendarGridRow>
-            <RangeCalendarHeadCell
-              v-for="day in weekDays" :key="day"
-            >
-              {{ day }}
-            </RangeCalendarHeadCell>
-          </RangeCalendarGridRow>
-        </RangeCalendarGridHead>
-        <RangeCalendarGridBody>
-          <RangeCalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
-            <RangeCalendarCell
-              v-for="weekDate in weekDates"
-              :key="weekDate.toString()"
-              :date="weekDate"
-            >
-              <RangeCalendarCellTrigger
-                :day="weekDate"
-                :month="month.value"
-              />
-            </RangeCalendarCell>
-          </RangeCalendarGridRow>
-        </RangeCalendarGridBody>
-      </RangeCalendarGrid>
-    </div>
-  </RangeCalendarRoot>
-</template>