@opentiny/vue-docs 3.19.5 → 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 (29) 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/package.json +9 -9
  28. package/src/views/components/components.vue +13 -15
  29. package/src/views/layout/layout.vue +0 -1
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>
package/demos/pc/app/form/form-validate-field.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>
package/demos/pc/app/form/form-validation-composition-api.vue CHANGED
@@ -4,6 +4,12 @@
4
4
  <div>validate用法：<tiny-button-group :data="validTypeList" v-model="validType"></tiny-button-group></div>
5
5
  </div>
6
6
  <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
7
+ <tiny-form-item label="等级" prop="radio">
8
+ <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
9
+ </tiny-form-item>
10
+ <tiny-form-item label="IP字段" prop="ip">
11
+ <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
12
+ </tiny-form-item>
7
13
  <tiny-form-item label="必填" prop="users" :validate-icon="validateIcon">
8
14
  <tiny-input v-model="createData.users"></tiny-input>
9
15
  </tiny-form-item>
@@ -13,24 +19,18 @@
13
19
  <tiny-form-item label="URL" prop="url">
14
20
  <tiny-input v-model="createData.url"></tiny-input>
15
21
  </tiny-form-item>
16
- <tiny-form-item label="等级" prop="radio">
17
- <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
18
- </tiny-form-item>
19
22
  <tiny-form-item label="邮件" prop="email">
20
23
  <tiny-input v-model="createData.email"></tiny-input>
21
24
  </tiny-form-item>
22
25
  <tiny-form-item label="数字" prop="num1">
23
26
  <tiny-numeric v-model="createData.num1"></tiny-numeric>
24
27
  </tiny-form-item>
25
- <tiny-form-item label="IP字段" prop="ip">
26
- <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
27
- </tiny-form-item>
28
28
  <tiny-form-item>
29
29
  <tiny-button type="primary" @click="validType === 'callback' ? handleSubmit() : handleSubmitPromise()">
30
30
  提交
31
31
  </tiny-button>
32
- <tiny-button type="primary" @click="clearFormValid"> 移除校验 </tiny-button>
33
- <tiny-button type="primary" @click="resetForm"> 重置表单 </tiny-button>
32
+ <tiny-button @click="clearFormValid"> 移除校验 </tiny-button>
33
+ <tiny-button @click="resetForm"> 重置表单 </tiny-button>
34
34
  </tiny-form-item>
35
35
  </tiny-form>
36
36
  </div>
package/demos/pc/app/form/form-validation.spec.ts CHANGED
@@ -27,7 +27,7 @@ test('测试表单输入变化和失焦是否出现校验', async ({ page }) =>
27
27
  const requiredTip = page.getByRole('tooltip', { name: '必填' })
28
28
 
29
29
  // 对长度有要求的检验
30
- const firstInput = formItem.first().locator('input')
30
+ const firstInput = formItem.nth(2).locator('input')
31
31
  await firstInput.click()
32
32
  await firstInput.blur()
33
33
  await expect(requiredTip.first()).toBeVisible()
@@ -48,7 +48,7 @@ test('测试表单输入变化和失焦是否出现校验', async ({ page }) =>
48
48
  await expect(page.getByRole('tooltip', { name: '不符合规则的日期格式' })).not.toBeVisible()
49
49
 
50
50
  // url输入框
51
- const urlInput = formItem.nth(2).locator('input')
51
+ const urlInput = formItem.nth(4).locator('input')
52
52
  const validUrl = 'https://test.com'
53
53
  urlInput.fill('1111')
54
54
  await expect(page.getByRole('tooltip', { name: '非法 URL 地址' })).toBeVisible()
@@ -56,7 +56,7 @@ test('测试表单输入变化和失焦是否出现校验', async ({ page }) =>
56
56
  await expect(page.getByRole('tooltip', { name: '非法 URL 地址' })).not.toBeVisible()
57
57
 
58
58
  // email输入框
59
- const emailInput = formItem.nth(4).locator('input')
59
+ const emailInput = formItem.nth(5).locator('input')
60
60
  const validEmail = '111@test.com'
61
61
  emailInput.fill('1111')
62
62
  await expect(page.getByRole('tooltip', { name: '非法邮件地址' })).toBeVisible()
package/demos/pc/app/form/form-validation.vue CHANGED
@@ -4,6 +4,12 @@
4
4
  <div>validate用法：<tiny-button-group :data="validTypeList" v-model="validType"></tiny-button-group></div>
5
5
  </div>
6
6
  <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
7
+ <tiny-form-item label="等级" prop="radio">
8
+ <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
9
+ </tiny-form-item>
10
+ <tiny-form-item label="IP字段" prop="ip">
11
+ <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
12
+ </tiny-form-item>
7
13
  <tiny-form-item label="必填" prop="users" :validate-icon="validateIcon">
8
14
  <tiny-input v-model="createData.users"></tiny-input>
9
15
  </tiny-form-item>
@@ -13,24 +19,19 @@
13
19
  <tiny-form-item label="URL" prop="url">
14
20
  <tiny-input v-model="createData.url"></tiny-input>
15
21
  </tiny-form-item>
16
- <tiny-form-item label="等级" prop="radio">
17
- <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
18
- </tiny-form-item>
22
+
19
23
  <tiny-form-item label="邮件" prop="email">
20
24
  <tiny-input v-model="createData.email"></tiny-input>
21
25
  </tiny-form-item>
22
26
  <tiny-form-item label="数字" prop="num1">
23
27
  <tiny-numeric v-model="createData.num1"></tiny-numeric>
24
28
  </tiny-form-item>
25
- <tiny-form-item label="IP字段" prop="ip">
26
- <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
27
- </tiny-form-item>
28
29
  <tiny-form-item>
29
30
  <tiny-button type="primary" @click="validType === 'callback' ? handleSubmit() : handleSubmitPromise()">
30
31
  提交
31
32
  </tiny-button>
32
- <tiny-button type="primary" @click="clearFormValid"> 移除校验 </tiny-button>
33
- <tiny-button type="primary" @click="resetForm"> 重置表单 </tiny-button>
33
+ <tiny-button @click="clearFormValid"> 移除校验 </tiny-button>
34
+ <tiny-button @click="resetForm"> 重置表单 </tiny-button>
34
35
  </tiny-form-item>
35
36
  </tiny-form>
36
37
  </div>
package/demos/pc/app/form/size-composition-api.vue CHANGED
@@ -2,13 +2,13 @@
2
2
  <div class="demo-form">
3
3
  <div class="mb-12">表单尺寸： <tiny-button-group :data="sizeList" v-model="sizeValue"></tiny-button-group></div>
4
4
  <tiny-form ref="createData" label-width="100px" :size="sizeValue" label-position="right">
5
- <tiny-form-item label="数字">
6
- <tiny-numeric v-model="createData.quantity"></tiny-numeric>
7
- </tiny-form-item>
8
5
  <tiny-form-item label="单选">
9
6
  <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
10
7
  <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
11
8
  </tiny-form-item>
9
+ <tiny-form-item label="数字">
10
+ <tiny-numeric v-model="createData.quantity"></tiny-numeric>
11
+ </tiny-form-item>
12
12
  <tiny-form-item label="日期">
13
13
  <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
14
14
  </tiny-form-item>
@@ -17,7 +17,7 @@
17
17
  </tiny-form-item>
18
18
  <tiny-form-item label="提示">
19
19
  <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
20
- <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
20
+ <tiny-input v-model="createData.input"></tiny-input>
21
21
  </tiny-tooltip>
22
22
  </tiny-form-item>
23
23
  <tiny-form-item label="文本">
package/demos/pc/app/form/size.vue CHANGED
@@ -2,13 +2,13 @@
2
2
  <div class="demo-form">
3
3
  <div class="mb-12">表单尺寸： <tiny-button-group :data="sizeList" v-model="sizeValue"></tiny-button-group></div>
4
4
  <tiny-form ref="createData" label-width="100px" :size="sizeValue" label-position="right">
5
- <tiny-form-item label="数字">
6
- <tiny-numeric v-model="createData.quantity"></tiny-numeric>
7
- </tiny-form-item>
8
5
  <tiny-form-item label="单选">
9
6
  <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
10
7
  <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
11
8
  </tiny-form-item>
9
+ <tiny-form-item label="数字">
10
+ <tiny-numeric v-model="createData.quantity"></tiny-numeric>
11
+ </tiny-form-item>
12
12
  <tiny-form-item label="日期">
13
13
  <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
14
14
  </tiny-form-item>
@@ -17,7 +17,7 @@
17
17
  </tiny-form-item>
18
18
  <tiny-form-item label="提示">
19
19
  <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
20
- <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
20
+ <tiny-input v-model="createData.input"></tiny-input>
21
21
  </tiny-tooltip>
22
22
  </tiny-form-item>
23
23
  <tiny-form-item label="文本">
package/demos/pc/app/form/validate-debounce-composition-api.vue CHANGED
@@ -8,8 +8,8 @@
8
8
  <tiny-input v-model="createData.user2"></tiny-input>
9
9
  </tiny-form-item>
10
10
  <tiny-form-item>
11
- <tiny-button type="success" @click="clearFormValid">移除表单校验</tiny-button>
12
11
  <tiny-button type="primary" @click="handleSubmit">提交</tiny-button>
12
+ <tiny-button @click="clearFormValid">移除表单校验</tiny-button>
13
13
  </tiny-form-item>
14
14
  </tiny-form>
15
15
  </div>
package/demos/pc/app/form/validate-debounce.vue CHANGED
@@ -8,8 +8,8 @@
8
8
  <tiny-input v-model="createData.user2"></tiny-input>
9
9
  </tiny-form-item>
10
10
  <tiny-form-item>
11
- <tiny-button type="success" @click="clearFormValid">移除表单校验</tiny-button>
12
11
  <tiny-button type="primary" @click="handleSubmit">提交</tiny-button>
12
+ <tiny-button @click="clearFormValid">移除表单校验</tiny-button>
13
13
  </tiny-form-item>
14
14
  </tiny-form>
15
15
  </div>
package/demos/pc/app/grid/editor/popeditor-in-grid-remote-search-composition-api.vue CHANGED
@@ -86,7 +86,7 @@ function getPopEditorOp() {
86
86
  {
87
87
  field: 'id',
88
88
  title: 'ID',
89
- width: 40
89
+ width: 60
90
90
  },
91
91
  {
92
92
  field: 'name',
package/demos/pc/app/grid/editor/popeditor-in-grid-remote-search.vue CHANGED
@@ -89,7 +89,7 @@ export default {
89
89
  {
90
90
  field: 'id',
91
91
  title: 'ID',
92
- width: 40
92
+ width: 60
93
93
  },
94
94
  {
95
95
  field: 'name',
package/demos/pc/app/grid/empty/empty-data-tip-composition-api.vue CHANGED
@@ -7,7 +7,7 @@
7
7
  <tiny-grid-column field="address" title="地址"></tiny-grid-column>
8
8
  <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
9
9
  <template #empty>
10
- <span style="color: red">没有更多数据了！</span>
10
+ <span style="color: #ff8800">没有更多数据了！</span>
11
11
  </template>
12
12
  </tiny-grid>
13
13
  <br />
package/demos/pc/app/grid/empty/empty-data-tip.vue CHANGED
@@ -7,7 +7,7 @@
7
7
  <tiny-grid-column field="address" title="地址"></tiny-grid-column>
8
8
  <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
9
9
  <template #empty>
10
- <span style="color: red">没有更多数据了！</span>
10
+ <span style="color: #ff8800">没有更多数据了！</span>
11
11
  </template>
12
12
  </tiny-grid>
13
13
  <br />
package/demos/pc/app/grid/operation-column/selection-config-composition-api.vue CHANGED
@@ -5,7 +5,6 @@
5
5
  ref="gridRef"
6
6
  :select-config="selectConfig"
7
7
  highlight-current-row
8
- border
9
8
  :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
10
9
  >
11
10
  <tiny-grid-column type="selection" width="60"></tiny-grid-column>
package/demos/pc/app/grid/webdoc/grid-editor.js CHANGED
@@ -10,7 +10,7 @@ export default {
10
10
  <p>通过在 <code>grid</code> 标签上配置 <code>edit-config</code>。在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染内置编辑组件， <code>events</code> 配置组件事件。</p>
11
11
  <div class="tip custom-block">
12
12
  <p class="custom-block-title">特别说明：</p>
13
- <p>内置编辑器只支持 <code>Input</code> 和 <code>Select</code> 组件，需要使用其他组件可参考自定义编辑器。</p>
13
+ <p>内置编辑器只支持 <code>Input</code> 和 <code>Select</code> 组件且均为浏览器原生组件并非TinyVue组件，需要使用其他组件可参考自定义编辑器。</p>
14
14
  </div>
15
15
  `,
16
16
  'en-US':
@@ -44,7 +44,7 @@ export default {
44
44
  {
45
45
  'demoId': 'editor-popeditor-in-grid-remote-search',
46
46
  'name': {
47
- 'zh-CN': 'Popeditor 弹窗编辑',
47
+ 'zh-CN': '弹窗编辑',
48
48
  'en-US': 'Edit the Popeditor pop-up window and configure remote search.'
49
49
  },
50
50
  'desc': {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opentiny/vue-docs",
3
- "version": "3.19.5",
3
+ "version": "3.19.6",
4
4
  "license": "MIT",
5
5
  "dependencies": {
6
6
  "@opentiny/vue-repl": "^1.1.2",
@@ -18,17 +18,17 @@
18
18
  "vue-router": "4.1.5",
19
19
  "@opentiny/vue": "~3.19.0",
20
20
  "@opentiny/vue-common": "~3.19.0",
21
- "@opentiny/vue-design-saas": "~3.19.0",
22
- "@opentiny/vue-hooks": "~3.19.0",
23
- "@opentiny/vue-directive": "~3.19.0",
24
- "@opentiny/vue-design-aurora": "~3.19.0",
25
- "@opentiny/vue-icon": "~3.19.0",
26
21
  "@opentiny/vue-icon-saas": "~3.19.0",
22
+ "@opentiny/vue-design-aurora": "~3.19.0",
27
23
  "@opentiny/vue-icon-multicolor": "~3.19.0",
28
- "@opentiny/vue-theme": "~3.19.4",
24
+ "@opentiny/vue-hooks": "~3.19.0",
25
+ "@opentiny/vue-design-saas": "~3.19.0",
26
+ "@opentiny/vue-icon": "~3.19.0",
27
+ "@opentiny/vue-directive": "~3.19.0",
28
+ "@opentiny/vue-theme": "~3.19.5",
29
29
  "@opentiny/vue-theme-mobile": "~3.19.0",
30
- "@opentiny/vue-theme-saas": "~3.19.0",
31
- "@opentiny/vue-vite-import": "~1.2.0"
30
+ "@opentiny/vue-vite-import": "~1.2.0",
31
+ "@opentiny/vue-theme-saas": "~3.19.0"
32
32
  },
33
33
  "devDependencies": {
34
34
  "@playwright/test": "~1.42.0",
package/src/views/components/components.vue CHANGED
@@ -16,7 +16,7 @@
16
16
  </div>
17
17
  <span class="docs-header-spacer"></span>
18
18
  </header>
19
- <div class="docs-content">
19
+ <div class="docs-content" id="doc-layout-scoller">
20
20
  <div class="ti-fi-1 ti-rel cmp-container">
21
21
  <div class="flex-horizontal docs-content-main">
22
22
  <div class="docs-tabs-wrap">
@@ -241,7 +241,7 @@
241
241
  :is-affix="anchorAffix"
242
242
  type="dot"
243
243
  mask-class="custom-active-anchor"
244
- container-id="#doc-layout"
244
+ container-id="#doc-layout-scoller"
245
245
  @link-click="handleAnchorClick"
246
246
  >
247
247
  </tiny-anchor>
@@ -254,8 +254,8 @@
254
254
  {{ i18nByKey('doc-owner') }} : {{ currJson.owner }}
255
255
  </div>
256
256
  </div>
257
+ <div id="footer"></div>
257
258
  </div>
258
- <div id="footer"></div>
259
259
  </template>
260
260
 
261
261
  <script lang="jsx">
@@ -473,7 +473,7 @@ export default defineComponent({
473
473
  const scrollByHash = (hash) => {
474
474
  setTimeout(() => {
475
475
  if (!hash) {
476
- document.getElementById('doc-layout').scrollTo({
476
+ document.getElementById('doc-layout-scoller').scrollTo({
477
477
  top: 0,
478
478
  left: 0
479
479
  })
@@ -486,7 +486,7 @@ export default defineComponent({
486
486
  scrollTarget = document.querySelector(`#${hash}`)
487
487
  } catch (err) {}
488
488
  if (scrollTarget && !isRunningTest) {
489
- document.getElementById('doc-layout').scrollTo({
489
+ document.getElementById('doc-layout-scoller').scrollTo({
490
490
  top: scrollTarget.offsetTop,
491
491
  left: 0,
492
492
  behavior: 'smooth'
@@ -501,7 +501,7 @@ export default defineComponent({
501
501
  let hash = router.currentRoute.value.hash?.slice(1)
502
502
  if (hash !== 'API') {
503
503
  setTimeout(() => {
504
- document.getElementById('doc-layout').scrollTo({
504
+ document.getElementById('doc-layout-scoller').scrollTo({
505
505
  top: 0,
506
506
  left: 0,
507
507
  behavior: 'smooth'
@@ -622,18 +622,18 @@ export default defineComponent({
622
622
  }
623
623
 
624
624
  const onDocLayoutScroll = debounce(100, false, () => {
625
- const docLayout = document.getElementById('doc-layout')
625
+ const docLayout = document.getElementById('doc-layout-scoller')
626
626
  const { scrollTop, scrollHeight, clientHeight: layoutHeight } = docLayout
627
627
  const headerHeight = document.querySelector('.docs-header')?.clientHeight || 0
628
628
  const footerHeight = document.getElementById('footer')?.clientHeight || 0
629
629
  const anchorHeight = document.querySelector('#anchor')?.clientHeight || 0
630
- const remainHeight = scrollHeight - scrollTop - layoutHeight // doc-layout视口下隐藏的部分高度
630
+ const remainHeight = scrollHeight - scrollTop - layoutHeight // doc-layout-scoller视口下隐藏的部分高度
631
631
  state.anchorAffix = layoutHeight - headerHeight - (footerHeight - remainHeight) > anchorHeight
632
632
  })
633
633
 
634
634
  const setScrollListener = () => {
635
635
  nextTick(() => {
636
- const docLayout = document.getElementById('doc-layout')
636
+ const docLayout = document.getElementById('doc-layout-scoller')
637
637
  if (docLayout) {
638
638
  docLayout.addEventListener('scroll', onDocLayoutScroll)
639
639
  }
@@ -641,7 +641,7 @@ export default defineComponent({
641
641
  }
642
642
 
643
643
  const removeScrollListener = () => {
644
- const docLayout = document.getElementById('doc-layout')
644
+ const docLayout = document.getElementById('doc-layout-scoller')
645
645
  if (docLayout) {
646
646
  docLayout.removeEventListener('scroll', onDocLayoutScroll)
647
647
  }
@@ -809,7 +809,9 @@ export default defineComponent({
809
809
  }
810
810
 
811
811
  .docs-content {
812
- margin: 16px 0 120px;
812
+ flex: 1;
813
+ overflow: hidden auto;
814
+ padding: 16px 0 0;
813
815
  transition: all ease-in-out 0.3s;
814
816
 
815
817
  .docs-tabs-wrap {
@@ -972,10 +974,6 @@ export default defineComponent({
972
974
  column-gap: 16px;
973
975
  }
974
976
 
975
- .docs-content-main {
976
- overflow: auto;
977
- }
978
-
979
977
  .cmp-container {
980
978
  p {
981
979
  font-size: 16px;
package/src/views/layout/layout.vue CHANGED
@@ -340,7 +340,6 @@ export default defineComponent({
340
340
  #doc-layout {
341
341
  width: 100%;
342
342
  height: calc(100vh - 60px);
343
- overflow: hidden auto;
344
343
  flex-grow: 1;
345
344
  display: flex;
346
345
  flex-direction: column;