scq-vue 1.0.9 → 1.0.10
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/LICENSE +21 -0
- package/README.md +4 -155
- package/dist/scq-vue.es.js +1504 -1440
- package/dist/scq-vue.umd.js +15 -15
- package/dist/style.css +1 -1
- package/dist/types/components/Button/Button.vue.d.ts +4 -2
- package/dist/types/components/Input/Input.vue.d.ts +24 -9
- package/dist/types/index.d.ts +69 -30
- package/package.json +66 -66
- package/styles/button.css +75 -15
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 shichangqi
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,160 +1,9 @@
|
|
|
1
1
|
# scq-vue
|
|
2
2
|
|
|
3
|
-
Vue 3 component library with Button, Input and ChatMessage.
|
|
3
|
+
A lightweight Vue 3 component library with Button, Input, and ChatMessage.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
### Online Demo
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
npm install scq-vue
|
|
9
|
-
yarn add scq-vue
|
|
10
|
-
pnpm add scq-vue
|
|
11
|
-
```
|
|
7
|
+
See full usage examples, props, and interaction demos here:
|
|
12
8
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
### Global install
|
|
16
|
-
|
|
17
|
-
```ts
|
|
18
|
-
import { createApp } from 'vue'
|
|
19
|
-
import App from './App.vue'
|
|
20
|
-
import ScqVue from 'scq-vue'
|
|
21
|
-
import 'scq-vue/style.css'
|
|
22
|
-
|
|
23
|
-
createApp(App).use(ScqVue).mount('#app')
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
After global install, you can use component tags directly in templates:
|
|
27
|
-
|
|
28
|
-
```vue
|
|
29
|
-
<template>
|
|
30
|
-
<scq-button type="primary">Primary</scq-button>
|
|
31
|
-
<scq-input v-model="value" placeholder="Please input" />
|
|
32
|
-
<scq-chat-message :message="message" role="ai" :timestamp="Date.now()" />
|
|
33
|
-
</template>
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
Notes:
|
|
37
|
-
- Use prefixed tag names only: `scq-button`, `scq-input`, `scq-chat-message`
|
|
38
|
-
|
|
39
|
-
### On-demand import
|
|
40
|
-
|
|
41
|
-
```ts
|
|
42
|
-
import { createApp } from 'vue'
|
|
43
|
-
import App from './App.vue'
|
|
44
|
-
import { ScqButton, ScqInput, ScqChatMessage } from 'scq-vue'
|
|
45
|
-
import 'scq-vue/style.css'
|
|
46
|
-
|
|
47
|
-
const app = createApp(App)
|
|
48
|
-
app.use(ScqButton)
|
|
49
|
-
app.use(ScqInput)
|
|
50
|
-
app.use(ScqChatMessage)
|
|
51
|
-
app.mount('#app')
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
Then use in templates:
|
|
55
|
-
|
|
56
|
-
```vue
|
|
57
|
-
<template>
|
|
58
|
-
<scq-button>Default</scq-button>
|
|
59
|
-
<scq-input v-model="value" />
|
|
60
|
-
<scq-chat-message :message="message" role="user" :show-time="false" />
|
|
61
|
-
</template>
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
### On-demand style import
|
|
65
|
-
|
|
66
|
-
```ts
|
|
67
|
-
import { ScqButton, ScqInput, ScqChatMessage } from 'scq-vue'
|
|
68
|
-
import 'scq-vue/styles/button.css'
|
|
69
|
-
import 'scq-vue/styles/input.css'
|
|
70
|
-
import 'scq-vue/styles/chat-message.css'
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
## Components
|
|
74
|
-
|
|
75
|
-
- Button
|
|
76
|
-
- Input
|
|
77
|
-
- ChatMessage
|
|
78
|
-
|
|
79
|
-
## ChatMessage
|
|
80
|
-
|
|
81
|
-
ChatMessage is designed for chat scenarios and supports API response data rendering directly.
|
|
82
|
-
|
|
83
|
-
### Features
|
|
84
|
-
|
|
85
|
-
- Supports plain text, JSON and Markdown content
|
|
86
|
-
- Supports code highlighting (Markdown code blocks and JSON view)
|
|
87
|
-
- Supports two message roles: AI and user
|
|
88
|
-
- Supports configurable time display
|
|
89
|
-
|
|
90
|
-
### Basic example
|
|
91
|
-
|
|
92
|
-
```vue
|
|
93
|
-
<template>
|
|
94
|
-
<scq-chat-message
|
|
95
|
-
:message="apiData"
|
|
96
|
-
role="ai"
|
|
97
|
-
content-type="auto"
|
|
98
|
-
:show-time="true"
|
|
99
|
-
:timestamp="Date.now()"
|
|
100
|
-
/>
|
|
101
|
-
</template>
|
|
102
|
-
|
|
103
|
-
<script setup lang="ts">
|
|
104
|
-
const apiData = {
|
|
105
|
-
id: 'msg_001',
|
|
106
|
-
text: 'This is response data from API',
|
|
107
|
-
code: 'const x = 1',
|
|
108
|
-
}
|
|
109
|
-
</script>
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
### Props
|
|
113
|
-
|
|
114
|
-
| Prop | Description | Type | Default |
|
|
115
|
-
| --- | --- | --- | --- |
|
|
116
|
-
| message | Message data from API | unknown | - |
|
|
117
|
-
| role | Message role | `ai` \| `user` | `ai` |
|
|
118
|
-
| contentType | Content type | `auto` \| `text` \| `markdown` \| `json` | `auto` |
|
|
119
|
-
| showTime | Whether to display timestamp | boolean | true |
|
|
120
|
-
| timestamp | Message time value | string \| number \| Date \| null | null |
|
|
121
|
-
| timeFormatter | Custom time formatter | `(value) => string` | - |
|
|
122
|
-
|
|
123
|
-
### Content type behavior
|
|
124
|
-
|
|
125
|
-
- `auto`: detect JSON string / Markdown / plain text automatically
|
|
126
|
-
- `text`: force plain text rendering
|
|
127
|
-
- `markdown`: force Markdown rendering
|
|
128
|
-
- `json`: force JSON pretty rendering
|
|
129
|
-
|
|
130
|
-
<!-- ## Development
|
|
131
|
-
|
|
132
|
-
```bash
|
|
133
|
-
pnpm install
|
|
134
|
-
pnpm dev
|
|
135
|
-
pnpm build
|
|
136
|
-
pnpm dev:play
|
|
137
|
-
```
|
|
138
|
-
|
|
139
|
-
## Publish
|
|
140
|
-
|
|
141
|
-
1. Update version in package.json
|
|
142
|
-
2. Build package
|
|
143
|
-
|
|
144
|
-
```bash
|
|
145
|
-
pnpm build
|
|
146
|
-
```
|
|
147
|
-
|
|
148
|
-
3. Login and publish
|
|
149
|
-
|
|
150
|
-
```bash
|
|
151
|
-
npm login
|
|
152
|
-
npm publish
|
|
153
|
-
```
|
|
154
|
-
|
|
155
|
-
## Build output
|
|
156
|
-
|
|
157
|
-
- dist/scq-vue.es.js
|
|
158
|
-
- dist/scq-vue.umd.js
|
|
159
|
-
- dist/style.css
|
|
160
|
-
- dist/types -->
|
|
9
|
+
[🔗 View Online Demo](https://shichangqi.github.io/scq-vue/)
|