@opentiny/vue-docs 3.19.4 → 3.19.6

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.
Files changed (38) hide show
  1. package/demos/pc/app/form/basic-usage-composition-api.vue +5 -5
  2. package/demos/pc/app/form/basic-usage.spec.ts +0 -4
  3. package/demos/pc/app/form/basic-usage.vue +4 -4
  4. package/demos/pc/app/form/custom-validation-rule-composition-api.vue +1 -1
  5. package/demos/pc/app/form/custom-validation-rule.vue +1 -1
  6. package/demos/pc/app/form/display-only-composition-api.vue +19 -20
  7. package/demos/pc/app/form/display-only.spec.ts +4 -4
  8. package/demos/pc/app/form/display-only.vue +19 -20
  9. package/demos/pc/app/form/form-disabled-composition-api.vue +26 -33
  10. package/demos/pc/app/form/form-disabled.spec.js +30 -30
  11. package/demos/pc/app/form/form-disabled.vue +26 -34
  12. package/demos/pc/app/form/form-validate-field-composition-api.vue +2 -2
  13. package/demos/pc/app/form/form-validate-field.vue +2 -2
  14. package/demos/pc/app/form/form-validation-composition-api.vue +8 -8
  15. package/demos/pc/app/form/form-validation.spec.ts +3 -3
  16. package/demos/pc/app/form/form-validation.vue +9 -8
  17. package/demos/pc/app/form/size-composition-api.vue +4 -4
  18. package/demos/pc/app/form/size.vue +4 -4
  19. package/demos/pc/app/form/validate-debounce-composition-api.vue +1 -1
  20. package/demos/pc/app/form/validate-debounce.vue +1 -1
  21. package/demos/pc/app/grid/editor/popeditor-in-grid-remote-search-composition-api.vue +1 -1
  22. package/demos/pc/app/grid/editor/popeditor-in-grid-remote-search.vue +1 -1
  23. package/demos/pc/app/grid/empty/empty-data-tip-composition-api.vue +1 -1
  24. package/demos/pc/app/grid/empty/empty-data-tip.vue +1 -1
  25. package/demos/pc/app/grid/operation-column/selection-config-composition-api.vue +0 -1
  26. package/demos/pc/app/grid/webdoc/grid-editor.js +2 -2
  27. package/demos/pc/app/hrapprover/basic-usage-composition-api.vue +1 -0
  28. package/demos/pc/app/hrapprover/basic-usage.vue +1 -0
  29. package/demos/pc/app/hrapprover/category-type-composition-api.vue +1 -0
  30. package/demos/pc/app/hrapprover/category-type.vue +1 -0
  31. package/demos/pc/app/hrapprover/custom-service-composition-api.vue +1 -0
  32. package/demos/pc/app/hrapprover/custom-service.vue +1 -0
  33. package/demos/pc/app/hrapprover/disabled-composition-api.vue +1 -0
  34. package/demos/pc/app/hrapprover/disabled.vue +1 -0
  35. package/package.json +9 -9
  36. package/playground/App.vue +61 -36
  37. package/src/views/components/components.vue +13 -13
  38. package/src/views/layout/layout.vue +4 -2
package/demos/pc/app/form/basic-usage-composition-api.vue CHANGED
@@ -1,13 +1,13 @@
1
1
  <template>
2
2
  <div class="demo-form">
3
3
  <tiny-form label-width="100px">
4
- <tiny-form-item label="数字">
5
- <tiny-numeric v-model="createData.quantity"></tiny-numeric>
6
- </tiny-form-item>
7
4
  <tiny-form-item label="单选">
8
5
  <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
9
6
  <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
10
7
  </tiny-form-item>
8
+ <tiny-form-item label="数字">
9
+ <tiny-numeric v-model="createData.quantity"></tiny-numeric>
10
+ </tiny-form-item>
11
11
  <tiny-form-item label="日期">
12
12
  <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
13
13
  </tiny-form-item>
@@ -16,7 +16,7 @@
16
16
  </tiny-form-item>
17
17
  <tiny-form-item label="提示">
18
18
  <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
19
- <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
19
+ <tiny-input v-model="createData.input"></tiny-input>
20
20
  </tiny-tooltip>
21
21
  </tiny-form-item>
22
22
  <tiny-form-item label="文本">
@@ -30,7 +30,7 @@
30
30
  </template>
31
31
 
32
32
  <script setup>
33
- import { ref, reactive } from 'vue'
33
+ import { reactive } from 'vue'
34
34
  import {
35
35
  TinyForm,
36
36
  TinyFormItem,
package/demos/pc/app/form/basic-usage.spec.ts CHANGED
@@ -30,10 +30,6 @@ test('测试基本表单', async ({ page }) => {
30
30
  await page.getByRole('listitem').filter({ hasText: '00:30' }).click()
31
31
  await expect(timePicker).toHaveValue('00:30')
32
32
 
33
- // 其他输入
34
- await demo.getByPlaceholder('click').first().hover()
35
- await expect(page.getByRole('tooltip', { name: 'TinyUI Form Demo' })).toBeVisible()
36
-
37
33
  // 提交按钮
38
34
  const dialog = page.locator('.tiny-modal.active')
39
35
  await demo.getByRole('button', { name: '提交' }).click()
package/demos/pc/app/form/basic-usage.vue CHANGED
@@ -1,13 +1,13 @@
1
1
  <template>
2
2
  <div class="demo-form">
3
3
  <tiny-form label-width="100px">
4
- <tiny-form-item label="数字">
5
- <tiny-numeric v-model="createData.quantity"></tiny-numeric>
6
- </tiny-form-item>
7
4
  <tiny-form-item label="单选">
8
5
  <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
9
6
  <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
10
7
  </tiny-form-item>
8
+ <tiny-form-item label="数字">
9
+ <tiny-numeric v-model="createData.quantity"></tiny-numeric>
10
+ </tiny-form-item>
11
11
  <tiny-form-item label="日期">
12
12
  <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
13
13
  </tiny-form-item>
@@ -16,7 +16,7 @@
16
16
  </tiny-form-item>
17
17
  <tiny-form-item label="提示">
18
18
  <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
19
- <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
19
+ <tiny-input v-model="createData.input"></tiny-input>
20
20
  </tiny-tooltip>
21
21
  </tiny-form-item>
22
22
  <tiny-form-item label="文本">
package/demos/pc/app/form/custom-validation-rule-composition-api.vue CHANGED
@@ -9,7 +9,7 @@
9
9
  </tiny-form-item>
10
10
  <tiny-form-item>
11
11
  <tiny-button type="primary" @click="handleSubmit()"> 注册 </tiny-button>
12
- <tiny-button type="primary" @click="changeRule"> 改变校验规则 </tiny-button>
12
+ <tiny-button @click="changeRule"> 改变校验规则 </tiny-button>
13
13
  </tiny-form-item>
14
14
  </tiny-form>
15
15
  </div>
package/demos/pc/app/form/custom-validation-rule.vue CHANGED
@@ -9,7 +9,7 @@
9
9
  </tiny-form-item>
10
10
  <tiny-form-item>
11
11
  <tiny-button type="primary" @click="handleSubmit()"> 注册 </tiny-button>
12
- <tiny-button type="primary" @click="changeRule"> 改变校验规则 </tiny-button>
12
+ <tiny-button @click="changeRule"> 改变校验规则 </tiny-button>
13
13
  </tiny-form-item>
14
14
  </tiny-form>
15
15
  </div>
package/demos/pc/app/form/display-only-composition-api.vue CHANGED
@@ -2,13 +2,22 @@
2
2
  <div class="demo-form">
3
3
  <div class="title">表单是否仅展示：<tiny-switch v-model="displayOnly"></tiny-switch></div>
4
4
  <tiny-form :inline="inline" label-position="top" :display-only="displayOnly">
5
- <tiny-form-item label="超长文字">
6
- <tiny-input v-model="formData.input"></tiny-input>
5
+ <tiny-form-item label="开关">
6
+ <tiny-switch></tiny-switch>
7
7
  </tiny-form-item>
8
8
  <tiny-form-item label="radio">
9
9
  <tiny-radio v-model="formData.radioValue" label="1">男</tiny-radio>
10
10
  <tiny-radio v-model="formData.radioValue" label="2" text="女"></tiny-radio>
11
11
  </tiny-form-item>
12
+ <tiny-form-item label="复选框">
13
+ <tiny-checkbox v-model="formData.checked">复选框</tiny-checkbox>
14
+ </tiny-form-item>
15
+ <tiny-form-item label="复选框组">
16
+ <tiny-checkbox-group v-model="formData.checkedArr">
17
+ <tiny-checkbox label="复选框1" name="name1"></tiny-checkbox>
18
+ <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
19
+ </tiny-checkbox-group>
20
+ </tiny-form-item>
12
21
  <tiny-form-item label="select">
13
22
  <tiny-select v-model="formData.select">
14
23
  <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
@@ -19,27 +28,12 @@
19
28
  <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
20
29
  </tiny-select>
21
30
  </tiny-form-item>
22
- <tiny-form-item label="文本域">
23
- <tiny-input v-model="formData.textareaValue" type="textarea"></tiny-input>
24
- </tiny-form-item>
25
31
  <tiny-form-item label="我的密码">
26
32
  <tiny-input v-model="formData.passwordValue" type="password"></tiny-input>
27
33
  </tiny-form-item>
28
34
  <tiny-form-item label="数字">
29
35
  <tiny-numeric v-model="formData.quantity" unit="个"></tiny-numeric>
30
36
  </tiny-form-item>
31
- <tiny-form-item label="复选框">
32
- <tiny-checkbox v-model="formData.checked">复选框</tiny-checkbox>
33
- </tiny-form-item>
34
- <tiny-form-item label="复选框组">
35
- <tiny-checkbox-group v-model="formData.checkedArr">
36
- <tiny-checkbox label="复选框1" name="name1"></tiny-checkbox>
37
- <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
38
- </tiny-checkbox-group>
39
- </tiny-form-item>
40
- <tiny-form-item label="开关">
41
- <tiny-switch></tiny-switch>
42
- </tiny-form-item>
43
37
  <tiny-form-item label="自动完成">
44
38
  <tiny-autocomplete
45
39
  v-model="formData.autocompleteValue"
@@ -50,6 +44,12 @@
50
44
  <tiny-form-item label="datePicker">
51
45
  <tiny-date-picker v-model="formData.datePicker"></tiny-date-picker>
52
46
  </tiny-form-item>
47
+ <tiny-form-item label="超长文字">
48
+ <tiny-input v-model="formData.input"></tiny-input>
49
+ </tiny-form-item>
50
+ <tiny-form-item label="文本域">
51
+ <tiny-input v-model="formData.textareaValue" type="textarea"></tiny-input>
52
+ </tiny-form-item>
53
53
  </tiny-form>
54
54
  </div>
55
55
  </template>
@@ -146,7 +146,7 @@ const pickerOptions = ref({
146
146
  })
147
147
  const formData = ref({
148
148
  input:
149
- '111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
149
+ 'TinyVue 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践，欢迎尝试使用 TinyVue。',
150
150
  radioValue: '1',
151
151
  select: '选项1',
152
152
  select1: ['选项1', '选项2'],
@@ -164,7 +164,7 @@ const formData = ref({
164
164
  monthrange: ['2022-01', '2023-01'],
165
165
  quantity: 1,
166
166
  textareaValue:
167
- '大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦',
167
+ 'OpenTiny 是一套企业级组件库解决方案，适配 PC 端 / 移动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具，可帮助开发者高效开发 Web 应用。',
168
168
  checked: true,
169
169
  checkedArr: ['复选框1'],
170
170
  rate1: 2,
@@ -202,7 +202,6 @@ function createFilter(queryString) {
202
202
  }
203
203
  .title {
204
204
  margin-bottom: 30px;
205
- margin-left: 16px;
206
205
  font-size: 14px;
207
206
  }
208
207
  </style>
package/demos/pc/app/form/display-only.spec.ts CHANGED
@@ -9,13 +9,13 @@ test('表单仅展示', async ({ page }) => {
9
9
  const getItem = (index: number) => demo.locator('.tiny-form-item__content').nth(index)
10
10
 
11
11
  await switchBtn.click()
12
- await expect(demo.locator('.tiny-form-item').first().locator('input')).toBeVisible()
12
+ await expect(getItem(10).locator('input')).toBeVisible()
13
13
 
14
14
  await switchBtn.click()
15
15
  await expect(demo.locator('.tiny-form-item').first().locator('input')).not.toBeVisible()
16
16
  await expect(getItem(1).locator('.tiny-radio__inner')).not.toBeVisible()
17
17
  await expect(getItem(1)).toHaveText('男')
18
- await expect(getItem(2).locator('input')).not.toBeVisible()
19
- await expect(getItem(2).locator('.tiny-input-display-only__content')).toHaveText('黄金糕')
20
- await expect(getItem(3).locator('.tiny-input-display-only__content')).toHaveText('黄金糕; 双皮奶')
18
+ await expect(getItem(4).locator('input')).not.toBeVisible()
19
+ await expect(getItem(4).locator('.tiny-input-display-only__content')).toHaveText('黄金糕')
20
+ await expect(getItem(5).locator('.tiny-input-display-only__content')).toHaveText('黄金糕; 双皮奶')
21
21
  })
package/demos/pc/app/form/display-only.vue CHANGED
@@ -2,13 +2,22 @@
2
2
  <div class="demo-form">
3
3
  <div class="title">表单是否仅展示：<tiny-switch v-model="displayOnly"></tiny-switch></div>
4
4
  <tiny-form :inline="inline" label-position="top" :display-only="displayOnly">
5
- <tiny-form-item label="超长文字">
6
- <tiny-input v-model="formData.input"></tiny-input>
5
+ <tiny-form-item label="开关">
6
+ <tiny-switch></tiny-switch>
7
7
  </tiny-form-item>
8
8
  <tiny-form-item label="radio">
9
9
  <tiny-radio v-model="formData.radioValue" label="1">男</tiny-radio>
10
10
  <tiny-radio v-model="formData.radioValue" label="2" text="女"></tiny-radio>
11
11
  </tiny-form-item>
12
+ <tiny-form-item label="复选框">
13
+ <tiny-checkbox v-model="formData.checked">复选框</tiny-checkbox>
14
+ </tiny-form-item>
15
+ <tiny-form-item label="复选框组">
16
+ <tiny-checkbox-group v-model="formData.checkedArr">
17
+ <tiny-checkbox label="复选框1" name="name1"></tiny-checkbox>
18
+ <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
19
+ </tiny-checkbox-group>
20
+ </tiny-form-item>
12
21
  <tiny-form-item label="select">
13
22
  <tiny-select v-model="formData.select">
14
23
  <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
@@ -19,27 +28,12 @@
19
28
  <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
20
29
  </tiny-select>
21
30
  </tiny-form-item>
22
- <tiny-form-item label="文本域">
23
- <tiny-input v-model="formData.textareaValue" type="textarea"></tiny-input>
24
- </tiny-form-item>
25
31
  <tiny-form-item label="我的密码">
26
32
  <tiny-input v-model="formData.passwordValue" type="password"></tiny-input>
27
33
  </tiny-form-item>
28
34
  <tiny-form-item label="数字">
29
35
  <tiny-numeric v-model="formData.quantity" unit="个"></tiny-numeric>
30
36
  </tiny-form-item>
31
- <tiny-form-item label="复选框">
32
- <tiny-checkbox v-model="formData.checked">复选框</tiny-checkbox>
33
- </tiny-form-item>
34
- <tiny-form-item label="复选框组">
35
- <tiny-checkbox-group v-model="formData.checkedArr">
36
- <tiny-checkbox label="复选框1" name="name1"></tiny-checkbox>
37
- <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
38
- </tiny-checkbox-group>
39
- </tiny-form-item>
40
- <tiny-form-item label="开关">
41
- <tiny-switch></tiny-switch>
42
- </tiny-form-item>
43
37
  <tiny-form-item label="自动完成">
44
38
  <tiny-autocomplete
45
39
  v-model="formData.autocompleteValue"
@@ -50,6 +44,12 @@
50
44
  <tiny-form-item label="datePicker">
51
45
  <tiny-date-picker v-model="formData.datePicker"></tiny-date-picker>
52
46
  </tiny-form-item>
47
+ <tiny-form-item label="超长文字">
48
+ <tiny-input v-model="formData.input"></tiny-input>
49
+ </tiny-form-item>
50
+ <tiny-form-item label="文本域">
51
+ <tiny-input v-model="formData.textareaValue" type="textarea"></tiny-input>
52
+ </tiny-form-item>
53
53
  </tiny-form>
54
54
  </div>
55
55
  </template>
@@ -162,7 +162,7 @@ export default {
162
162
  },
163
163
  formData: {
164
164
  input:
165
- '111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
165
+ 'TinyVue 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践，欢迎尝试使用 TinyVue。',
166
166
  radioValue: '1',
167
167
  select: '选项1',
168
168
  select1: ['选项1', '选项2'],
@@ -180,7 +180,7 @@ export default {
180
180
  monthrange: ['2022-01', '2023-01'],
181
181
  quantity: 1,
182
182
  textareaValue:
183
- '大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦',
183
+ 'OpenTiny 是一套企业级组件库解决方案，适配 PC 端 / 移动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具，可帮助开发者高效开发 Web 应用。',
184
184
  checked: true,
185
185
  checkedArr: ['复选框1'],
186
186
  rate1: 2,
@@ -219,7 +219,6 @@ export default {
219
219
  }
220
220
  .title {
221
221
  margin-bottom: 30px;
222
- margin-left: 16px;
223
222
  font-size: 14px;
224
223
  }
225
224
  </style>
package/demos/pc/app/form/form-disabled-composition-api.vue CHANGED
@@ -2,21 +2,12 @@
2
2
  <div class="demo-form">
3
3
  <h3 class="title">是否禁用表单：<tiny-switch v-model="formDisabled"></tiny-switch></h3>
4
4
  <tiny-form :disabled="formDisabled" label-width="150px">
5
- <tiny-form-item label="Input">
6
- <tiny-input v-model="createData.user"></tiny-input>
7
- </tiny-form-item>
8
- <tiny-form-item label="Select">
9
- <tiny-select v-model="createData.select" placeholder="请选择">
10
- <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
11
- </tiny-option>
12
- </tiny-select>
13
- </tiny-form-item>
14
- <tiny-form-item label="Numeric">
15
- <tiny-numeric v-model="createData.quantity"></tiny-numeric>
16
- </tiny-form-item>
17
5
  <tiny-form-item label="Switch">
18
6
  <tiny-switch v-model="createData.sw"></tiny-switch>
19
7
  </tiny-form-item>
8
+ <tiny-form-item label="Link">
9
+ <tiny-link>默认链接</tiny-link>
10
+ </tiny-form-item>
20
11
  <tiny-form-item label="Radio">
21
12
  <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
22
13
  <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
@@ -31,6 +22,24 @@
31
22
  <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
32
23
  </tiny-checkbox-group>
33
24
  </tiny-form-item>
25
+ <tiny-form-item label="IpAddress">
26
+ <tiny-ip-address v-model="createData.ipAddress"></tiny-ip-address>
27
+ </tiny-form-item>
28
+ <tiny-form-item label="ButtonGroup">
29
+ <tiny-button-group :data="groupData"></tiny-button-group>
30
+ </tiny-form-item>
31
+ <tiny-form-item label="Input">
32
+ <tiny-input v-model="createData.user"></tiny-input>
33
+ </tiny-form-item>
34
+ <tiny-form-item label="Select">
35
+ <tiny-select v-model="createData.select" placeholder="">
36
+ <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
37
+ </tiny-option>
38
+ </tiny-select>
39
+ </tiny-form-item>
40
+ <tiny-form-item label="Numeric">
41
+ <tiny-numeric v-model="createData.quantity"></tiny-numeric>
42
+ </tiny-form-item>
34
43
  <tiny-form-item label="Datepicker">
35
44
  <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
36
45
  </tiny-form-item>
@@ -38,7 +47,6 @@
38
47
  <tiny-time-picker
39
48
  v-model="createData.timePicker"
40
49
  :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
41
- placeholder="任意时间点"
42
50
  ></tiny-time-picker>
43
51
  </tiny-form-item>
44
52
  <tiny-form-item label="Droptime">
@@ -46,35 +54,21 @@
46
54
  </tiny-form-item>
47
55
  <tiny-form-item label="Tooltip">
48
56
  <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
49
- <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
57
+ <tiny-input v-model="createData.input"></tiny-input>
50
58
  </tiny-tooltip>
51
59
  </tiny-form-item>
52
60
  <tiny-form-item label="Textarea">
53
61
  <tiny-input v-model="createData.textarea" type="textarea" maxlength="15"> </tiny-input>
54
62
  </tiny-form-item>
55
63
  <tiny-form-item label="Autocomplete">
56
- <tiny-autocomplete
57
- v-model="createData.autocomplete"
58
- placeholder="请输入内容"
59
- :fetch-suggestions="querySearch"
60
- ></tiny-autocomplete>
61
- </tiny-form-item>
62
- <tiny-form-item label="ButtonGroup">
63
- <tiny-button-group :data="groupData"></tiny-button-group>
64
+ <tiny-autocomplete v-model="createData.autocomplete" :fetch-suggestions="querySearch"></tiny-autocomplete>
64
65
  </tiny-form-item>
65
66
  <tiny-form-item label="Cascader">
66
- <tiny-cascader :options="options" :props="{ emitPath: false }"></tiny-cascader>
67
- </tiny-form-item>
68
- <tiny-form-item label="IpAddress">
69
- <tiny-ip-address v-model="createData.ipAddress"></tiny-ip-address>
70
- </tiny-form-item>
71
- <tiny-form-item label="Link">
72
- <tiny-link>默认链接</tiny-link>
67
+ <tiny-cascader :options="options" :props="{ emitPath: false }" placeholder=" "></tiny-cascader>
73
68
  </tiny-form-item>
74
69
  <tiny-form-item label="PopEditor">
75
70
  <tiny-popeditor
76
71
  v-model="createData.popEditor"
77
- placeholder="请选择"
78
72
  :grid-op="gridOp"
79
73
  text-field="name"
80
74
  value-field="id"
@@ -100,7 +94,6 @@ import {
100
94
  TinyDropTimes,
101
95
  TinyTooltip,
102
96
  TinyInput,
103
- TinyButton,
104
97
  TinyAutocomplete,
105
98
  TinyButtonGroup,
106
99
  TinyCascader,
@@ -172,7 +165,7 @@ const gridOp = ref({
172
165
  {
173
166
  field: 'id',
174
167
  title: 'ID',
175
- width: 40
168
+ width: 60
176
169
  },
177
170
  {
178
171
  field: 'name',
@@ -268,7 +261,7 @@ function createFilter(queryString) {
268
261
 
269
262
  .title {
270
263
  margin-bottom: 30px;
271
- margin-left: 100px;
264
+ margin-left: 80px;
272
265
  font-size: 14px;
273
266
  }
274
267
  </style>
package/demos/pc/app/form/form-disabled.spec.js CHANGED
@@ -18,22 +18,22 @@ test('测试表单禁用', async ({ page }) => {
18
18
  })
19
19
 
20
20
  await switchBtn.click()
21
- await expect(formItem.first().locator('input')).toBeDisabled()
22
- await expect(formItem.nth(1).locator('input')).toBeDisabled()
23
- await expect(formItem.nth(2).locator('.tiny-numeric__input')).toHaveClass(/is-disabled/)
24
- await expect(formItem.nth(3).locator('.tiny-switch')).toHaveClass(/tiny-switch-disabled/)
25
- await expect(formItem.nth(4).locator('input').first()).toBeDisabled()
26
- await expect(formItem.nth(5).locator('input').nth(1)).toBeDisabled()
27
- await expect(formItem.nth(6).locator('input').first()).toBeDisabled()
28
- await expect(formItem.nth(7).locator('input').first()).toBeDisabled()
29
- await expect(formItem.nth(8).locator('input').first()).toBeDisabled()
30
- await expect(formItem.nth(9).locator('input')).toBeDisabled()
31
- await expect(formItem.nth(10).locator('input')).toBeDisabled()
32
- await expect(formItem.nth(11).locator('textarea')).toBeDisabled()
21
+ await expect(formItem.nth(0).locator('.tiny-switch')).toHaveClass(/tiny-switch-disabled/)
22
+ await expect(formItem.nth(2).locator('input').first()).toBeDisabled()
23
+ await expect(formItem.nth(3).locator('input').nth(1)).toBeDisabled()
24
+ await expect(formItem.nth(3).locator('input').first()).toBeDisabled()
25
+ await expect(formItem.nth(6).locator('button').first()).toHaveClass(/disabled/)
26
+ await expect(formItem.nth(7).locator('input')).toBeDisabled()
27
+ await expect(formItem.nth(8).locator('input')).toBeDisabled()
28
+ await expect(formItem.nth(9).locator('.tiny-numeric__input')).toHaveClass(/is-disabled/)
29
+ await expect(formItem.nth(10).locator('input').first()).toBeDisabled()
30
+ await expect(formItem.nth(11).locator('input').first()).toBeDisabled()
33
31
  await expect(formItem.nth(12).locator('input')).toBeDisabled()
34
- await expect(formItem.nth(13).locator('button').first()).toHaveClass(/disabled/)
35
- await expect(formItem.nth(14).locator('input')).toBeDisabled()
36
- await expect(formItem.nth(15).locator('input').first()).toBeDisabled()
32
+ await expect(formItem.nth(13).locator('input')).toBeDisabled()
33
+ await expect(formItem.nth(14).locator('textarea')).toBeDisabled()
34
+ await expect(formItem.nth(15).locator('input')).toBeDisabled()
35
+ await expect(formItem.nth(15).locator('input')).toBeDisabled()
36
+ await expect(formItem.nth(16).locator('input').first()).toBeDisabled()
37
37
  await expect(formItem.nth(17).locator('input').first()).toBeDisabled()
38
38
  // 尝试拖到滑块,应是无法拖动状态
39
39
  const { x, y, height } = await slider.boundingBox()
@@ -45,22 +45,22 @@ test('测试表单禁用', async ({ page }) => {
45
45
  expect(newX).toEqual(x)
46
46
 
47
47
  await switchBtn.click()
48
- await expect(formItem.first().locator('input')).not.toBeDisabled()
49
- await expect(formItem.nth(1).locator('input')).not.toBeDisabled()
50
- await expect(formItem.nth(2).locator('.tiny-numeric__input')).not.toHaveClass(/is-disabled/)
51
- await expect(formItem.nth(3).locator('.tiny-switch')).not.toHaveClass(/tiny-switch-disabled/)
52
- await expect(formItem.nth(4).locator('input').first()).not.toBeDisabled()
53
- await expect(formItem.nth(5).locator('input').nth(1)).not.toBeDisabled()
54
- await expect(formItem.nth(6).locator('input').first()).not.toBeDisabled()
55
- await expect(formItem.nth(7).locator('input').first()).not.toBeDisabled()
56
- await expect(formItem.nth(8).locator('input').first()).not.toBeDisabled()
57
- await expect(formItem.nth(9).locator('input')).not.toBeDisabled()
58
- await expect(formItem.nth(10).locator('input')).not.toBeDisabled()
59
- await expect(formItem.nth(11).locator('textarea')).not.toBeDisabled()
48
+ await expect(formItem.nth(0).locator('.tiny-switch')).not.toHaveClass(/tiny-switch-disabled/)
49
+ await expect(formItem.nth(2).locator('input').first()).not.toBeDisabled()
50
+ await expect(formItem.nth(3).locator('input').nth(1)).not.toBeDisabled()
51
+ await expect(formItem.nth(3).locator('input').first()).not.toBeDisabled()
52
+ await expect(formItem.nth(6).locator('button').first()).not.toHaveClass(/disabled/)
53
+ await expect(formItem.nth(7).locator('input')).not.toBeDisabled()
54
+ await expect(formItem.nth(8).locator('input')).not.toBeDisabled()
55
+ await expect(formItem.nth(9).locator('.tiny-numeric__input')).not.toHaveClass(/is-disabled/)
56
+ await expect(formItem.nth(10).locator('input').first()).not.toBeDisabled()
57
+ await expect(formItem.nth(11).locator('input').first()).not.toBeDisabled()
60
58
  await expect(formItem.nth(12).locator('input')).not.toBeDisabled()
61
- await expect(formItem.nth(13).locator('button').first()).not.toHaveClass(/disabled/)
62
- await expect(formItem.nth(14).locator('input')).not.toBeDisabled()
63
- await expect(formItem.nth(15).locator('input').first()).not.toBeDisabled()
59
+ await expect(formItem.nth(13).locator('input')).not.toBeDisabled()
60
+ await expect(formItem.nth(14).locator('textarea')).not.toBeDisabled()
61
+ await expect(formItem.nth(15).locator('input')).not.toBeDisabled()
62
+ await expect(formItem.nth(15).locator('input')).not.toBeDisabled()
63
+ await expect(formItem.nth(16).locator('input').first()).not.toBeDisabled()
64
64
  await expect(formItem.nth(17).locator('input').first()).not.toBeDisabled()
65
65
  // 尝试拖到滑块,应是可以拖动状态
66
66
  const sliderBox = await slider.boundingBox()
package/demos/pc/app/form/form-disabled.vue CHANGED
@@ -2,21 +2,12 @@
2
2
  <div class="demo-form">
3
3
  <h3 class="title">是否禁用表单：<tiny-switch v-model="formDisabled"></tiny-switch></h3>
4
4
  <tiny-form :disabled="formDisabled" label-width="150px">
5
- <tiny-form-item label="Input">
6
- <tiny-input v-model="createData.user"></tiny-input>
7
- </tiny-form-item>
8
- <tiny-form-item label="Select">
9
- <tiny-select v-model="createData.select" placeholder="请选择">
10
- <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
11
- </tiny-option>
12
- </tiny-select>
13
- </tiny-form-item>
14
- <tiny-form-item label="Numeric">
15
- <tiny-numeric v-model="createData.quantity"></tiny-numeric>
16
- </tiny-form-item>
17
5
  <tiny-form-item label="Switch">
18
6
  <tiny-switch v-model="createData.sw"></tiny-switch>
19
7
  </tiny-form-item>
8
+ <tiny-form-item label="Link">
9
+ <tiny-link>默认链接</tiny-link>
10
+ </tiny-form-item>
20
11
  <tiny-form-item label="Radio">
21
12
  <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
22
13
  <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
@@ -31,6 +22,24 @@
31
22
  <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
32
23
  </tiny-checkbox-group>
33
24
  </tiny-form-item>
25
+ <tiny-form-item label="IpAddress">
26
+ <tiny-ip-address v-model="createData.ipAddress"></tiny-ip-address>
27
+ </tiny-form-item>
28
+ <tiny-form-item label="ButtonGroup">
29
+ <tiny-button-group :data="groupData"></tiny-button-group>
30
+ </tiny-form-item>
31
+ <tiny-form-item label="Input">
32
+ <tiny-input v-model="createData.user"></tiny-input>
33
+ </tiny-form-item>
34
+ <tiny-form-item label="Select">
35
+ <tiny-select v-model="createData.select" placeholder="">
36
+ <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
37
+ </tiny-option>
38
+ </tiny-select>
39
+ </tiny-form-item>
40
+ <tiny-form-item label="Numeric">
41
+ <tiny-numeric v-model="createData.quantity"></tiny-numeric>
42
+ </tiny-form-item>
34
43
  <tiny-form-item label="Datepicker">
35
44
  <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
36
45
  </tiny-form-item>
@@ -38,7 +47,6 @@
38
47
  <tiny-time-picker
39
48
  v-model="createData.timePicker"
40
49
  :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
41
- placeholder="任意时间点"
42
50
  ></tiny-time-picker>
43
51
  </tiny-form-item>
44
52
  <tiny-form-item label="Droptime">
@@ -46,35 +54,21 @@
46
54
  </tiny-form-item>
47
55
  <tiny-form-item label="Tooltip">
48
56
  <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
49
- <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
57
+ <tiny-input v-model="createData.input"></tiny-input>
50
58
  </tiny-tooltip>
51
59
  </tiny-form-item>
52
60
  <tiny-form-item label="Textarea">
53
61
  <tiny-input v-model="createData.textarea" type="textarea" maxlength="15"> </tiny-input>
54
62
  </tiny-form-item>
55
63
  <tiny-form-item label="Autocomplete">
56
- <tiny-autocomplete
57
- v-model="createData.autocomplete"
58
- placeholder="请输入内容"
59
- :fetch-suggestions="querySearch"
60
- ></tiny-autocomplete>
61
- </tiny-form-item>
62
- <tiny-form-item label="ButtonGroup">
63
- <tiny-button-group :data="groupData"></tiny-button-group>
64
+ <tiny-autocomplete v-model="createData.autocomplete" :fetch-suggestions="querySearch"></tiny-autocomplete>
64
65
  </tiny-form-item>
65
66
  <tiny-form-item label="Cascader">
66
- <tiny-cascader :options="options" :props="{ emitPath: false }"></tiny-cascader>
67
- </tiny-form-item>
68
- <tiny-form-item label="IpAddress">
69
- <tiny-ip-address v-model="createData.ipAddress"></tiny-ip-address>
70
- </tiny-form-item>
71
- <tiny-form-item label="Link">
72
- <tiny-link>默认链接</tiny-link>
67
+ <tiny-cascader :options="options" :props="{ emitPath: false }" placeholder=" "></tiny-cascader>
73
68
  </tiny-form-item>
74
69
  <tiny-form-item label="PopEditor">
75
70
  <tiny-popeditor
76
71
  v-model="createData.popEditor"
77
- placeholder="请选择"
78
72
  :grid-op="gridOp"
79
73
  text-field="name"
80
74
  value-field="id"
@@ -99,7 +93,6 @@ import {
99
93
  TinyDropTimes,
100
94
  TinyTooltip,
101
95
  TinyInput,
102
- TinyButton,
103
96
  TinyAutocomplete,
104
97
  TinyButtonGroup,
105
98
  TinyCascader,
@@ -125,7 +118,6 @@ export default {
125
118
  TinyDropTimes,
126
119
  TinyTooltip,
127
120
  TinyInput,
128
- TinyButton,
129
121
  TinyAutocomplete,
130
122
  TinyButtonGroup,
131
123
  TinyCascader,
@@ -198,7 +190,7 @@ export default {
198
190
  {
199
191
  field: 'id',
200
192
  title: 'ID',
201
- width: 40
193
+ width: 60
202
194
  },
203
195
  {
204
196
  field: 'name',
@@ -296,7 +288,7 @@ export default {
296
288
  }
297
289
  .title {
298
290
  margin-bottom: 30px;
299
- margin-left: 100px;
291
+ margin-left: 80px;
300
292
  font-size: 14px;
301
293
  }
302
294
  </style>
package/demos/pc/app/form/form-validate-field-composition-api.vue CHANGED
@@ -12,8 +12,8 @@
12
12
  </tiny-form-item>
13
13
  <tiny-form-item>
14
14
  <tiny-button type="primary" @click="validateField"> 校验 </tiny-button>
15
- <tiny-button type="primary" @click="clearValidate"> 移除校验 </tiny-button>
16
- <tiny-button type="primary" @click="resetField"> 重置日期 </tiny-button>
15
+ <tiny-button @click="clearValidate"> 移除校验 </tiny-button>
16
+ <tiny-button @click="resetField"> 重置日期 </tiny-button>
17
17
  </tiny-form-item>
18
18
  </tiny-form>
19
19
  </div>