quail-ui 0.5.69 → 0.5.70
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 +97 -14
- package/dist/index.css +1 -0
- package/dist/index.js +5517 -4335
- package/dist/index.js.map +1 -1
- package/dist/index.umd.cjs +9 -9
- package/dist/index.umd.cjs.map +1 -1
- package/package.json +14 -9
- package/dist/style.css +0 -1
package/README.md
CHANGED
|
@@ -1,8 +1,17 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Quaily UI
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A Vue 3 component library for [Quaily](https://quaily.com).
|
|
4
4
|
|
|
5
|
-
[Demo](https://
|
|
5
|
+
[Live Demo](https://quail-ink.github.io/quail-ui/)
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
- 26+ UI components (Button, Input, Dialog, Menu, Tabs, etc.)
|
|
10
|
+
- 110+ SVG icons
|
|
11
|
+
- Dark mode support
|
|
12
|
+
- TUI (Terminal UI) mode with monospace fonts
|
|
13
|
+
- Fully typed with TypeScript
|
|
14
|
+
- SCSS with CSS custom properties
|
|
6
15
|
|
|
7
16
|
## Installation
|
|
8
17
|
|
|
@@ -18,29 +27,103 @@ yarn add quail-ui
|
|
|
18
27
|
|
|
19
28
|
## Usage
|
|
20
29
|
|
|
21
|
-
|
|
30
|
+
Initialize Quaily UI in your main.js/main.ts file:
|
|
22
31
|
|
|
23
32
|
```js
|
|
24
33
|
import { createApp } from 'vue'
|
|
25
|
-
import { QuailUI
|
|
26
|
-
|
|
27
|
-
// import style
|
|
34
|
+
import { QuailUI } from 'quail-ui'
|
|
28
35
|
import 'quail-ui/dist/style.css'
|
|
29
36
|
|
|
30
|
-
// ...
|
|
31
|
-
|
|
32
37
|
const app = createApp(App)
|
|
33
38
|
app.use(QuailUI)
|
|
39
|
+
app.mount('#app')
|
|
34
40
|
```
|
|
35
41
|
|
|
36
|
-
Use
|
|
42
|
+
Use components in your .vue files:
|
|
37
43
|
|
|
38
44
|
```vue
|
|
39
45
|
<template>
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
46
|
+
<QButton class="primary" @click="handleClick">
|
|
47
|
+
Click Me
|
|
48
|
+
</QButton>
|
|
49
|
+
|
|
50
|
+
<QInput v-model="text" placeholder="Enter text..." />
|
|
51
|
+
|
|
52
|
+
<QDialog v-model="showDialog" title="Hello">
|
|
53
|
+
<p>Dialog content here</p>
|
|
54
|
+
</QDialog>
|
|
44
55
|
</template>
|
|
45
56
|
```
|
|
46
57
|
|
|
58
|
+
### Usage via CDN (No Build Tools)
|
|
59
|
+
|
|
60
|
+
You can use Quaily UI directly in HTML without any build tools:
|
|
61
|
+
|
|
62
|
+
```html
|
|
63
|
+
<!DOCTYPE html>
|
|
64
|
+
<html>
|
|
65
|
+
<head>
|
|
66
|
+
<link rel="stylesheet" href="https://unpkg.com/quail-ui/dist/style.css" />
|
|
67
|
+
<script type="importmap">
|
|
68
|
+
{
|
|
69
|
+
"imports": {
|
|
70
|
+
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js",
|
|
71
|
+
"quail-ui": "https://unpkg.com/quail-ui/dist/index.js"
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
</script>
|
|
75
|
+
</head>
|
|
76
|
+
<body>
|
|
77
|
+
<div id="app">
|
|
78
|
+
<q-button class="primary">Hello</q-button>
|
|
79
|
+
<q-fence text="This is a notice" type="warning"></q-fence>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<script type="module">
|
|
83
|
+
import { createApp } from 'vue'
|
|
84
|
+
import { QuailUI } from 'quail-ui'
|
|
85
|
+
|
|
86
|
+
const app = createApp({})
|
|
87
|
+
app.use(QuailUI)
|
|
88
|
+
app.mount('#app')
|
|
89
|
+
</script>
|
|
90
|
+
</body>
|
|
91
|
+
</html>
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## Components
|
|
95
|
+
|
|
96
|
+
| Component | Description |
|
|
97
|
+
|-----------|-------------|
|
|
98
|
+
| QButton | Button with variants (primary, outlined, plain, danger, etc.) |
|
|
99
|
+
| QInput | Text input with validation and slots |
|
|
100
|
+
| QTextarea | Multi-line text input |
|
|
101
|
+
| QDialog | Modal dialog |
|
|
102
|
+
| QMenu | Dropdown menu |
|
|
103
|
+
| QTabs | Tab navigation |
|
|
104
|
+
| QSwitch | Toggle switch |
|
|
105
|
+
| QProgress | Progress bar |
|
|
106
|
+
| QAvatar | User avatar |
|
|
107
|
+
| QPagination | Page navigation |
|
|
108
|
+
| QFence | Alert/notice box |
|
|
109
|
+
| ... | And more |
|
|
110
|
+
|
|
111
|
+
## Dark Mode
|
|
112
|
+
|
|
113
|
+
Toggle dark mode by adding/removing the `.dark` class on `<body>`:
|
|
114
|
+
|
|
115
|
+
```js
|
|
116
|
+
document.body.classList.toggle('dark')
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
## TUI Mode
|
|
120
|
+
|
|
121
|
+
Enable terminal-style UI with monospace fonts:
|
|
122
|
+
|
|
123
|
+
```js
|
|
124
|
+
document.body.classList.add('tui')
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
## License
|
|
128
|
+
|
|
129
|
+
MIT
|