portal-design-system 0.0.3 → 0.0.4
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 +17 -81
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,18 +1,16 @@
|
|
|
1
1
|
# Portal Design System
|
|
2
2
|
|
|
3
|
-
A
|
|
3
|
+
A type-safe Vue 3 UI component library built with Tailwind CSS, featuring isolated styles and custom fonts.
|
|
4
4
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
- 🎭 **No Prefixes** - Clean Tailwind utilities, isolated via Shadow DOM
|
|
13
|
-
- 🖋️ **Custom Fonts** - Poppins font included
|
|
7
|
+
- ✨ **Vue 3** - Built with the Composition API
|
|
8
|
+
- 🎨 **Tailwind CSS** - Utility-first styling with custom configuration
|
|
9
|
+
- 🔒 **Style Isolation** - Prefixed classes (`pds-`) prevent global style conflicts
|
|
10
|
+
- 🎯 **TypeScript** - Fully type-safe with comprehensive type definitions
|
|
11
|
+
- 🖋️ **Custom Fonts** - Inter and JetBrains Mono fonts included
|
|
14
12
|
- 📦 **Tree-shakeable** - Only import what you need
|
|
15
|
-
- 🚀 **
|
|
13
|
+
- 🚀 **Zero Config** - Works out of the box
|
|
16
14
|
|
|
17
15
|
## Installation
|
|
18
16
|
|
|
@@ -28,88 +26,26 @@ bun add portal-design-system
|
|
|
28
26
|
|
|
29
27
|
## Usage
|
|
30
28
|
|
|
31
|
-
###
|
|
29
|
+
### Import Styles
|
|
32
30
|
|
|
33
|
-
Import the CSS file
|
|
31
|
+
Import the CSS file in your main entry file (e.g., `main.ts`):
|
|
32
|
+
|
|
33
|
+
```typescript
|
|
34
|
+
import 'portal-design-system/styles'
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Using Components
|
|
38
|
+
|
|
39
|
+
Wrap your components with the `portal-design-system` class to ensure style isolation when used as Vue components:
|
|
34
40
|
|
|
35
41
|
```vue
|
|
36
42
|
<script setup lang="ts">
|
|
37
43
|
import { Button } from 'portal-design-system'
|
|
38
|
-
import 'portal-design-system/styles'
|
|
39
44
|
</script>
|
|
40
45
|
|
|
41
46
|
<template>
|
|
42
47
|
<div class="portal-design-system">
|
|
43
48
|
<Button variant="primary" size="md">Click me</Button>
|
|
44
|
-
<Button variant="secondary" :disabled="true">Disabled</Button>
|
|
45
|
-
<Button variant="danger" size="lg">Delete</Button>
|
|
46
|
-
</div>
|
|
47
|
-
</template>
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
**Important:** Wrap your components in a `<div class="portal-design-system">` to ensure proper font and style application.
|
|
51
|
-
|
|
52
|
-
### Option 2: Web Components (for any framework or vanilla JS)
|
|
53
|
-
|
|
54
|
-
Web Components provide **complete style isolation** using Shadow DOM - no global style conflicts!
|
|
55
|
-
|
|
56
|
-
```html
|
|
57
|
-
<!DOCTYPE html>
|
|
58
|
-
<html>
|
|
59
|
-
<head>
|
|
60
|
-
<title>My App</title>
|
|
61
|
-
<!-- Your global styles won't affect the components -->
|
|
62
|
-
<style>
|
|
63
|
-
button { background: red !important; } /* This won't affect pds-button! */
|
|
64
|
-
</style>
|
|
65
|
-
</head>
|
|
66
|
-
<body>
|
|
67
|
-
<pds-button variant="primary">Click Me</pds-button>
|
|
68
|
-
<pds-button variant="secondary" size="lg">Large</pds-button>
|
|
69
|
-
<pds-button variant="danger" disabled="true">Disabled</pds-button>
|
|
70
|
-
|
|
71
|
-
<script type="module">
|
|
72
|
-
import { registerAllComponents } from './node_modules/portal-design-system/dist/index.js'
|
|
73
|
-
// Components auto-register on import!
|
|
74
|
-
</script>
|
|
75
|
-
</body>
|
|
76
|
-
</html>
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
#### React Example
|
|
80
|
-
|
|
81
|
-
```jsx
|
|
82
|
-
import { useEffect } from 'react'
|
|
83
|
-
import { registerAllComponents } from 'portal-design-system'
|
|
84
|
-
|
|
85
|
-
function App() {
|
|
86
|
-
useEffect(() => {
|
|
87
|
-
registerAllComponents()
|
|
88
|
-
}, [])
|
|
89
|
-
|
|
90
|
-
return (
|
|
91
|
-
<div>
|
|
92
|
-
<pds-button variant="primary">Click Me</pds-button>
|
|
93
|
-
<pds-button variant="secondary" size="lg">Cancel</pds-button>
|
|
94
|
-
</div>
|
|
95
|
-
)
|
|
96
|
-
}
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
#### Svelte Example
|
|
100
|
-
|
|
101
|
-
```svelte
|
|
102
|
-
<script>
|
|
103
|
-
import { onMount } from 'svelte'
|
|
104
|
-
import { registerAllComponents } from 'portal-design-system'
|
|
105
|
-
|
|
106
|
-
onMount(() => {
|
|
107
|
-
registerAllComponents()
|
|
108
|
-
})
|
|
109
|
-
</script>
|
|
110
|
-
|
|
111
|
-
<pds-button variant="primary">Click Me</pds-button>
|
|
112
|
-
<pds-button variant="danger" disabled={true}>Delete</pds-button>
|
|
113
49
|
<Button variant="secondary">Secondary Button</Button>
|
|
114
50
|
<Button variant="danger" :disabled="true">Disabled</Button>
|
|
115
51
|
</div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "portal-design-system",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"description": "A type-safe Vue 3 UI library with Tailwind CSS and isolated styles",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"./dist/styles.css": "./dist/styles.css"
|
|
17
17
|
},
|
|
18
18
|
"files": [
|
|
19
|
-
"dist",
|
|
19
|
+
"dist/",
|
|
20
20
|
"README.md",
|
|
21
21
|
"LICENSE"
|
|
22
22
|
],
|