diff --git a/PROJECT_NOTES.md b/PROJECT_NOTES.md index 9674885..b11c2aa 100644 --- a/PROJECT_NOTES.md +++ b/PROJECT_NOTES.md @@ -199,8 +199,15 @@ - `GNexusUIKit.Drawer` - `GNexusUIKit.Overlays` - `GNexusUIKit.InputPatterns` +- `GNexusUIKit.Accordion` -`Overlays.init()` и `InputPatterns.init()` запускаются автоматически на `DOMContentLoaded`. +`Overlays.init()`, `InputPatterns.init()` и `Accordion.init()` запускаются автоматически на `DOMContentLoaded`. + +Добавлена секция Utilities: + +- `demo/partials/utilities.html` +- spacing scale `$space-0` ... `$space-12` +- utility-классы для margin/padding/gap, grid/flex alignment, display, width/overflow и text helpers ## Запланированные компоненты diff --git a/README.md b/README.md index d301f2d..1c201f6 100644 --- a/README.md +++ b/README.md @@ -113,9 +113,10 @@ GNexusUIKit.Drawer GNexusUIKit.Overlays GNexusUIKit.InputPatterns +GNexusUIKit.Accordion ``` -`Overlays.init()` и `InputPatterns.init()` запускаются автоматически на `DOMContentLoaded`. +`Overlays.init()`, `InputPatterns.init()` и `Accordion.init()` запускаются автоматически на `DOMContentLoaded`. ## Компоненты @@ -125,6 +126,7 @@ - Palette - Buttons - Forms +- Utilities - Editable String - Navigation & Overlays - Lists @@ -159,6 +161,16 @@ JS-модуль: `src/js/components/overlays.js`. +### Utilities + +Секция включает: + +- Spacing scale: `$space-0` ... `$space-12`. +- Margin utilities: `m-*`, `mt-*`, `mr-*`, `mb-*`, `ml-*`, `mx-*`, `my-*`. +- Padding utilities: `p-*`, `pt-*`, `pr-*`, `pb-*`, `pl-*`, `px-*`, `py-*`. +- Gap utilities: `g-*`, `gx-*`, `gy-*`. +- Layout/display/text helpers: `grid-*`, `row`, `column`, `items-*`, `justify-*`, `d-*`, `text-*`. + ### Data Patterns Секция включает: @@ -208,6 +220,8 @@ - Accordion: группы на native `
` / ``. - Disclosure: компактная одиночная раскрываемая группа. +JS-модуль: `src/js/components/accordion.js` добавляет управляемую анимацию раскрытия. + ### Drawer и Confirm Dialog Секции включают: diff --git a/src/js/components/accordion.js b/src/js/components/accordion.js index e2a24b7..0a3b610 100644 --- a/src/js/components/accordion.js +++ b/src/js/components/accordion.js @@ -35,14 +35,17 @@ panel.style.transform = "translateY(0)"; }); - panel.addEventListener("transitionend", event => { + const handleTransitionEnd = event => { if(event.propertyName !== "height") { return; } + panel.removeEventListener("transitionend", handleTransitionEnd); panel.style.height = "auto"; delete details.dataset.animating; - }, { once: true }); + }; + + panel.addEventListener("transitionend", handleTransitionEnd); } function collapse(details) { @@ -63,17 +66,20 @@ panel.style.transform = "translateY(-8px)"; }); - panel.addEventListener("transitionend", event => { + const handleTransitionEnd = event => { if(event.propertyName !== "height") { return; } + panel.removeEventListener("transitionend", handleTransitionEnd); details.open = false; panel.style.height = ""; panel.style.opacity = ""; panel.style.transform = ""; delete details.dataset.animating; - }, { once: true }); + }; + + panel.addEventListener("transitionend", handleTransitionEnd); } function toggle(details) {