canvasframework 0.3.14 → 0.3.16

package/components/TextField.js

@@ -1,331 +1,151 @@
-import Component from '../core/Component.js';
-/**
- * Champ de texte avancé avec label flottant, validation et messages d'erreur
- * @class
- * @extends Component
- * @param {Framework} framework - Instance du framework
- * @param {Object} [options={}] - Options de configuration
- * @param {string} [options.label=''] - Label du champ
- * @param {string} [options.value=''] - Valeur initiale
- * @param {string} [options.placeholder=''] - Placeholder
- * @param {string} [options.helperText=''] - Texte d'aide
- * @param {string} [options.errorText=''] - Texte d'erreur
- * @param {boolean} [options.error=false] - État d'erreur
- * @param {number} [options.fontSize=16] - Taille de police
- * @param {Function} [options.onChange] - Callback lors du changement
- * @param {number} [options.height=80] - Hauteur totale (inclut label + input + helper)
- * @example
- * const textField = new TextField(framework, {
- *   label: 'Email',
- *   placeholder: 'Entrez votre email',
- *   helperText: 'Nous ne partagerons jamais votre email',
- *   onChange: (value) => validateEmail(value)
- * });
- */
-class TextField extends Component {
-  /**
-   * @constructs TextField
-   */
+import Input from './Input.js';
+
+class TextField extends Input {
   constructor(framework, options = {}) {
     super(framework, options);
-    /** @type {string} */
+
     this.label = options.label || '';
-    /** @type {string} */
-    this.value = options.value || '';
-    /** @type {string} */
-    this.placeholder = options.placeholder || '';
-    /** @type {string} */
     this.helperText = options.helperText || '';
-    /** @type {string} */
     this.errorText = options.errorText || '';
-    /** @type {boolean} */
     this.error = options.error || false;
-    /** @type {string} */
-    this.platform = framework.platform;
-    /** @type {boolean} */
-    this.focused = false;
-    /** @type {number} */
-    this.fontSize = options.fontSize || 16;
-    /** @type {Function|undefined} */
-    this.onChange = options.onChange;
-    /** @type {number} */
-    this.labelY = this.value ? -10 : 20; // Position du label
-    /** @type {number} */
-    this.labelFontSize = this.value ? 12 : 16;
-    /** @type {boolean} */
-    this.cursorVisible = true;
-    
-    // Hauteur pour inclure label + input + helper
-    this.height = options.height || 80;
-    
-    this.onFocus = this.handleFocus.bind(this);
-    this.onBlur = this.handleBlur.bind(this);
-    
-    this.setupHiddenInput();
-    
-    // Animation du curseur
-    /** @type {number} */
-    this.cursorInterval = setInterval(() => {
-      if (this.focused) this.cursorVisible = !this.cursorVisible;
-    }, 500);
-  }
-  
-  /**
-   * Configure l'input caché dans le DOM
-   * @private
-   */
-  setupHiddenInput() {
-    let hiddenInput = document.getElementById('hidden-textfield-input');
-    if (!hiddenInput) {
-      hiddenInput = document.createElement('input');
-      hiddenInput.id = 'hidden-textfield-input';
-      hiddenInput.type = 'text';
-      hiddenInput.style.position = 'fixed';
-      hiddenInput.style.opacity = '0';
-      hiddenInput.style.pointerEvents = 'none';
-      hiddenInput.style.top = '-100px';
-      document.body.appendChild(hiddenInput);
-      
-      hiddenInput.addEventListener('input', (e) => {
-        if (this.focused) {
-          this.value = e.target.value;
-          if (this.onChange) this.onChange(this.value);
-          this.animateLabel();
-        }
-      });
-      
-      hiddenInput.addEventListener('blur', () => {
-        this.handleBlur();
-      });
-    }
-    /** @type {HTMLInputElement} */
-    this.hiddenInput = hiddenInput;
+
+    // Label position (PLUS HAUT que placeholder)
+    this.labelRestY = 14;   // label quand vide / pas focus, légèrement au-dessus du placeholder
+	this.labelFloatY = 4;   // label flottant quand focus / value
+	this.labelY = this.value ? this.labelFloatY : this.labelRestY;
+	this.labelFontSize = this.value ? 12 : 16;
+
+   
+    this.labelRestSize = 15;
+    this.labelFontSize = this.value
+      ? this.labelFloatSize
+      : this.labelRestSize;
   }
-  
-  /**
-   * Anime le label (flottant)
-   * @private
-   */
+
   animateLabel() {
-    const shouldFloat = this.focused || this.value;
-    const targetY = shouldFloat ? -10 : 20;
-    const targetSize = shouldFloat ? 12 : 16;
-    
-    const animate = () => {
-      const diffY = targetY - this.labelY;
-      const diffSize = targetSize - this.labelFontSize;
-      
-      if (Math.abs(diffY) < 0.5 && Math.abs(diffSize) < 0.5) {
-        this.labelY = targetY;
-        this.labelFontSize = targetSize;
-        return;
-      }
-      
-      this.labelY += diffY * 0.2;
-      this.labelFontSize += diffSize * 0.2;
-      
-      requestAnimationFrame(animate);
-    };
-    
-    animate();
+    const float = this.focused || this.value;
+
+    this.labelY = float ? this.labelFloatY : this.labelRestY;
+    this.labelFontSize = float
+      ? this.labelFloatSize
+      : this.labelRestSize;
   }
-  
-  /**
-   * Gère le focus sur le champ
-   */
-  handleFocus() {
-    this.focused = true;
-    this.cursorVisible = true;
-    if (this.hiddenInput) {
-      this.hiddenInput.value = this.value;
-      const adjustedY = this.y + this.framework.scrollOffset;
-      this.hiddenInput.style.top = `${adjustedY}px`;
-      this.hiddenInput.focus();
-    }
+
+  onFocus() {
+    super.onFocus();
     this.animateLabel();
   }
-  
-  /**
-   * Gère la perte de focus
-   */
-  handleBlur() {
-    this.focused = false;
-    this.cursorVisible = false;
+
+  onBlur() {
+    super.onBlur();
     this.animateLabel();
   }
-  
-  /**
-   * Gère le clic sur le champ
-   */
-  onClick() {
-    this.handleFocus();
-  }
-  
-  /**
-   * Dessine le champ de texte
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
-   */
+
   draw(ctx) {
     ctx.save();
-    
-    const inputY = this.y + 30;
-    const inputHeight = 40;
-    
+
+    const inputY = this.y + 28;
+    const inputHeight = 42;
+
+    /* ================= MATERIAL ================= */
     if (this.platform === 'material') {
-      // Material Design TextField
-      
-      // Label flottant
-      const labelColor = this.error ? '#B00020' : 
-                        (this.focused ? '#6200EE' : '#757575');
-      ctx.fillStyle = labelColor;
+      // Label
+      ctx.fillStyle = this.error
+        ? '#B00020'
+        : this.focused
+        ? '#6200EE'
+        : '#757575';
+
       ctx.font = `${this.labelFontSize}px Roboto, sans-serif`;
-      ctx.textAlign = 'left';
-      ctx.textBaseline = 'middle';
-      ctx.fillText(this.label, this.x, this.y + 20 + this.labelY);
-      
-      // Ligne de soulignement
-      const lineColor = this.error ? '#B00020' : 
-                       (this.focused ? '#6200EE' : '#CCCCCC');
-      ctx.strokeStyle = lineColor;
+      ctx.textBaseline = 'top';
+      ctx.fillText(this.label, this.x, this.y + this.labelY);
+
+      // Ligne
+      ctx.strokeStyle = this.error
+        ? '#B00020'
+        : this.focused
+        ? '#6200EE'
+        : '#CCCCCC';
+
       ctx.lineWidth = this.focused ? 2 : 1;
       ctx.beginPath();
       ctx.moveTo(this.x, inputY + inputHeight);
       ctx.lineTo(this.x + this.width, inputY + inputHeight);
       ctx.stroke();
-      
-      // Valeur ou placeholder
-      const displayText = this.value || (this.focused ? '' : this.placeholder);
-      ctx.fillStyle = this.value ? '#000000' : '#999999';
+
+      // Texte / placeholder
+      const showPlaceholder = !this.value && !this.focused;
+      ctx.fillStyle = showPlaceholder ? '#9E9E9E' : '#000';
       ctx.font = `${this.fontSize}px Roboto, sans-serif`;
       ctx.textBaseline = 'middle';
-      ctx.fillText(displayText, this.x, inputY + inputHeight / 2);
-      
+
+      ctx.fillText(
+        showPlaceholder ? this.placeholder : this.value,
+        this.x,
+        inputY + inputHeight / 2
+      );
+
       // Curseur
       if (this.focused && this.cursorVisible) {
-        const textWidth = ctx.measureText(this.value).width;
+        const w = ctx.measureText(this.value).width;
         ctx.fillStyle = '#6200EE';
-        ctx.fillRect(this.x + textWidth + 2, inputY + 10, 2, inputHeight - 20);
-      }
-      
-      // Helper text ou error text
-      const helperColor = this.error ? '#B00020' : '#757575';
-      const helperMessage = this.error ? this.errorText : this.helperText;
-      
-      if (helperMessage) {
-        ctx.fillStyle = helperColor;
-        ctx.font = '12px Roboto, sans-serif';
-        ctx.fillText(helperMessage, this.x, inputY + inputHeight + 20);
-      }
-      
-    } else {
-      // Cupertino style (label au-dessus)
-      
-      if (this.label) {
-        ctx.fillStyle = '#000000';
-        ctx.font = 'bold 14px -apple-system, sans-serif';
-        ctx.textAlign = 'left';
-        ctx.textBaseline = 'top';
-        ctx.fillText(this.label, this.x, this.y);
+        ctx.fillRect(this.x + w + 2, inputY + 10, 2, inputHeight - 20);
       }
-      
-      // Input box
-      ctx.strokeStyle = this.error ? '#FF3B30' : 
-                       (this.focused ? '#007AFF' : '#C7C7CC');
+    }
+
+    /* ================= CUPERTINO ================= */
+    else {
+      // Label (toujours visible)
+      ctx.fillStyle = '#6D6D72';
+      ctx.font = '12px -apple-system, sans-serif';
+      ctx.textBaseline = 'top';
+      ctx.fillText(this.label, this.x, this.y);
+
+      // Box
+      ctx.strokeStyle = this.error
+        ? '#FF3B30'
+        : this.focused
+        ? '#007AFF'
+        : '#C7C7CC';
+
       ctx.lineWidth = 1;
       ctx.beginPath();
-      this.roundRect(ctx, this.x, inputY, this.width, inputHeight, 8);
+      this.roundRect(
+        ctx,
+        this.x,
+        inputY,
+        this.width,
+        inputHeight,
+        10
+      );
       ctx.stroke();
-      
-      // Valeur ou placeholder
-      const displayText = this.value || this.placeholder;
-      ctx.fillStyle = this.value ? '#000000' : '#999999';
+
+      // Texte / placeholder
+      ctx.fillStyle = this.value ? '#000' : '#8E8E93';
       ctx.font = `${this.fontSize}px -apple-system, sans-serif`;
-      ctx.textAlign = 'left';
       ctx.textBaseline = 'middle';
-      ctx.fillText(displayText, this.x + 10, inputY + inputHeight / 2);
-      
+
+      ctx.fillText(
+        this.value || this.placeholder,
+        this.x + 12,
+        inputY + inputHeight / 2
+      );
+
       // Curseur
       if (this.focused && this.cursorVisible) {
-        const textWidth = ctx.measureText(this.value).width;
+        const w = ctx.measureText(this.value).width;
         ctx.fillStyle = '#007AFF';
-        ctx.fillRect(this.x + 10 + textWidth + 2, inputY + 10, 2, inputHeight - 20);
-      }
-      
-      // Helper/Error text
-      if (this.error && this.errorText) {
-        ctx.fillStyle = '#FF3B30';
-        ctx.font = '12px -apple-system, sans-serif';
-        ctx.fillText(this.errorText, this.x, inputY + inputHeight + 8);
-      } else if (this.helperText) {
-        ctx.fillStyle = '#8E8E93';
-        ctx.font = '12px -apple-system, sans-serif';
-        ctx.fillText(this.helperText, this.x, inputY + inputHeight + 8);
+        ctx.fillRect(
+          this.x + 12 + w + 2,
+          inputY + 10,
+          2,
+          inputHeight - 20
+        );
       }
     }
-    
+
     ctx.restore();
   }
-  
-  /**
-   * Dessine un rectangle avec des coins arrondis
-   * @param {CanvasRenderingContext2D} ctx - Contexte de dessin
-   * @param {number} x - Position X
-   * @param {number} y - Position Y
-   * @param {number} width - Largeur
-   * @param {number} height - Hauteur
-   * @param {number} radius - Rayon des coins
-   * @private
-   */
-  roundRect(ctx, x, y, width, height, radius) {
-    ctx.beginPath();
-    ctx.moveTo(x + radius, y);
-    ctx.lineTo(x + width - radius, y);
-    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
-    ctx.lineTo(x + width, y + height - radius);
-    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
-    ctx.lineTo(x + radius, y + height);
-    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
-    ctx.lineTo(x, y + radius);
-    ctx.quadraticCurveTo(x, y, x + radius, y);
-    ctx.closePath();
-  }
-  
-  /**
-   * Vérifie si un point est à l'intérieur du composant
-   * @param {number} x - Position X
-   * @param {number} y - Position Y
-   * @returns {boolean} True si le point est à l'intérieur
-   */
-  isPointInside(x, y) {
-      return x >= this.x && x <= this.x + this.width && 
-             y >= this.y && y <= this.y + this.height;
-  }
-  
-  /**
-   * Définit une erreur sur le champ
-   * @param {string} errorText - Texte d'erreur à afficher
-   */
-  setError(errorText) {
-    this.error = true;
-    this.errorText = errorText;
-  }
-  
-  /**
-   * Efface l'erreur du champ
-   */
-  clearError() {
-    this.error = false;
-    this.errorText = '';
-  }
-  
-  /**
-   * Nettoie les ressources (arrête l'animation du curseur)
-   */
-  destroy() {
-    if (this.cursorInterval) {
-      clearInterval(this.cursorInterval);
-    }
-  }
 }
 
-export default TextField;
+export default TextField;

package/core/CanvasFramework.js

@@ -66,6 +66,7 @@ import FetchClient from '../utils/FetchClient.js';
 import GeoLocationService from '../utils/GeoLocationService.js';
 import WebSocketClient from '../utils/WebSocketClient.js';
 import AnimationEngine from '../utils/AnimationEngine.js';
+import CryptoManager from '../utils/CryptoManager.js';
 
 // Features
 import PullToRefresh from '../features/PullToRefresh.js';
@@ -825,6 +826,7 @@ class CanvasFramework {
              comp instanceof Dialog ||
              comp instanceof Modal ||
 			 comp instanceof FAB ||
+			 comp instanceof Toast ||
              comp instanceof BottomSheet ||
              comp instanceof ContextMenu ||
 			 comp instanceof OpenStreetMap ||
@@ -1255,6 +1257,7 @@ class CanvasFramework {
            comp instanceof Dialog ||
            comp instanceof Modal ||
            comp instanceof FAB ||
+		   comp instanceof Toast ||
 		   comp instanceof BottomSheet ||
            comp instanceof ContextMenu ||
 		   comp instanceof OpenStreetMap ||
@@ -1274,10 +1277,3 @@ class CanvasFramework {
 }
 
 export default CanvasFramework;
-
-
-
-
-
-
-

package/core/Component.js

@@ -46,8 +46,98 @@ class Component {
 
     // Pour détecter les updates
     this._prevProps = { ...options };
+	
+	// Système de listeners
+    this._listeners = new Map();
   }
 
+  /**
+   * Ajoute un listener pour un événement
+   * @param {string} event - Nom de l'événement
+   * @param {Function} handler - Fonction callback
+   * @returns {Component} - Pour le chaînage
+   */
+  on(event, handler) {
+    if (!this._listeners.has(event)) {
+      this._listeners.set(event, []);
+    }
+    this._listeners.get(event).push(handler);
+    return this;
+  }
+
+  /**
+   * Retire un listener
+   * @param {string} event - Nom de l'événement
+   * @param {Function} handler - Fonction à retirer
+   * @returns {Component}
+   */
+  off(event, handler) {
+    if (!this._listeners.has(event)) return this;
+    
+    const handlers = this._listeners.get(event);
+    const index = handlers.indexOf(handler);
+    if (index > -1) {
+      handlers.splice(index, 1);
+    }
+    return this;
+  }
+
+  /**
+   * Ajoute un listener qui s'exécute une seule fois
+   * @param {string} event - Nom de l'événement
+   * @param {Function} handler - Fonction callback
+   * @returns {Component}
+   */
+  once(event, handler) {
+    const wrapper = (...args) => {
+      handler(...args);
+      this.off(event, wrapper);
+    };
+    return this.on(event, wrapper);
+  }
+
+  /**
+   * Émet un événement
+   * @param {string} event - Nom de l'événement
+   * @param {...any} args - Arguments à passer aux handlers
+   * @returns {Component}
+   */
+  emit(event, ...args) {
+    if (!this._listeners.has(event)) return this;
+    
+    const handlers = this._listeners.get(event);
+    for (let handler of handlers) {
+      try {
+        handler(...args);
+      } catch (error) {
+        console.error(`Error in ${event} handler:`, error);
+      }
+    }
+    return this;
+  }
+
+  /**
+   * Retire tous les listeners d'un événement (ou tous)
+   * @param {string} [event] - Nom de l'événement (optionnel)
+   * @returns {Component}
+   */
+  removeAllListeners(event) {
+    if (event) {
+      this._listeners.delete(event);
+    } else {
+      this._listeners.clear();
+    }
+    return this;
+  }
+
+  /**
+   * Retourne le nombre de listeners pour un événement
+   * @param {string} event - Nom de l'événement
+   * @returns {number}
+   */
+  listenerCount(event) {
+    return this._listeners.has(event) ? this._listeners.get(event).length : 0;
+  }	
   /* =======================
      LIFECYCLE HOOKS
      ======================= */

package/index.js

@@ -74,6 +74,7 @@ export { default as FetchClient } from './utils/FetchClient.js';
 export { default as GeoLocationService } from './utils/GeoLocationService.js';
 export { default as WebSocketClient } from './utils/WebSocketClient.js';
 export { default as AnimationEngine } from './utils/AnimationEngine.js';
+export { default as CryptoManager } from './utils/CryptoManager.js';
 
 // Features
 export { default as PullToRefresh } from './features/PullToRefresh.js';
@@ -97,7 +98,7 @@ export { default as FeatureFlags } from './manager/FeatureFlags.js';
 
 // Version du framework
 
-export const VERSION = '0.3.10';
+export const VERSION = '0.3.16';
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasframework",
-  "version": "0.3.14",
+  "version": "0.3.16",
   "description": "Canvas-based cross-platform UI framework (Material & Cupertino)",
   "type": "module",
   "main": "./index.js",