@shohojdhara/atomix 0.1.16 → 0.1.17

package/src/components/Breadcrumb/scripts/breadcrumb.ts

@@ -1,206 +0,0 @@
-import { useBreadcrumb } from '../../../lib/composables/useBreadcrumb';
-import { BreadcrumbItem, BreadcrumbOptions, BreadcrumbInstance } from './types';
-import { BREADCRUMB } from '../../../lib/constants/components';
-import { createIconElement } from '../../../lib/utils/icons';
-
-/**
- * Default options for the Breadcrumb component
- */
-const DEFAULT_OPTIONS: BreadcrumbOptions = {
-  items: [],
-  divider: BREADCRUMB.DEFAULTS.DIVIDER,
-  className: '',
-  ariaLabel: 'Breadcrumb'
-};
-
-/**
- * Breadcrumb Class - Vanilla JS implementation
- */
-export default class Breadcrumb implements BreadcrumbInstance {
-  // DOM element
-  private element: HTMLElement;
-  
-  // Options
-  private options: BreadcrumbOptions;
-
-  // DOM references
-  private navElement: HTMLElement = document.createElement('nav');
-  private listElement: HTMLOListElement = document.createElement('ol');
-  
-  // Composables
-  private breadcrumbUtils = useBreadcrumb();
-
-  /**
-   * Constructor
-   * @param element - DOM element or selector
-   * @param options - Configuration options
-   */
-  constructor(element: string | HTMLElement, options: Partial<BreadcrumbOptions> = {}) {
-    // Get element reference
-    this.element = typeof element === 'string'
-      ? document.querySelector(element) as HTMLElement
-      : element;
-    
-    if (!this.element) {
-      throw new Error('Breadcrumb: element not found');
-    }
-    
-    // Merge default options with provided options
-    this.options = { ...DEFAULT_OPTIONS, ...options };
-    
-    // Ensure items is always an array
-    if (!this.options.items) {
-      this.options.items = [];
-    }
-    
-    // Initialize the component
-    this._initialize();
-  }
-
-  /**
-   * Initialize the component
-   * @private
-   */
-  private _initialize(): void {
-    // Clear element
-    this.element.innerHTML = '';
-    
-    // Reset DOM elements
-    this.navElement = document.createElement('nav');
-    this.listElement = document.createElement('ol');
-    
-    // Create structure
-    this._createStructure();
-    
-    // Append to DOM
-    this.element.appendChild(this.navElement);
-  }
-
-  /**
-   * Create component structure
-   * @private
-   */
-  private _createStructure(): void {
-    // Create navigation element
-    if (this.options.ariaLabel) {
-      this.navElement.setAttribute('aria-label', this.options.ariaLabel);
-    }
-    
-    // Create list element
-    this.listElement.className = this.breadcrumbUtils.generateBreadcrumbClass(this.options);
-    
-    // Add items
-    const items = this.options.items || [];
-    if (items.length > 0) {
-      items.forEach((item, index) => {
-        const isLast = index === items.length - 1;
-        
-        // Create list item
-        const listItem = document.createElement('li');
-        listItem.className = this.breadcrumbUtils.generateItemClass(item, isLast);
-        
-        // Create link or span
-        let linkElement: HTMLAnchorElement | HTMLSpanElement;
-        
-        if (this.breadcrumbUtils.isItemLink(item, isLast)) {
-          linkElement = document.createElement('a');
-          (linkElement as HTMLAnchorElement).href = item.href || '#';
-          
-          if (typeof item.onClick === 'function') {
-            (linkElement as HTMLAnchorElement).addEventListener('click', item.onClick as EventListener);
-          }
-        } else {
-          linkElement = document.createElement('span');
-        }
-        
-        linkElement.className = BREADCRUMB.CLASSES.LINK;
-        
-        // Add icon if provided
-        if (item.icon) {
-          const iconElement = createIconElement(item.icon, 16, 'c-breadcrumb__icon');
-          iconElement.style.marginRight = '4px';
-          linkElement.appendChild(iconElement);
-        }
-        
-        // Add label text
-        const labelText = document.createTextNode(item.label);
-        linkElement.appendChild(labelText);
-        
-        listItem.appendChild(linkElement);
-        this.listElement.appendChild(listItem);
-      });
-    }
-    
-    this.navElement.appendChild(this.listElement);
-  }
-
-  /**
-   * Update the breadcrumb with new options
-   * @public
-   */
-  public update(options: Partial<BreadcrumbOptions>): void {
-    // Update options
-    this.options = { ...this.options, ...options };
-    
-    // Ensure items is always an array
-    if (!this.options.items) {
-      this.options.items = [];
-    }
-    
-    // Re-initialize
-    this._initialize();
-  }
-
-  /**
-   * Destroy the breadcrumb component
-   * @public
-   */
-  public destroy(): void {
-    // Remove event listeners
-    if (this.options.items) {
-      this.options.items.forEach(item => {
-        // No need to remove event listeners as we're removing the elements
-      });
-    }
-    
-    // Remove DOM elements
-    this.element.innerHTML = '';
-  }
-
-  /**
-   * Initialize all breadcrumb components on the page
-   * @public
-   * @static
-   */
-  public static initializeAll(selector = '[data-component="breadcrumb"]'): Breadcrumb[] {
-    const elements = document.querySelectorAll(selector);
-    return Array.from(elements).map(element => {
-      // Try to get options from data attributes
-      const options: BreadcrumbOptions = {};
-      
-      // Get aria label
-      const ariaLabel = element.getAttribute('data-aria-label');
-      if (ariaLabel) options.ariaLabel = ariaLabel;
-      
-      // Get class name
-      const className = element.getAttribute('data-class-name');
-      if (className) options.className = className;
-      
-      // Get divider
-      const divider = element.getAttribute('data-divider');
-      if (divider) options.divider = divider;
-      
-      // Get items from data attribute
-      const itemsAttr = element.getAttribute('data-items');
-      if (itemsAttr) {
-        try {
-          options.items = JSON.parse(itemsAttr);
-        } catch (e) {
-          console.error('Invalid JSON in data-items attribute', e);
-        }
-      }
-      
-      return new Breadcrumb(element as HTMLElement, options);
-    });
-  }
-} 

package/src/components/Breadcrumb/scripts/demo.html

@@ -1,246 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Breadcrumb Component Demo</title>
-  <link rel="stylesheet" href="../../../styles/atomix.css">
-  <style>
-    body {
-      font-family: system-ui, sans-serif;
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 20px;
-    }
-    
-    .demo-section {
-      margin-bottom: 40px;
-      padding: 20px;
-      border: 1px solid #e0e0e0;
-      border-radius: 8px;
-    }
-
-    h1 {
-      margin-bottom: 30px;
-    }
-
-    h2 {
-      margin-top: 0;
-      margin-bottom: 20px;
-    }
-
-    pre {
-      background-color: #f5f5f5;
-      padding: 15px;
-      border-radius: 4px;
-      overflow: auto;
-      margin-top: 20px;
-    }
-  </style>
-</head>
-<body>
-  <h1>Breadcrumb Component Demo</h1>
-
-  <div class="demo-section">
-    <h2>Basic Breadcrumb</h2>
-    <div id="basic-breadcrumb"></div>
-    <pre>
-new Breadcrumb('#basic-breadcrumb', {
-  items: [
-    { label: 'Home', href: '/' },
-    { label: 'Products', href: '/products' },
-    { label: 'Category', href: '/products/category' },
-    { label: 'Product Name', active: true }
-  ]
-});
-    </pre>
-  </div>
-
-  <div class="demo-section">
-    <h2>Breadcrumb with Icons</h2>
-    <div id="icon-breadcrumb"></div>
-    <pre>
-new Breadcrumb('#icon-breadcrumb', {
-  items: [
-    { 
-      label: 'Home', 
-      href: '/', 
-      icon: 'House' 
-    },
-    { 
-      label: 'Products', 
-      href: '/products', 
-      icon: 'Package' 
-    },
-    { 
-      label: 'Category', 
-      href: '/products/category', 
-      icon: 'Folder' 
-    },
-    { 
-      label: 'Product Name', 
-      active: true, 
-      icon: 'Tag' 
-    }
-  ]
-});
-    </pre>
-  </div>
-
-  <div class="demo-section">
-    <h2>Breadcrumb with Custom Divider</h2>
-    <div id="custom-divider-breadcrumb"></div>
-    <pre>
-new Breadcrumb('#custom-divider-breadcrumb', {
-  items: [
-    { label: 'Home', href: '/' },
-    { label: 'Products', href: '/products' },
-    { label: 'Category', href: '/products/category' },
-    { label: 'Product Name', active: true }
-  ],
-  divider: '/'
-});
-    </pre>
-  </div>
-
-  <div class="demo-section">
-    <h2>Breadcrumb with Click Handlers</h2>
-    <div id="click-breadcrumb"></div>
-    <pre>
-new Breadcrumb('#click-breadcrumb', {
-  items: [
-    { 
-      label: 'Home', 
-      href: '/', 
-      onClick: (e) => {
-        e.preventDefault();
-        alert('Home clicked');
-      }
-    },
-    { 
-      label: 'Products', 
-      href: '/products', 
-      onClick: (e) => {
-        e.preventDefault();
-        alert('Products clicked');
-      }
-    },
-    { 
-      label: 'Category', 
-      href: '/products/category', 
-      onClick: (e) => {
-        e.preventDefault();
-        alert('Category clicked');
-      }
-    },
-    { label: 'Product Name', active: true }
-  ]
-});
-    </pre>
-  </div>
-
-  <div class="demo-section">
-    <h2>Breadcrumb from Data Attributes</h2>
-    <div 
-      data-component="breadcrumb" 
-      data-items='[{"label":"Home","href":"/","icon":"House"},{"label":"Products","href":"/products"},{"label":"Category","href":"/products/category"},{"label":"Product Name","active":true}]'
-    ></div>
-    <pre>
-&lt;div 
-  data-component="breadcrumb" 
-  data-items='[
-    {"label":"Home","href":"/","icon":"House"},
-    {"label":"Products","href":"/products"},
-    {"label":"Category","href":"/products/category"},
-    {"label":"Product Name","active":true}
-  ]'
-&gt;&lt;/div&gt;
-    </pre>
-  </div>
-
-  <script type="module">
-    import Breadcrumb from './index.js';
-    
-    // Basic Breadcrumb
-    new Breadcrumb('#basic-breadcrumb', {
-      items: [
-        { label: 'Home', href: '/' },
-        { label: 'Products', href: '/products' },
-        { label: 'Category', href: '/products/category' },
-        { label: 'Product Name', active: true }
-      ]
-    });
-
-    // Breadcrumb with Icons
-    new Breadcrumb('#icon-breadcrumb', {
-      items: [
-        { 
-          label: 'Home', 
-          href: '/', 
-          icon: 'House' 
-        },
-        { 
-          label: 'Products', 
-          href: '/products', 
-          icon: 'Package' 
-        },
-        { 
-          label: 'Category', 
-          href: '/products/category', 
-          icon: 'Folder' 
-        },
-        { 
-          label: 'Product Name', 
-          active: true, 
-          icon: 'Tag' 
-        }
-      ]
-    });
-
-    // Breadcrumb with Custom Divider
-    new Breadcrumb('#custom-divider-breadcrumb', {
-      items: [
-        { label: 'Home', href: '/' },
-        { label: 'Products', href: '/products' },
-        { label: 'Category', href: '/products/category' },
-        { label: 'Product Name', active: true }
-      ],
-      divider: '/'
-    });
-
-    // Breadcrumb with Click Handlers
-    new Breadcrumb('#click-breadcrumb', {
-      items: [
-        { 
-          label: 'Home', 
-          href: '/', 
-          onClick: (e) => {
-            e.preventDefault();
-            alert('Home clicked');
-          }
-        },
-        { 
-          label: 'Products', 
-          href: '/products', 
-          onClick: (e) => {
-            e.preventDefault();
-            alert('Products clicked');
-          }
-        },
-        { 
-          label: 'Category', 
-          href: '/products/category', 
-          onClick: (e) => {
-            e.preventDefault();
-            alert('Category clicked');
-          }
-        },
-        { label: 'Product Name', active: true }
-      ]
-    });
-
-    // Initialize all breadcrumbs with data attributes
-    Breadcrumb.initializeAll();
-  </script>
-</body>
-</html> 

package/src/components/Breadcrumb/scripts/index.ts

@@ -1,5 +0,0 @@
-import Breadcrumb from './breadcrumb';
-import type { BreadcrumbItem, BreadcrumbOptions, BreadcrumbInstance } from './types';
-
-export type { BreadcrumbItem, BreadcrumbOptions, BreadcrumbInstance };
-export default Breadcrumb; 

package/src/components/Breadcrumb/scripts/types.ts

@@ -1,69 +0,0 @@
-/**
- * Breadcrumb item interface
- */
-export interface BreadcrumbItem {
-  /**
-   * Item label text
-   */
-  label: string;
-  
-  /**
-   * Optional URL for the breadcrumb item
-   */
-  href?: string;
-  
-  /**
-   * Whether this item is active/current
-   */
-  active?: boolean;
-  
-  /**
-   * Icon name from Phosphor Icons
-   */
-  icon?: string;
-  
-  /**
-   * Optional click handler
-   */
-  onClick?: (event: MouseEvent) => void;
-}
-
-/**
- * Breadcrumb options interface
- */
-export interface BreadcrumbOptions {
-  /**
-   * Array of breadcrumb items
-   */
-  items?: BreadcrumbItem[];
-  
-  /**
-   * Divider character or string between items
-   */
-  divider?: string;
-  
-  /**
-   * Additional CSS class names
-   */
-  className?: string;
-  
-  /**
-   * Accessible label for the breadcrumb navigation
-   */
-  ariaLabel?: string;
-}
-
-/**
- * Breadcrumb instance interface
- */
-export interface BreadcrumbInstance {
-  /**
-   * Update the breadcrumb with new options
-   */
-  update: (options: Partial<BreadcrumbOptions>) => void;
-  
-  /**
-   * Destroy the breadcrumb component
-   */
-  destroy: () => void;
-}