@ptlm-azulejo/action-list-box 0.0.1-alpha.98
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/README.md +142 -0
- package/dist/index.js +3344 -0
- package/dist/index.umd.cjs +1 -0
- package/dist/packages/ActionListBox/index.d.ts +3 -0
- package/dist/packages/ActionListBox/index.d.ts.map +1 -0
- package/dist/packages/ActionListBox/src/index.vue.d.ts +153 -0
- package/dist/packages/ActionListBox/src/index.vue.d.ts.map +1 -0
- package/dist/style.css +1 -0
- package/package.json +46 -0
package/CHANGELOG.md
ADDED
package/README.md
ADDED
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
# ActionListBox
|
|
2
|
+
|
|
3
|
+
An Action List Box shows a menu of actions next to a trigger (button, icon, or other activator). Use it for contextual menus — edit, share, delete — that open on click or hover.
|
|
4
|
+
|
|
5
|
+
Also known as **action menu**, **context menu**, or **listbox actions**.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
Install the component, the theme package, and **the font package matching your
|
|
10
|
+
project's brand**:
|
|
11
|
+
|
|
12
|
+
**Leroy Merlin projects**
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install @ptlm-azulejo/action-list-box @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
|
|
16
|
+
# or
|
|
17
|
+
yarn add @ptlm-azulejo/action-list-box @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
**Adeo projects**
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm install @ptlm-azulejo/action-list-box @ptlm-azulejo/themes @ptlm-azulejo/fonts-adeo
|
|
24
|
+
# or
|
|
25
|
+
yarn add @ptlm-azulejo/action-list-box @ptlm-azulejo/themes @ptlm-azulejo/fonts-adeo
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Styles & theming
|
|
29
|
+
|
|
30
|
+
The component ships no colors or typeface of its own — it reads design tokens from
|
|
31
|
+
CSS variables at runtime. Those tokens come from `@ptlm-azulejo/themes`, and **the
|
|
32
|
+
brand is selected by a class on your app's `<html>` element**, so switching brand
|
|
33
|
+
never touches component code.
|
|
34
|
+
|
|
35
|
+
| Project | Preset stylesheet | Root class | Typeface | Font package |
|
|
36
|
+
| --- | --- | --- | --- | --- |
|
|
37
|
+
| Leroy Merlin | `@ptlm-azulejo/themes/presets/leroy-merlin.css` | `preset-lm` | LeroyMerlinSans | `@ptlm-azulejo/fonts-leroy-merlin` |
|
|
38
|
+
| Adeo | `@ptlm-azulejo/themes/presets/adeo.css` | `preset-adeo` | Roboto | `@ptlm-azulejo/fonts-adeo` |
|
|
39
|
+
|
|
40
|
+
**Leroy Merlin projects**
|
|
41
|
+
|
|
42
|
+
```js
|
|
43
|
+
import '@ptlm-azulejo/themes/presets/leroy-merlin.css'
|
|
44
|
+
import '@ptlm-azulejo/fonts-leroy-merlin'
|
|
45
|
+
import '@ptlm-azulejo/action-list-box/style.css'
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<html lang="pt" class="preset-lm">
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
**Adeo projects**
|
|
53
|
+
|
|
54
|
+
```js
|
|
55
|
+
import '@ptlm-azulejo/themes/presets/adeo.css'
|
|
56
|
+
import '@ptlm-azulejo/fonts-adeo'
|
|
57
|
+
import '@ptlm-azulejo/action-list-box/style.css'
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
```html
|
|
61
|
+
<html lang="pt" class="preset-adeo">
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
> The preset class is what resolves the brand at runtime. Without it — even with the
|
|
65
|
+
> stylesheets imported — the component renders uncolored and in a fallback typeface.
|
|
66
|
+
|
|
67
|
+
### Light and dark mode
|
|
68
|
+
|
|
69
|
+
Add `data-theme` alongside the brand class to pin the color scheme. Leave it off and the
|
|
70
|
+
preset follows the OS `prefers-color-scheme`:
|
|
71
|
+
|
|
72
|
+
```html
|
|
73
|
+
<html lang="pt" class="preset-lm" data-theme="dark">
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### Why the font package is separate
|
|
77
|
+
|
|
78
|
+
The preset only **names** its typeface in `--font-family` and ships no font files, as
|
|
79
|
+
with upstream Mozaic — loading them is your app's job. Without the matching font
|
|
80
|
+
package, `font-sans` falls back to a generic sans-serif.
|
|
81
|
+
|
|
82
|
+
## Props
|
|
83
|
+
|
|
84
|
+
| Prop | Type | Default | Description |
|
|
85
|
+
| --- | --- | --- | --- |
|
|
86
|
+
| `title` | `string` | — | Title displayed in the mobile version (header + close). |
|
|
87
|
+
| `items` | `ActionListBoxItem[]` | — | **Required.** Items that generate the listbox content. |
|
|
88
|
+
| `position` | `'left' \| 'right' \| 'right-top' \| 'bottom' \| 'bottom-up' \| 'top'` | `'bottom'` | Position relative to the activator. `bottom-up` opens above; `right-top` opens to the right and grows upward. |
|
|
89
|
+
| `trigger` | `'click' \| 'hover'` | `'click'` | How the panel opens. |
|
|
90
|
+
| `ui` | `ActionListBoxUi` | `{}` | Tailwind class overrides per structural part. |
|
|
91
|
+
| `ariaLabel` | `string` | — | Accessible name for the menu when no visible title is present. |
|
|
92
|
+
|
|
93
|
+
### `ActionListBoxItem`
|
|
94
|
+
|
|
95
|
+
```ts
|
|
96
|
+
{
|
|
97
|
+
id?: string
|
|
98
|
+
icon?: Component
|
|
99
|
+
label: string
|
|
100
|
+
disabled?: boolean
|
|
101
|
+
appearance?: 'standard' | 'danger'
|
|
102
|
+
divider?: boolean
|
|
103
|
+
}
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
## Events
|
|
107
|
+
|
|
108
|
+
| Event | Payload | Description |
|
|
109
|
+
| --- | --- | --- |
|
|
110
|
+
| `close` | — | Emitted when the mobile close button is clicked. |
|
|
111
|
+
| `action` | `string \| number` | Emitted when an item is clicked (`id` or index). |
|
|
112
|
+
|
|
113
|
+
## Slots
|
|
114
|
+
|
|
115
|
+
| Slot | Props | Description |
|
|
116
|
+
| --- | --- | --- |
|
|
117
|
+
| `activator` | `{ open, toggle, close }` | Activator element that triggers the listbox. |
|
|
118
|
+
|
|
119
|
+
## Basic usage
|
|
120
|
+
|
|
121
|
+
```vue
|
|
122
|
+
<script setup>
|
|
123
|
+
import { AzActionListBox } from '@ptlm-azulejo/action-list-box'
|
|
124
|
+
|
|
125
|
+
const items = [
|
|
126
|
+
{ id: 'edit', label: 'Edit' },
|
|
127
|
+
{ id: 'delete', label: 'Delete', appearance: 'danger' },
|
|
128
|
+
]
|
|
129
|
+
|
|
130
|
+
const onAction = (value) => {
|
|
131
|
+
console.log('action', value)
|
|
132
|
+
}
|
|
133
|
+
</script>
|
|
134
|
+
|
|
135
|
+
<template>
|
|
136
|
+
<AzActionListBox :items="items" position="bottom" trigger="click" @action="onAction">
|
|
137
|
+
<template #activator>
|
|
138
|
+
<button type="button">Actions</button>
|
|
139
|
+
</template>
|
|
140
|
+
</AzActionListBox>
|
|
141
|
+
</template>
|
|
142
|
+
```
|