hexagone-frontend

What this skill does

# Hexagone Frontend Documentation -- Navigation Skill

This skill gives you access to the **Hexagone frontend component documentation** (`@his/hexa-components`) published as GitLab Pages. Your role is to **fetch and read the relevant documentation files** when answering questions about Hexagone frontend components, patterns, and conventions.

## What is Hexagone frontend documentation

The Hexagone frontend is built with **Vue.js 2** using a custom component library (`@his/hexa-components`) with **beta-scss** utility classes and **Vuex with vuex-pathify** for state management. The documentation site is published at:

```
https://erp-pas.gitlab-pages-erp-pas.dedalus.lan/hexagone/frontend/hexagone-documentation
```

The site is a single-page application (SPA) and cannot be fetched directly. Instead, use the **raw markdown files** from the GitLab repository, which are specifically optimized for LLM consumption.

**When to use this skill:**
- The user asks about a Hexagone UI component (`<btn>`, `<multiselect>`, `<data-table>`, etc.)
- The user needs props, events, or usage examples for a Hexagone component
- The user asks about beta-scss CSS utility classes (`flex:6/12`, `p:1`, `m:1`, etc.)
- The user asks about the Vuex store modules (user, session, environment, navigation, etc.)
- The user asks about the API utility (`Api()`, `StandardApi()`)
- The user asks about custom directives (`v-focus`, `v-uppercase`)
- The user asks about form validation rules or form patterns in Hexagone
- The user is building or modifying a Hexagone Web frontend view/space
- Any question mentioning "Hexagone" combined with "component", "composant", "frontend", "Vue", "template", "formulaire", or "interface"

## Critical conventions

> **IMPORTANT**: Hexagone uses custom tag names. NEVER use standard HTML tags for these components.

| Standard HTML | Hexagone equivalent | Doc file |
|---------------|---------------------|----------|
| `<button>` | `<btn>` | `components/button.md` |
| `<select>` | `<multiselect>` | `components/select.md` |
| `<table>` | `<data-table>` | `components/datatable.md` |
| `<input type="checkbox">` | `<checkbox>` | `components/checkbox.md` |

**Key rules:**
- All components are **globally registered** -- no import needed in templates
- Form fields must be wrapped in `<div class="input-field"><label for="id">Label</label><!-- component --></div>`
- Use **beta-scss** utility classes: `flex`, `flex:wrap`, `flex:6/12`, `p:1`, `m:1`, etc.
- Store access via **vuex-pathify**: `this.$store.get('module/path')` and `this.$store.set('module/path', value)`
- Library: `@his/hexa-components`, Framework: Vue.js 2

## Documentation catalog

The raw files are available at:

```
BASE_RAW_URL = https://gitlab-erp-pas.dedalus.lan/erp-pas/hexagone/frontend/hexagone-documentation/-/raw/master/docs/llm/
```

### Components (36 components)

#### Forms and input

| Component | Tag | File path |
|-----------|-----|-----------|
| Input | `<input>` + wrapper | `components/input.md` |
| Textarea | `<textarea>` + wrapper | `components/textarea.md` |
| Number | `<number>` | `components/number.md` |
| Currency | `<currency>` | `components/currency.md` |
| Select | `<multiselect>` | `components/select.md` |
| Autocomplete | `<autocomplete>` | `components/autocomplete.md` |
| Checkbox | `<checkbox>` | `components/checkbox.md` |
| Radio | `<radio>` | `components/radio.md` |
| ButtonSwitch | `<btn-switch>` | `components/button-switch.md` |
| Datepicker | `<datepicker>` | `components/datepicker.md` |
| Timepicker | `<timepicker>` | `components/timepicker.md` |
| Colorpicker | `<colorpicker>` | `components/colorpicker.md` |
| File | `<file>` | `components/file.md` |
| Iban | `<iban>` | `components/iban.md` |
| Bic | `<bic>` | `components/bic.md` |
| Radical | `<radical>` | `components/radical.md` |

#### Navigation and actions

| Component | Tag | File path |
|-----------|-----|-----------|
| Button | `<btn>` | `components/button.md` |
| ButtonGroup | `<btn-group>` | `components/button-group.md` |
| FloatingButton | `<floating-btn>` | `components/floating-button.md` |
| Action | `<action>` | `components/action.md` |
| Link | `<link>` | `components/link.md` |
| Bookmark | `<bookmark>` | `components/bookmark.md` |
| Tabs | `<tabs>` | `components/tabs.md` |
| Steps | `<steps>` | `components/steps.md` |

#### Data display

| Component | Tag | File path |
|-----------|-----|-----------|
| DataTable | `<data-table>` | `components/datatable.md` |
| SimpleTable | `<simple-table>` | `components/simple-table.md` |
| Card | `<card>` | `components/card.md` |
| ProgressBar | `<progress-bar>` | `components/progress-bar.md` |

#### User feedback

| Component | Tag | File path |
|-----------|-----|-----------|
| Alert | `<alert>` | `components/alert.md` |
| Modal | `<modal>` | `components/modal.md` |
| Notification | `$notification()` | `components/notification.md` |
| Question | `<question>` | `components/question.md` |
| Tooltips | `<tooltips>` | `components/tooltips.md` |
| PostIt | `<post-it>` | `components/post-it.md` |
| Spinner | `<spinner>` | `components/spinner.md` |

#### Layout

| Component | Tag | File path |
|-----------|-----|-----------|
| Collapsible | `<collapsible>` | `components/collapsible.md` |

### Patterns

| Topic | File path | Description |
|-------|-----------|-------------|
| API utility | `patterns/api.md` | `Api(url, options)` and `StandardApi(USP)` for web service calls |
| Store (Vuex) | `patterns/store.md` | Vuex store with vuex-pathify, shared modules (user, session, etc.) |

### Reference

| Topic | File path | Description |
|-------|-----------|-------------|
| Directives | `reference/directives.md` | `v-uppercase`, `v-focus` custom directives |
| Events | `reference/events.md` | Mouse and keyboard event handling |
| Form rules | `reference/form-rules.md` | Validation rules, required fields, `@is-valid` pattern |

### Tag-to-file quick lookup

Use this table to quickly find which file to fetch when the user mentions a component tag:

| Tag pattern | File |
|-------------|------|
| `<btn>`, `button` | `components/button.md` |
| `<btn-group>` | `components/button-group.md` |
| `<btn-switch>` | `components/button-switch.md` |
| `<floating-btn>` | `components/floating-button.md` |
| `<multiselect>`, `select` | `components/select.md` |
| `<data-table>`, `datatable`, `table` | `components/datatable.md` |
| `<simple-table>` | `components/simple-table.md` |
| `<datepicker>`, `date` | `components/datepicker.md` |
| `<timepicker>`, `time`, `heure` | `components/timepicker.md` |
| `<checkbox>` | `components/checkbox.md` |
| `<radio>` | `components/radio.md` |
| `<autocomplete>` | `components/autocomplete.md` |
| `<modal>`, `modale` | `components/modal.md` |
| `<alert>`, `alerte` | `components/alert.md` |
| `<notification>`, `$notification` | `components/notification.md` |
| `<question>` | `components/question.md` |
| `<card>`, `carte` | `components/card.md` |
| `<collapsible>` | `components/collapsible.md` |
| `<tabs>`, `onglets` | `components/tabs.md` |
| `<steps>`, `etapes` | `components/steps.md` |
| `<spinner>`, `loading` | `components/spinner.md` |
| `<currency>`, `montant` | `components/currency.md` |
| `<iban>` | `components/iban.md` |
| `<bic>` | `components/bic.md` |
| `<number>`, `nombre` | `components/number.md` |
| `<input>`, `champ texte` | `components/input.md` |
| `<textarea>` | `components/textarea.md` |
| `<file>`, `upload` | `components/file.md` |
| `<radical>` | `components/radical.md` |
| `<colorpicker>`, `couleur` | `components/colorpicker.md` |
| `<action>` | `components/action.md` |
| `<link>`, `lien` | `components/link.md` |
| `<bookmark>`, `signet` | `components/bookmark.md` |
| `<post-it>` | `components/post-it.md` |
| `<progress-bar>` | `components/progress-bar.md` |
| `<tooltips>`, `infobulle` | `components/tooltips.md` |

## CSS utility classes (beta-scss)

These classes are available without any fetch -- use them directly:

| Class | Description