# CoconutJS A collection of vanilla JavaScript Web Components for building application UIs. Built on the native Web Components (Custom Elements) standard, CoconutJS lets you build clean, reusable interfaces with plain JavaScript — no framework, no build step, and a single script tag to get started. ## Installation The package is **browser-only**. It ships prebuilt files in `dist/` that you reference directly in your HTML (or bundle yourself); there is no Node.js/server API. ### CDN (recommended — no install required) ```html ``` ### npm For bundler users or to vendor the files locally: ```bash npm install @nuvemx/coconutjs ``` Then reference the built outputs from `node_modules/@nuvemx/coconutjs/dist/` (`index.js` is the ESM bundle, `index.umd.js` is the UMD bundle): ```html ``` Importing `@nuvemx/coconutjs` is a side-effect module: it automatically registers all components with the browser's Custom Elements API (no named exports needed). ## Dependencies The components use Bootstrap 5 component/utility classes (`btn`, `alert`, `table`, `col-md-4`, `form-control`, …) and Boxicons `bx-*` icons. The menu navigation uses jQuery for page switching. Load all of them alongside CoconutJS (as the demo does): ```html ``` The Nunito font (referenced by the bundled CSS) can be loaded from [Google Fonts](https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap). ## Quick Start The simplest way to get started — a header, a sidebar menu, a page, and a footer: ```html My CoconutJS App

Hello, CoconutJS!

Welcome to your first CoconutJS page.

About

Built with CoconutJS Web Components. Home About ``` ## Prevent Flash of Unstyled Content Add this to your `` to hide page elements before their definitions are loaded: ```html ``` ## Components Importing `@nuvemx/coconutjs` registers all components automatically; you can then use them in your HTML. ### Layout | Component | Tag | Description | Key attributes | |-----------|-----|-------------|----------------| | `application-header` | `` | Top header bar with toggle button and logo | `logo-image` | | `application-main` | `` | Wraps content in the main content area | — | | `application-menu` | `` | Collapsible sidebar navigation | `label` | | `application-menu-option` | `` | Menu navigation item; shows its `pageId` page on click | `label`, `pageId`, `icon`, `status` | | `application-page` | `` | Page content wrapper toggled by the menu | `pageId`, `display` | | `application-footer` | `` | Footer with brand, nav links, social icons, and copyright | `brand`, `brand-description`, `copyright`, `year`, `logo` | | `layout-grid` | `` | Centered gallery grid of items with click-to-open modal | (reads `data-name`/`data-description` from children) | ### Display | Component | Tag | Description | Key attributes | |-----------|-----|-------------|----------------| | `display-note` | `` | Informational alert box | `title` | | `display-warning` | `` | Warning alert box | `title` | | `display-paragraph` | `` | Styled paragraph text | `size` (`sm`/`md`/`lg`), `muted` | | `display-link` | `` | Styled anchor link, optionally with icon | `href`, `target`, `icon` | | `display-cta` | `` | Call-to-action button | `title`, `url`, `variant` | | `display-image` | `` | Responsive figure with optional caption | `src`, `alt`, `caption`, `width`, `height` | | `display-collapsible` | `` | Click-to-toggle collapsible section | `title`, `icon` | | `display-table` | `` | Table from `columns`/`rows` JSON, or wraps a slot table | `columns`, `rows`, `striped`, `hover`, `bordered`, `sm` | | `display-code` | `` | Code block with copy-to-clipboard button | `language` | ### Inputs & Forms | Component | Tag | Description | Key attributes | |-----------|-----|-------------|----------------| | `input-checkbox-field` | `` | Checkbox with label | `label`, `value` | | `input-number-field` | `` | Number input with validation | `label`, `value`, `min`, `max`, `step`, `placeholder`, `required` | | `input-textarea-field` | `` | Multi-line text input | `label`, `value`, `placeholder`, `rows`, `cols` | ## License MIT