@coyalabs/bts-style 1.1.11 → 1.1.13

package/dist/Components/TreeDirectory.svelte

@@ -6,7 +6,7 @@
   
   const dispatch = createEventDispatcher();
   
-  /** @type {{ name: string, type: 'file' | 'folder', children?: any[] }[]} */
+  /** @type {{ name: string, type: 'file' | 'folder', children?: any[], data?: any }[]} */
   export let items = [];
   
   /** @type {boolean} */
@@ -21,8 +21,15 @@
   /** @type {boolean} */
   export let topFoldersExpanded = false;
   
+  /** @type {boolean} - Enable drag and drop */
+  export let draggable = false;
+  
+  /** @type {string} - Current folder path for nested items */
+  export let currentPath = '';
+  
   let expanded = new Set();
   let mounted = false;
+  let dragOverFolder = null;
 
   // Initialize expanded state before mount (no animation)
   if (topFoldersExpanded && level === 0) {
@@ -54,6 +61,90 @@
   function handleItemClick(item) {
     dispatch('itemClick', { item, type: 'file' });
   }
+  
+  /**
+   * Handle drag start on a file item
+   * @param {DragEvent} e
+   * @param {any} item
+   */
+  function handleDragStart(e, item) {
+    if (!draggable || item.type !== 'file') return;
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('application/json', JSON.stringify({
+      name: item.name,
+      data: item.data,
+      sourcePath: currentPath
+    }));
+    dispatch('dragStart', { item, sourcePath: currentPath });
+  }
+  
+  /**
+   * Handle drag over a folder
+   * @param {DragEvent} e
+   * @param {any} item
+   */
+  function handleDragOver(e, item) {
+    if (!draggable) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    if (item.type === 'folder') {
+      dragOverFolder = item.name;
+    }
+  }
+  
+  /**
+   * Handle drag leave
+   */
+  function handleDragLeave() {
+    dragOverFolder = null;
+  }
+  
+  /**
+   * Handle drop on a folder
+   * @param {DragEvent} e
+   * @param {any} targetItem
+   */
+  function handleDrop(e, targetItem) {
+    if (!draggable) return;
+    e.preventDefault();
+    dragOverFolder = null;
+    
+    try {
+      const data = JSON.parse(e.dataTransfer.getData('application/json'));
+      const targetPath = targetItem.type === 'folder' 
+        ? (currentPath ? `${currentPath}/${targetItem.name}` : targetItem.name)
+        : currentPath;
+      
+      dispatch('itemDrop', {
+        item: data,
+        sourcePath: data.sourcePath,
+        targetPath: targetPath
+      });
+    } catch (err) {
+      console.error('Drop failed:', err);
+    }
+  }
+  
+  /**
+   * Handle drop on root (current level)
+   * @param {DragEvent} e
+   */
+  function handleRootDrop(e) {
+    if (!draggable) return;
+    e.preventDefault();
+    dragOverFolder = null;
+    
+    try {
+      const data = JSON.parse(e.dataTransfer.getData('application/json'));
+      dispatch('itemDrop', {
+        item: data,
+        sourcePath: data.sourcePath,
+        targetPath: currentPath
+      });
+    } catch (err) {
+      console.error('Drop failed:', err);
+    }
+  }
 
   /**
    * Get the current expanded state
@@ -117,17 +208,44 @@
     });
     return count;
   }
+  
+  /**
+   * Build path for nested folder
+   * @param {string} folderName
+   * @returns {string}
+   */
+  function buildChildPath(folderName) {
+    return currentPath ? `${currentPath}/${folderName}` : folderName;
+  }
 </script>
 
-<div class="tree" style="padding-left: {level === 0 ? level * 30 : level * 20}px;">
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div 
+  class="tree" 
+  style="padding-left: {level === 0 ? level * 30 : level * 20}px;"
+  on:dragover={draggable ? (e) => { e.preventDefault(); } : undefined}
+  on:drop={draggable ? handleRootDrop : undefined}
+>
   {#each items as item, i}
     {@const id = `${level}-${i}`}
     {@const open = expanded.has(id)}
     {@const isLast = i === items.length - 1}
     {@const isNested = level > 0}
+    {@const isDragOver = dragOverFolder === item.name}
     
     {#if item.type === 'folder'}
-      <div class="folder" on:click={() => toggle(id, item)} on:keydown={() => {}} role="button" tabindex="0">
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <div 
+        class="folder" 
+        class:drag-over={isDragOver}
+        on:click={() => toggle(id, item)} 
+        on:keydown={() => {}} 
+        on:dragover={draggable ? (e) => handleDragOver(e, item) : undefined}
+        on:dragleave={draggable ? handleDragLeave : undefined}
+        on:drop={draggable ? (e) => handleDrop(e, item) : undefined}
+        role="button" 
+        tabindex="0"
+      >
         <Button 
           theme="primary" 
           icon={icons.folder} 
@@ -143,11 +261,31 @@
       </div>
       {#if open && item.children}
         <div transition:slide={{ duration: mounted ? 150 : 0 }}>
-          <svelte:self items={item.children} {showCount} {itemIcon} level={level + 1} on:itemClick />
+          <svelte:self 
+            items={item.children} 
+            {showCount} 
+            {itemIcon} 
+            level={level + 1} 
+            {draggable}
+            currentPath={buildChildPath(item.name)}
+            on:itemClick 
+            on:itemDrop
+            on:dragStart
+          />
         </div>
       {/if}
     {:else}
-      <div on:click={() => handleItemClick(item)} on:keydown={() => {}} role="button" tabindex="0">
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <div 
+        class="file-item"
+        class:dragging={draggable}
+        draggable={draggable}
+        on:dragstart={draggable ? (e) => handleDragStart(e, item) : undefined}
+        on:click={() => handleItemClick(item)} 
+        on:keydown={() => {}} 
+        role="button" 
+        tabindex="0"
+      >
         <Button 
           theme="secondary" 
           icon={itemIcon}
@@ -172,9 +310,24 @@
   }
   .folder {
     cursor: pointer;
+    transition: transform 0.15s ease, opacity 0.15s ease;
+  }
+  .folder.drag-over {
+    transform: scale(1.02);
+    opacity: 0.8;
   }
   .folder :global(.count) {
     margin-left: 5px;
     opacity: 0.5;
   }
+  .file-item {
+    transition: opacity 0.15s ease;
+  }
+  .file-item.dragging {
+    cursor: grab;
+  }
+  .file-item.dragging:active {
+    cursor: grabbing;
+    opacity: 0.6;
+  }
 </style>

package/dist/Components/TreeDirectory.svelte.d.ts

@@ -4,17 +4,22 @@ type TreeDirectory = SvelteComponent<{
         name: string;
         type: "file" | "folder";
         children?: any[] | undefined;
+        data?: any;
     }[] | undefined;
     showCount?: boolean | undefined;
     itemIcon?: string | null | undefined;
     level?: number | undefined;
     topFoldersExpanded?: boolean | undefined;
+    draggable?: boolean | undefined;
+    currentPath?: string | undefined;
     getState?: (() => string[]) | undefined;
     setState?: ((state: string[]) => void) | undefined;
     expandAll?: (() => void) | undefined;
     collapseAll?: (() => void) | undefined;
 }, {
     itemClick: CustomEvent<any>;
+    dragStart: CustomEvent<any>;
+    itemDrop: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
@@ -30,17 +35,22 @@ declare const TreeDirectory: $$__sveltets_2_IsomorphicComponent<{
         name: string;
         type: "file" | "folder";
         children?: any[];
+        data?: any;
     }[] | undefined;
     showCount?: boolean | undefined;
     itemIcon?: string | null | undefined;
     level?: number | undefined;
     topFoldersExpanded?: boolean | undefined;
+    draggable?: boolean | undefined;
+    currentPath?: string | undefined;
     getState?: (() => string[]) | undefined;
     setState?: ((state: string[]) => void) | undefined;
     expandAll?: (() => void) | undefined;
     collapseAll?: (() => void) | undefined;
 }, {
     itemClick: CustomEvent<any>;
+    dragStart: CustomEvent<any>;
+    itemDrop: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coyalabs/bts-style",
-  "version": "1.1.11",
+  "version": "1.1.13",
   "description": "BTS Theme Svelte component templates",
   "type": "module",
   "exports": {