Add readme.md

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
+<div class="idm-quantity-picker">
+  <button class="idm-quantity-picker__button-minus">-</button>
+  <input type="number" class="idm-quantity-picker__input" value="1" min="1" max="10">
+  <button class="idm-quantity-picker__button-plus">+</button>
+</div>
+```
+
+> **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
+<div id="example-picker" class="idm-quantity-picker">
+  <button class="idm-quantity-picker__button-minus">-</button>
+  <input type="number" class="idm-quantity-picker__input" value="1" min="1" max="5">
+  <button class="idm-quantity-picker__button-plus">+</button>
+</div>
+
+<script src="IdmQuantityPicker.js"></script>
+<script>
+  const examplePicker = new IdmQuantityPicker({
+    ref: document.querySelector('#example-picker'),
+    min: 1,
+    max: 5
+  });
+
+</script>
+```
+
+## 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.