Skip to content

Commit 0ac5a15

Browse files
haoziqaqhaoziqaq
committed
feat(form): add segmented buttons for period selection and enhance form functionality
1 parent 6860a88 commit 0ac5a15

7 files changed

Lines changed: 196 additions & 80 deletions

File tree

‎packages/varlet-ui/src/form/docs/en-US.md‎

Lines changed: 73 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,38 @@ Provides the ability to control all form components.
99

1010
```html
1111
<script setup>
12-
import { reactive, ref } from 'vue'
12+
import { computed, reactive, ref } from 'vue'
1313
1414
const formData = reactive({
1515
username: '',
1616
password: '',
1717
otp: '',
18+
email: '',
1819
department: '',
20+
period: undefined,
1921
gender: undefined,
2022
license: false,
21-
range: 10,
23+
range: 0,
2224
count: 0,
2325
group: [],
2426
score: 0,
2527
like: [],
26-
files: []
28+
files: [],
29+
custom: false,
2730
})
2831
const form = ref(null)
2932
const disabled = ref(false)
3033
const readonly = ref(false)
34+
35+
const suggestions = computed(() =>
36+
['@qq.com', '@163.com', '@gmail.com'].map((suffix) => {
37+
const [prefix] = formData.email.split('@')
38+
return {
39+
label: prefix + suffix,
40+
value: prefix + suffix,
41+
}
42+
}),
43+
)
3144
</script>
3245

3346
<template>
@@ -36,98 +49,121 @@ const readonly = ref(false)
3649
:disabled="disabled"
3750
:readonly="readonly"
3851
scroll-to-error="start"
52+
scroll-to-error-offset-y="14.4vmin"
3953
>
40-
<var-space direction="column" :size="[14, 0]">
54+
<var-space direction="column" :size="['4vmin', 0]">
4155
<var-input
42-
placeholder="Please input username"
43-
:rules="v => !!v || 'The username cannot be empty'"
4456
v-model="formData.username"
57+
placeholder="Please input username"
58+
:rules="[(v) => !!v || 'The username cannot be empty']"
4559
/>
4660
<var-input
61+
v-model="formData.password"
4762
type="password"
4863
placeholder="Please input password"
4964
:rules="[v => !!v || 'The password cannot be empty', (v) => v.length >= 8 || 'The password cannot be less than 8 characters']"
50-
v-model="formData.password"
65+
/>
66+
<var-auto-complete
67+
v-model="formData.email"
68+
placeholder="Please input email"
69+
:rules="[(v) => !!v || 'The email cannot be empty']"
70+
:options="suggestions"
5171
/>
5272
<var-select
53-
placeholder="Please select department"
54-
:rules="v => !!v || 'The select cannot be empty'"
5573
v-model="formData.department"
74+
placeholder="Please select department"
75+
:rules="[(v) => !!v || 'The select cannot be empty']"
5676
>
5777
<var-option label="Eat department" />
5878
<var-option label="Sleep department" />
5979
<var-option label="Play game department" />
6080
</var-select>
6181
<var-select
82+
v-model="formData.group"
6283
multiple
6384
placeholder="Please select group"
64-
:rules="v => v.length >= 1 || 'The select cannot be empty'"
65-
v-model="formData.group"
85+
:rules="[(v) => v.length >= 1 || 'The select cannot be empty']"
6686
>
6787
<var-option label="Eat group" />
6888
<var-option label="Sleep group" />
6989
<var-option label="Play game group" />
7090
</var-select>
91+
<var-segmented-buttons
92+
v-model="formData.period"
93+
:rules="[(v) => !!v || 'A period must be selected']"
94+
>
95+
<var-segmented-button checked-value="day">Day</var-segmented-button>
96+
<var-segmented-button checked-value="week">Week</var-segmented-button>
97+
<var-segmented-button checked-value="month">Month</var-segmented-button>
98+
</var-segmented-buttons>
7199
<var-radio-group
72-
:rules="v => !!v || 'The gender cannot be empty'"
73100
v-model="formData.gender"
101+
:rules="[(v) => !!v || 'The gender cannot be empty']"
74102
>
75103
<var-radio :checked-value="1">Male</var-radio>
76104
<var-radio :checked-value="2">Female</var-radio>
77105
</var-radio-group>
78106
<var-checkbox-group
79-
:rules="v => v.length > 0 || 'The select cannot be empty'"
80107
v-model="formData.like"
108+
:rules="[(v) => v.length > 0 || 'The select cannot be empty']"
81109
>
82110
<var-checkbox :checked-value="1">Eat</var-checkbox>
83111
<var-checkbox :checked-value="2">Sleep</var-checkbox>
84112
<var-checkbox :checked-value="3">Play game</var-checkbox>
85113
</var-checkbox-group>
86114
<var-rate
87-
:rules="v => v >= 3 || 'It has to be greater than 2'"
88115
v-model="formData.score"
116+
:rules="[(v) => v >= 3 || 'It has to be greater than 2']"
89117
/>
90118
<var-switch
91-
variant
92-
:rules="v => !!v || 'You must turn on'"
93119
v-model="formData.license"
120+
variant
121+
:rules="[(v) => !!v || 'You must turn on']"
94122
/>
95123
<var-counter
96-
:rules="v => v > 10 || 'It has to be greater than 10'"
97124
v-model="formData.count"
125+
:rules="[(v) => v > 10 || 'It has to be greater than 10']"
98126
/>
99127
<var-slider
100-
:rules="v => v > 10 || 'It has to be greater than 10'"
101128
v-model="formData.range"
129+
:rules="[(v) => v > 10 || 'It has to be greater than 10']"
102130
/>
103131
<var-otp-input
104132
v-model="formData.otp"
105133
:rules="[v => !!v || 'The OTP cannot be empty', (v) => v.length === 6 || 'The OTP length must be 6']"
106134
/>
107135
<var-uploader
108-
:rules="v => v.length >= 1 || 'Upload at least one picture'"
109136
v-model="formData.files"
137+
:rules="[(v) => v.length >= 1 || 'Upload at least one picture']"
110138
/>
111-
112-
<var-space direction="column" :size="[14, 0]">
113-
<var-button block type="danger" @click="form.reset()">
114-
Empty form
115-
</var-button>
116-
<var-button block type="warning" @click="form.resetValidation()">
117-
Empty the validation
118-
</var-button>
119-
<var-button block type="success" @click="form.validate()">
120-
Trigger validation
121-
</var-button>
122-
<var-button block type="info" @click="disabled = !disabled">
123-
Form disabled
124-
</var-button>
125-
<var-button block type="primary" @click="readonly = !readonly">
126-
Form readonly
127-
</var-button>
128-
</var-space>
129139
</var-space>
140+
141+
<var-custom-form-component
142+
v-model="formData.custom"
143+
extra-message="Extra message"
144+
:rules="[(v) => !!v || 'Please check it']"
145+
>
146+
Click toggle
147+
</var-custom-form-component>
130148
</var-form>
149+
150+
<var-space direction="column" :size="['4vmin', 0]">
151+
<var-button block type="danger" @click="form.reset()">
152+
Empty form
153+
</var-button>
154+
<var-button block type="warning" @click="form.resetValidation()">
155+
Empty the validation
156+
</var-button>
157+
<var-button block type="success" @click="form.validate()">
158+
Trigger validation
159+
</var-button>
160+
<var-button block type="info" @click="disabled = !disabled">
161+
Form disabled
162+
</var-button>
163+
<var-button block type="primary" @click="readonly = !readonly">
164+
Form readonly
165+
</var-button>
166+
</var-space>
131167
</template>
132168
```
133169

‎packages/varlet-ui/src/form/docs/zh-CN.md‎

Lines changed: 61 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,30 @@
99

1010
```html
1111
<script setup>
12-
import { reactive, ref } from 'vue'
12+
import { computed, reactive, ref } from 'vue'
1313
1414
const formData = reactive({
1515
username: '',
1616
password: '',
1717
otp: '',
1818
email: '',
1919
department: '',
20+
period: undefined,
2021
gender: undefined,
2122
license: false,
22-
range: 10,
23+
range: 0,
2324
count: 0,
2425
group: [],
2526
score: 0,
2627
like: [],
27-
files: []
28+
files: [],
29+
custom: false,
2830
})
2931
const form = ref(null)
3032
const disabled = ref(false)
3133
const readonly = ref(false)
3234
33-
const emailSuggestions = computed(() =>
35+
const suggestions = computed(() =>
3436
['@qq.com', '@163.com', '@gmail.com'].map((suffix) => {
3537
const [prefix] = formData.email.split('@')
3638
return {
@@ -47,104 +49,121 @@ const emailSuggestions = computed(() =>
4749
:disabled="disabled"
4850
:readonly="readonly"
4951
scroll-to-error="start"
52+
scroll-to-error-offset-y="14.4vmin"
5053
>
51-
<var-space direction="column" :size="[14, 0]">
54+
<var-space direction="column" :size="['4vmin', 0]">
5255
<var-input
53-
placeholder="请输入用户名"
54-
:rules="v => !!v || '用户名不能为空'"
5556
v-model="formData.username"
57+
placeholder="请输入用户名"
58+
:rules="[(v) => !!v || '用户名不能为空']"
5659
/>
5760
<var-input
61+
v-model="formData.password"
5862
type="password"
5963
placeholder="请输入密码"
60-
:rules="[v => !!v || '密码不能为空', (v) => v.length >= 8 || '密码长度不能低于8位']"
61-
v-model="formData.password"
64+
:rules="[(v) => !!v || '密码不能为空', (v) => v.length >= 8 || '密码长度不能低于8位']"
6265
/>
6366
<var-auto-complete
64-
placeholder="请输入邮箱"
65-
:rules="v => !!v || '邮箱不能为空'"
66-
:options="emailSuggestions"
6767
v-model="formData.email"
68+
placeholder="请输入邮箱"
69+
:rules="[(v) => !!v || '邮箱不能为空']"
70+
:options="suggestions"
6871
/>
6972
<var-select
70-
placeholder="请选择部门"
71-
:rules="v => !!v || '必须选一个部门'"
7273
v-model="formData.department"
74+
placeholder="请选择部门"
75+
:rules="[(v) => !!v || '必须选一个部门']"
7376
>
7477
<var-option label="吃饭部" />
7578
<var-option label="睡觉部" />
7679
<var-option label="打游戏部" />
7780
</var-select>
7881
<var-select
82+
v-model="formData.group"
7983
multiple
8084
placeholder="请选择组织"
81-
:rules="v => v.length >= 1 || '至少选择一个组织'"
82-
v-model="formData.group"
85+
:rules="[(v) => v.length >= 1 || '至少选择一个组织']"
8386
>
8487
<var-option label="吃饭组" />
8588
<var-option label="睡觉组" />
8689
<var-option label="打游戏组" />
8790
</var-select>
91+
<var-segmented-buttons
92+
v-model="formData.period"
93+
:rules="[(v) => !!v || '必须选择一个周期']"
94+
>
95+
<var-segmented-button checked-value="day">天</var-segmented-button>
96+
<var-segmented-button checked-value="week">周</var-segmented-button>
97+
<var-segmented-button checked-value="month">月</var-segmented-button>
98+
</var-segmented-buttons>
8899
<var-radio-group
89-
:rules="v => !!v || '必须选择一个性别'"
90100
v-model="formData.gender"
101+
:rules="[(v) => !!v || '必须选择一个性别']"
91102
>
92103
<var-radio :checked-value="1">男</var-radio>
93104
<var-radio :checked-value="2">女</var-radio>
94105
</var-radio-group>
95106
<var-checkbox-group
96-
:rules="v => v.length > 0 || '至少选择一个爱好'"
97107
v-model="formData.like"
108+
:rules="[(v) => v.length > 0 || '至少选择一个爱好']"
98109
>
99110
<var-checkbox :checked-value="1">吃饭</var-checkbox>
100111
<var-checkbox :checked-value="2">睡觉</var-checkbox>
101112
<var-checkbox :checked-value="3">打游戏</var-checkbox>
102113
</var-checkbox-group>
103114
<var-rate
104-
:rules="v => v >= 3 || '必须大于2'"
105115
v-model="formData.score"
116+
:rules="[(v) => v >= 3 || '必须大于2']"
106117
/>
107118
<var-switch
108-
variant
109-
:rules="v => !!v || '您必须开启'"
110119
v-model="formData.license"
120+
variant
121+
:rules="[(v) => !!v || '您必须开启']"
111122
/>
112123
<var-counter
113-
:rules="v => v > 10 || '必须大于10'"
114124
v-model="formData.count"
125+
:rules="[(v) => v > 10 || '必须大于10']"
115126
/>
116127
<var-slider
117-
:rules="v => v > 10 || '必须大于10'"
118128
v-model="formData.range"
129+
:rules="[(v) => v > 10 || '必须大于10']"
119130
/>
120131
<var-otp-input
121132
v-model="formData.otp"
122133
:rules="[v => !!v || '验证码不能为空', (v) => v.length === 6 || '验证码长度必须为 6']"
123134
/>
124135
<var-uploader
125-
:rules="v => v.length >= 1 || '至少上传一张图片'"
126136
v-model="formData.files"
137+
:rules="[(v) => v.length >= 1 || '至少上传一张图片']"
127138
/>
128-
129-
<var-space direction="column" :size="[14, 0]">
130-
<var-button block type="danger" @click="form.reset()">
131-
清空表单
132-
</var-button>
133-
<var-button block type="warning" @click="form.resetValidation()">
134-
清空验证
135-
</var-button>
136-
<var-button block type="success" @click="form.validate()">
137-
触发验证
138-
</var-button>
139-
<var-button block type="info" @click="disabled = !disabled">
140-
表单禁用
141-
</var-button>
142-
<var-button block type="primary" @click="readonly = !readonly">
143-
表单只读
144-
</var-button>
145-
</var-space>
146139
</var-space>
140+
141+
<var-custom-form-component
142+
v-model="formData.custom"
143+
extra-message="附加信息"
144+
:rules="[(v) => !!v || '必须是对勾']"
145+
>
146+
点我切换
147+
</var-custom-form-component>
147148
</var-form>
149+
150+
<var-space direction="column" :size="['4vmin', 0]">
151+
<var-button block type="danger" @click="form.reset()">
152+
清空表单
153+
</var-button>
154+
<var-button block type="warning" @click="form.resetValidation()">
155+
清空验证
156+
</var-button>
157+
<var-button block type="success" @click="form.validate()">
158+
触发验证
159+
</var-button>
160+
<var-button block type="info" @click="disabled = !disabled">
161+
表单禁用
162+
</var-button>
163+
<var-button block type="primary" @click="readonly = !readonly">
164+
表单只读
165+
</var-button>
166+
</var-space>
148167
</template>
149168
```
150169

0 commit comments

Comments
 (0)