@widgetic/design-system 0.3.68

package/dist/components/navigation/Breadcrumbs.svelte

@@ -0,0 +1,348 @@
+<script lang="ts">
+  // Svelte Imports
+  import { onMount, onDestroy } from 'svelte';
+
+  // Components Imports
+  import * as Breadcrumb from "../ui/breadcrumb";
+  import * as DropdownMenu from "../ui/dropdown-menu";
+
+  // Icons Imports
+  // import { IconArrowLeft, IconArrowRight } from '@widgetic/design-system/icons';
+  import { IconArrowLeft, IconArrowRight } from '@tabler/icons-svelte';
+
+  // Types Import
+  import type { BreadcrumbsProps } from './types.ts';
+
+  // Environment Import
+  // import { browser } from '$app/environment';
+  const browser = typeof window !== 'undefined';
+
+  /***
+   * COMPONENT PROPS
+   **/
+  // class && style props
+  let className = '';
+  export { className as class };
+  export let style = '';
+  // Breadcrumbs
+  export let clientHeight: number = 0;
+  // path settings
+  export let currentPath: BreadcrumbsProps['currentPath'] = [];
+  export let currentPathNames: BreadcrumbsProps['currentPathNames'] = [];
+  // loading settings
+  export let isLoading: BreadcrumbsProps['isLoading'] = false;
+  // navigation settings
+  export let showNavigationButtons: BreadcrumbsProps['showNavigationButtons'] = true;  
+  export let canGoBack: BreadcrumbsProps['canGoBack'] = false;
+  export let canGoForward: BreadcrumbsProps['canGoForward'] = false;
+  // event handlers
+  export let onNavigate: BreadcrumbsProps['onNavigate'] = () => {};
+  export let onBack: BreadcrumbsProps['onBack'] = () => {};
+  export let onForward: BreadcrumbsProps['onForward'] = () => {};
+  // debug settings
+  export let showDebugVisualizer: boolean = false;
+
+  /***
+   * COMPONENT STATE VARIABLES
+   **/
+  let navElement: HTMLElement;
+  let headerElement: HTMLElement | null = null;
+  let isDesktop = false;
+  let mediaQuery: MediaQueryList | null = null;
+  let shouldShowEllipsis = false;
+  let availableWidth = 0;
+  let itemsToShow = 0;
+  let breadcrumbsContainer: HTMLElement;
+  let breadcrumbsPositioned = false;
+  let showLogs = false;
+  // Calculate how many items we can show based on available width
+  // Assuming each item takes roughly 150px on average (including separator)
+  $: if (availableWidth > 0) {
+    const averageItemWidth = 200; // Adjust this value based on actual measurements
+    const maxItems = Math.floor(availableWidth / averageItemWidth);
+    // Always show at least 2 items (first and last)
+    itemsToShow = Math.max(2, maxItems);
+    shouldShowEllipsis = currentPath?.length > itemsToShow;
+    
+    // Mark breadcrumbs as positioned once we have calculated the available width
+    breadcrumbsPositioned = true;
+  }
+
+  // Only log on mount and significant changes
+  $: if (browser && (currentPath?.length)) {
+    if(showLogs) console.log('Breadcrumbs significant update:', {
+      currentPath,
+      currentPathNames,
+      shouldShowEllipsis,
+      availableWidth,
+      itemsToShow,
+      breadcrumbsPositioned
+    });
+  }
+
+  /***
+   * COMPONENT METHODS
+   **/
+  function updateAvailableWidth() {
+    if (!browser || !navElement || !breadcrumbsContainer) return;
+
+    // First try to get the header from FileBrowser structure
+    const containerElement = navElement.closest('header') || navElement;
+    headerElement = containerElement;
+
+    // Get all the measurements we need
+    const measurements = {
+      container: containerElement.getBoundingClientRect(),
+      navButtons: showNavigationButtons 
+        ? navElement.querySelector('.nav-buttons')?.getBoundingClientRect() 
+        : null,
+      rightContent: containerElement.querySelector('.pr-5, .right-content')?.getBoundingClientRect(),
+      breadcrumbs: breadcrumbsContainer.getBoundingClientRect()
+    };
+
+    // Calculate fixed spaces
+    const leftOffset = measurements.navButtons ? measurements.navButtons.width : 0;
+    const rightOffset = measurements.rightContent ? measurements.rightContent.width : 24;
+    
+    // Calculate available width for breadcrumbs
+    availableWidth = measurements.container.width - leftOffset - rightOffset - 72; // 72px for padding
+  }
+
+  function handleMediaQuery(e: MediaQueryListEvent | MediaQueryList) {
+    isDesktop = e.matches;
+  }
+
+  $: showFullPath = isDesktop;
+
+  function handleClick(event: MouseEvent, index: number) {
+    event.preventDefault();
+    if (!isLoading) {
+      onNavigate(index);
+    }
+  }
+
+  function handleKeyDown(event: KeyboardEvent, index: number) {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      if (!isLoading) {
+        onNavigate(index);
+      }
+    }
+  }
+
+  /***
+   * COMPONENT LIFECYCLE METHODS
+   **/
+  onMount(() => {
+    if (!browser) return;
+
+    mediaQuery = window.matchMedia('(min-width: 768px)');
+    handleMediaQuery(mediaQuery);
+    mediaQuery.addEventListener('change', handleMediaQuery);
+
+    // Get the header from FileBrowser structure
+    if (navElement) {
+      const header = navElement.closest('header');
+      if (header) {
+        headerElement = header;
+      }
+    }
+
+    // Initial width calculation
+    updateAvailableWidth();
+
+    // Set up resize observer
+    const resizeObserver = new ResizeObserver(() => {
+      updateAvailableWidth();
+    });
+
+    resizeObserver.observe(navElement);
+    if (headerElement) {
+      resizeObserver.observe(headerElement);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  });
+
+  onDestroy(() => {
+    if (browser && mediaQuery) {
+      mediaQuery.removeEventListener('change', handleMediaQuery);
+    }
+  });
+</script>
+
+<nav 
+  bind:this={navElement} 
+  bind:clientHeight
+  aria-label="breadcrumb" 
+  class="{className ? className + ' ' : ''}breadcrumbs-component flex items-center widgetic-colors h-[56px] bg-white border-b relative w-full"
+  style={style}
+>
+  <!-- NAVIGATION BUTTONS -->
+  {#if showNavigationButtons}
+    <div class="nav-buttons flex items-center flex-shrink-0">
+      <!-- Left arrow -->
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <div
+        class="breadcrumbs-nav-button flex items-center justify-center w-6 h-6"
+        style="cursor: {canGoBack && !isLoading ? 'pointer' : 'default'};"
+        class:opacity-50={!canGoBack || isLoading}
+        on:click={canGoBack && !isLoading ? onBack : undefined}
+        role="button"
+        tabindex={canGoBack && !isLoading ? 0 : -1}
+      >
+        <IconArrowLeft 
+          class="w-6 h-6 text-[hsl(var(--grey6))]" 
+          style="min-width: 24px; min-height: 24px;"
+        />
+      </div>
+      <!-- Right arrow -->
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <div
+        class="breadcrumbs-nav-button flex items-center justify-center w-6 h-6 ml-4"
+        style="cursor: {canGoForward && !isLoading ? 'pointer' : 'default'};"
+        class:opacity-50={!canGoForward || isLoading}
+        on:click={canGoForward && !isLoading ? onForward : undefined}
+        role="button"
+        tabindex={canGoForward && !isLoading ? 0 : -1}
+      >
+        <IconArrowRight 
+          class="w-6 h-6 text-[hsl(var(--grey6))]" 
+          style="min-width: 24px; min-height: 24px;"
+        />
+      </div>
+    </div>
+  {/if}
+
+  <!-- BREADCRUMBS CONTAINER -->
+  <div bind:this={breadcrumbsContainer} class="flex-1 pl-[18px] overflow-hidden min-w-0">
+    <Breadcrumb.Root>
+      <Breadcrumb.List class="inline-flex items-center min-w-0 breadcrumbs-list">
+        <div class="inline-flex items-center min-w-0 min-h-[24px]">
+          <!-- Root Breadcrumb Item -->
+          <Breadcrumb.Item class="flex-shrink-0">
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <span 
+              role="link"
+              tabindex="0"
+              class="h5 text-[hsl(var(--grey6))] transition-colors hover:text-[hsl(var(--grey7))] hover:underline hover:decoration-[hsl(var(--grey7))] cursor-pointer whitespace-nowrap"
+              class:opacity-50={isLoading}
+              style="pointer-events: {isLoading ? 'none' : 'auto'};"
+              on:click={(e) => handleClick(e, -1)}
+              on:keydown={(e) => handleKeyDown(e, -1)}
+            >
+              File browser
+            </span>
+          </Breadcrumb.Item>
+
+          
+          {#if !isLoading && currentPath.length > 0 && breadcrumbsPositioned}
+            {#if shouldShowEllipsis && currentPath.length > itemsToShow}
+              <!-- Breadcrumb Separator -->
+              <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] flex-shrink-0">/</Breadcrumb.Separator>
+
+              <!-- Dropdown Menu for Ellipsis -->
+              <Breadcrumb.Item class="flex-shrink-0">
+                <DropdownMenu.Root>
+                  <DropdownMenu.Trigger class="flex items-center gap-1 cursor-pointer">
+                    <span class="h5 text-[hsl(var(--grey6))]">...</span>
+                  </DropdownMenu.Trigger>
+                  <DropdownMenu.Content align="start" class="min-w-[200px]">
+                    {#each currentPath.slice(0, -itemsToShow + 1) as _, index}
+                      <DropdownMenu.Item>
+                        <!-- svelte-ignore a11y-click-events-have-key-events -->
+                        <span
+                          role="link"
+                          tabindex="0"
+                          class="block w-full cursor-pointer"
+                          on:click={(e) => handleClick(e, index)}
+                        >
+                          {currentPathNames[index]}
+                        </span>
+                      </DropdownMenu.Item>
+                    {/each}
+                  </DropdownMenu.Content>
+                </DropdownMenu.Root>
+              </Breadcrumb.Item>
+
+              <!-- Always show last N segments based on available width -->
+              {#each currentPath.slice(-itemsToShow + 1) as _, index}
+                <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] flex-shrink-0">/</Breadcrumb.Separator>
+                <Breadcrumb.Item class="flex-shrink-0">
+                  {#if index === itemsToShow - 2}
+                    <span class="h5 text-[hsl(var(--grey3))]">
+                      {currentPathNames[currentPath.length - 1]}
+                    </span>
+                  {:else}
+                    <!-- svelte-ignore a11y-click-events-have-key-events -->
+                    <span
+                      role="link"
+                      tabindex="0"
+                      class="h5 text-[hsl(var(--grey6))] transition-colors hover:text-[hsl(var(--grey7))] hover:underline hover:decoration-[hsl(var(--grey7))] cursor-pointer"
+                      class:opacity-50={isLoading}
+                      style="pointer-events: {isLoading ? 'none' : 'auto'};"
+                      on:click={(e) => handleClick(e, currentPath.length - itemsToShow + 1 + index)}
+                      on:keydown={(e) => handleKeyDown(e, currentPath.length - itemsToShow + 1 + index)}
+                    >
+                      {currentPathNames[currentPath.length - itemsToShow + 1 + index]}
+                    </span>
+                  {/if}
+                </Breadcrumb.Item>
+              {/each}
+            {:else}
+              {#each currentPath as _, index}
+                <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] flex-shrink-0">/</Breadcrumb.Separator>
+                <Breadcrumb.Item class="flex-shrink-0">
+                  {#if index === currentPath.length - 1}
+                    <span class="h5 text-[hsl(var(--grey3))]">
+                      {currentPathNames[index]}
+                    </span>
+                  {:else}
+                    <!-- svelte-ignore a11y-click-events-have-key-events -->
+                    <span
+                      role="link"
+                      tabindex="0"
+                      class="h5 text-[hsl(var(--grey6))] transition-colors hover:text-[hsl(var(--grey7))] hover:underline hover:decoration-[hsl(var(--grey7))] cursor-pointer"
+                      class:opacity-50={isLoading}
+                      style="pointer-events: {isLoading ? 'none' : 'auto'};"
+                      on:click={(e) => handleClick(e, index)}
+                      on:keydown={(e) => handleKeyDown(e, index)}
+                    >
+                      {currentPathNames[index]}
+                    </span>
+                  {/if}
+                </Breadcrumb.Item>
+              {/each}
+            {/if}
+          {/if}
+        </div>
+      </Breadcrumb.List>
+    </Breadcrumb.Root>
+  </div>
+
+  {#if showDebugVisualizer}
+    <div class="absolute bottom-1 right-1 text-xs text-blue-600 bg-white px-1 rounded shadow">
+      Available width: {Math.round(availableWidth)}px
+      <br>
+      Items to show: {itemsToShow}
+      <br>
+      Should show ellipsis: {shouldShowEllipsis}
+      <br>
+      Positioned: {breadcrumbsPositioned}
+      <br>
+      Context: {navElement?.closest('header') ? 'FileBrowser' : 'Direct'}
+    </div>
+  {/if}
+</nav>
+
+<style>
+  :global(.breadcrumb-separator) {
+    margin: 0 0.5rem;
+  }
+
+  :global(.breadcrumbs-list) {
+    width: 100%;
+  }
+</style> 

package/dist/components/navigation/Breadcrumbs.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { BreadcrumbsProps } from './types.ts';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Breadcrumbs: $$__sveltets_2_IsomorphicComponent<{
+    /***
+       * COMPONENT PROPS
+       **/ class?: string;
+    style?: string;
+    clientHeight?: number;
+    currentPath?: BreadcrumbsProps["currentPath"];
+    currentPathNames?: BreadcrumbsProps["currentPathNames"];
+    isLoading?: BreadcrumbsProps["isLoading"];
+    showNavigationButtons?: BreadcrumbsProps["showNavigationButtons"];
+    canGoBack?: BreadcrumbsProps["canGoBack"];
+    canGoForward?: BreadcrumbsProps["canGoForward"];
+    onNavigate?: BreadcrumbsProps["onNavigate"];
+    onBack?: BreadcrumbsProps["onBack"];
+    onForward?: BreadcrumbsProps["onForward"];
+    showDebugVisualizer?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Breadcrumbs = InstanceType<typeof Breadcrumbs>;
+export default Breadcrumbs;

package/dist/components/navigation/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Breadcrumbs } from './Breadcrumbs.svelte';
+export { type BreadcrumbsProps } from './types';

package/dist/components/navigation/index.js

@@ -0,0 +1,2 @@
+export { default as Breadcrumbs } from './Breadcrumbs.svelte';
+export {} from './types';

package/dist/components/navigation/types.d.ts

@@ -0,0 +1,12 @@
+export interface BreadcrumbsProps {
+    currentPath: string[];
+    currentPathNames: string[];
+    isLoading: boolean;
+    canGoBack: boolean;
+    canGoForward: boolean;
+    onNavigate: (index: number) => void;
+    onBack: () => void;
+    onForward: () => void;
+    showNavigationButtons?: boolean;
+    showDebugVisualizer?: boolean;
+}

package/dist/components/navigation/types.js

@@ -0,0 +1 @@
+export {};