@oneclick.dev/cms-kit 0.0.2 → 0.0.4

package/components/ui/form-builder/components/AdminToolbarView.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import NewElementView from './admin/setting-views/NewElementView.vue';
-import ApiActionsView from './admin/setting-views/ApiActionsView.vue';
-import VariablesView from './admin/setting-views/VariablesView.vue';
-
-const props = defineProps({
-    view: {
-        type: String
-    }
-})
-</script>
-
-<template>
-    <div class="flex flex-col shrink-0 p-2 rounded-xl border bg-card overflow-y-auto w-[275px] @7xl/custom-dashboard:w-[325px]" v-if="view">
-        <NewElementView v-if="view === 'new-element'" />
-        <ApiActionsView v-else-if="view === 'api-actions'" />
-        <VariablesView v-else-if="view === 'variables'" />
-    </div>
-</template>

package/components/ui/form-builder/components/CustomDashboard.vue

@@ -1,312 +0,0 @@
-<script setup lang="ts">
-import { ref, inject, onMounted, onUnmounted, computed } from 'vue'
-import { GridLayout, GridItem } from 'vue-grid-layout-v3';
-import { elementComponents } from './elements';
-import { cn } from '../../../../lib/utils'
-import { useElementSize } from '@vueuse/core'
-import { interpolateTemplateFromVariableContext } from '../../../../lib/interpolation'
-
-const confirmation = useConfirmation()
-
-const overlayStack = useOverlayStack()
-
-const randomId = crypto.randomUUID()
-
-const state = inject('state') as { layout: any[], layoutRef: any, colNum: number, itemRefs: any };
-const isDragging = inject('isDragging');
-const activeElement = inject('activeElement');
-const selectedItems = inject('selectedItems');
-const isEditMode = inject('isEditMode', ref(false));
-const allAvailableVariables = inject('allAvailableVariables')
-
-const containerRef = useTemplateRef('containerRef')
-const { width: containerWidth, height: containerHeight } = useElementSize(containerRef)
-
-function setItemRef(item, e) {
-  state.itemRefs[item.i] = e;
-}
-
-function setLayoutRef(e) {
-  state.layoutRef = e;
-}
-
-const setActive = (item) => {
-  activeElement.value = item;
-}
-
-let containerEl: HTMLElement;
-let selectionBox: HTMLElement;
-let startX, startY;
-const isSelecting = ref(false);
-
-const startSelectionDrag = (e: MouseEvent) => {
-  if (!isEditMode.value) return;
-
-  const target = e.target as HTMLElement;
-  const isInsideItem = target.closest('.vue-grid-item');
-  if (isInsideItem) return;
-
-  isSelecting.value = true;
-
-  const rect = containerEl.getBoundingClientRect();
-  const scrollTop = containerEl.scrollTop;
-  const scrollLeft = containerEl.scrollLeft;
-
-  startX = e.clientX - rect.left + scrollLeft;
-  startY = e.clientY - rect.top + scrollTop;
-
-  selectionBox.style.left = startX + 'px';
-  selectionBox.style.top = startY + 'px';
-  selectionBox.style.width = '0px';
-  selectionBox.style.height = '0px';
-  selectionBox.style.opacity = '1';
-};
-
-const updateSelectionDrag = (e: MouseEvent) => {
-  if (!isEditMode.value || !isSelecting.value) return;
-
-  const rect = containerEl.getBoundingClientRect();
-  const scrollTop = containerEl.scrollTop;
-  const scrollLeft = containerEl.scrollLeft;
-
-  const currentX = e.clientX - rect.left + scrollLeft;
-  const currentY = e.clientY - rect.top + scrollTop;
-
-  const x = Math.min(startX, currentX);
-  const y = Math.min(startY, currentY);
-  const width = Math.abs(startX - currentX);
-  const height = Math.abs(startY - currentY);
-
-  selectionBox.style.left = x + 'px';
-  selectionBox.style.top = y + 'px';
-  selectionBox.style.width = width + 'px';
-  selectionBox.style.height = height + 'px';
-};
-
-const endSelectionDrag = () => {
-  if (!isEditMode.value) return;
-  isSelecting.value = false;
-  selectionBox.style.opacity = '0';
-
-  const rect = selectionBox.getBoundingClientRect();
-  const items = document.querySelectorAll('#custom-form-builder .vue-grid-item:not(.vue-grid-placeholder)');
-
-  if (rect.width > 3 || rect.height > 3) {
-    selectedItems.value = [];
-    activeElement.value = null;
-  }
-
-  items.forEach(item => {
-    const itemRect = item.getBoundingClientRect();
-    const fullyContained =
-      itemRect.left >= rect.left &&
-      itemRect.right <= rect.right &&
-      itemRect.top >= rect.top &&
-      itemRect.bottom <= rect.bottom;
-
-    if (fullyContained) {
-      const id = item.getAttribute('data-grid-id');
-      selectedItems.value.push(parseInt(id));
-    }
-  });
-
-  selectionBox.style.left = '0px';
-  selectionBox.style.top = '0px';
-  selectionBox.style.width = '0px';
-  selectionBox.style.height = '0px';
-}
-
-function isTypingInInput(): boolean {
-  const tag = document.activeElement?.tagName.toLowerCase();
-  const isContentEditable = document.activeElement?.getAttribute('contenteditable');
-  return ['input', 'textarea', 'select'].includes(tag) || isContentEditable === 'true';
-}
-
-async function handleKeydown(event: KeyboardEvent) {
-  if (!overlayStack.isTop(randomId)) return
-
-  if (isEditMode.value && event.key === 'Backspace' && !isTypingInInput() && (selectedItems.value.length > 0 || activeElement.value)) {
-    event.preventDefault(); // optional
-    const confirmed = await confirmation.confirm(`Are you sure you want to delete ${selectedItems.value.length > 1 ? 'these ' + selectedItems.value.length + ' items' : 'this item'}?`)
-    if (confirmed) {
-      if (selectedItems.value.length > 0) {
-        selectedItems.value.forEach((item: string) => {
-          removeItem(item);
-        });
-      } else {
-        removeItem(activeElement.value.i);
-      }
-    }
-
-    selectedItems.value = [];
-    activeElement.value = null;
-  }
-}
-
-const colNum = computed(() => {
-  return containerWidth.value < 480 ? 2 : 4
-})
-
-const removeItem = (i: string) => {
-  state.layout.splice(state.layout.findIndex(item => item.i === i), 1);
-}
-
-const isHidden = (item: any) => {
-  if (Object.keys(item).includes('visibility')) {
-    return ![true, 'true', 1].includes(interpolateTemplateFromVariableContext(item.visibility.trim(), allAvailableVariables?.value)) // TODO niet enkel 1 maar alles boven 1 ook + eig zou je moeten fixen dat je automatisch een boolean er uit kan krijgen (+ ook string of object)
-  }
-  return false
-}
-
-onMounted(() => {
-  overlayStack.push(randomId)
-  selectionBox = document.getElementById('selection-box');
-  containerEl = document.getElementById('custom-form-builder');
-
-  window.addEventListener('mouseup', endSelectionDrag);
-  window.addEventListener('mousemove', updateSelectionDrag);
-  window.addEventListener('keydown', handleKeydown);
-});
-
-onUnmounted(() => {
-  overlayStack.pop(randomId)
-  window.removeEventListener('mouseup', endSelectionDrag);
-  window.removeEventListener('mousemove', updateSelectionDrag);
-  window.removeEventListener('keydown', handleKeydown);
-});
-</script>
-
-<template>
-  <div
-    ref="containerRef"
-    id="custom-form-builder"
-    class="relative block w-full h-full overflow-auto bg-background"
-    :class="{ 'select-none': isDragging || isSelecting, 'border border-ring/50 dark:border-ring rounded-xl shadow-sm': isEditMode }"
-    @mousedown="startSelectionDrag"
-  >
-    <div class="relative min-h-full flex flex-col">
-      <div
-        class="absolute inset-0 h-full w-full bg-grid transition-all duration-500"
-        :class="`${isDragging ? 'dark:opacity-10 opacity-20' : 'opacity-0'}`"
-        :style="`--colNum: ${colNum}`"
-        v-if="isEditMode"
-      />
-      <GridLayout
-        :class="`${isDragging || isSelecting ? 'select-none' : ''}`"
-        :style="`min-height: ${containerHeight - 5}px;`"
-        :ref="setLayoutRef"
-        :margin="[parseInt(state.marginX), parseInt(state.marginY)]"
-        v-model:layout="state.layout"
-        :col-num="colNum"
-        :row-height="state.rowHeight"
-        :is-draggable="isEditMode"
-        :is-resizable="isEditMode"
-        :is-mirrored="state.mirrored"
-        :is-bounded="state.bounded"
-        :prevent-collision="state.preventCollision"
-        :vertical-compact="state.compact"
-        :restore-on-drag="state.restoreOnDrag"
-        :use-css-transforms="true"
-        :responsive="state.responsive"
-        :transform-scale="state.transformScale"
-      >
-        <GridItem
-          v-for="item in state.layout"
-          :key="item.i"
-          :ref="e => setItemRef(item, e)"
-          class="group"
-          :data-grid-id="item.i"
-          :static="item.static"
-          :x="item.x"
-          :y="item.y"
-          :w="item.w"
-          :h="item.h"
-          :i="item.i"
-          :min-w="item.minW"
-          :max-w="item.maxW"
-          :min-h="item.minH"
-          :max-h="item.maxH"
-          :min-x="item.minX"
-          :max-x="item.maxX"
-          :min-y="item.minY"
-          :max-y="item.maxY"
-          :preserve-aspect-ratio="item.preserveAspectRatio"
-        >
-          <div
-            class="w-full h-full p-2 outline-primary/70"
-            :class="cn(
-              isEditMode && (isDragging || isSelecting) ? 'outline outline-dashed' : '',
-              isEditMode ? 'group-hover:outline-2' : '',
-              isEditMode && (selectedItems.includes(item.i) || activeElement?.i === item.i) ? 'outline-2' : '',
-              isEditMode && isHidden(item) ? 'opacity-50' : isHidden(item) ? 'hidden pointer-events-none' : ''
-            )"
-            @click="isEditMode ? setActive(item) : null"
-          >
-            <component :is="elementComponents[`CustomForm${item.component}`]" :key="item.i" v-bind="item" />
-          </div>
-        </GridItem>
-      </GridLayout>
-  
-      <div id="selection-box" class="absolute border border-dashed border-primary bg-primary/10 opacity-0 pointer-events-none transition-opacity duration-300"></div>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-#custom-form-builder {
-  &::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #494949;
-    border-radius: 5px;
-  }
-
-  .bg-grid {
-    --colNum: 2;
-    background-image: 
-      /* Vertical lines (4 columns) */
-      repeating-linear-gradient(
-        to right,
-        var(--primary) 0,
-        var(--primary) 1px,
-        transparent 1px,
-        transparent calc(100% / var(--colNum))
-      ),
-      /* Horizontal lines (8px rows) */
-      repeating-linear-gradient(
-        to bottom,
-        var(--primary) 0,
-        var(--primary) 1px,
-        transparent 1px,
-        transparent 8px
-      );
-    background-size: 100% 100%;
-  }
-  
-  .vue-grid-item.vue-resizable {
-    &:hover {
-      .vue-resizable-handle {
-        display: block;
-      }
-    }
-
-    .vue-resizable-handle {
-      display: none;
-      background: var(--color-muted);
-      border-radius: 100px;
-      width: 12px;
-      height: 12px;
-      right: -6px;
-      bottom: -6px;
-      border: 2px solid var(--primary);
-    }
-  }
-}
-</style>

package/components/ui/form-builder/components/FormBuilderWrapper.vue

@@ -1,333 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive, computed, provide } from 'vue'
-import AdminToolbar from './AdminToolbar.vue'
-import AdminToolbarView from './AdminToolbarView.vue'
-import AdminElementEditor from './AdminElementEditor.vue'
-import CustomDashboard from './CustomDashboard.vue'
-import { Maximize2 } from 'lucide-vue-next'
-import { interpolateTemplateFromVariableContext } from '../../../../lib/interpolation'
-
-const route = useRoute()
-
-const props = defineProps({
-  isPresentationMode: {
-    type: Boolean,
-    default: false
-  },
-  onFinish: {
-    type: Function,
-    default: () => {}
-  },
-  providedVariables: {
-    type: Array,
-    default: () => []
-  }
-})
-
-const { setModuleBreadcrumbs } = useBreadcrumbs()
-setModuleBreadcrumbs([])
-
-const adminPanel = ref('new-element')
-const activeElement = ref(null)
-const selectedItems = ref<string[]>([])
-const isDragging = ref(false)
-
-const isEditMode = computed(() => !props.isPresentationMode)
-
-const layout = [
-  { x: 0, y: 0, w: 2, h: 2, i: '0', resizable: true, draggable: true, static: false, minY: 0, maxY: 2 },
-];
-
-const previewSize = ref({ width: 400, height: 400 }) // Default size
-const builderContainer = ref<HTMLElement | null>(null)
-
-// --- Resizing logic ---
-const isResizing = ref(false)
-const resizeStart = ref({ x: 0, y: 0, width: 0, height: 0 })
-
-function startResizing(e: MouseEvent) {
-  isResizing.value = true;
-  resizeStart.value = {
-    x: e.clientX,
-    y: e.clientY,
-    width: previewSize.value.width,
-    height: previewSize.value.height
-  };
-  document.body.style.userSelect = 'none';
-}
-
-function handleMouseMove(e: MouseEvent) {
-  if (!isResizing.value) return;
-  const dx = e.clientX - resizeStart.value.x;
-  const dy = e.clientY - resizeStart.value.y;
-  const minWidth = 200, minHeight = 200;
-  const maxWidth = builderContainer.value?.offsetWidth || 800;
-  const maxHeight = builderContainer.value?.offsetHeight || 800;
-  previewSize.value.width = Math.max(minWidth, Math.min(resizeStart.value.width + dx, maxWidth));
-  previewSize.value.height = Math.max(minHeight, Math.min(resizeStart.value.height + dy, maxHeight));
-}
-
-function stopResizing() {
-  isResizing.value = false;
-  document.body.style.userSelect = '';
-}
-
-function clampPreviewToContainer() {
-  if (!builderContainer.value) return;
-  const maxWidth = builderContainer.value.offsetWidth;
-  const maxHeight = builderContainer.value.offsetHeight;
-  if (previewSize.value.width > maxWidth) previewSize.value.width = maxWidth;
-  if (previewSize.value.height > maxHeight) previewSize.value.height = maxHeight;
-}
-
-function handleWindowResize() {
-  clampPreviewToContainer();
-}
-
-onMounted(() => {
-  window.addEventListener('mousemove', handleMouseMove);
-  window.addEventListener('mouseup', stopResizing);
-  window.addEventListener('resize', handleWindowResize);
-  // Initial clamp after mount (nextTick to ensure DOM is ready)
-  setTimeout(clampPreviewToContainer, 0);
-});
-onUnmounted(() => {
-  window.removeEventListener('mousemove', handleMouseMove);
-  window.removeEventListener('mouseup', stopResizing);
-  window.removeEventListener('resize', handleWindowResize);
-});
-
-const state = reactive({
-  mirrored: false,
-  responsive: true,
-  bounded: false,
-  transformScale: 1,
-  preventCollision: true,
-  compact: false,
-  restoreOnDrag: false,
-  rowHeight: 8,
-  index: 0,
-  marginX: 0,
-  marginY: 0,
-  layoutRef: {},
-  itemRefs: {},
-
-  layout: JSON.parse(JSON.stringify(layout)),
-  variables: [],
-  transformers: [],
-  apiActions: [],
-  elementValues: {}
-});
-
-const getState = () => {
-  let { layout, variables, transformers, apiActions } = JSON.parse(JSON.stringify(state))
-  
-  apiActions?.forEach((action: any) => {
-    action.action.response = null;
-    action.firedAt = null;
-    action.hasFired = false;
-  })
-  
-  return { layout, variables, transformers, apiActions }
-}
-
-const setState = (newState: any) => {
-  Object.assign(state, newState)
-}
-
-const baseVariables = computed(() => {
-  const normalVars = state.variables?.map((v: any) => ({
-    name: v.name,
-    type: v.type,
-    value: v.value ?? null,
-  })) || []
-
-  const apiActionVars = state.apiActions?.map((a: any) => ({
-    name: a.label,
-    type: 'apiActionResponse',
-    value: a.action ?? null,
-  })) || []
-
-  const elementVars = Object.entries(state.elementValues ?? {}).map(([key, val]: [string, any]) => ({
-    name: key,
-    type: 'element',
-    value: {
-      value: val ?? null
-    }
-  })) || []
-
-  const routeQueryVars = Object.entries(route.query).map(([key, val]: [string, any]) => ({
-    name: toCamelCase(key),
-    type: 'routeQueryParam',
-    value: val ?? null,
-  })) || []
-
-  return [...normalVars, ...apiActionVars, ...elementVars, ...routeQueryVars]?.filter((v: any) => v.name)
-})
-
-function toCamelCase(str) {
-  return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
-}
-
-const transformerVars = computed(() => {
-  const context = Object.fromEntries(
-    baseVariables.value.map(v => [
-      v.name,
-      v.value
-    ])
-  );
-
-  return (state.transformers ?? []).map((t: any) => ({
-    name: t.name,
-    type: 'transformer',
-    value: getTransformerValue(t.expression, context)
-  }));
-});
-
-const allAvailableVariables = computed(() => {
-  return [...props.providedVariables, ...baseVariables.value, ...transformerVars.value]
-})
-
-const getTransformerValue = (expression: string, context: Record<string, any>) => {
-  return sandbox(expression, context);
-  // return sandbox(`return ${expression}`, context); TODO use return if u support {{ }} in inputs later on
-}
-
-const sandbox = (code: string, args = {}) => {
-  try {
-    const frame = document.createElement('iframe');
-    frame.style.display = 'none';
-    document.body.appendChild(frame);
-    const F = frame.contentWindow?.Function
-    document.body.removeChild(frame);
-    return F?.(...Object.keys(args), "'use strict';" + code)(...Object.values(args));
-  } catch (error) {
-    console.error('Sandbox error:', error);
-    return ""
-  }
-}
-
-function removeItem(i: string) {
-  state.layout.splice(state.layout.findIndex(item => item.i === i), 1);
-}
-
-onMounted(() => {
-  document.addEventListener('mousedown', onMouseDown, true);
-  document.addEventListener('mouseup', onMouseUp, true);
-});
-
-onUnmounted(() => {
-  document.removeEventListener('mousedown', onMouseDown, true);
-  document.removeEventListener('mouseup', onMouseUp, true);
-});
-
-async function onMouseDown(e: MouseEvent) {
-  if ((e.target as HTMLElement)?.closest('.vue-grid-item')) {
-    isDragging.value = true;
-  }
-}
-
-function onMouseUp() {
-  isDragging.value = false;
-}
-
-const mouseXY = { x: null, y: null };
-const DragPos = { x: null, y: null, w: 1, h: 1, i: null };
-
-document.addEventListener('dragover', (e) => {
-  mouseXY.x = e.clientX;
-  mouseXY.y = e.clientY;
-}, false);
-
-provide('mouseXY', mouseXY);
-provide('DragPos', DragPos);
-provide('state', state);
-provide('isDragging', isDragging)
-provide('activeElement', activeElement)
-provide('selectedItems', selectedItems)
-provide('allAvailableVariables', allAvailableVariables)
-provide('isEditMode', isEditMode)
-provide('onFinish', props.onFinish)
-
-async function loadState() {
-  const fetchedState = {} // TODO load state
-  if (fetchedState) {
-    Object.keys(fetchedState)?.forEach((key: string) => {
-      state[key] = fetchedState[key]
-    })
-  }
-}
-
-function fillDefaultValues() {
-  state.layout?.forEach((item: any) => {
-    if (Object.keys(item).includes('defaultValue')) {
-      state.elementValues[item.variableName] = interpolateTemplateFromVariableContext(item.defaultValue, allAvailableVariables.value)
-    }
-  })
-}
-
-const setup = async () => {
-  await loadState()
-  fillDefaultValues()
-  loadStartupActions()
-
-  previewSize.value = {
-    width: Math.min(builderContainer.value?.offsetWidth - 40, 700),
-    height: Math.min(builderContainer.value?.offsetHeight - 40, 1000)
-  }
-}
-
-const loadStartupActions = () => {
-  async function loadAction(action: any) {
-    const { fireAction } = useIntegrationActions(action.action.integration)
-    let res = await fireAction(action.action, allAvailableVariables.value)
-    state.apiActions.find(a => a.id === action.id).action.response = res
-  }
-
-  state.apiActions.forEach((action: any) => {
-    if (action.fireOnStart) {
-      loadAction(action)
-    }
-  })
-}
-
-onMounted(() => {
-  setup()
-})
-
-defineExpose({
-  getState,
-  setState,
-  fillDefaultValues
-})
-</script>
-
-<template>
-  <CustomDashboard v-if="isPresentationMode" />
-  <div class="flex-1 flex flex-col overflow-hidden pt-12 px-4" v-else>
-    <div class="@container/custom-dashboard flex-1 flex gap-2 w-full max-h-full overflow-hidden">
-      <AdminToolbar v-model="adminPanel" />
-      <AdminToolbarView :view="adminPanel" />
-      <div class="flex-1 bg-dots flex items-center justify-center text-gray-200 dark:text-muted" ref="builderContainer">
-        <div class="relative text-foreground" :style="{ width: previewSize.width + 'px', height: previewSize.height + 'px' }">
-          <CustomDashboard />
-          <button
-            class="absolute -bottom-4 -right-4 border border-transparent hover:border-ring bg-ring/20 dark:bg-ring/50 backdrop-blur-sm hover:scale-110 transition-all rounded-full p-2 cursor-hidden z-10"
-            @mousedown.prevent="startResizing"
-          >
-            <Maximize2 class="size-6 -scale-x-100" />
-          </button>
-        </div>
-      </div>
-      <AdminElementEditor v-if="activeElement" @removeItem="removeItem" />
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.bg-dots {
-  background-color: transparent;
-  background-image: radial-gradient(currentColor 1px, transparent 1px);
-  background-size: 10px 10px;
-}
-</style>

package/components/ui/form-builder/components/admin/Transformer.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-const allAvailableVariables = inject('allAvailableVariables')
-
-const props = defineProps({
-    modelValue: {
-        type: String,
-        required: true
-    }
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const mutableValue = computed({
-    get() {
-        return props.modelValue
-    },
-    set(value) {
-        emit('update:modelValue', value)
-    }
-})
-</script>
-
-<template>
-    <Sandbox v-model="mutableValue" :variables="allAvailableVariables" style="max-height: 200px" />
-</template>