@coyalabs/bts-style 1.1.0 → 1.1.2

package/dist/Components/TreeDirectory.svelte

@@ -1,8 +1,11 @@
 <script>
   import { slide } from 'svelte/transition';
+  import { createEventDispatcher, onMount } 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 = [];
   
@@ -14,16 +17,39 @@
 
   /** @type {number} */
   export let level = 0;
+
+  /** @type {boolean} */
+  export let topFoldersExpanded = false;
   
   let expanded = new Set();
+
+  onMount(() => {
+    if (topFoldersExpanded && level === 0) {
+      items.forEach((item, i) => {
+        if (item.type === 'folder') {
+          expanded.add(`${level}-${i}`);
+        }
+      });
+      expanded = expanded;
+    }
+  });
   
   /**
      * @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 +124,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 +140,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

@@ -8,11 +8,14 @@ type TreeDirectory = SvelteComponent<{
     showCount?: boolean | undefined;
     itemIcon?: string | null | undefined;
     level?: number | undefined;
+    topFoldersExpanded?: boolean | undefined;
     getState?: (() => string[]) | undefined;
     setState?: ((state: string[]) => void) | undefined;
     expandAll?: (() => void) | undefined;
     collapseAll?: (() => void) | undefined;
 }, {
+    itemClick: CustomEvent<any>;
+} & {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
@@ -31,11 +34,14 @@ declare const TreeDirectory: $$__sveltets_2_IsomorphicComponent<{
     showCount?: boolean | undefined;
     itemIcon?: string | null | undefined;
     level?: number | undefined;
+    topFoldersExpanded?: boolean | undefined;
     getState?: (() => string[]) | undefined;
     setState?: ((state: string[]) => void) | undefined;
     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.2",
   "description": "BTS Theme Svelte component templates",
   "type": "module",
   "exports": {