@mhmo91/schmancy 0.2.192 → 0.2.194

package/ai/textarea.md

@@ -0,0 +1,147 @@
+# Schmancy Textarea - AI Reference
+
+```js
+// Basic Textarea
+<schmancy-textarea
+  name="textarea-name"
+  label="Textarea Label"
+  value="Initial text"
+  placeholder="Enter text here..."
+  rows="4"
+  cols="50"
+  maxlength="500"
+  minlength="10"
+  required?
+  disabled?
+  readonly?
+  error="Error message"
+  resize="both|horizontal|vertical|none"
+  @input=${handleInput}
+  @change=${handleChange}>
+</schmancy-textarea>
+
+// Textarea with counter and helper text
+<schmancy-textarea
+  label="Description"
+  maxlength="200"
+  show-counter?
+  helper-text="Briefly describe your issue">
+</schmancy-textarea>
+
+// Auto-growing textarea
+<schmancy-textarea
+  auto-grow?
+  min-rows="2"
+  max-rows="10"
+  label="Comments">
+</schmancy-textarea>
+
+// Textarea Methods
+textarea.focus() -> void           // Focus the textarea
+textarea.blur() -> void            // Remove focus
+textarea.select() -> void          // Select all text
+textarea.validate() -> boolean     // Validate and show error if invalid
+textarea.reset() -> void           // Reset to initial value
+textarea.setCustomValidity(message) -> void  // Set custom validation message
+
+// Textarea Properties
+value: string         // The content of the textarea
+name: string          // The name attribute
+label: string         // Label text
+placeholder: string   // Placeholder text
+rows: number          // Number of rows to display
+cols: number          // Number of columns to display
+minlength: number     // Minimum number of characters required
+maxlength: number     // Maximum number of characters allowed
+disabled: boolean     // Whether the textarea is disabled
+readonly: boolean     // Whether the textarea is read-only
+required: boolean     // Whether the textarea is required
+error: string         // Error message to display
+resize: string        // Resize behavior: "both", "horizontal", "vertical", "none"
+autoGrow: boolean     // Whether the textarea should automatically grow with content
+minRows: number       // Minimum number of rows when auto-growing
+maxRows: number       // Maximum number of rows when auto-growing
+showCounter: boolean  // Whether to show the character counter
+
+// Textarea Events
+@input   // Fires on input with { detail: { value } }
+@change  // Fires when value changes and focus is lost with { detail: { value } }
+@focus   // Fires when textarea gains focus
+@blur    // Fires when textarea loses focus
+
+// Examples
+// Basic usage
+<schmancy-textarea
+  name="comments"
+  label="Comments"
+  placeholder="Enter your comments here"
+  rows="4"
+  required
+  @change=${(e) => console.log('Comments:', e.detail.value)}>
+</schmancy-textarea>
+
+// Textarea with character counter
+<schmancy-textarea
+  name="bio"
+  label="Biography"
+  maxlength="500"
+  show-counter
+  helper-text="Tell us about yourself">
+</schmancy-textarea>
+
+// Auto-growing textarea
+<schmancy-textarea
+  name="notes"
+  label="Meeting Notes"
+  auto-grow
+  min-rows="3"
+  max-rows="15"
+  placeholder="Type your notes here...">
+</schmancy-textarea>
+
+// Usage in a form
+<schmancy-form @submit=${handleSubmit}>
+  <schmancy-input 
+    name="title" 
+    label="Title" 
+    required>
+  </schmancy-input>
+  
+  <schmancy-textarea
+    name="description"
+    label="Description"
+    rows="5"
+    required>
+  </schmancy-textarea>
+  
+  <schmancy-button type="submit">Submit</schmancy-button>
+</schmancy-form>
+
+// Textarea with error state
+<schmancy-textarea
+  name="feedback"
+  label="Feedback"
+  value=${feedback}
+  error=${feedback.length < 10 ? 'Feedback must be at least 10 characters' : ''}
+  @input=${(e) => feedback = e.detail.value}>
+</schmancy-textarea>
+
+// Textarea with prefilled markdown template
+<schmancy-textarea
+  name="issue"
+  label="Issue Description"
+  value="## Issue Description
+- 
+- 
+
+## Steps to Reproduce
+1. 
+2. 
+3. 
+
+## Expected Behavior
+
+"
+  rows="12">
+</schmancy-textarea>
+```

package/ai/tooltip.md

@@ -0,0 +1,149 @@
+# Schmancy Tooltip - AI Reference
+
+```js
+// Basic Tooltip
+<schmancy-tooltip text="Tooltip text">
+  <schmancy-button>Hover me</schmancy-button>
+</schmancy-tooltip>
+
+// Tooltip with position
+<schmancy-tooltip
+  text="Tooltip content"
+  position="top|right|bottom|left|top-start|top-end|right-start|right-end|bottom-start|bottom-end|left-start|left-end">
+  <div>Hover over this element</div>
+</schmancy-tooltip>
+
+// Tooltip with custom content
+<schmancy-tooltip>
+  <schmancy-button>Hover me</schmancy-button>
+  
+  <div slot="content">
+    <h4>Custom Tooltip</h4>
+    <p>This is a tooltip with custom HTML content.</p>
+  </div>
+</schmancy-tooltip>
+
+// Tooltip with delay and offset
+<schmancy-tooltip
+  text="Delayed tooltip"
+  show-delay="500"
+  hide-delay="200"
+  offset="10">
+  <span>Hover for delayed tooltip</span>
+</schmancy-tooltip>
+
+// Tooltip directive (alternative usage)
+<schmancy-button
+  ${tooltip('Button tooltip', { 
+    position: 'top',
+    showDelay: 300
+  })}>
+  Hover me
+</schmancy-button>
+
+// Tooltip Properties
+text: string           // Text content of the tooltip
+position: string       // Position relative to target: "top", "right", "bottom", "left" and variations
+showDelay: number      // Delay before showing tooltip (milliseconds)
+hideDelay: number      // Delay before hiding tooltip (milliseconds)
+offset: number         // Distance between tooltip and target (pixels)
+maxWidth: string       // Maximum width of the tooltip
+interactive: boolean   // Allow interaction with tooltip content
+disabled: boolean      // Disable the tooltip
+always-visible: boolean // Keep tooltip visible (for testing)
+
+// Tooltip Events
+@show    // Fires when tooltip is shown
+@hide    // Fires when tooltip is hidden
+
+// Tooltip Directive Options
+tooltip(text, {
+  position: string,    // Position relative to target
+  showDelay: number,   // Delay before showing tooltip (milliseconds)
+  hideDelay: number,   // Delay before hiding tooltip (milliseconds)
+  offset: number,      // Distance between tooltip and target (pixels)
+  maxWidth: string,    // Maximum width of the tooltip
+  interactive: boolean // Allow interaction with tooltip content
+})
+
+// Examples
+// Basic usage
+<schmancy-tooltip text="Delete this item">
+  <schmancy-icon-button
+    icon="delete"
+    variant="danger">
+  </schmancy-icon-button>
+</schmancy-tooltip>
+
+// Tooltip with rich content
+<schmancy-tooltip position="right">
+  <schmancy-icon-button icon="info"></schmancy-icon-button>
+  
+  <div slot="content">
+    <h4>Information</h4>
+    <p>This feature allows you to:</p>
+    <ul>
+      <li>Create new records</li>
+      <li>Edit existing data</li>
+      <li>Export as CSV</li>
+    </ul>
+  </div>
+</schmancy-tooltip>
+
+// Interactive tooltip
+<schmancy-tooltip 
+  position="bottom"
+  interactive>
+  <span>Settings</span>
+  
+  <div slot="content">
+    <h4>Quick Settings</h4>
+    <schmancy-checkbox label="Enable notifications"></schmancy-checkbox>
+    <schmancy-checkbox label="Dark mode"></schmancy-checkbox>
+    <schmancy-button size="small">Apply</schmancy-button>
+  </div>
+</schmancy-tooltip>
+
+// Using tooltip directive
+<div>
+  <schmancy-button ${tooltip('Save changes')}>
+    Save
+  </schmancy-button>
+  
+  <schmancy-button ${tooltip('Discard all changes', { position: 'bottom' })}>
+    Cancel
+  </schmancy-button>
+  
+  <schmancy-icon-button 
+    icon="help"
+    ${tooltip('Need help?', { position: 'right', showDelay: 500 })}>
+  </schmancy-icon-button>
+</div>
+
+// Tooltip on disabled elements
+<schmancy-tooltip text="You don't have permission to edit">
+  <span>
+    <schmancy-button disabled>
+      Edit
+    </schmancy-button>
+  </span>
+</schmancy-tooltip>
+
+// Tooltip for form fields
+<div>
+  <schmancy-input 
+    label="Username"
+    ${tooltip('Enter your username or email address')}>
+  </schmancy-input>
+  
+  <schmancy-input 
+    label="Password"
+    type="password">
+    <schmancy-icon 
+      slot="suffix" 
+      icon="info"
+      ${tooltip('Password must be at least 8 characters')}>
+    </schmancy-icon>
+  </schmancy-input>
+</div>
+```

package/ai/tree.md

@@ -0,0 +1,279 @@
+# Schmancy Tree - AI Reference
+
+```js
+// Basic Tree
+<schmancy-tree>
+  <schmancy-tree-item label="Root">
+    <schmancy-tree-item label="Child 1"></schmancy-tree-item>
+    <schmancy-tree-item label="Child 2">
+      <schmancy-tree-item label="Grandchild 1"></schmancy-tree-item>
+      <schmancy-tree-item label="Grandchild 2"></schmancy-tree-item>
+    </schmancy-tree-item>
+    <schmancy-tree-item label="Child 3"></schmancy-tree-item>
+  </schmancy-tree-item>
+</schmancy-tree>
+
+// Tree with selection
+<schmancy-tree
+  selectable
+  @select=${handleSelection}>
+  <!-- Tree items -->
+</schmancy-tree>
+
+// Tree with custom items
+<schmancy-tree>
+  <schmancy-tree-item value="item1">
+    <div slot="label">
+      <schmancy-icon icon="folder"></schmancy-icon>
+      <span>Documents</span>
+    </div>
+    
+    <schmancy-tree-item value="item1.1">
+      <div slot="label">
+        <schmancy-icon icon="file-text"></schmancy-icon>
+        <span>Report.pdf</span>
+      </div>
+    </schmancy-tree-item>
+    
+    <schmancy-tree-item value="item1.2">
+      <div slot="label">
+        <schmancy-icon icon="file-text"></schmancy-icon>
+        <span>Presentation.pptx</span>
+      </div>
+    </schmancy-tree-item>
+  </schmancy-tree-item>
+</schmancy-tree>
+
+// Tree Properties
+selectable: boolean       // Enable item selection
+multiselect: boolean      // Allow multiple selections
+expandOnSelect: boolean   // Expand items when selected
+compact: boolean          // Reduce padding and spacing
+indentSize: number        // Indentation size in pixels (default: 20)
+expandedItems: string[]   // Initially expanded items (by value)
+selectedItems: string[]   // Initially selected items (by value)
+
+// Tree Item Properties
+label: string             // Text label for the item
+value: string             // Value for selection/identification
+expanded: boolean         // Whether the item is expanded
+selected: boolean         // Whether the item is selected
+disabled: boolean         // Disable the item
+icon: string              // Icon to display (if using default rendering)
+loading: boolean          // Show loading indicator
+checkable: boolean        // Show checkbox for selection
+childrenCount: number     // Number of children (for lazy loading)
+
+// Tree Events
+@select   // Fires when selection changes, with { detail: { selected } }
+@expand   // Fires when item expands, with { detail: { value, expanded } }
+@collapse // Fires when item collapses, with { detail: { value, expanded } }
+@toggle   // Fires when item expands/collapses, with { detail: { value, expanded } }
+
+// Tree Methods
+tree.expandAll() -> void            // Expand all items
+tree.collapseAll() -> void          // Collapse all items
+tree.getSelectedItems() -> string[] // Get selected item values
+tree.selectItem(value) -> void      // Select an item
+tree.deselectItem(value) -> void    // Deselect an item
+tree.expandItem(value) -> void      // Expand an item
+tree.collapseItem(value) -> void    // Collapse an item
+
+// Examples
+// File explorer tree
+<schmancy-tree
+  selectable
+  expandOnSelect
+  @select=${(e) => handleFileSelection(e.detail.selected)}>
+  
+  <schmancy-tree-item value="documents" expanded>
+    <div slot="label">
+      <schmancy-icon icon="folder"></schmancy-icon>
+      <span>Documents</span>
+    </div>
+    
+    <schmancy-tree-item value="documents/reports">
+      <div slot="label">
+        <schmancy-icon icon="folder"></schmancy-icon>
+        <span>Reports</span>
+      </div>
+      
+      <schmancy-tree-item value="documents/reports/q1.pdf">
+        <div slot="label">
+          <schmancy-icon icon="file-text"></schmancy-icon>
+          <span>Q1 Report.pdf</span>
+        </div>
+      </schmancy-tree-item>
+      
+      <schmancy-tree-item value="documents/reports/q2.pdf">
+        <div slot="label">
+          <schmancy-icon icon="file-text"></schmancy-icon>
+          <span>Q2 Report.pdf</span>
+        </div>
+      </schmancy-tree-item>
+    </schmancy-tree-item>
+    
+    <schmancy-tree-item value="documents/presentations">
+      <div slot="label">
+        <schmancy-icon icon="folder"></schmancy-icon>
+        <span>Presentations</span>
+      </div>
+      
+      <schmancy-tree-item value="documents/presentations/product.pptx">
+        <div slot="label">
+          <schmancy-icon icon="file-presentation"></schmancy-icon>
+          <span>Product Roadmap.pptx</span>
+        </div>
+      </schmancy-tree-item>
+    </schmancy-tree-item>
+  </schmancy-tree-item>
+  
+  <schmancy-tree-item value="images">
+    <div slot="label">
+      <schmancy-icon icon="folder"></schmancy-icon>
+      <span>Images</span>
+    </div>
+    
+    <schmancy-tree-item value="images/logo.png">
+      <div slot="label">
+        <schmancy-icon icon="image"></schmancy-icon>
+        <span>Logo.png</span>
+      </div>
+    </schmancy-tree-item>
+    
+    <schmancy-tree-item value="images/banner.jpg">
+      <div slot="label">
+        <schmancy-icon icon="image"></schmancy-icon>
+        <span>Banner.jpg</span>
+      </div>
+    </schmancy-tree-item>
+  </schmancy-tree-item>
+</schmancy-tree>
+
+// Organization tree with checkboxes
+<schmancy-tree
+  selectable
+  multiselect
+  @select=${(e) => updateSelectedDepartments(e.detail.selected)}>
+  
+  <schmancy-tree-item value="company" checkable expanded>
+    <div slot="label">
+      <strong>Acme Inc.</strong>
+    </div>
+    
+    <schmancy-tree-item value="engineering" checkable>
+      <div slot="label">Engineering</div>
+      
+      <schmancy-tree-item value="frontend" checkable>
+        <div slot="label">Frontend</div>
+      </schmancy-tree-item>
+      
+      <schmancy-tree-item value="backend" checkable>
+        <div slot="label">Backend</div>
+      </schmancy-tree-item>
+      
+      <schmancy-tree-item value="qa" checkable>
+        <div slot="label">QA</div>
+      </schmancy-tree-item>
+    </schmancy-tree-item>
+    
+    <schmancy-tree-item value="design" checkable>
+      <div slot="label">Design</div>
+      
+      <schmancy-tree-item value="ux" checkable>
+        <div slot="label">UX</div>
+      </schmancy-tree-item>
+      
+      <schmancy-tree-item value="ui" checkable>
+        <div slot="label">UI</div>
+      </schmancy-tree-item>
+    </schmancy-tree-item>
+    
+    <schmancy-tree-item value="marketing" checkable>
+      <div slot="label">Marketing</div>
+    </schmancy-tree-item>
+    
+    <schmancy-tree-item value="sales" checkable>
+      <div slot="label">Sales</div>
+    </schmancy-tree-item>
+  </schmancy-tree-item>
+</schmancy-tree>
+
+// Dynamic tree from data
+<schmancy-tree
+  selectable
+  .expandedItems=${expandedItems}
+  .selectedItems=${selectedItems}
+  @select=${handleSelection}
+  @toggle=${handleToggle}>
+  
+  ${renderTree(treeData)}
+</schmancy-tree>
+
+// Helper function to render tree recursively
+function renderTree(items) {
+  return items.map(item => html`
+    <schmancy-tree-item
+      value=${item.id}
+      label=${item.label}
+      ?expanded=${expandedItems.includes(item.id)}
+      ?selected=${selectedItems.includes(item.id)}
+      ?disabled=${item.disabled}
+      ?loading=${item.loading}>
+      
+      ${item.children ? renderTree(item.children) : ''}
+    </schmancy-tree-item>
+  `);
+}
+
+// Lazy loading tree
+<schmancy-tree @toggle=${handleToggle}>
+  <schmancy-tree-item
+    value="root"
+    label="Root Folder"
+    expanded
+    childrenCount=${3}>
+    
+    ${loadedChildren.root ? loadedChildren.root.map(child => html`
+      <schmancy-tree-item
+        value=${child.id}
+        label=${child.name}
+        childrenCount=${child.hasChildren ? 1 : 0}
+        ?loading=${loadingItems.includes(child.id)}>
+        
+        ${loadedChildren[child.id] ? loadedChildren[child.id].map(grandchild => html`
+          <schmancy-tree-item
+            value=${grandchild.id}
+            label=${grandchild.name}
+            childrenCount=${grandchild.hasChildren ? 1 : 0}>
+          </schmancy-tree-item>
+        `) : ''}
+      </schmancy-tree-item>
+    `) : html`
+      <schmancy-tree-item loading>Loading...</schmancy-tree-item>
+    `}
+  </schmancy-tree-item>
+</schmancy-tree>
+
+// Handling toggle for lazy loading
+async function handleToggle(e) {
+  const { value, expanded } = e.detail;
+  
+  if (expanded && !loadedChildren[value]) {
+    // Mark item as loading
+    loadingItems = [...loadingItems, value];
+    
+    // Load children
+    const children = await fetchChildren(value);
+    
+    // Update loaded children
+    loadedChildren = {
+      ...loadedChildren,
+      [value]: children
+    };
+    
+    // Remove from loading items
+    loadingItems = loadingItems.filter(id => id !== value);
+  }
+}
+```