# JavaScript API

`dist/js/gnexus-ui-kit.js` публикует API двумя способами:

```js
Toasts.createSuccess("Saved", "Changes applied").show();
GNexusUIKit.Toasts.createInfo("Info", "Message").show();
```

## Namespace

```text
GNexusUIKit.Helper
GNexusUIKit.Toasts
GNexusUIKit.Modals
GNexusUIKit.advancedSelect
GNexusUIKit.editableString
GNexusUIKit.confirmPopup
GNexusUIKit.Drawer
GNexusUIKit.NavigationShell
GNexusUIKit.Overlays
GNexusUIKit.InputPatterns
GNexusUIKit.Accordion
```

## Auto init

На `DOMContentLoaded` автоматически запускаются:

```js
Overlays.init();
NavigationShell.init();
InputPatterns.init();
Accordion.init();
```

Если вы динамически вставляете HTML после загрузки страницы, можно повторно вызвать init для root-элемента:

```js
GNexusUIKit.NavigationShell.init(document.querySelector("#dynamic-root"));
GNexusUIKit.InputPatterns.init(document.querySelector("#dynamic-root"));
GNexusUIKit.Accordion.init(document.querySelector("#dynamic-root"));
```

Модули защищены от повторной инициализации одного и того же root.

## Data attributes

Компоненты используют declarative attributes:

- `data-navigation-toggle`
- `data-navigation-drawer`
- `data-navigation-close`
- `data-navigation-link`
- `data-dropdown-toggle`
- `data-popover-toggle`
- `data-tooltip-toggle`
- `data-input-clear`
- `data-file-upload-input`
- `data-file-upload-preview`
- `data-date-picker`

## Programmatic components

Некоторые компоненты создаются через JS:

```js
const drawer = GNexusUIKit.Drawer.create("details-drawer", {
  title: "Details",
  bodyText: "Drawer content",
  position: "left"
});

drawer.show();
```

```js
const modal = GNexusUIKit.Modals.create("edit-modal", {
  title: "Edit",
  bodyText: "Modal content"
});

modal.show();
```

```js
GNexusUIKit.Toasts.createSuccess("Saved", "Changes applied").show();
```