@kizmann/nano-ui 1.0.0 → 1.0.1

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 (115) hide show
  1. package/dist/nano-ui.css +1 -0
  2. package/dist/nano-ui.js +4 -0
  3. package/dist/nano-ui.js.map +1 -0
  4. package/dist/themes/dark.css +1 -0
  5. package/dist/themes/light.css +1 -0
  6. package/package.json +7 -1
  7. package/.github/workflows/compile-deploy-publish.yml +0 -65
  8. package/assets/nano-ui-dark.svg +0 -19
  9. package/assets/nano-ui-light.svg +0 -19
  10. package/assets/pico-js-dark.svg +0 -19
  11. package/assets/pico-js-light.svg +0 -19
  12. package/babel.config.js +0 -17
  13. package/demos/builder.html +0 -411
  14. package/demos/button/index.html +0 -129
  15. package/demos/cascader/index.html +0 -127
  16. package/demos/chart/index.html +0 -53
  17. package/demos/checkbox/index.html +0 -97
  18. package/demos/config/index.html +0 -95
  19. package/demos/confirm/index.html +0 -78
  20. package/demos/datepicker/index.html +0 -69
  21. package/demos/draggable/index.html +0 -127
  22. package/demos/form/index.html +0 -83
  23. package/demos/form.html +0 -462
  24. package/demos/grid.html +0 -321
  25. package/demos/input/index.html +0 -100
  26. package/demos/map/index.html +0 -81
  27. package/demos/matrix/index.html +0 -104
  28. package/demos/modal/index.html +0 -98
  29. package/demos/overview.html +0 -1468
  30. package/demos/paginator/index.html +0 -58
  31. package/demos/popover/index.html +0 -103
  32. package/demos/radio/index.html +0 -71
  33. package/demos/resizer/index.html +0 -106
  34. package/demos/scrollbar.html +0 -328
  35. package/demos/select/index.html +0 -174
  36. package/demos/select.html +0 -164
  37. package/demos/style.css +0 -50
  38. package/demos/switch/index.html +0 -69
  39. package/demos/table/index.html +0 -126
  40. package/demos/tabs/index.html +0 -110
  41. package/demos/tabs.html +0 -293
  42. package/demos/textarea/index.html +0 -77
  43. package/demos/timepicker/index.html +0 -66
  44. package/demos/transfer/index.html +0 -88
  45. package/demos/wysiwyg/index.html +0 -49
  46. package/docs/README.md +0 -34
  47. package/docs/_sidebar.md +0 -37
  48. package/docs/files/data/draggable.md +0 -143
  49. package/docs/files/data/map.md +0 -1
  50. package/docs/files/data/paginator.md +0 -23
  51. package/docs/files/data/table.md +0 -247
  52. package/docs/files/data/virtualscroller.md +0 -2
  53. package/docs/files/form/button.md +0 -131
  54. package/docs/files/form/cascader.md +0 -164
  55. package/docs/files/form/checkbox.md +0 -179
  56. package/docs/files/form/datepicker.md +0 -78
  57. package/docs/files/form/form.md +0 -52
  58. package/docs/files/form/input.md +0 -90
  59. package/docs/files/form/radio.md +0 -150
  60. package/docs/files/form/select.md +0 -202
  61. package/docs/files/form/switch.md +0 -98
  62. package/docs/files/form/textarea.md +0 -102
  63. package/docs/files/form/timepicker.md +0 -78
  64. package/docs/files/form/transfer.md +0 -30
  65. package/docs/files/others/config.md +0 -261
  66. package/docs/files/others/confirm.md +0 -51
  67. package/docs/files/others/drawer.md +0 -32
  68. package/docs/files/others/loader.md +0 -22
  69. package/docs/files/others/map.md +0 -32
  70. package/docs/files/others/modal.md +0 -32
  71. package/docs/files/others/notification.md +0 -52
  72. package/docs/files/others/popover.md +0 -36
  73. package/docs/files/others/resizer.md +0 -8
  74. package/docs/files/others/scrollbar.md +0 -8
  75. package/docs/files/others/tabs.md +0 -32
  76. package/docs/index.template.html +0 -76
  77. package/docs/src/js/backup.js +0 -128
  78. package/docs/src/js/helper/item-helper.js +0 -0
  79. package/docs/src/js/index.js +0 -21
  80. package/docs/src/js/plugin/title-plugin.js +0 -0
  81. package/docs/src/js/plugin/vue-demo-plugin.js +0 -97
  82. package/docs/src/js/theme/basic.js +0 -31
  83. package/docs/src/js/theme/docsify.js +0 -11
  84. package/docs/src/scss/index-dark.scss +0 -3
  85. package/docs/src/scss/index-light.scss +0 -3
  86. package/docs/src/scss/index.scss +0 -15
  87. package/docs/src/scss/mixins/base.scss +0 -14
  88. package/docs/src/scss/mixins/grid.scss +0 -213
  89. package/docs/src/scss/mixins/media.scss +0 -35
  90. package/docs/src/scss/mixins/space.scss +0 -61
  91. package/docs/src/scss/root/vars-dark.scss +0 -15
  92. package/docs/src/scss/root/vars-light.scss +0 -15
  93. package/docs/src/scss/root/vars.scss +0 -110
  94. package/docs/src/scss/theme/default.scss +0 -123
  95. package/docs/src/scss/theme/header.scss +0 -147
  96. package/docs/src/scss/theme/layout.scss +0 -186
  97. package/docs/src/scss/theme/loader.scss +0 -63
  98. package/docs/src/scss/theme/markdown.scss +0 -79
  99. package/docs/src/scss/theme/navigation.scss +0 -58
  100. package/docs/src/scss/theme/progress.scss +0 -9
  101. package/docs/src/scss/theme/search.scss +0 -119
  102. package/docs/src/scss/theme/syntax.scss +0 -142
  103. package/docs/src/scss/theme/table.scss +0 -63
  104. package/favicon/apple-touch-icon.png +0 -0
  105. package/favicon/favicon-96x96.png +0 -0
  106. package/favicon/favicon.ico +0 -0
  107. package/favicon/favicon.svg +0 -3
  108. package/favicon/site.webmanifest +0 -21
  109. package/favicon/web-app-manifest-192x192.png +0 -0
  110. package/favicon/web-app-manifest-512x512.png +0 -0
  111. package/mix-manifest.json +0 -4
  112. package/postcss.config.js +0 -14
  113. package/webpack.config.js +0 -211
  114. package/webservy.json +0 -8
  115. /package/{.nojekyll → dist/.ignore.js} +0 -0
@@ -1,411 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
- <title>Nano UI</title>
8
-
9
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
10
- <link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
11
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
12
- <link rel="stylesheet" href="../dist/nano-ui.css">
13
- <link id="theme" rel="stylesheet" href="../dist/themes/light.css">
14
-
15
- <link rel="stylesheet" href="../style.css">
16
-
17
- <style>
18
-
19
- div {
20
- box-sizing: border-box;
21
- }
22
-
23
- body {
24
- font-family: 'Inter', 'Helvetica', 'Arial', sans-serif;
25
- font-size: 14px;
26
- height: 100%;
27
- overflow-x: hidden;
28
- }
29
-
30
- #app {
31
- overflow-x: hidden;
32
- }
33
-
34
- .app-container {
35
- max-width: 1440px;
36
- margin: 0 auto;
37
- padding: 20px 30px 40px 30px;
38
- }
39
-
40
- .app-options {
41
- border-bottom: 1px solid rgba(110, 110, 110, 0.15);
42
- margin-bottom: 20px;
43
- }
44
-
45
- h2 {
46
- font-size: 32px;
47
- font-weight: bold;
48
- padding-bottom: 10px;
49
- margin: 50px 0 15px;
50
- border-bottom: 1px solid rgba(110, 110, 110, 0.15);
51
- }
52
-
53
- </style>
54
-
55
- <script src="https://unpkg.com/moment"></script>
56
- <script src="https://unpkg.com/vue@3.4.6"></script>
57
- <script src="https://vankizmann.github.io/pico-js/dist/pico-js.js"></script>
58
- <script src="../dist/nano-ui.js"></script>
59
- <script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
60
- <script src="https://maps.googleapis.com/maps/api/js"></script>
61
-
62
- </head>
63
- <body class="n-demo">
64
-
65
- <div id="app">
66
- <div class="app-container">
67
- <n-builder :model-value="demoConfigNext" :model="demoModel" :scope="demoScope"></n-builder>
68
- </div>
69
- </div>
70
-
71
- <script>
72
-
73
- (function (nano) {
74
-
75
- 'use strict';
76
-
77
- pi.Locale.set('URL', "URL2");
78
- pi.Locale.set('URX', "URX2");
79
-
80
- pi.Dom.ready(function () {
81
-
82
- let data = {};
83
-
84
- data.demoModel = {
85
- test: true,
86
- label: 'foobar',
87
- option: {
88
- url: 'http://', redirect: 'AHA'
89
- }
90
- };
91
-
92
- data.demoScope = {
93
- testme: () => {
94
- console.log('abc');
95
- }
96
- }
97
-
98
- data.sizes = {
99
- xs: 'XS',
100
- sm: 'SM',
101
- md: 'MD',
102
- lg: 'LG'
103
- };
104
-
105
- data.types = {
106
- primary: 'Primary',
107
- secondary: 'Secondary',
108
- success: 'Success',
109
- warning: 'Warning',
110
- danger: 'Danger',
111
- info: 'Info'
112
- };
113
-
114
- data.modals = {
115
- default: 'Default',
116
- preview: 'Preview',
117
- };
118
-
119
- pi.Obj.set(data, 'demoConfigNext.NFormGroup:root', {
120
- vShow: [
121
- '$model.test'
122
- ],
123
- props: {
124
- label: '$model.label',
125
- icon: 'fa fa-directions'
126
- }
127
- });
128
-
129
- pi.Obj.set(data, 'demoConfigNext.NFormGroup:root.content.NFormItem:url', {
130
- props: {
131
- label: '\\@URX',
132
- test: function() {
133
- console.log(123);
134
- }
135
- },
136
- content: {
137
- 'NInput': {
138
- binds: {
139
- modelValue: '$model.option.url'
140
- }
141
- }
142
- }
143
- });
144
-
145
- pi.Obj.set(data, 'demoConfigNext.NFormGroup:root.content.NFormItem:menu', {
146
- props: {
147
- label: pi.Locale.trans('Menu')
148
- },
149
- content: {
150
- 'NSwitch': {
151
- binds: {
152
- modelValue: '$model.option.redirect'
153
- },
154
- props: {
155
- "foo": "@bar"
156
- },
157
- content: [
158
- "@123"
159
- ]
160
- }
161
- }
162
- });
163
-
164
- data.demoConfig = {
165
- 'NFormGroup:00': {
166
- $props: {
167
- label: pi.Locale.trans('Redirect'),
168
- icon: 'fa fa-directions'
169
- },
170
- content: {
171
- 'div:00': {
172
- class: 'grid grid--row grid--wrap grid--30',
173
- content: {
174
- 'div:00': {
175
- class: 'col--1-1 col--1-2@sm',
176
- content: {
177
- 'NFormItem:00': {
178
- $props: {
179
- label: pi.Locale.trans('URL')
180
- },
181
- content: {
182
- 'NInput:00': {
183
- model: {
184
- path: 'option.url'
185
- }
186
- }
187
- }
188
- },
189
- }
190
- },
191
- 'div:10': {
192
- class: 'col--1-1 col--1-2@sm',
193
- content: {
194
- 'NFormItem:00': {
195
- $props: {
196
- label: pi.Locale.trans('Menu')
197
- },
198
- content: {
199
- 'Nswitch:00': {
200
- model: {
201
- path: 'option.redirect'
202
- },
203
- content: [
204
- pi.Locale.trans("foobar")
205
- ]
206
- }
207
- }
208
- }
209
- }
210
- }
211
- }
212
- }
213
- }
214
- },
215
- };
216
-
217
- data.configData = { label: 'asdasda' };
218
-
219
- data.testData = [];
220
-
221
- let itemGenerator = function (count = 100, index = 0) {
222
- return pi.Arr.each(pi.Arr.make(count), function (value) {
223
-
224
- let id = pi.UUID();
225
-
226
- return {
227
- id: id,
228
- value: id,
229
- matrix: 10,
230
- label: `Item ${index++}`,
231
- image: 'https://picsum.photos/300/300.jpg?' + id,
232
- date: pi.Now.make('now').format('YYYY-MM-DD HH:mm:ss', true),
233
- enabled: !! Math.floor(Math.random() * 2)
234
- };
235
- });
236
- };
237
-
238
-
239
- data.cascaderData = pi.Arr.each(itemGenerator(5), function (item) {
240
-
241
- let children = pi.Arr.each(itemGenerator(5), function (item) {
242
- return pi.Obj.assign(item, { children: itemGenerator(5) });
243
- });
244
-
245
- return pi.Obj.assign(item, { children: children });
246
- });
247
-
248
- data.virtualData = itemGenerator(10000);
249
-
250
- data.virtualTree = pi.Arr.each(itemGenerator(100), function (item) {
251
- return pi.Obj.assign(item, { children: itemGenerator(10) });
252
- });
253
-
254
-
255
- data.virtualItem = null;
256
-
257
- data.treeSelect = null;
258
- data.treeMatrix = [data.virtualTree[3]];
259
-
260
- data.foobar = 'huhu';
261
-
262
- data.n_theme = pi.Cookie.get('theme', 'light', 'string');
263
-
264
- pi.Dom.find('#theme').attr('href', '../dist/themes/' +
265
- data.n_theme + '.css');
266
-
267
- data.n_form = {
268
- size: 'md', conditional: true, modelValue: false
269
- };
270
-
271
- data.n_tags = {
272
- size: 'md',
273
- };
274
-
275
- data.n_rating = {
276
- size: 'md', choice: 'No stars|:value star|:value stars', disabled: false
277
- };
278
-
279
- data.n_button = {
280
- icon: 'fa fa-ghost', size: 'md', square: false, link: false, disabled: false
281
- };
282
-
283
- data.n_textarea = {
284
- size: 'md', placeholder: 'Placeholder', autoRows: false, disabled: false
285
- };
286
-
287
- data.n_input = {
288
- value: 'Demo', icon: 'fa fa-ghost', size: 'md', placeholder: 'Placeholder', disabled: false
289
- };
290
-
291
- data.n_number = {
292
- test: '', value: 3, size: 'md', placeholder: '', disabled: false, minValue: 0, maxValue: 10
293
- };
294
-
295
- data.n_select = {
296
- size: 'md', allowCreate: false, clearable: true, disabled: false
297
- };
298
-
299
- data.n_cascader = {
300
- size: 'md', type: 'primary', clearable: true, disabled: false
301
- };
302
-
303
- data.n_checkbox = {
304
- size: 'md', type: 'primary', disabled: false
305
- };
306
-
307
- data.n_radio = {
308
- size: 'md', type: 'primary', disabled: false
309
- };
310
-
311
- data.n_slider = {
312
- size: 'md', disabled: false, temp_value: 30,
313
- };
314
-
315
- data.n_switch = {
316
- size: 'md', disabled: false
317
- };
318
-
319
- data.n_datepicker = {
320
- size: 'md', type: 'primary', clearable: true, disabled: false
321
- };
322
-
323
- data.n_timepicker = {
324
- size: 'md', type: 'primary', clearable: true, disabled: false
325
- };
326
-
327
- data.n_datetimepicker = {
328
- size: 'md', type: 'primary', clearable: true, disabled: false
329
- };
330
-
331
- data.n_durationpicker = {
332
- size: 'md', type: 'primary', clearable: true, disabled: false, modelValue: 124521
333
- };
334
-
335
- data.n_transfer = {
336
- size: 'md', type: 'primary', disabled: false
337
- };
338
-
339
- data.n_modal = {
340
- size: 'md', type: 'default', disabled: false
341
- };
342
-
343
- data.n_confirm = {
344
- size: 'md', type: 'primary', disabled: false
345
- };
346
-
347
- data.n_tabs = {
348
- value: 'default', size: 'md', type: 'primary'
349
- };
350
-
351
- data.n_collapse = {
352
- value: ['default'], size: 'md', type: 'primary', relative: false
353
- };
354
-
355
- data.n_paginator = {
356
- size: 'md', type: 'primary'
357
- };
358
-
359
- data.n_draggable = {
360
- count: 0
361
- };
362
-
363
- data.n_loader = {
364
- size: 'md', type: 'primary', visible: true
365
- };
366
-
367
- data.n_map = {
368
- lat: 53.55, lng: 9.99
369
- };
370
-
371
- data.n_preview = {
372
- file: null
373
- };
374
-
375
- let methods = {};
376
-
377
- var config = {
378
- data: function () {
379
-
380
- this.icons = pi.Obj.assign(nano.Icons, {
381
- ghost: 'fa fa-ghost'
382
- });
383
-
384
- data.demoIcons = pi.Arr.reduce(pi.Obj.values(nano.Icons), function (merge, icon) {
385
- return pi.Obj.assign(merge, { [icon]: icon });
386
- }, {});
387
-
388
- return data;
389
- },
390
- mounted: function () {
391
- let self = this;
392
- },
393
- methods: methods
394
- };
395
-
396
- window.App = Vue.createApp(config);
397
-
398
- window.App.config.devtools = true;
399
-
400
- window.App.use(function (App) {
401
- nano.Install(App);
402
- });
403
-
404
- window.App.mount('#app');
405
- });
406
-
407
- })(window.nano);
408
- </script>
409
-
410
- </body>
411
- </html>
@@ -1,129 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
- <title>Nano UI Button</title>
8
-
9
- <link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
10
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
11
- <link rel="stylesheet" href="../../dist/nano-ui.css">
12
- <link rel="stylesheet" href="../style.css">
13
-
14
- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
15
- <script src="https://vankizmann.github.io/@kizmann/pico-js/dist/@kizmann/pico-js.js"></script>
16
- <script src="../../dist/nano-ui.js"></script>
17
-
18
- </head>
19
- <body>
20
-
21
- <div id="app">
22
- <n-form :form="form" :class="{ 'n-inverse': inverse }">
23
-
24
- <n-form-item label="Inverse">
25
- <n-checkbox v-model="inverse">Inverse</n-checkbox>
26
- </n-form-item>
27
-
28
- <n-form-item label="Regular">
29
- <n-button type="primary">Primary</n-button>
30
- <n-button type="secondary">Secondary</n-button>
31
- <n-button type="success">Success</n-button>
32
- <n-button type="warning">Warning</n-button>
33
- <n-button type="danger">Danger</n-button>
34
- <n-button type="info">Info</n-button>
35
- <n-button type="link">Link</n-button>
36
- </n-form-item>
37
-
38
- <n-form-item label="Disabled">
39
- <n-button type="primary" :disabled="true">Primary</n-button>
40
- <n-button type="secondary" :disabled="true">Secondary</n-button>
41
- <n-button type="success" :disabled="true">Success</n-button>
42
- <n-button type="warning" :disabled="true">Warning</n-button>
43
- <n-button type="danger" :disabled="true">Danger</n-button>
44
- <n-button type="info" :disabled="true">Info</n-button>
45
- <n-button type="link" :disabled="true">Link</n-button>
46
- </n-form-item>
47
-
48
- <n-form-item label="Outline default">
49
- <n-button type="primary" :outline="true">Primary</n-button>
50
- <n-button type="secondary" :outline="true">Secondary</n-button>
51
- <n-button type="success" :outline="true">Success</n-button>
52
- <n-button type="warning" :outline="true">Warning</n-button>
53
- <n-button type="danger" :outline="true">Danger</n-button>
54
- <n-button type="info" :outline="true">Info</n-button>
55
- </n-form-item>
56
-
57
- <n-form-item label="Outline disabled">
58
- <n-button type="primary" :outline="true" :disabled="true">Primary</n-button>
59
- <n-button type="secondary" :outline="true" :disabled="true">Secondary</n-button>
60
- <n-button type="success" :outline="true" :disabled="true">Success</n-button>
61
- <n-button type="warning" :outline="true" :disabled="true">Warning</n-button>
62
- <n-button type="danger" :outline="true" :disabled="true">Danger</n-button>
63
- <n-button type="info" :outline="true" :disabled="true">Info</n-button>
64
- </n-form-item>
65
-
66
- <n-form-item label="Icon">
67
- <n-button type="success" icon="fa fa-check-circle" icon-position="after">Success</n-button>
68
- <n-button type="warning" icon="fa fa-exclamation-circle">Warning</n-button>
69
- <n-button type="danger" icon="fa fa-times-circle">Danger</n-button>
70
- <n-button type="info" icon="fa fa-info-circle">Info</n-button>
71
- </n-form-item>
72
-
73
- <n-form-item label="Square">
74
- <n-button type="success" icon="fa fa-check-circle" :square="true"></n-button>
75
- <n-button type="warning" icon="fa fa-exclamation-circle" :square="true"></n-button>
76
- <n-button type="danger" icon="fa fa-times-circle" :square="true"></n-button>
77
- <n-button type="info" icon="fa fa-info-circle" :square="true"></n-button>
78
- </n-form-item>
79
-
80
- <n-form-item label="Group">
81
- <n-button-group>
82
- <n-button type="primary" icon="fa fa-angle-left">
83
- Previous
84
- </n-button>
85
- <n-button type="primary" icon="fa fa-angle-right" icon-position="after">
86
- Next
87
- </n-button>
88
- </n-button-group>
89
- </n-form-item>
90
-
91
- <n-form-item label="Group square">
92
- <n-button-group>
93
- <n-button type="primary" icon="fa fa-check-circle" :square="true"></n-button>
94
- <n-button type="primary" icon="fa fa-times-circle" :square="true"></n-button>
95
- </n-button-group>
96
- </n-form-item>
97
-
98
- <n-form-item label="Sizes">
99
- <n-button type="primary" size="small">Small</n-button>
100
- <n-button type="primary" size="default">Regular</n-button>
101
- <n-button type="primary" size="large">Large</n-button>
102
- </n-form-item>
103
-
104
- </n-form>
105
- </div>
106
-
107
- <script>
108
- pi.Dom.ready(() => {
109
-
110
- Vue.config.devtools = true;
111
-
112
- var config = {
113
- data: function() {
114
-
115
- var form = {
116
- //
117
- };
118
-
119
- return {
120
- form: form, inverse: false
121
- };
122
- }
123
- };
124
-
125
- window.App = new Vue(config).$mount('#app');
126
- })
127
- </script>
128
- </body>
129
- </html>
@@ -1,127 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
- <title>Nano UI Cascader</title>
8
-
9
- <link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
10
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
11
- <link rel="stylesheet" href="../../dist/nano-ui.css">
12
- <link rel="stylesheet" href="../style.css">
13
-
14
- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
15
- <script src="https://vankizmann.github.io/@kizmann/pico-js/dist/@kizmann/pico-js.js"></script>
16
- <script src="../../dist/nano-ui.js"></script>
17
-
18
- </head>
19
- <body>
20
-
21
- <div id="app">
22
- <n-form :form="form" :class="{ 'n-inverse': inverse }">
23
-
24
- <n-form-item label="Inverse">
25
- <n-checkbox v-model="inverse">Inverse</n-checkbox>
26
- </n-form-item>
27
-
28
- <n-form-item label="Click">
29
- <n-cascader v-model="form.value" :items="items" trigger="click"></n-cascader>
30
- </n-form-item>
31
-
32
- <n-form-item label="Hover">
33
- <n-cascader v-model="form.value" :items="items" trigger="hover"></n-cascader>
34
- </n-form-item>
35
-
36
- <n-form-item label="Clearable">
37
- <n-cascader v-model="form.value" :items="items" :clearable="true"></n-cascader>
38
- </n-form-item>
39
-
40
- <n-form-item label="Disabled">
41
- <n-cascader v-model="form.value" :items="items" :disabled="true"></n-cascader>
42
- </n-form-item>
43
-
44
- <n-form-item label="Object">
45
- <pre>{{ form }}</pre>
46
- </n-form-item>
47
-
48
- <div style="height: 600px; overflow-y: scroll; background: #efefef; position: relative;">
49
- <div style="padding: 800px 0 80px;">
50
- <n-form-item label="Default">
51
- <n-cascader v-model="form.value" :items="items"></n-cascader>
52
- </n-form-item>
53
- </div>
54
- </div>
55
-
56
- </n-form>
57
- </div>
58
-
59
- <script>
60
- pi.Dom.ready(function () {
61
-
62
- Vue.config.devtools = true;
63
-
64
- var config = {
65
- data: function () {
66
-
67
- let total = 0;
68
-
69
- let childGenerator = function(count, depth, current) {
70
-
71
- if ( count === undefined ) {
72
- count = 10;
73
- }
74
-
75
- if ( depth === undefined ) {
76
- depth = 5;
77
- }
78
-
79
- if ( current === undefined ) {
80
- current = 1;
81
- }
82
-
83
- let children = Array(
84
- Math.floor(Math.random() * (count + 1))
85
- ).fill(null);
86
-
87
- pi.Arr.map(children, function(item) {
88
-
89
- total++;
90
-
91
- item = {
92
- label: 'Item ' + (Math.floor(Math.random() * 2) === 1 ? 'long text is here given' : '') + total,
93
- value: 'value-' + total,
94
- disabled: !! Math.floor(Math.random() * 2),
95
- children: []
96
- };
97
-
98
- if ( current < depth ) {
99
- item.children = childGenerator(count, depth, current + 1);
100
- }
101
-
102
- return item;
103
- });
104
-
105
- return children;
106
- };
107
-
108
- var form = {
109
- value: []
110
- };
111
-
112
- var self = this;
113
-
114
- pi.Any.delay(function () {
115
- self.items = childGenerator();
116
- }, 2000);
117
-
118
- return { form: form, inverse: false, items: [] };
119
- }
120
- };
121
-
122
- window.App = new Vue(config).$mount('#app');
123
-
124
- });
125
- </script>
126
- </body>
127
- </html>