@ptlm-azulejo/drawer 0.0.1-alpha.107

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.
Files changed (10) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/README.md +147 -0
  3. package/dist/index.d.ts +3 -0
  4. package/dist/index.d.ts.map +1 -0
  5. package/dist/index.js +3291 -0
  6. package/dist/index.umd.cjs +1 -0
  7. package/dist/src/index.vue.d.ts +178 -0
  8. package/dist/src/index.vue.d.ts.map +1 -0
  9. package/dist/style.css +1 -0
  10. package/package.json +47 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,4 @@
1
+ # Change Log
2
+
3
+ All notable changes to this project will be documented in this file.
4
+ See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
package/README.md ADDED
@@ -0,0 +1,147 @@
1
+ # Drawer
2
+
3
+ A drawer is a sliding panel that appears from the side of the screen, providing additional content, settings, or actions without disrupting the main view. Also known as side panel, slide-over, or sheet.
4
+
5
+ ## Installation
6
+
7
+ Install the drawer, the theme package, and **the font package matching
8
+ your project's brand**:
9
+
10
+ **Leroy Merlin projects**
11
+
12
+ ```bash
13
+ npm install @ptlm-azulejo/drawer @ptlm-azulejo/button @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
14
+ # or
15
+ yarn add @ptlm-azulejo/drawer @ptlm-azulejo/button @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
16
+ ```
17
+
18
+ **Adeo projects**
19
+
20
+ ```bash
21
+ npm install @ptlm-azulejo/drawer @ptlm-azulejo/button @ptlm-azulejo/themes @ptlm-azulejo/fonts-adeo
22
+ # or
23
+ yarn add @ptlm-azulejo/drawer @ptlm-azulejo/button @ptlm-azulejo/themes @ptlm-azulejo/fonts-adeo
24
+ ```
25
+
26
+ ## Styles & theming
27
+
28
+ The component ships no colors or typeface of its own — it reads design tokens from
29
+ CSS variables at runtime. Those tokens come from `@ptlm-azulejo/themes`, and **the
30
+ brand is selected by a class on your app's `<html>` element**, so switching brand
31
+ never touches component code.
32
+
33
+ | Project | Preset stylesheet | Root class | Typeface | Font package |
34
+ | --- | --- | --- | --- | --- |
35
+ | Leroy Merlin | `@ptlm-azulejo/themes/presets/leroy-merlin.css` | `preset-lm` | LeroyMerlinSans | `@ptlm-azulejo/fonts-leroy-merlin` |
36
+ | Adeo | `@ptlm-azulejo/themes/presets/adeo.css` | `preset-adeo` | Roboto | `@ptlm-azulejo/fonts-adeo` |
37
+
38
+ **Leroy Merlin projects**
39
+
40
+ ```js
41
+ import "@ptlm-azulejo/themes/presets/leroy-merlin.css";
42
+ import "@ptlm-azulejo/fonts-leroy-merlin";
43
+ import "@ptlm-azulejo/drawer/style.css";
44
+ import "@ptlm-azulejo/button/style.css"; // footer actions
45
+ ```
46
+
47
+ ```html
48
+ <html lang="pt" class="preset-lm"></html>
49
+ ```
50
+
51
+ **Adeo projects**
52
+
53
+ ```js
54
+ import "@ptlm-azulejo/themes/presets/adeo.css";
55
+ import "@ptlm-azulejo/fonts-adeo";
56
+ import "@ptlm-azulejo/drawer/style.css";
57
+ import "@ptlm-azulejo/button/style.css"; // footer actions
58
+ ```
59
+
60
+ ```html
61
+ <html lang="pt" class="preset-adeo"></html>
62
+ ```
63
+
64
+ > The preset class is what resolves the brand at runtime. Without it — even with
65
+ > the stylesheets imported — the component renders uncolored and in a fallback
66
+ > typeface. Footer actions also need `@ptlm-azulejo/button/style.css` so Standard
67
+ > and ghost appearances render. See the [themes package](../themes/README.md) for
68
+ > brand switching, dark mode, and custom brands.
69
+
70
+ ### Light and dark mode
71
+
72
+ Add `data-theme` alongside the brand class to pin the color scheme. Leave it off
73
+ and the preset follows the OS `prefers-color-scheme`:
74
+
75
+ ```html
76
+ <html lang="pt" class="preset-lm" data-theme="dark"></html>
77
+ ```
78
+
79
+ ### Why the font package is separate
80
+
81
+ The preset only *names* its typeface in `--font-family` and ships no font files.
82
+ [Loading them is your app's job](../themes/README.md#fonts), as with upstream
83
+ Mozaic, so you keep control of hosting, subsetting and preload. Without the
84
+ matching font package, `font-sans` falls back to a generic sans-serif. A
85
+ multi-brand app can install both and switch by swapping the `.preset-*` class:
86
+ only the active brand's file is ever downloaded.
87
+
88
+ ### Custom properties
89
+
90
+ | Name | Description | Default |
91
+ | --- | --- | --- |
92
+ | `--drawer-z-index` | Customise the z-index of the drawer panel | `5` |
93
+
94
+ ## Props
95
+
96
+ | Name | Type | Default | Description |
97
+ | --- | --- | --- | --- |
98
+ | `open` | `boolean` | `false` | If `true`, display the drawer (`v-model:open`) |
99
+ | `title` | `string` | — | Title of the drawer (required) |
100
+ | `contentTitle` | `string` | — | Title of the content of the drawer |
101
+ | `position` | `'left' \| 'right'` | `'right'` | Position of the drawer |
102
+ | `extended` | `boolean` | `false` | Bigger width from the `m` breakpoint up |
103
+ | `back` | `boolean` | `false` | Display the back button |
104
+ | `scroll` | `boolean` | `true` | If `false`, lock page scroll while open |
105
+ | `closeOnOverlay` | `boolean` | `false` | Close when clicking the overlay |
106
+ | `ui` | `DrawerUi` | `{}` | Per-part Tailwind class overrides |
107
+
108
+ ## Slots
109
+
110
+ | Name | Description |
111
+ | --- | --- |
112
+ | `default` | Content of the drawer |
113
+ | `footer` | Footer actions (typically buttons) |
114
+
115
+ ## Events
116
+
117
+ | Name | Payload | Description |
118
+ | --- | --- | --- |
119
+ | `update:open` | `boolean` | Open state changed (`v-model:open`) |
120
+ | `back` | — | Back button clicked |
121
+
122
+ ## Basic usage
123
+
124
+ ```vue
125
+ <script setup>
126
+ import { ref } from "vue";
127
+ import { AzDrawer } from "@ptlm-azulejo/drawer";
128
+ import { AzButton } from "@ptlm-azulejo/button";
129
+
130
+ const open = ref(true);
131
+ </script>
132
+
133
+ <template>
134
+ <AzDrawer
135
+ v-model:open="open"
136
+ title="Drawer title (optionnal)"
137
+ content-title="Content title"
138
+ >
139
+ <p>Insert a form element here to replace this slot.</p>
140
+
141
+ <template #footer>
142
+ <AzButton>Button label</AzButton>
143
+ <AzButton ghost>Button label</AzButton>
144
+ </template>
145
+ </AzDrawer>
146
+ </template>
147
+ ```
package/dist/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export { default as AzDrawer } from './src/index.vue';
2
+ export type { DrawerPosition, DrawerUi } from './src/index.vue';
3
+ //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AACrD,YAAY,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA"}