@opentiny/vue-docs 2.0.7 → 2.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/demos/app/container/basic-usage-composition-api.vue +35 -0
- package/demos/app/container/classic-composition-api.vue +42 -0
- package/demos/app/container/custom-container-composition-api.vue +40 -0
- package/demos/app/container/custom-with-height-composition-api.vue +40 -0
- package/demos/app/container/fashion-composition-api.vue +34 -0
- package/demos/app/container/legend-composition-api.vue +34 -0
- package/demos/app/container/simple-composition-api.vue +34 -0
- package/demos/app/form/no-validate-to-add-composition-api.vue +3 -2
- package/demos/webdoc/envpreparation-open-en.md +0 -8
- package/demos/webdoc/envpreparation-open.md +0 -8
- package/package.json +4 -4
|
@@ -15,3 +15,38 @@
|
|
|
15
15
|
<script setup lang="jsx">
|
|
16
16
|
import { Container as TinyContainer, Layout as TinyLayout } from '@opentiny/vue'
|
|
17
17
|
</script>
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
<style>
|
|
21
|
+
.demo-container .tiny-container {
|
|
22
|
+
height: 200px;
|
|
23
|
+
color: #5f6774;
|
|
24
|
+
text-align: center;
|
|
25
|
+
font-size: 18px;
|
|
26
|
+
position: relative;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.demo-container .tiny-container .tiny-container__header {
|
|
30
|
+
background-color: #ecf8ff;
|
|
31
|
+
border: 3px solid #ffffff;
|
|
32
|
+
color: #5b90af;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.demo-container .tiny-container .tiny-container__aside {
|
|
36
|
+
background-color: #ffecec;
|
|
37
|
+
border: 3px solid #ffffff;
|
|
38
|
+
color: #d27070;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.demo-container .tiny-container .tiny-container__main {
|
|
42
|
+
background-color: #fffdec;
|
|
43
|
+
border: 3px solid #ffffff;
|
|
44
|
+
color: #b1a859;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.demo-container .tiny-container .tiny-container__footer {
|
|
48
|
+
background-color: #e8ffed;
|
|
49
|
+
border: 3px solid #ffffff;
|
|
50
|
+
color: #84a18a;
|
|
51
|
+
}
|
|
52
|
+
</style>
|
|
@@ -21,3 +21,45 @@ import { Container as TinyContainer, Layout as TinyLayout } from '@opentiny/vue'
|
|
|
21
21
|
|
|
22
22
|
const pattern = ref('classic')
|
|
23
23
|
</script>
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
<style>
|
|
28
|
+
.demo-container .tiny-container {
|
|
29
|
+
height: 200px;
|
|
30
|
+
color: #5f6774;
|
|
31
|
+
text-align: center;
|
|
32
|
+
font-size: 18px;
|
|
33
|
+
position: relative;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.demo-container .tiny-container .tiny-container__header {
|
|
37
|
+
background-color: #ecf8ff;
|
|
38
|
+
border: 3px solid #ffffff;
|
|
39
|
+
color: #5b90af;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.demo-container .tiny-container .tiny-container__aside {
|
|
43
|
+
background-color: #fff0f0;
|
|
44
|
+
border: 3px solid #ffffff;
|
|
45
|
+
color: #d27070;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.demo-container .tiny-container .tiny-container__main {
|
|
49
|
+
background-color: #fffdec;
|
|
50
|
+
border: 3px solid #ffffff;
|
|
51
|
+
color: #b1a859;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.demo-container .tiny-container .tiny-container__footer {
|
|
55
|
+
background-color: #e8ffed;
|
|
56
|
+
border: 3px solid #ffffff;
|
|
57
|
+
color: #84a18a;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.demo-container .tiny-container .main .changePattern .tiny-radio {
|
|
61
|
+
color: #a3a355;
|
|
62
|
+
font-size: 16px;
|
|
63
|
+
margin: 0 7px;
|
|
64
|
+
}
|
|
65
|
+
</style>
|
|
@@ -51,3 +51,43 @@ const patternData = ref([
|
|
|
51
51
|
}
|
|
52
52
|
])
|
|
53
53
|
</script>
|
|
54
|
+
|
|
55
|
+
<style>
|
|
56
|
+
.demo-container .tiny-container {
|
|
57
|
+
height: 200px;
|
|
58
|
+
color: #5f6774;
|
|
59
|
+
text-align: center;
|
|
60
|
+
font-size: 18px;
|
|
61
|
+
position: relative;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.demo-container .tiny-container .tiny-container__header {
|
|
65
|
+
background-color: #ecf8ff;
|
|
66
|
+
border: 3px solid #ffffff;
|
|
67
|
+
color: #5b90af;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.demo-container .tiny-container .tiny-container__aside {
|
|
71
|
+
background-color: #fff0f0;
|
|
72
|
+
border: 3px solid #ffffff;
|
|
73
|
+
color: #d27070;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.demo-container .tiny-container .tiny-container__main {
|
|
77
|
+
background-color: #fffdec;
|
|
78
|
+
border: 3px solid #ffffff;
|
|
79
|
+
color: #b1a859;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.demo-container .tiny-container .tiny-container__footer {
|
|
83
|
+
background-color: #e8ffed;
|
|
84
|
+
border: 3px solid #ffffff;
|
|
85
|
+
color: #84a18a;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.demo-container .tiny-container .main .changePattern .tiny-radio {
|
|
89
|
+
color: #a3a355;
|
|
90
|
+
font-size: 16px;
|
|
91
|
+
margin: 0 7px;
|
|
92
|
+
}
|
|
93
|
+
</style>
|
|
@@ -29,3 +29,43 @@ const asideWidth = ref(200)
|
|
|
29
29
|
const footerHeight = ref(80)
|
|
30
30
|
const headerHeight = ref(80)
|
|
31
31
|
</script>
|
|
32
|
+
|
|
33
|
+
<style>
|
|
34
|
+
.demo-container .tiny-container {
|
|
35
|
+
height: 200px;
|
|
36
|
+
color: #5f6774;
|
|
37
|
+
text-align: center;
|
|
38
|
+
font-size: 18px;
|
|
39
|
+
position: relative;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.demo-container .tiny-container .tiny-container__header {
|
|
43
|
+
background-color: #ecf8ff;
|
|
44
|
+
border: 3px solid #ffffff;
|
|
45
|
+
color: #5b90af;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.demo-container .tiny-container .tiny-container__aside {
|
|
49
|
+
background-color: #fff0f0;
|
|
50
|
+
border: 3px solid #ffffff;
|
|
51
|
+
color: #d27070;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.demo-container .tiny-container .tiny-container__main {
|
|
55
|
+
background-color: #fffdec;
|
|
56
|
+
border: 3px solid #ffffff;
|
|
57
|
+
color: #b1a859;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.demo-container .tiny-container .tiny-container__footer {
|
|
61
|
+
background-color: #e8ffed;
|
|
62
|
+
border: 3px solid #ffffff;
|
|
63
|
+
color: #84a18a;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.demo-container .tiny-container .main .changePattern .tiny-radio {
|
|
67
|
+
color: #a3a355;
|
|
68
|
+
font-size: 16px;
|
|
69
|
+
margin: 0 7px;
|
|
70
|
+
}
|
|
71
|
+
</style>
|
|
@@ -15,3 +15,37 @@
|
|
|
15
15
|
<script setup lang="jsx">
|
|
16
16
|
import { Container as TinyContainer, Layout as TinyLayout } from '@opentiny/vue'
|
|
17
17
|
</script>
|
|
18
|
+
|
|
19
|
+
<style>
|
|
20
|
+
.demo-container .tiny-container {
|
|
21
|
+
height: 200px;
|
|
22
|
+
color: #5f6774;
|
|
23
|
+
text-align: center;
|
|
24
|
+
font-size: 18px;
|
|
25
|
+
position: relative;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.demo-container .tiny-container .tiny-container__header {
|
|
29
|
+
background-color: #ecf8ff;
|
|
30
|
+
border: 3px solid #ffffff;
|
|
31
|
+
color: #5b90af;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.demo-container .tiny-container .tiny-container__aside {
|
|
35
|
+
background-color: #ffecec;
|
|
36
|
+
border: 3px solid #ffffff;
|
|
37
|
+
color: #d27070;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.demo-container .tiny-container .tiny-container__main {
|
|
41
|
+
background-color: #fffdec;
|
|
42
|
+
border: 3px solid #ffffff;
|
|
43
|
+
color: #b1a859;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.demo-container .tiny-container .tiny-container__footer {
|
|
47
|
+
background-color: #e8ffed;
|
|
48
|
+
border: 3px solid #ffffff;
|
|
49
|
+
color: #84a18a;
|
|
50
|
+
}
|
|
51
|
+
</style>
|
|
@@ -18,3 +18,37 @@
|
|
|
18
18
|
<script setup lang="jsx">
|
|
19
19
|
import { Container as TinyContainer, Layout as TinyLayout } from '@opentiny/vue'
|
|
20
20
|
</script>
|
|
21
|
+
|
|
22
|
+
<style>
|
|
23
|
+
.demo-container .tiny-container {
|
|
24
|
+
height: 200px;
|
|
25
|
+
color: #5f6774;
|
|
26
|
+
text-align: center;
|
|
27
|
+
font-size: 18px;
|
|
28
|
+
position: relative;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.demo-container .tiny-container .tiny-container__header {
|
|
32
|
+
background-color: #ecf8ff;
|
|
33
|
+
border: 3px solid #ffffff;
|
|
34
|
+
color: #5b90af;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.demo-container .tiny-container .tiny-container__aside {
|
|
38
|
+
background-color: #ffecec;
|
|
39
|
+
border: 3px solid #ffffff;
|
|
40
|
+
color: #d27070;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.demo-container .tiny-container .tiny-container__main {
|
|
44
|
+
background-color: #fffdec;
|
|
45
|
+
border: 3px solid #ffffff;
|
|
46
|
+
color: #b1a859;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.demo-container .tiny-container .tiny-container__footer {
|
|
50
|
+
background-color: #e8ffed;
|
|
51
|
+
border: 3px solid #ffffff;
|
|
52
|
+
color: #84a18a;
|
|
53
|
+
}
|
|
54
|
+
</style>
|
|
@@ -12,3 +12,37 @@
|
|
|
12
12
|
<script setup lang="jsx">
|
|
13
13
|
import { Container as TinyContainer, Layout as TinyLayout } from '@opentiny/vue'
|
|
14
14
|
</script>
|
|
15
|
+
|
|
16
|
+
<style>
|
|
17
|
+
.demo-container .tiny-container {
|
|
18
|
+
height: 200px;
|
|
19
|
+
color: #5f6774;
|
|
20
|
+
text-align: center;
|
|
21
|
+
font-size: 18px;
|
|
22
|
+
position: relative;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.demo-container .tiny-container .tiny-container__header {
|
|
26
|
+
background-color: #ecf8ff;
|
|
27
|
+
border: 3px solid #ffffff;
|
|
28
|
+
color: #5b90af;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.demo-container .tiny-container .tiny-container__aside {
|
|
32
|
+
background-color: #ffecec;
|
|
33
|
+
border: 3px solid #ffffff;
|
|
34
|
+
color: #d27070;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.demo-container .tiny-container .tiny-container__main {
|
|
38
|
+
background-color: #fffdec;
|
|
39
|
+
border: 3px solid #ffffff;
|
|
40
|
+
color: #b1a859;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.demo-container .tiny-container .tiny-container__footer {
|
|
44
|
+
background-color: #e8ffed;
|
|
45
|
+
border: 3px solid #ffffff;
|
|
46
|
+
color: #84a18a;
|
|
47
|
+
}
|
|
48
|
+
</style>
|
|
@@ -2,12 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
TinyVue is a`Vue`UI component library, which can also support`Vue 2.0`and`Vue 3.0`.
|
|
4
4
|
|
|
5
|
-
:::warning
|
|
6
|
-
|
|
7
5
|
Browser compatibility`TinyVue`The latest versions of mainstream browsers are supported: Chrome, Edge, Firefox, Opera, and Safari. No longer supported`Internet Explorer`.
|
|
8
6
|
|
|
9
|
-
:::
|
|
10
|
-
|
|
11
7
|
### Installing Node.js
|
|
12
8
|
|
|
13
9
|
Recommended Installation`v16.13.0`version, if the local`Node.js`, run the following command to check whether the version is correct:
|
|
@@ -24,8 +20,4 @@ management`npm`There are two main tools for the package. One is the installation
|
|
|
24
20
|
npm install -g yarn
|
|
25
21
|
```
|
|
26
22
|
|
|
27
|
-
:::warning
|
|
28
|
-
|
|
29
23
|
Selection of Package Manager`yarn`and`npm`You are advised to use only one package manager to avoid problems such as upgrade failure during installation.
|
|
30
|
-
|
|
31
|
-
:::
|
|
@@ -2,12 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
TinyVue 是一个基于 `Vue` 的 UI 组件库，可以同时支持 `Vue 2.0` 和 `Vue 3.0`。
|
|
4
4
|
|
|
5
|
-
:::warning
|
|
6
|
-
|
|
7
5
|
浏览器兼容性 `TinyVue` 支持主流浏览器的最新版本：Chrome、Edge、Firefox、Opera、Safari 不支持 IE 浏览器
|
|
8
6
|
|
|
9
|
-
:::
|
|
10
|
-
|
|
11
7
|
### 安装 Node.js
|
|
12
8
|
|
|
13
9
|
推荐安装 `v16.13.0` 及以上版本，如果本地已经安装了 `Node.js`，可以通过以下命令检查版本是否正确：
|
|
@@ -24,8 +20,4 @@ node -v
|
|
|
24
20
|
npm install -g yarn
|
|
25
21
|
```
|
|
26
22
|
|
|
27
|
-
:::warning
|
|
28
|
-
|
|
29
23
|
包管理器的选择 `yarn` 和 `npm` 建议只选择使用一种包管理器，以免在安装过程中出现无法升级依赖包等问题。
|
|
30
|
-
|
|
31
|
-
:::
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@opentiny/vue-docs",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.9",
|
|
4
4
|
"dependencies": {
|
|
5
5
|
"@unocss/reset": "0.38.2",
|
|
6
6
|
"@vue/repl": "^2.5.5",
|
|
@@ -19,12 +19,12 @@
|
|
|
19
19
|
"@opentiny/vue": "~3.10.0",
|
|
20
20
|
"@opentiny/vue-common": "~3.10.0",
|
|
21
21
|
"@opentiny/vue-icon": "~3.10.0",
|
|
22
|
-
"@opentiny/vue-vite-import": "~1.1.5",
|
|
23
|
-
"@opentiny/vue-theme-saas": "~3.10.0",
|
|
24
22
|
"@opentiny/vue-design-aurora": "~3.10.0",
|
|
25
23
|
"@opentiny/vue-design-smb": "~3.10.0",
|
|
24
|
+
"@opentiny/vue-theme-saas": "~3.10.0",
|
|
25
|
+
"@opentiny/vue-theme": "~3.10.0",
|
|
26
26
|
"@opentiny/vue-theme-mobile": "~3.10.0",
|
|
27
|
-
"@opentiny/vue-
|
|
27
|
+
"@opentiny/vue-vite-import": "~1.1.5"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@types/markdown-it": "^12.2.3",
|