Skip to content

Commit 5483a07

Browse files
sunkintsunkint
authored
Merge pull request #55 from sunkint/dev
0.6.0
2 parents 19ecb5a + 90525e5 commit 5483a07

File tree

29 files changed

+409
-109
lines changed

29 files changed

+409
-109
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ make build
7979
- [x] DatePicker
8080
- [x] Steps
8181
- [x] Upload
82+
- [x] Slider
8283

8384
## 作者
8485

‎docs/components/button/index.md‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
<sk-button type="warning">Warning</sk-button>
1111
<sk-button type="danger">Danger</sk-button>
1212
<sk-button type="danger" round>Round</sk-button>
13+
<sk-button type="text">Text</sk-button>
1314
</div>
1415

1516
```vue
@@ -22,6 +23,7 @@
2223
<sk-button type="warning">Warning</sk-button>
2324
<sk-button type="danger">Danger</sk-button>
2425
<sk-button type="danger" round>Round</sk-button>
26+
<sk-button type="text">Text</sk-button>
2527
</div>
2628
</template>
2729
```
@@ -107,6 +109,7 @@
107109
<sk-button type="info" disabled>disabled</sk-button>
108110
<sk-button type="warning" disabled>disabled</sk-button>
109111
<sk-button type="danger" disabled>disabled</sk-button>
112+
<sk-button type="text" disabled>disabled</sk-button>
110113
</div>
111114

112115
```vue
@@ -118,6 +121,7 @@
118121
<sk-button type="info" disabled>disabled</sk-button>
119122
<sk-button type="warning" disabled>disabled</sk-button>
120123
<sk-button type="danger" disabled>disabled</sk-button>
124+
<sk-button type="text" disabled>disabled</sk-button>
121125
</div>
122126
</template>
123127
```
@@ -140,19 +144,19 @@
140144

141145
### API
142146

143-
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
144-
| -------- | ------------------------------------------------- | ------ | ------------------------------------------------------------ | --------- |
145-
| type | 按钮样式类型 | string | `default`、`primary`、`success`、`info`、`warning`、`danger` | `default` |
146-
| size | 按钮大小 | string | `normal`、`small`、`large` | `normal` |
147-
| icon | 前置图标 | string | 详见 [Icon](../icon/index#内置图标) 组件的 type | - |
148-
| round | 是否显示为圆角 | bool | | `false` |
149-
| block | 是否占满父容器宽度（块级） | bool | | `false` |
150-
| disabled | 是否禁用 | bool | | `false` |
151-
| loading | 是否禁用并显示加载中动画 | bool | | `false` |
152-
| href | 可选，如果设置的话会用 a 标签而不是 button | string | | - |
153-
| target | 可选，和 href 一起使用，就是 a 标签的 target 属性 | string | | `_blank` |
154-
| rel | 可选，和 href 一起使用，就是 a 标签的 rel 属性 | string | | - |
155-
| htmlType | button html type | string | `button`、`submit`、`reset` | - |
147+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
148+
| -------- | ------------------------------------------------- | ------ | -------------------------------------------------------------------- | --------- |
149+
| type | 按钮样式类型 | string | `default`、`primary`、`success`、`info`、`warning`、`danger`、`text` | `default` |
150+
| size | 按钮大小 | string | `normal`、`small`、`large` | `normal` |
151+
| icon | 前置图标 | string | 详见 [Icon](../icon/index#内置图标) 组件的 type | - |
152+
| round | 是否显示为圆角 | bool | | `false` |
153+
| block | 是否占满父容器宽度（块级） | bool | | `false` |
154+
| disabled | 是否禁用 | bool | | `false` |
155+
| loading | 是否禁用并显示加载中动画 | bool | | `false` |
156+
| href | 可选，如果设置的话会用 a 标签而不是 button | string | | - |
157+
| target | 可选，和 href 一起使用，就是 a 标签的 target 属性 | string | | `_blank` |
158+
| rel | 可选，和 href 一起使用，就是 a 标签的 rel 属性 | string | | - |
159+
| htmlType | button html type | string | `button`、`submit`、`reset` | - |
156160

157161
### 事件
158162

‎docs/components/mention/index.md‎

Lines changed: 67 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44

55
### 基础用法
66

7+
默认使用一个内置 Textarea 组件。
8+
79
<div class="docs-preview-part">
810
<sk-mention
911
placeholder="输入@试试…"
@@ -53,24 +55,78 @@ export default {
5355
</script>
5456
```
5557

58+
### 使用自定义编辑区域
59+
60+
可以在默认插槽中设置自定义的编辑区域，例如 input、contenteditable 等，需要确保 `editorSelector` 可以选择到该编辑区域。
61+
62+
<div class="docs-preview-part">
63+
<sk-mention
64+
:menuItemLimit="5"
65+
:data="['JavaScript', 'HTML', 'CSS', 'Java', 'Go', 'C#', 'VB', 'Python', 'PHP', 'C', 'C++']"
66+
editorSelector="input"
67+
>
68+
<sk-input placeholder="输入@试试…" />
69+
</sk-mention>
70+
</div>
71+
<div class="docs-preview-part">
72+
<sk-mention
73+
:menuItemLimit="5"
74+
:data="['JavaScript', 'HTML', 'CSS', 'Java', 'Go', 'C#', 'VB', 'Python', 'PHP', 'C', 'C++']"
75+
editorSelector=".editor"
76+
>
77+
<div class="editor" style="background: #f7f7f7; margin-top: 10px; padding: 10px" contenteditable>输入@试试 </div>
78+
</sk-mention>
79+
</div>
80+
81+
```vue
82+
<template>
83+
<div class="docs-preview-part">
84+
<sk-mention
85+
:menuItemLimit="5"
86+
:data="['JavaScript', 'HTML', 'CSS', 'Java', 'Go', 'C#', 'VB', 'Python', 'PHP', 'C', 'C++']"
87+
editorSelector="input"
88+
>
89+
<sk-input placeholder="输入@试试…" />
90+
</sk-mention>
91+
</div>
92+
<div class="docs-preview-part">
93+
<sk-mention
94+
:menuItemLimit="5"
95+
:data="['JavaScript', 'HTML', 'CSS', 'Java', 'Go', 'C#', 'VB', 'Python', 'PHP', 'C', 'C++']"
96+
editorSelector=".editor"
97+
>
98+
<div
99+
class="editor"
100+
style="background: #f7f7f7; margin-top: 10px; padding: 10px"
101+
contenteditable
102+
>
103+
输入@试试
104+
</div>
105+
</sk-mention>
106+
</div>
107+
</template>
108+
```
109+
56110
### API
57111

58-
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
59-
| ------------------- | ------------------------------------------ | ------------------ | --------- | ------ | ---- |
60-
| trigger | 触发自动补全的符号 | string | | `@` |
61-
| data | 同步筛选时的全部数据列表 | `MentionDataItem[] | string[]` | | `[]` |
62-
| async | 是否异步获取数据 | bool | | false |
63-
| menuItemLimit | 每次最多显示的条目数量 | number | | 25 |
64-
| menuShowMinLength | 触发自动补全前键入的最少字符数量 | number | | 0 |
65-
| requireLeadingSpace | 触发自动补全的符号前是否需要空格（0.2.2+） | number | | false |
112+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
113+
| ------------------- | ------------------------------------------ | ------------------ | --------- | ---------- | ---- |
114+
| trigger | 触发自动补全的符号 | string | | `@` |
115+
| data | 同步筛选时的全部数据列表 | `MentionDataItem[] | string[]` | | `[]` |
116+
| async | 是否异步获取数据 | bool | | false |
117+
| editorSelector | 用于选择到可编辑区域的选择器 | string | | `textarea` |
118+
| menuItemLimit | 每次最多显示的条目数量 | number | | 25 |
119+
| menuShowMinLength | 触发自动补全前键入的最少字符数量 | number | | 0 |
120+
| requireLeadingSpace | 触发自动补全的符号前是否需要空格（0.2.2+） | number | | false |
66121

67122
同时也支持 [Textarea](../textarea/index) 的所有 props。
68123

69124
### 事件
70125

71-
| 事件 | 说明 | 携带参数 |
72-
| ---------- | -------------------------------------- | -------------------------------------------- | ---------- |
73-
| asyncFetch | 异步获取回调函数，需要返回一个 Promise | `(word: string) => Promise<MentionDataItem[] | string[]>` |
126+
| 事件 | 说明 | 携带参数 |
127+
| ---------- | -------------------------------------------------- | -------------------------------------------- | ---------- |
128+
| asyncFetch | 异步获取回调函数，需要返回一个 Promise | `(word: string) => Promise<MentionDataItem[] | string[]>` |
129+
| attach | 在 tribute 完成加载时触发的回调，携带 tribute 实例 | `(tribute: Tribute<MentionDataItem>) => any` |
74130

75131
同时也支持 [Textarea](../textarea/index) 的所有事件。
76132

‎docs/components/pagination/basic.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
<div class="docs-preview-part">
33
<sk-pagination v-model="page" :totalPages="15" />
44
<br />
5+
<sk-pagination v-model="page" buttonType="text" :totalPages="15" />
6+
<br />
57
<sk-mini-pagination v-model="page" :totalPages="15" />
68
</div>
79
</template>

‎docs/components/pagination/index.md‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
<div class="docs-preview-part">
1010
<sk-pagination v-model="page" :totalPages="15" />
1111
<br />
12+
<sk-pagination v-model="page" buttonType="text" :totalPages="15" />
13+
<br />
1214
<sk-mini-pagination v-model="page" :totalPages="15" />
1315
</div>
1416
</template>
@@ -26,12 +28,13 @@ export default {
2628

2729
### API
2830

29-
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
30-
| ---------- | -------------------------- | ------ | --------------- | ------- |
31-
| v-model | 当前页 | number | | - |
32-
| totalPages | 页码总数，必须不小于当前页 | number | | - |
33-
| align | 对齐方式 | string | `left`、`right` | `left` |
34-
| disabled | 是否禁用 | bool | | `false` |
31+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
32+
| ---------- | ---------------------------- | ------ | ---------------------------------------------- | ------- |
33+
| v-model | 当前页 | number | | - |
34+
| totalPages | 页码总数，必须不小于当前页 | number | | - |
35+
| buttonType | 分页器内所使用的按钮样式类型 | string | 详见 [Button](../button/index#API) 组件的 type | - |
36+
| align | 对齐方式 | string | `left`、`right` | `left` |
37+
| disabled | 是否禁用 | bool | | `false` |
3538

3639
### 事件
3740

‎docs/components/popover/index.md‎

Lines changed: 81 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -148,14 +148,88 @@ button {
148148
```vue
149149
<template>
150150
<div class="docs-preview-part">
151-
<client-only>
152-
<div style="position: fixed; right: 80px; bottom: 120px">
153-
<sk-popover>
154-
<sk-button>fixed</sk-button>
155-
<template #content>fixed状态工作的气泡</template>
151+
<div style="position: fixed; right: 80px; bottom: 120px">
152+
<sk-popover>
153+
<sk-button>fixed</sk-button>
154+
<template #content>fixed状态工作的气泡</template>
155+
</sk-popover>
156+
</div>
157+
</div>
158+
</template>
159+
```
160+
161+
### 嵌套使用
162+
163+
<div class="docs-preview-part">
164+
<client-only>
165+
<sk-popover trigger="click">
166+
<sk-button>Click 我</sk-button>
167+
<template #content>
168+
<sk-popover trigger="click">
169+
<sk-button>再 Click 我</sk-button>
170+
<template #content>
171+
这是气泡弹层的内容
172+
</template>
156173
</sk-popover>
157-
</div>
158-
</client-only>
174+
<div style="height: 10px"></div>
175+
<sk-datepicker placeholder="选择日期" clearable />
176+
<div style="height: 10px"></div>
177+
<sk-select
178+
:data="[
179+
{ value: 1, text: 'Option 1' },
180+
{ value: 2, text: 'Option 2' },
181+
{ value: 3, text: 'Option 3' },
182+
{ value: 4, text: 'Option 4 (Disabled)', disabled: true },
183+
]"
184+
clearable
185+
/>
186+
<div style="height: 10px"></div>
187+
<sk-dropdown
188+
text="点击打开菜单"
189+
:data="[
190+
{ key: 'food', text: '食品' },
191+
{ key: 'clothes', text: '服装' },
192+
{ key: 'furniture', text: '家居', disabled: true },
193+
]"
194+
/>
195+
</template>
196+
</sk-popover>
197+
</client-only>
198+
</div>
199+
200+
```vue
201+
<template>
202+
<div class="docs-preview-part">
203+
<sk-popover trigger="click">
204+
<sk-button>Click 我</sk-button>
205+
<template #content>
206+
<sk-popover trigger="click">
207+
<sk-button>再 Click 我</sk-button>
208+
<template #content>这是气泡弹层的内容</template>
209+
</sk-popover>
210+
<div style="height: 10px"></div>
211+
<sk-datepicker placeholder="选择日期" clearable />
212+
<div style="height: 10px"></div>
213+
<sk-select
214+
:data="[
215+
{ value: 1, text: 'Option 1' },
216+
{ value: 2, text: 'Option 2' },
217+
{ value: 3, text: 'Option 3' },
218+
{ value: 4, text: 'Option 4 (Disabled)', disabled: true },
219+
]"
220+
clearable
221+
/>
222+
<div style="height: 10px"></div>
223+
<sk-dropdown
224+
text="点击打开菜单"
225+
:data="[
226+
{ key: 'food', text: '食品' },
227+
{ key: 'clothes', text: '服装' },
228+
{ key: 'furniture', text: '家居', disabled: true },
229+
]"
230+
/>
231+
</template>
232+
</sk-popover>
159233
</div>
160234
</template>
161235
```

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "splendor-ui",
3-
"version": "0.5.0",
3+
"version": "0.6.0-beta.1",
44
"description": "A set of UI components for splendor-xzwhome. Built with Vue 3.",
55
"keywords": [
66
"vue",

‎src/accordion/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
border-top: 1px solid $gray-200;
1010
border-bottom: 1px solid $gray-200;
1111
cursor: pointer;
12+
-webkit-user-select: none;
1213
user-select: none;
1314
transition: border-bottom-color 0.35s;
1415
}

‎src/badge/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
right: 0;
1313
transform: translateX(50%);
1414
cursor: default;
15+
-webkit-user-select: none;
1516
user-select: none;
1617
z-index: 1;
1718

‎src/button/index.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -211,9 +211,31 @@
211211
background-color: $danger;
212212
}
213213
}
214+
215+
&-text {
216+
display: inline-block;
217+
font-size: 14px;
218+
219+
&.sk-btn-small {
220+
font-size: 12px;
221+
}
222+
223+
&.sk-btn-large {
224+
font-size: 20px;
225+
}
226+
}
214227
}
215228

216229
a.sk-btn {
217230
color: $white;
218231
text-decoration: none !important;
232+
233+
&-text {
234+
cursor: pointer;
235+
}
236+
}
237+
238+
span.sk-btn-text {
239+
-webkit-user-select: none;
240+
user-select: none;
219241
}

0 commit comments

Comments
 (0)