diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..6ff267f --- /dev/null +++ b/readme.md @@ -0,0 +1,88 @@ +# IdmQuantityPicker + +`IdmQuantityPicker` to lekka klasa JavaScript umożliwiająca stworzenie prostego komponentu do wybierania ilości (`quantity picker`) z przyciskami `+` i `-`, obsługująca minimalne i maksymalne wartości. + +## Funkcje + +* Obsługuje minimalną (`min`) i maksymalną (`max`) wartość. +* Automatycznie blokuje przyciski, gdy osiągnięto limit. +* Synchronizuje wartość w polu input z przyciskami. +* Łatwa integracja z istniejącym HTML-em. + +## Struktura HTML + +Twój komponent powinien wyglądać mniej więcej tak: + +```html +
+ + + +
+``` + +> **Uwaga:** Klasy w HTML są wymagane, aby skrypt mógł odnaleźć elementy. + +## Użycie + +### Inicjalizacja przez selektor CSS + +```javascript +const picker = new IdmQuantityPicker({ + selector: ".idm-quantity-picker", + min: 1, + max: 20 +}); +``` + +### Inicjalizacja przez referencję do elementu + +```javascript +const container = document.querySelector("#my-picker"); +const picker = new IdmQuantityPicker({ + ref: container, + min: 1, + max: 50 +}); +``` + +## API + +### Właściwości + +* `value` – obecna wartość (getter i setter) +* `min` – minimalna wartość +* `max` – maksymalna wartość + +### Metody + +* `handlePlus()` – zwiększa wartość o 1 +* `handleMinus()` – zmniejsza wartość o 1 +* `updateButtons()` – aktualizuje stan przycisków +* `updateInput()` – aktualizuje wartość w polu input + +## Przykład działania + +```html +
+ + + +
+ + + +``` + +## Uwagi +SIGMA +* Jeśli nie podasz `min` lub `max`, zostaną użyte wartości z atrybutów `input`. +* Przyciski zostaną automatycznie zablokowane, gdy osiągnięty zostanie limit minimalny lub maksymalny. +* Skrypt loguje błędy, jeśli nie znajdzie wymaganych elementów w kontenerze.