@oneclick.dev/cms-kit 0.0.1

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

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { ChevronsLeftRightEllipsis, Component, Variable } from 'lucide-vue-next';
+
+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>
+    <div>
+        <SegmentedControl direction="vertical" class="w-12" v-model="mutableValue" allow-empty>
+            <TooltipProvider>
+                <Tooltip>
+                    <TooltipTrigger as-child>
+                        <SegmentedControlButton value="new-element">
+                            <Component class="size-4" />
+                        </SegmentedControlButton>
+                    </TooltipTrigger>
+                    <TooltipContent :side="'right'">
+                        <p>Add new element</p>
+                    </TooltipContent>
+                </Tooltip>
+                <Tooltip>
+                    <TooltipTrigger as-child>
+                        <SegmentedControlButton value="variables">
+                            <Variable class="size-4" />
+                        </SegmentedControlButton>
+                    </TooltipTrigger>
+                    <TooltipContent :side="'right'">
+                        <p>Variables</p>
+                    </TooltipContent>
+                </Tooltip>
+                <Tooltip>
+                    <TooltipTrigger as-child>
+                        <SegmentedControlButton value="api-actions">
+                            <ChevronsLeftRightEllipsis class="size-4" />
+                        </SegmentedControlButton>
+                    </TooltipTrigger>
+                    <TooltipContent :side="'right'">
+                        <p>APIs & Actions</p>
+                    </TooltipContent>
+                </Tooltip>
+            </TooltipProvider>
+        </SegmentedControl>
+    </div>
+</template>

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

@@ -0,0 +1,19 @@
+<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

@@ -0,0 +1,312 @@
+<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>