@shohojdhara/atomix 0.1.17 → 0.1.18

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

@@ -0,0 +1,208 @@
+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

@@ -0,0 +1,246 @@
+<!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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,69 @@
+/**
+ * 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;
+}