yw-ui-vue2 0.1.5

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 (23) hide show
  1. package/.editorconfig +9 -0
  2. package/.eslintrc.js +17 -0
  3. package/README.md +24 -0
  4. package/docs/.vuepress/config/nav.js +12 -0
  5. package/docs/.vuepress/config/sidebar.js +3 -0
  6. package/docs/.vuepress/config.js +39 -0
  7. package/docs/.vuepress/enhanceApp.js +10 -0
  8. package/docs/.vuepress/styles/palette.styl +0 -0
  9. package/docs/README.md +18 -0
  10. package/docs/componentList/README.md +316 -0
  11. package/docs/componentList/index.js +1 -0
  12. package/jsconfig.json +22 -0
  13. package/lib/demo.html +1 -0
  14. package/lib/fonts/iconfont.7db9d461.ttf +0 -0
  15. package/lib/yw-ui-vue2.common.js +13140 -0
  16. package/lib/yw-ui-vue2.common.js.map +1 -0
  17. package/lib/yw-ui-vue2.css +10 -0
  18. package/lib/yw-ui-vue2.umd.js +13159 -0
  19. package/lib/yw-ui-vue2.umd.js.map +1 -0
  20. package/lib/yw-ui-vue2.umd.min.js +7 -0
  21. package/lib/yw-ui-vue2.umd.min.js.map +1 -0
  22. package/package-lock.json +37495 -0
  23. package/package.json +65 -0
package/.editorconfig ADDED
@@ -0,0 +1,9 @@
1
+ root = true
2
+
3
+ [*] # 表示所有文件适用
4
+ charset = utf-8
5
+ indent_style = tab
6
+ indent_size = 2
7
+ end_of_line = lf # 换行类型(lf | cr | crlf)
8
+ trim_trailing_whitespace = true # 去除行首的任意空白字符
9
+ insert_final_newline = true # 始终在文件末尾插入一个新行
package/.eslintrc.js ADDED
@@ -0,0 +1,17 @@
1
+ module.exports = {
2
+ root: true,
3
+ parserOptions: {
4
+ ecmaVersion: "latest",
5
+ },
6
+ parser: "@babel/eslint-parser",
7
+ rules: {
8
+ quotes: ["error", "double"],
9
+ semi: [2, "never"],
10
+ "no-unused-expressions": "off",
11
+ },
12
+ extends: [
13
+ "eslint:recommended",
14
+ "plugin:prettier/recommended",
15
+ "plugin:vue/recommended",
16
+ ],
17
+ };
package/README.md ADDED
@@ -0,0 +1,24 @@
1
+ # ui-lib
2
+
3
+ ## Project setup
4
+ ```
5
+ yarn install
6
+ ```
7
+
8
+ ### Compiles and hot-reloads for development
9
+ ```
10
+ yarn serve
11
+ ```
12
+
13
+ ### Compiles and minifies for production
14
+ ```
15
+ yarn build
16
+ ```
17
+
18
+ ### Lints and fixes files
19
+ ```
20
+ yarn lint
21
+ ```
22
+
23
+ ### Customize configuration
24
+ See [Configuration Reference](https://cli.vuejs.org/config/).
package/docs/.vuepress/config/nav.js ADDED
@@ -0,0 +1,12 @@
1
+ module.exports = [
2
+ // Nav 1
3
+ {
4
+ text: "主页",
5
+ link: "/",
6
+ },
7
+ // Nav 2
8
+ {
9
+ text: "组件",
10
+ link: "/componentList/",
11
+ },
12
+ ];
package/docs/.vuepress/config/sidebar.js ADDED
@@ -0,0 +1,3 @@
1
+ module.exports = {
2
+ "/componentList/": require("../../componentList/index"),
3
+ };
package/docs/.vuepress/config.js ADDED
@@ -0,0 +1,39 @@
1
+ const path = require("path");
2
+ module.exports = {
3
+ home: true,
4
+ heroImage: "/assets/logo.png",
5
+ // theme: "antdocs",
6
+ title: "智能运维系统组件库",
7
+ description: "基于ant-design-vue封装的组件库",
8
+ base: "/ui-module/",
9
+ port: "8066",
10
+ dest: "dist",
11
+ head: [
12
+ ["link", { rel: "icon", href: "/assets/logo.png" }],
13
+ ["link", { rel: "stylesheet", href: "/css/style.css" }],
14
+ ],
15
+ markdown: {
16
+ lineNumbers: false,
17
+ },
18
+ themeConfig: {
19
+ backToTop: true,
20
+ smoothScroll: true,
21
+ displayAllHeaders: true,
22
+ nav: require("./config/nav"),
23
+ sidebar: require("./config/sidebar"),
24
+ editLinks: false,
25
+ search: true,
26
+ searchMaxSuggestions: 10,
27
+ },
28
+ plugins: ["@vuepress/back-to-top"],
29
+ chainWebpack: (config) => {
30
+ config.resolve.alias.set("core-js/library/fn", "core-js/features");
31
+ },
32
+ configureWebpack: {
33
+ resolve: {
34
+ alias: {
35
+ "@": path.resolve(__dirname, "../components"),
36
+ },
37
+ },
38
+ },
39
+ };
package/docs/.vuepress/enhanceApp.js ADDED
@@ -0,0 +1,10 @@
1
+
2
+ // antd组件
3
+ const Antd = require('ant-design-vue');
4
+ import "ant-design-vue/dist/antd.css";
5
+
6
+ export default async ({ Vue, options, router }) => {
7
+ if (typeof process === "undefined") {
8
+ Vue.use(Antd);
9
+ }
10
+ };
package/docs/.vuepress/styles/palette.styl ADDED
File without changes
package/docs/README.md ADDED
@@ -0,0 +1,18 @@
1
+ ---
2
+ home: true
3
+ heroImage: /assets/logo.png
4
+ actions:
5
+ - text: 快速上手 →
6
+ link: /componentList/
7
+ type: primary
8
+ - text: 项目简介
9
+ link: /
10
+ type: secondary
11
+ features:
12
+ - title: 简洁至上
13
+ details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
14
+ - title: VuePress
15
+ details: Vue 驱动的静态网站生成器。支持并扩展了 Markdown 语法，同时支持嵌入 ‘HTML’ 和 ‘vue’ 组件，非常适合用于编写博客或技术文档。
16
+ - title: 高性能
17
+ details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
18
+ ---
package/docs/componentList/README.md ADDED
@@ -0,0 +1,316 @@
1
+ ---
2
+ title: Grid 栅格布局
3
+ ---
4
+
5
+ # Grid 栅格布局
6
+
7
+ > Ant Design vue 的栅格系统是按照24等分的原则进行划分，基于行（row）和列（col）来定义框架，划分之后的区块称之盒子<br/>
8
+ >
9
+
10
+ ## 展示效果
11
+ <div id="grid">
12
+ <a-row>
13
+ <a-col :span="24" class="c-yellow">100%</a-col>
14
+ </a-row>
15
+ <a-row>
16
+ <a-col :span="12" class="c-yellow">50%</a-col>
17
+ <a-col :span="12" class="c-green">50%</a-col>
18
+ </a-row>
19
+ <a-row>
20
+ <a-col :span="8" class="c-green">33%</a-col>
21
+ <a-col :span="8" class="c-yellow">33%</a-col>
22
+ <a-col :span="8" class="c-green">33%</a-col>
23
+ </a-row>
24
+ <a-row>
25
+ <a-col :span="6" class="c-yellow">25%</a-col>
26
+ <a-col :span="6" class="c-green">25%</a-col>
27
+ <a-col :span="6" class="c-yellow">25%</a-col>
28
+ <a-col :span="6" class="c-green">25%</a-col>
29
+ </a-row>
30
+ <a-row>
31
+ <a-col :span="16" class="c-yellow">66.66%</a-col>
32
+ <a-col :span="8" class="c-green">33.33%</a-col>
33
+ </a-row>
34
+ </div>
35
+
36
+ ::: details 查看代码
37
+ ``` vue
38
+ <template>
39
+ <div id="grid">
40
+ <a-row>
41
+ <a-col :span="24" class="c-yellow">100%</a-col>
42
+ </a-row>
43
+ <a-row>
44
+ <a-col :span="12" class="c-yellow">50%</a-col>
45
+ <a-col :span="12" class="c-green">50%</a-col>
46
+ </a-row>
47
+ <a-row>
48
+ <a-col :span="8" class="c-green">33%</a-col>
49
+ <a-col :span="8" class="c-yellow">33%</a-col>
50
+ <a-col :span="8" class="c-green">33%</a-col>
51
+ </a-row>
52
+ <a-row>
53
+ <a-col :span="6" class="c-yellow">25%</a-col>
54
+ <a-col :span="6" class="c-green">25%</a-col>
55
+ <a-col :span="6" class="c-yellow">25%</a-col>
56
+ <a-col :span="6" class="c-green">25%</a-col>
57
+ </a-row>
58
+ <a-row>
59
+ <a-col :span="16" class="c-yellow">66.66%</a-col>
60
+ <a-col :span="8" class="c-green">33.33%</a-col>
61
+ </a-row>
62
+ </div>
63
+ </template>
64
+
65
+ <style>
66
+ .c-green{
67
+ background:rgb(64,155,93);
68
+ }
69
+ .c-yellow{
70
+ background:rgb(252,216,69);
71
+ }
72
+ #grid > .ant-row > .ant-col{
73
+ height: 80px;
74
+ margin-bottom: 10px;
75
+ justify-content: center;
76
+ align-items: center;
77
+ display: flex;
78
+ }
79
+ </style>
80
+ ```
81
+ :::
82
+
83
+ **参数说明：**
84
+
85
+ > a-col元素 的 span 属性接受 1~24 之间的数字，用于决定盒子占据一行的宽度比例
86
+
87
+ > 100 ÷ 4 ≈ 4.16666667%，这是每个值所占的比例。
88
+
89
+ > **参考值** <br/> **24:**`100%`, **16:**`66.66666667%`, **12:**`50%`, **10:**`41.66666667%` <br/> **5:**`20.83333333%`, **4:**`25%`, **3:**`12.5%`, **1:**`4.16666667%`
90
+
91
+ ## Grid 使用 Flex 的方式布局
92
+
93
+ ### 盒子的对齐方式
94
+
95
+ - **水平方向**：居中，**垂直方向**：头部对齐
96
+ <a-row type="flex" justify="center" align="top" style="background:#eee;">
97
+ <a-col :span="4" class="c-yellow">
98
+ <p class="h-150">16.66%</p>
99
+ </a-col>
100
+ <a-col :span="4" class="c-green">
101
+ <p class="h-80">16.66%</p>
102
+ </a-col>
103
+ <a-col :span="4" class="c-yellow">
104
+ <p class="h-180">16.66%</p>
105
+ </a-col>
106
+ <a-col :span="4" class="c-green">
107
+ <p class="h-100">16.66%</p>
108
+ </a-col>
109
+ </a-row>
110
+
111
+ - **水平方向**：向右，**垂直方向**：居中
112
+ <a-row type="flex" justify="end" align="middle" style="background:#eee;">
113
+ <a-col :span="4" class="c-yellow">
114
+ <p class="h-150">16.66%</p>
115
+ </a-col>
116
+ <a-col :span="4" class="c-green">
117
+ <p class="h-80">16.66%</p>
118
+ </a-col>
119
+ <a-col :span="4" class="c-yellow">
120
+ <p class="h-180">16.66%</p>
121
+ </a-col>
122
+ <a-col :span="4" class="c-green">
123
+ <p class="h-100">16.66%</p>
124
+ </a-col>
125
+ </a-row>
126
+
127
+ - **水平方向**：向左，**垂直方向**：底部
128
+ <a-row type="flex" justify="start" align="bottom" style="background:#eee;">
129
+ <a-col :span="4" class="c-yellow">
130
+ <p class="h-150">16.66%</p>
131
+ </a-col>
132
+ <a-col :span="4" class="c-green">
133
+ <p class="h-80">16.66%</p>
134
+ </a-col>
135
+ <a-col :span="4" class="c-yellow">
136
+ <p class="h-180">16.66%</p>
137
+ </a-col>
138
+ <a-col :span="4" class="c-green">
139
+ <p class="h-100">16.66%</p>
140
+ </a-col>
141
+ </a-row>
142
+
143
+ ::: details 查看代码
144
+ ``` js
145
+ <template>
146
+ <div>
147
+ <p>底部对齐</p>
148
+ <a-row type="flex" justify="center" align="top">
149
+ <a-col :span="4">
150
+ <p class="height-150">
151
+ col-4
152
+ </p>
153
+ </a-col>
154
+ <a-col :span="4">
155
+ <p class="height-80">
156
+ col-4
157
+ </p>
158
+ </a-col>
159
+ <a-col :span="4">
160
+ <p class="height-180">
161
+ col-4
162
+ </p>
163
+ </a-col>
164
+ <a-col :span="4">
165
+ <p class="height-100">
166
+ col-4
167
+ </p>
168
+ </a-col>
169
+ </a-row>
170
+
171
+ <p>居中，空格隔开</p>
172
+ <a-row type="flex" justify="space-around" align="middle">
173
+ <a-col :span="4">
174
+ <p class="height-150">
175
+ col-4
176
+ </p>
177
+ </a-col>
178
+ <a-col :span="4">
179
+ <p class="height-80">
180
+ col-4
181
+ </p>
182
+ </a-col>
183
+ <a-col :span="4">
184
+ <p class="height-180">
185
+ col-4
186
+ </p>
187
+ </a-col>
188
+ <a-col :span="4">
189
+ <p class="height-100">
190
+ col-4
191
+ </p>
192
+ </a-col>
193
+ </a-row>
194
+
195
+ <p>底部对齐</p>
196
+ <a-row type="flex" justify="space-between" align="bottom">
197
+ <a-col :span="4">
198
+ <p class="height-150">
199
+ col-4
200
+ </p>
201
+ </a-col>
202
+ <a-col :span="4">
203
+ <p class="height-80">
204
+ col-4
205
+ </p>
206
+ </a-col>
207
+ <a-col :span="4">
208
+ <p class="height-180">
209
+ col-4
210
+ </p>
211
+ </a-col>
212
+ <a-col :span="4">
213
+ <p class="height-100">
214
+ col-4
215
+ </p>
216
+ </a-col>
217
+ </a-row>
218
+ </div>
219
+ </template>
220
+ ```
221
+ :::
222
+
223
+ - **水平方向**：空格分割，**垂直方向**：居中
224
+ <a-row type="flex" justify="space-between" align="middle" style="background:#eee;">
225
+ <a-col :span="4" class="c-yellow">
226
+ <p class="h-150">16.66%</p>
227
+ </a-col>
228
+ <a-col :span="4" class="c-green">
229
+ <p class="h-80">16.66%</p>
230
+ </a-col>
231
+ <a-col :span="4" class="c-yellow">
232
+ <p class="h-180">16.66%</p>
233
+ </a-col>
234
+ <a-col :span="4" class="c-green">
235
+ <p class="h-100">16.66%</p>
236
+ </a-col>
237
+ </a-row>
238
+
239
+ - **水平方向**：空格环绕，**垂直方向**：居中
240
+ <a-row type="flex" justify="space-around" align="middle" style="background:#eee;">
241
+ <a-col :span="4" class="c-yellow">
242
+ <p class="h-150">16.66%</p>
243
+ </a-col>
244
+ <a-col :span="4" class="c-green">
245
+ <p class="h-80">16.66%</p>
246
+ </a-col>
247
+ <a-col :span="4" class="c-yellow">
248
+ <p class="h-180">16.66%</p>
249
+ </a-col>
250
+ <a-col :span="4" class="c-green">
251
+ <p class="h-100">16.66%</p>
252
+ </a-col>
253
+ </a-row>
254
+
255
+ ::: details 查看代码
256
+ ``` html
257
+ <!--水平方向：空格分割，垂直方向：居中-->
258
+ <a-row type="flex" justify="space-between" align="middle" style="background:#eee;">
259
+ <a-col :span="4" class="c-yellow">
260
+ <p class="h-150">16.66%</p>
261
+ </a-col>
262
+ <a-col :span="4" class="c-green">
263
+ <p class="h-80">16.66%</p>
264
+ </a-col>
265
+ <a-col :span="4" class="c-yellow">
266
+ <p class="h-180">16.66%</p>
267
+ </a-col>
268
+ <a-col :span="4" class="c-green">
269
+ <p class="h-100">16.66%</p>
270
+ </a-col>
271
+ </a-row>
272
+
273
+ <!--水平方向：空格环绕，垂直方向：居中-->
274
+ <a-row type="flex" justify="space-around" align="middle" style="background:#eee;">
275
+ <a-col :span="4" class="c-yellow">
276
+ <p class="h-150">16.66%</p>
277
+ </a-col>
278
+ <a-col :span="4" class="c-green">
279
+ <p class="h-80">16.66%</p>
280
+ </a-col>
281
+ <a-col :span="4" class="c-yellow">
282
+ <p class="h-180">16.66%</p>
283
+ </a-col>
284
+ <a-col :span="4" class="c-green">
285
+ <p class="h-100">16.66%</p>
286
+ </a-col>
287
+ </a-row>
288
+ ```
289
+ :::
290
+
291
+ ## API
292
+
293
+ > **row**
294
+
295
+ | 成员 |说明 | 类型 | 默认值 |
296
+ | :-: |:-: | :-: | :-: |
297
+ | align | flex 布局下的垂直对齐方式：top middle bottom string | top |
298
+ | gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 [水平间距, 垂直间距]（1.5.0 后支持）。 | number/object/array | 0 |
299
+ | justify |flex | 布局下的水平排列方式：start end center space-around space-between | string | start |
300
+ | type | 布局模式，可选 flex，现代浏览器 下有效 | string | |
301
+
302
+ > **Col**
303
+
304
+ | 成员 | 说明 | 类型 | 默认值 |
305
+ | :-: |:-: | :-: | :-: |
306
+ | offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number |0 |
307
+ | order | 栅格顺序，flex 布局模式下有效 | number | 0 |
308
+ | pull | 栅格向左移动格数 | number | 0 |
309
+ | push | 栅格向右移动格数 | number | 0 |
310
+ | span | 栅格占位格数，为 0 时相当于 display: none | number | - |
311
+ | xs | <576px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number/object | - |
312
+ | sm | ≥576px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number/object | - |
313
+ | md | ≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number/object | - |
314
+ | lg | ≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number/object | - |
315
+ | xl | ≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number/object | - |
316
+ | xxl | ≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number/object | - |
package/docs/componentList/index.js ADDED
@@ -0,0 +1 @@
1
+ module.exports = ["/componentList/"];
package/jsconfig.json ADDED
@@ -0,0 +1,22 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "es5",
4
+ "module": "esnext",
5
+ "baseUrl": "./",
6
+ "moduleResolution": "node",
7
+ "paths": {
8
+ "@/*": [
9
+ "packages/*"
10
+ ],
11
+ "%/*": [
12
+ "examples/*"
13
+ ]
14
+ },
15
+ "lib": [
16
+ "esnext",
17
+ "dom",
18
+ "dom.iterable",
19
+ "scripthost"
20
+ ]
21
+ }
22
+ }
package/lib/demo.html ADDED
@@ -0,0 +1 @@
1
+ <!doctype html><meta charset="utf-8"><title>yw-ui-vue2 demo</title><script src="./yw-ui-vue2.umd.js"></script><link rel="stylesheet" href="./yw-ui-vue2.css"><script>console.log(yw-ui-vue2)</script>
package/lib/fonts/iconfont.7db9d461.ttf ADDED
Binary file