monobill-mintui 0.1.0 → 0.1.1
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 +63 -18
- package/dist/components/table/Table.d.ts +13 -0
- package/dist/components/table/Table.d.ts.map +1 -0
- package/dist/components/table/index.d.ts +3 -0
- package/dist/components/table/index.d.ts.map +1 -0
- package/dist/index.cjs +2 -2
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +145 -69
- package/package.json +6 -2
package/README.md
CHANGED
|
@@ -9,9 +9,39 @@ A modern **framework-agnostic** UI kit built as **pure JavaScript Web Components
|
|
|
9
9
|
## Installation
|
|
10
10
|
|
|
11
11
|
```bash
|
|
12
|
-
npm install mintui
|
|
12
|
+
npm install monobill-mintui
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
+
## ⚠️ IMPORTANT: Tailwind Configuration Required
|
|
16
|
+
|
|
17
|
+
**After installing, you MUST configure Tailwind CSS to scan the mintui package files.** Without this, Tailwind classes won't work!
|
|
18
|
+
|
|
19
|
+
Add this to your `tailwind.config.js`:
|
|
20
|
+
|
|
21
|
+
```js
|
|
22
|
+
export default {
|
|
23
|
+
content: [
|
|
24
|
+
"./src/**/*.{vue,js,ts,jsx,tsx,html}",
|
|
25
|
+
"./node_modules/monobill-mintui/dist/**/*.js", // ⚠️ REQUIRED: Add this line
|
|
26
|
+
],
|
|
27
|
+
// ... rest of your config
|
|
28
|
+
}
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
**CommonJS format:**
|
|
32
|
+
|
|
33
|
+
```js
|
|
34
|
+
module.exports = {
|
|
35
|
+
content: [
|
|
36
|
+
"./src/**/*.{vue,js,ts,jsx,tsx,html}",
|
|
37
|
+
"./node_modules/monobill-mintui/dist/**/*.js", // ⚠️ REQUIRED: Add this line
|
|
38
|
+
],
|
|
39
|
+
// ... rest of your config
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
**After updating your Tailwind config, rebuild your CSS** (restart your dev server or rebuild your Tailwind output).
|
|
44
|
+
|
|
15
45
|
## Usage
|
|
16
46
|
|
|
17
47
|
### Framework-Agnostic Web Components
|
|
@@ -25,7 +55,7 @@ Components are Web Components (Custom Elements) that work in **any framework**:
|
|
|
25
55
|
<html>
|
|
26
56
|
<head>
|
|
27
57
|
<script type="module">
|
|
28
|
-
import 'mintui'
|
|
58
|
+
import 'monobill-mintui'
|
|
29
59
|
</script>
|
|
30
60
|
</head>
|
|
31
61
|
<body>
|
|
@@ -58,7 +88,7 @@ Components are Web Components (Custom Elements) that work in **any framework**:
|
|
|
58
88
|
|
|
59
89
|
<script setup>
|
|
60
90
|
import { ref } from 'vue'
|
|
61
|
-
import 'mintui'
|
|
91
|
+
import 'monobill-mintui'
|
|
62
92
|
|
|
63
93
|
const enabled = ref(false)
|
|
64
94
|
const name = ref('')
|
|
@@ -75,7 +105,7 @@ const handleChange = (e) => {
|
|
|
75
105
|
|
|
76
106
|
```jsx
|
|
77
107
|
import { useState } from 'react'
|
|
78
|
-
import 'mintui'
|
|
108
|
+
import 'monobill-mintui'
|
|
79
109
|
|
|
80
110
|
function App() {
|
|
81
111
|
const [enabled, setEnabled] = useState(false)
|
|
@@ -103,7 +133,7 @@ function App() {
|
|
|
103
133
|
|
|
104
134
|
```typescript
|
|
105
135
|
import { Component } from '@angular/core'
|
|
106
|
-
import 'mintui'
|
|
136
|
+
import 'monobill-mintui'
|
|
107
137
|
|
|
108
138
|
@Component({
|
|
109
139
|
selector: 'app-root',
|
|
@@ -147,14 +177,6 @@ export class AppComponent {
|
|
|
147
177
|
- **mint-link** - Link component
|
|
148
178
|
- **mint-back-button** - Back button component
|
|
149
179
|
|
|
150
|
-
## Importing Styles
|
|
151
|
-
|
|
152
|
-
If you need the base styles (though components work with Tailwind CSS):
|
|
153
|
-
|
|
154
|
-
```javascript
|
|
155
|
-
import 'mintui/styles'
|
|
156
|
-
```
|
|
157
|
-
|
|
158
180
|
## Requirements
|
|
159
181
|
|
|
160
182
|
- **Tailwind CSS** - Required. Components use Tailwind utility classes.
|
|
@@ -162,20 +184,43 @@ import 'mintui/styles'
|
|
|
162
184
|
- **No JavaScript dependencies!** Built with native Web Component APIs
|
|
163
185
|
- Modern browser with Web Components support (all modern browsers)
|
|
164
186
|
|
|
165
|
-
### Tailwind Configuration
|
|
187
|
+
### ⚠️ Critical: Tailwind Configuration
|
|
166
188
|
|
|
167
|
-
|
|
189
|
+
**You MUST add the mintui package to your Tailwind content paths**, otherwise the classes won't be included in your CSS:
|
|
168
190
|
|
|
169
191
|
```js
|
|
192
|
+
// tailwind.config.js (ES modules)
|
|
170
193
|
export default {
|
|
171
194
|
content: [
|
|
172
|
-
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
|
173
|
-
"./node_modules/mintui/**/*.js", //
|
|
195
|
+
"./src/**/*.{vue,js,ts,jsx,tsx,html}",
|
|
196
|
+
"./node_modules/monobill-mintui/dist/**/*.js", // ⚠️ REQUIRED
|
|
197
|
+
],
|
|
198
|
+
// ... rest of your config
|
|
199
|
+
}
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
```js
|
|
203
|
+
// tailwind.config.js (CommonJS)
|
|
204
|
+
module.exports = {
|
|
205
|
+
content: [
|
|
206
|
+
"./src/**/*.{vue,js,ts,jsx,tsx,html}",
|
|
207
|
+
"./node_modules/monobill-mintui/dist/**/*.js", // ⚠️ REQUIRED
|
|
174
208
|
],
|
|
175
|
-
// ... rest of config
|
|
209
|
+
// ... rest of your config
|
|
176
210
|
}
|
|
177
211
|
```
|
|
178
212
|
|
|
213
|
+
**After updating your Tailwind config, rebuild your CSS** (restart your dev server or rebuild your Tailwind output).
|
|
214
|
+
|
|
215
|
+
## Troubleshooting
|
|
216
|
+
|
|
217
|
+
### Tailwind classes not working?
|
|
218
|
+
|
|
219
|
+
1. **Check your Tailwind config** - Make sure you've added `./node_modules/monobill-mintui/dist/**/*.js` to the `content` array
|
|
220
|
+
2. **Rebuild your CSS** - Restart your dev server or rebuild your Tailwind output
|
|
221
|
+
3. **Check the package name** - Make sure you're using `monobill-mintui` (not `mintui`) in the path
|
|
222
|
+
4. **Verify the path** - The path should point to `dist/**/*.js` inside the node_modules folder
|
|
223
|
+
|
|
179
224
|
## Development
|
|
180
225
|
|
|
181
226
|
```bash
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
declare class MintTable extends HTMLElement {
|
|
2
|
+
static get observedAttributes(): string[];
|
|
3
|
+
private _observer;
|
|
4
|
+
constructor();
|
|
5
|
+
connectedCallback(): void;
|
|
6
|
+
disconnectedCallback(): void;
|
|
7
|
+
attributeChangedCallback(): void;
|
|
8
|
+
private _observeChanges;
|
|
9
|
+
private _applyStyles;
|
|
10
|
+
private _setClasses;
|
|
11
|
+
}
|
|
12
|
+
export default MintTable;
|
|
13
|
+
//# sourceMappingURL=Table.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/table/Table.ts"],"names":[],"mappings":"AAGA,cAAM,SAAU,SAAQ,WAAW;IACjC,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,SAAS,CAAgC;;IAMjD,iBAAiB,IAAI,IAAI;IAezB,oBAAoB,IAAI,IAAI;IAO5B,wBAAwB,IAAI,IAAI;IAIhC,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,YAAY;IAoIpB,OAAO,CAAC,WAAW;CAWpB;AAOD,eAAe,SAAS,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,CAAA;AAEhB,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA"}
|