ketekny-ui-kit 1.0.50 → 1.0.51

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.50",
+  "version": "1.0.51",
   "description": "A Vue 3 UI component library with Tailwind CSS styling",
   "main": "index.js",
   "files": [
@@ -43,13 +43,10 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "element-plus": "^2.13.5",
-    "he-tree-vue": "^3.1.2",
-    "json-editor-vue": "^0.18.1",
     "lucide-vue-next": "^0.511.0",
     "moment": "^2.30.1",
     "primeicons": "^7.0.0",
     "primevue": "^4.3.4",
-    "quill": "2.0.2",
     "reka-ui": "^2.8.2",
     "simple-code-editor": "^2.0.9",
     "tailwind-merge": "^3.5.0",

package/src/ui/kTree.vue

@@ -1,54 +1,128 @@
 <template>
   <div class="k-tree text-primary/90" :class="disabled ? 'k-tree--disabled' : ''">
-    <HETree
-      ref="treeRef"
-      class="k-tree__root"
-      :value="treeData"
+    <TreeBranch
+      :nodes="treeData"
       :indent="indent"
+      :disabled="disabled"
       :draggable="draggable"
       :droppable="droppable"
-      :edge-scroll="edgeScroll"
-      :trigger-class="triggerClass"
-      @nodeFoldedChanged="syncExpandedFromTree"
-      @drop="onDrop"
-      @change="onChange">
-      <template #default="{ node, path, tree }">
+      :selected-keys="resolvedSelectionKeys"
+      :resolve-node-label="resolveNodeLabel"
+      @node-click="onNodeClick"
+      @toggle="toggleNode"
+      @drag-start="onDragStart"
+      @node-drop="onNodeDrop">
+      <template #default="{ node, path }">
+        <slot name="default" :node="node" :path="path" :tree="treeApi">
+          {{ resolveNodeLabel(node) }}
+        </slot>
+      </template>
+    </TreeBranch>
+  </div>
+</template>
+
+<script>
+import { ChevronRight } from 'lucide-vue-next'
+
+const TreeBranch = {
+  name: 'TreeBranch',
+  components: { ChevronRight },
+  props: {
+    nodes: { type: Array, default: () => [] },
+    indent: { type: Number, default: 20 },
+    disabled: { type: Boolean, default: false },
+    draggable: { type: [Boolean, Function], default: false },
+    droppable: { type: [Boolean, Function], default: false },
+    selectedKeys: { type: Object, default: () => ({}) },
+    resolveNodeLabel: { type: Function, required: true },
+  },
+  emits: ['node-click', 'toggle', 'drag-start', 'node-drop'],
+  methods: {
+    hasChildren(node) {
+      return Array.isArray(node?.children) && node.children.length > 0
+    },
+    canDrag(node) {
+      return this.draggable === true || (typeof this.draggable === 'function' && this.draggable(node.__raw || node))
+    },
+    canDrop(node) {
+      return this.droppable === true || (typeof this.droppable === 'function' && this.droppable(node.__raw || node))
+    },
+    isSelected(key) {
+      return this.selectedKeys?.[String(key)] === true
+    },
+    onDragStart(event, node) {
+      if (!this.canDrag(node)) {
+        event.preventDefault()
+        return
+      }
+      event.dataTransfer.effectAllowed = 'move'
+      event.dataTransfer.setData('text/plain', String(node.key))
+      this.$emit('drag-start', node)
+    },
+    onDrop(event, node) {
+      if (!this.canDrop(node)) return
+      event.preventDefault()
+      this.$emit('node-drop', node)
+    },
+  },
+  template: `
+    <ul class="k-tree-branch">
+      <li v-for="node in nodes" :key="node.key" class="k-tree-node">
         <div
           class="k-tree-node-content"
-          :class="isSelected(node.key) ? 'k-tree-node-content--selected' : ''"
-          @click="onNodeClick($event, node)">
+          :class="[
+            isSelected(node.key) ? 'k-tree-node-content--selected' : '',
+            canDrop(node) ? 'k-tree-node-content--droppable' : '',
+          ]"
+          :style="{ paddingLeft: node.__level ? (node.__level * indent + 7) + 'px' : undefined }"
+          :draggable="canDrag(node)"
+          @dragstart="onDragStart($event, node)"
+          @dragover.prevent="canDrop(node)"
+          @drop="onDrop($event, node)"
+          @click="$emit('node-click', $event, node)">
           <button
             v-if="hasChildren(node)"
             type="button"
             class="k-tree-node-toggler"
             :aria-label="node.$folded ? 'Expand node' : 'Collapse node'"
-            @click.stop="toggleNode(tree, node, path)">
+            @click.stop="$emit('toggle', node)">
             <ChevronRight class="k-tree-node-toggler-icon" :class="node.$folded ? '' : 'k-tree-node-toggler-icon--open'" />
           </button>
 
           <span v-else class="k-tree-node-toggler k-tree-node-toggler--empty"></span>
 
           <div class="k-tree-node-label">
-            <slot name="default" :node="node.__raw || node" :path="path" :tree="tree">
+            <slot :node="node.__raw || node" :path="node.__path">
               {{ resolveNodeLabel(node.__raw || node) }}
             </slot>
           </div>
         </div>
-      </template>
-    </HETree>
-  </div>
-</template>
 
-<script>
-import { ChevronRight } from 'lucide-vue-next'
-import { Tree as BaseTree, Fold, Draggable } from 'he-tree-vue'
-import 'he-tree-vue/dist/he-tree-vue.css'
-
-const HETree = BaseTree.mixPlugins([Fold, Draggable])
+        <TreeBranch
+          v-if="hasChildren(node) && !node.$folded"
+          :nodes="node.children"
+          :indent="indent"
+          :disabled="disabled"
+          :draggable="draggable"
+          :droppable="droppable"
+          :selected-keys="selectedKeys"
+          :resolve-node-label="resolveNodeLabel"
+          @node-click="(...args) => $emit('node-click', ...args)"
+          @toggle="(...args) => $emit('toggle', ...args)"
+          @drag-start="(...args) => $emit('drag-start', ...args)"
+          @node-drop="(...args) => $emit('node-drop', ...args)">
+          <template #default="slotProps">
+            <slot v-bind="slotProps" />
+          </template>
+        </TreeBranch>
+      </li>
+    </ul>
+  `,
+}
 
 export default {
   name: 'kTree',
-  components: { HETree, ChevronRight },
+  components: { TreeBranch },
   props: {
     value: { type: Array, default: () => [] },
     selectionKeys: { type: [Object, null], default: null },
@@ -67,6 +141,7 @@ export default {
   data() {
     return {
       internalExpandedKeys: { ...(this.expandedKeys || {}) },
+      draggedNode: null,
       treeData: [],
     }
   },
@@ -74,6 +149,12 @@ export default {
     resolvedSelectionKeys() {
       return this.selectionKeys ?? this.modelValue ?? {}
     },
+    treeApi() {
+      return {
+        toggleFold: this.toggleNode,
+        treeData: this.treeData,
+      }
+    },
   },
   watch: {
     value: {
@@ -95,15 +176,18 @@ export default {
     rebuildTreeData() {
       this.treeData = this.buildTreeData(this.value || [], '', this.internalExpandedKeys)
     },
-    buildTreeData(nodes, parentPath, expandedMap) {
+    buildTreeData(nodes, parentPath, expandedMap, level = 0) {
       return (nodes || []).map((node, index) => {
         const key = this.getNodeKey(node, parentPath, index)
-        const children = this.buildTreeData(node.children || [], key, expandedMap)
+        const path = parentPath ? `${parentPath}-${index}` : String(index)
+        const children = this.buildTreeData(node.children || [], key, expandedMap, level + 1)
         return {
           ...node,
           key,
           children,
           __raw: node,
+          __level: level,
+          __path: path,
           $folded: this.hasChildren(node) ? expandedMap?.[key] !== true : false,
         }
       })
@@ -148,19 +232,76 @@ export default {
       this.emitSelection(next)
       this.$emit('nodeSelect', { originalEvent, node: node.__raw || node, data: node.__raw || node })
     },
-    toggleNode(tree, node, path) {
-      tree.toggleFold(node, path)
-      this.$nextTick(() => this.syncExpandedFromTree(tree))
+    toggleNode(node) {
+      node.$folded = !node.$folded
+      this.syncExpandedFromTree()
+    },
+    onDragStart(node) {
+      this.draggedNode = node
     },
-    onDrop(store) {
-      this.$emit('drop', store)
+    onNodeDrop(targetNode) {
+      if (!this.draggedNode || this.draggedNode.key === targetNode.key) return
+      const nextTree = this.cloneWithoutNode(this.treeData, this.draggedNode.key)
+      const moved = this.stripInternalFields(this.draggedNode)
+      const changedTree = this.appendChild(nextTree, targetNode.key, moved)
+
+      this.treeData = changedTree
+      this.draggedNode = null
+      this.syncExpandedFromTree()
+
+      const payload = {
+        dragNode: moved,
+        dropNode: this.stripInternalFields(targetNode),
+        treeData: this.toRawNodes(this.treeData),
+      }
+      this.$emit('drop', payload)
+      this.$emit('change', payload)
     },
-    onChange(store) {
-      this.$nextTick(() => this.syncExpandedFromTree(store?.targetTree || this.$refs.treeRef))
-      this.$emit('change', store)
+    cloneWithoutNode(nodes, key) {
+      return (nodes || [])
+        .filter((node) => String(node.key) !== String(key))
+        .map((node) => ({
+          ...node,
+          children: this.cloneWithoutNode(node.children || [], key),
+        }))
+    },
+    appendChild(nodes, targetKey, child) {
+      return (nodes || []).map((node) => {
+        if (String(node.key) === String(targetKey)) {
+          const nextChildren = [...(node.children || []), this.decorateMovedNode(child, node)]
+          return { ...node, children: nextChildren, $folded: false }
+        }
+        return { ...node, children: this.appendChild(node.children || [], targetKey, child) }
+      })
     },
-    syncExpandedFromTree(treeVm) {
-      const source = treeVm?.treeData || this.treeData || []
+    decorateMovedNode(node, parent) {
+      const key = this.getNodeKey(node, String(parent.key), (parent.children || []).length)
+      const children = (node.children || []).map((child, index) => ({
+        ...this.decorateMovedNode(child, { key, children: node.children }),
+        __path: `${key}-${index}`,
+      }))
+      return {
+        ...node,
+        key,
+        children,
+        __raw: node,
+        __level: (parent.__level || 0) + 1,
+        __path: `${parent.__path}-${(parent.children || []).length}`,
+        $folded: this.hasChildren(node) ? false : false,
+      }
+    },
+    stripInternalFields(node) {
+      const { __raw, __level, __path, $folded, ...rest } = node || {}
+      return {
+        ...rest,
+        children: (rest.children || []).map((child) => this.stripInternalFields(child)),
+      }
+    },
+    toRawNodes(nodes) {
+      return (nodes || []).map((node) => this.stripInternalFields(node))
+    },
+    syncExpandedFromTree() {
+      const source = this.treeData || []
       const next = {}
       const walk = (nodes) => {
         ;(nodes || []).forEach((node) => {
@@ -179,7 +320,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 .k-tree {
   background: #ffffff;
   border: 0;
@@ -188,6 +329,17 @@ export default {
   overflow: auto;
 }
 
+.k-tree-branch {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.k-tree-node {
+  margin: 0;
+  padding: 0;
+}
+
 .k-tree--disabled {
   opacity: 0.6;
   pointer-events: none;
@@ -211,6 +363,10 @@ export default {
   background: #f8fafc;
 }
 
+.k-tree-node-content--droppable {
+  cursor: grab;
+}
+
 .k-tree-node-content--selected {
   background: #ecfdf3;
   color: #15803d;