@hamedf/svelte-persian-datepicker/dist/ai-guide.js

A comprehensive Svelte 5 Persian/Jalali DateTime picker component with multi-calendar support (Jalali, Gregorian, Hijri), multiple selection modes (single, range, multiple), and extensive customization options

/**
 * AI/LLM Guide for Persian DatePicker Component
 *
 * This file provides structured information to help AI coding assistants
 * understand and work with the Persian DatePicker component effectively.
 *
 * @fileoverview AI-friendly component documentation and usage patterns
 * @version 1.0.3
 * @author Hamed Fallah
 */
// ====================================================================
// AI/LLM COMPONENT USAGE PATTERNS
// Common patterns and configurations for AI coding assistance
// ====================================================================
/**
 * AI Usage Patterns - Copy these for common scenarios
 */
export const AI_USAGE_PATTERNS = {
    // Basic single date selection
    SINGLE_DATE: `
    <script>
      let selectedDate: string;
    </script>
    
    <DatePicker bind:model={selectedDate} />
  `,
    // Persian calendar date range
    PERSIAN_RANGE: `
    <script>
      let dateRange: string[];
    </script>
    
    <DatePicker 
      bind:model={dateRange}
      mode="range"
      locale="fa"
      dual_input={true}
    />
  `,
    // Multiple date selection
    MULTIPLE_DATES: `
    <script>
      let multipleDates: string[];
    </script>
    
    <DatePicker 
      bind:model={multipleDates}
      mode="multiple"
      auto_submit={false}
    />
  `,
    // Time picker only
    TIME_ONLY: `
    <script>
      let selectedTime: string;
    </script>
    
    <DatePicker 
      bind:model={selectedTime}
      type="time"
      from="08:00"
      to="20:00"
    />
  `,
    // DateTime with validation
    DATETIME_VALIDATED: `
    <script>
      let dateTime: string;
      const disableWeekends = (date) => [0, 6].includes(date.weekday());
    </script>
    
    <DatePicker 
      bind:model={dateTime}
      type="datetime"
      from="1403/01/01"
      to="1405/12/29"
      disable={disableWeekends}
    />
  `,
    // Multi-language support
    MULTI_LANGUAGE: `
    <script>
      let date: string;
    </script>
    
    <DatePicker 
      bind:model={date}
      locale="fa,en"
      input_calendar="auto"
    />
  `,
    // Modal with custom styling
    MODAL_STYLED: `
    <script>
      let date: string;
    </script>
    
    <DatePicker 
      bind:model={date}
      modal={true}
      color="blue"
      clearable={true}
    />
  `
};
// ====================================================================
// AI TROUBLESHOOTING GUIDE
// Common issues and solutions for AI assistants
// ====================================================================
export const AI_TROUBLESHOOTING = {
    'No date shows in input': 'Check if model is bound correctly with bind:model',
    'Date format wrong': 'Use from/to props for boundaries, format prop for model format',
    'Calendar not showing': 'Verify locale prop and input_calendar setting',
    'Range selection not working': "Set mode='range' and consider dual_input={true}",
    'Disabled dates not working': 'Check disable prop format - array, function, or regex',
    'Styling issues': 'Use color prop for themes, styles prop for custom CSS',
    'Modal not responsive': 'Use modal={true} and check viewport settings',
    'Time picker missing': "Set type='time' or type='datetime'",
    'Multiple selection issues': "Set mode='multiple' and auto_submit={false}",
    'Validation not working': 'Use from/to for boundaries, disable for specific dates'
};
// ====================================================================
// COMPONENT CONFIGURATIONS FOR COMMON USE CASES
// Ready-to-use configurations that AI can recommend
// ====================================================================
export const AI_CONFIGURATIONS = {
    // Standard Persian date picker
    STANDARD_PERSIAN: {
        locale: 'fa',
        type: 'date',
        mode: 'single',
        clearable: true,
        auto_submit: true
    },
    // Business date range picker
    BUSINESS_RANGE: {
        mode: 'range',
        dual_input: true,
        locale: 'fa',
        color: 'blue',
        clearable: true
    },
    // Event scheduling picker
    EVENT_SCHEDULER: {
        type: 'datetime',
        mode: 'multiple',
        auto_submit: false,
        modal: true,
        clearable: true
    },
    // Working hours time picker
    WORKING_HOURS: {
        type: 'time',
        from: '08:00',
        to: '18:00',
        mode: 'range',
        dual_input: true
    },
    // International date picker
    INTERNATIONAL: {
        locale: 'fa,en',
        input_calendar: 'auto',
        type: 'date',
        color: 'green'
    }
};
/**
 * AI Quick Reference for Props
 * Essential props that AI should know about
 */
export const AI_ESSENTIAL_PROPS = {
    // MUST KNOW - These are essential for basic functionality
    BINDABLE_MODEL: 'bind:model - The main data binding prop',
    SELECTION_MODE: "mode - 'single' | 'range' | 'multiple'",
    PICKER_TYPE: "type - 'date' | 'time' | 'datetime'",
    LOCALE_SETTING: "locale - 'fa' | 'en' | 'ar' | combined",
    // SHOULD KNOW - These solve common requirements
    DATE_BOUNDARIES: 'from/to - Set date/time limits',
    DISABLE_DATES: 'disable - Array, function, or regex to disable dates',
    DUAL_INPUTS: 'dual_input - Separate inputs for range mode',
    AUTO_SUBMIT: 'auto_submit - Auto-submit on selection',
    // NICE TO KNOW - These enhance UX
    COLOR_THEME: 'color - Visual theme colors',
    MODAL_MODE: 'modal - Show as overlay',
    CLEARABLE: 'clearable - Show clear button',
    CLICK_BEHAVIOR: 'click_on - What triggers opening'
};