hanap-labs 2.0.1 → 2.0.3
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/README.md +37 -36
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -24,14 +24,14 @@ npm run build
|
|
|
24
24
|
Use named imports when you want explicit dependencies per file.
|
|
25
25
|
|
|
26
26
|
```ts
|
|
27
|
-
import {
|
|
27
|
+
import { HLButton, formatLabel, usePopup } from "hanap-labs";
|
|
28
28
|
```
|
|
29
29
|
|
|
30
30
|
You can also import by module group:
|
|
31
31
|
|
|
32
32
|
```ts
|
|
33
|
-
import {
|
|
34
|
-
import type {
|
|
33
|
+
import { HLButton } from "hanap-labs/components";
|
|
34
|
+
import type { HLButtonProps } from "hanap-labs/components";
|
|
35
35
|
import { formatLabel } from "hanap-labs/helpers";
|
|
36
36
|
import { usePopup } from "hanap-labs/composables";
|
|
37
37
|
```
|
|
@@ -74,7 +74,7 @@ To scope auto-imports, pass selected names:
|
|
|
74
74
|
|
|
75
75
|
```ts
|
|
76
76
|
createToolkitAutoImportOptions({
|
|
77
|
-
componentNames: ["
|
|
77
|
+
componentNames: ["HLButton"],
|
|
78
78
|
composableNames: ["usePopup"],
|
|
79
79
|
});
|
|
80
80
|
```
|
|
@@ -106,10 +106,7 @@ Use auto-mount when you want the toolkit to create and mount hosts to `document.
|
|
|
106
106
|
```ts
|
|
107
107
|
import { createApp } from "vue";
|
|
108
108
|
import App from "./App.vue";
|
|
109
|
-
import {
|
|
110
|
-
createNotifyPlugin,
|
|
111
|
-
createPopupPlugin,
|
|
112
|
-
} from "hanap-labs/components";
|
|
109
|
+
import { createNotifyPlugin, createPopupPlugin } from "hanap-labs";
|
|
113
110
|
|
|
114
111
|
createApp(App).use(createPopupPlugin()).use(createNotifyPlugin()).mount("#app");
|
|
115
112
|
```
|
|
@@ -127,10 +124,7 @@ Use manual targets when your app needs explicit host element control:
|
|
|
127
124
|
```ts
|
|
128
125
|
import { createApp } from "vue";
|
|
129
126
|
import App from "./App.vue";
|
|
130
|
-
import {
|
|
131
|
-
createNotifyPlugin,
|
|
132
|
-
createPopupPlugin,
|
|
133
|
-
} from "hanap-labs/components";
|
|
127
|
+
import { createNotifyPlugin, createPopupPlugin } from "hanap-labs";
|
|
134
128
|
|
|
135
129
|
createApp(App)
|
|
136
130
|
.use(createPopupPlugin({ mountId: "popup-root", autoMount: true }))
|
|
@@ -140,34 +134,41 @@ createApp(App)
|
|
|
140
134
|
|
|
141
135
|
## Theming
|
|
142
136
|
|
|
143
|
-
The toolkit supports host-driven theming through CSS variables
|
|
137
|
+
The toolkit supports host-driven theming through CSS variables, plus `.light` / `.dark` mode.
|
|
144
138
|
|
|
145
|
-
Toolkit
|
|
146
|
-
does not overwrite your app `:root` theme.
|
|
139
|
+
Toolkit theme tokens are scoped to the `.hanap-labs-theme` (and `.hanap-labs-font`) class, so importing `hanap-labs/styles.css` does not overwrite your app `:root` styles.
|
|
147
140
|
|
|
148
|
-
1.
|
|
149
|
-
2.
|
|
150
|
-
3.
|
|
141
|
+
1. Add `hanap-labs-theme` (and optionally `hanap-labs-font`) to a wrapper element in your app (often `body`, `#app`, or a layout root).
|
|
142
|
+
2. (Optional) Define host tokens in your app `:root` (and override them in `.dark`).
|
|
143
|
+
3. Toggle `.dark` on a parent element (usually `html` or `body`) to enable dark mode.
|
|
144
|
+
|
|
145
|
+
Example wrapper:
|
|
146
|
+
|
|
147
|
+
```html
|
|
148
|
+
<body class="hanap-labs-theme hanap-labs-font">
|
|
149
|
+
<div id="app"></div>
|
|
150
|
+
</body>
|
|
151
|
+
```
|
|
151
152
|
|
|
152
153
|
Example:
|
|
153
154
|
|
|
154
155
|
```css
|
|
155
156
|
:root {
|
|
156
|
-
--
|
|
157
|
-
--
|
|
158
|
-
--
|
|
157
|
+
--primary: #15803d;
|
|
158
|
+
--secondary: #9fcb98;
|
|
159
|
+
--danger: #dc2626;
|
|
159
160
|
}
|
|
160
161
|
|
|
161
162
|
.dark {
|
|
162
|
-
--
|
|
163
|
-
--
|
|
164
|
-
--
|
|
163
|
+
--primary: #85bb65;
|
|
164
|
+
--secondary: #3e5f4a;
|
|
165
|
+
--danger: #f87171;
|
|
165
166
|
}
|
|
166
167
|
```
|
|
167
168
|
|
|
168
169
|
## TanStack Vue Query Setup (`useQuery`)
|
|
169
170
|
|
|
170
|
-
The `useQuery`
|
|
171
|
+
The `useQuery` and `useMutation` composables require TanStack Vue Query (optional peer dependency) to be installed, then registered once.
|
|
171
172
|
|
|
172
173
|
```bash
|
|
173
174
|
npm install @tanstack/vue-query
|
|
@@ -178,17 +179,17 @@ In your app entry (e.g., `main.ts`):
|
|
|
178
179
|
```ts
|
|
179
180
|
import { createApp } from "vue";
|
|
180
181
|
import App from "./App.vue";
|
|
181
|
-
import {
|
|
182
|
-
|
|
183
|
-
const queryClient = new QueryClient({
|
|
184
|
-
defaultOptions: {
|
|
185
|
-
queries: {
|
|
186
|
-
staleTime: 1000 * 60 * 5,
|
|
187
|
-
},
|
|
188
|
-
},
|
|
189
|
-
});
|
|
182
|
+
import { createQueryPlugin } from "hanap-labs";
|
|
190
183
|
|
|
191
|
-
createApp(App)
|
|
184
|
+
createApp(App)
|
|
185
|
+
.use(
|
|
186
|
+
createQueryPlugin({
|
|
187
|
+
queries: {
|
|
188
|
+
staleTime: 1000 * 60 * 5,
|
|
189
|
+
},
|
|
190
|
+
}),
|
|
191
|
+
)
|
|
192
|
+
.mount("#app");
|
|
192
193
|
```
|
|
193
194
|
|
|
194
|
-
Without this setup, `useQuery` will throw a runtime error in fresh consumer apps.
|
|
195
|
+
Without this setup, `useQuery` and `useMutation` will throw a runtime error in fresh consumer apps.
|