@coyalabs/bts-style 1.1.0 → 1.1.1

package/dist/Components/TreeDirectory.svelte

@@ -1,8 +1,11 @@
 <script>
   import { slide } from 'svelte/transition';
+  import { createEventDispatcher } from 'svelte';
   import Button from './Button.svelte';
   import { icons } from '../icons.js';
   
+  const dispatch = createEventDispatcher();
+  
   /** @type {{ name: string, type: 'file' | 'folder', children?: any[] }[]} */
   export let items = [];
   
@@ -19,11 +22,20 @@
   
   /**
      * @param {string} id
+     * @param {any} item
   */
-  function toggle(id) {
+  function toggle(id, item) {
     if (expanded.has(id)) expanded.delete(id);
     else expanded.add(id);
     expanded = expanded;
+    dispatch('itemClick', { item, type: 'folder' });
+  }
+
+  /**
+   * @param {any} item
+   */
+  function handleItemClick(item) {
+    dispatch('itemClick', { item, type: 'file' });
   }
 
   /**
@@ -98,7 +110,7 @@
     {@const isNested = level > 0}
     
     {#if item.type === 'folder'}
-      <div class="folder" on:click={() => toggle(id)} on:keydown={() => {}} role="button" tabindex="0">
+      <div class="folder" on:click={() => toggle(id, item)} on:keydown={() => {}} role="button" tabindex="0">
         <Button 
           theme="primary" 
           icon={icons.folder} 
@@ -114,20 +126,22 @@
       </div>
       {#if open && item.children}
         <div transition:slide={{ duration: 150 }}>
-          <svelte:self items={item.children} {showCount} {itemIcon} level={level + 1} />
+          <svelte:self items={item.children} {showCount} {itemIcon} level={level + 1} on:itemClick />
         </div>
       {/if}
     {:else}
-      <Button 
-        theme="secondary" 
-        icon={itemIcon}
-        borderRadiusTopLeft={isNested ? '15px' : '25px'}
-        borderRadiusTopRight={isNested ? '15px' : '25px'}
-        borderRadiusBottomLeft={isNested && !isLast ? '15px' : '25px'}
-        borderRadiusBottomRight={isNested && !isLast ? '15px' : '25px'}
-      >
-        {item.name}
-      </Button>
+      <div on:click={() => handleItemClick(item)} on:keydown={() => {}} role="button" tabindex="0">
+        <Button 
+          theme="secondary" 
+          icon={itemIcon}
+          borderRadiusTopLeft={isNested ? '15px' : '25px'}
+          borderRadiusTopRight={isNested ? '15px' : '25px'}
+          borderRadiusBottomLeft={isNested && !isLast ? '15px' : '25px'}
+          borderRadiusBottomRight={isNested && !isLast ? '15px' : '25px'}
+        >
+          {item.name}
+        </Button>
+      </div>
     {/if}
   {/each}
 </div>

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

@@ -13,6 +13,8 @@ type TreeDirectory = SvelteComponent<{
     expandAll?: (() => void) | undefined;
     collapseAll?: (() => void) | undefined;
 }, {
+    itemClick: CustomEvent<any>;
+} & {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
@@ -36,6 +38,8 @@ declare const TreeDirectory: $$__sveltets_2_IsomorphicComponent<{
     expandAll?: (() => void) | undefined;
     collapseAll?: (() => void) | undefined;
 }, {
+    itemClick: CustomEvent<any>;
+} & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     getState: () => string[];

package/package.json

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