@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
package/demos/form.html DELETED
@@ -1,462 +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-form>
68
- <n-frame style="height: 90vh;">
69
- <n-frame-item :resize="true" :width="200">
70
- <n-form-menu></n-form-menu>
71
- </n-frame-item>
72
- <n-frameya-item :scrollbar="true">
73
- <n-form-group label="foobar 1">
74
- <n-form-item label="Test">
75
- <n-input></n-input>
76
- </n-form-item>
77
- <n-form-item label="Test">
78
- <n-input></n-input>
79
- </n-form-item>
80
- <n-form-item label="Test">
81
- <n-input></n-input>
82
- </n-form-item>
83
- </n-form-group>
84
- <n-form-group label="foobar 2">
85
- <n-form-item label="Test">
86
- <n-input></n-input>
87
- </n-form-item>
88
- <n-form-item label="Test">
89
- <n-input></n-input>
90
- </n-form-item>
91
- <n-form-item label="Test">
92
- <n-input></n-input>
93
- </n-form-item>
94
- </n-form-group>
95
- <n-form-group label="foobar 3">
96
- <n-form-item label="Test">
97
- <n-input></n-input>
98
- </n-form-item>
99
- <n-form-item label="Test">
100
- <n-input></n-input>
101
- </n-form-item>
102
- <n-form-item label="Test">
103
- <n-input></n-input>
104
- </n-form-item>
105
- <n-form-item label="Test">
106
- <n-input></n-input>
107
- </n-form-item>
108
- <n-form-item label="Test">
109
- <n-input></n-input>
110
- </n-form-item>
111
- <n-form-item label="Test">
112
- <n-input></n-input>
113
- </n-form-item>
114
- </n-form-group>
115
- </n-frameya-item>
116
- </n-frame>
117
-
118
- </n-form>
119
- </div>
120
- </div>
121
-
122
- <script>
123
-
124
- (function (nano) {
125
-
126
- 'use strict';
127
-
128
- pi.Locale.set('URL', "URL2");
129
- pi.Locale.set('URX', "URX2");
130
-
131
- pi.Dom.ready(function () {
132
-
133
- let data = {};
134
-
135
- data.demoModel = {
136
- test: true,
137
- label: 'foobar',
138
- option: {
139
- url: 'http://', redirect: 'AHA'
140
- }
141
- };
142
-
143
- data.demoScope = {
144
- testme: () => {
145
- console.log('abc');
146
- }
147
- }
148
-
149
- data.sizes = {
150
- xs: 'XS',
151
- sm: 'SM',
152
- md: 'MD',
153
- lg: 'LG'
154
- };
155
-
156
- data.types = {
157
- primary: 'Primary',
158
- secondary: 'Secondary',
159
- success: 'Success',
160
- warning: 'Warning',
161
- danger: 'Danger',
162
- info: 'Info'
163
- };
164
-
165
- data.modals = {
166
- default: 'Default',
167
- preview: 'Preview',
168
- };
169
-
170
- pi.Obj.set(data, 'demoConfigNext.NFormGroup:root', {
171
- vShow: [
172
- '$model.test'
173
- ],
174
- props: {
175
- label: '$model.label',
176
- icon: 'fa fa-directions'
177
- }
178
- });
179
-
180
- pi.Obj.set(data, 'demoConfigNext.NFormGroup:root.content.NFormItem:url', {
181
- props: {
182
- label: '\\@URX',
183
- test: function() {
184
- console.log(123);
185
- }
186
- },
187
- content: {
188
- 'NInput': {
189
- binds: {
190
- modelValue: '$model.option.url'
191
- }
192
- }
193
- }
194
- });
195
-
196
- pi.Obj.set(data, 'demoConfigNext.NFormGroup:root.content.NFormItem:menu', {
197
- props: {
198
- label: pi.Locale.trans('Menu')
199
- },
200
- content: {
201
- 'NSwitch': {
202
- binds: {
203
- modelValue: '$model.option.redirect'
204
- },
205
- props: {
206
- "foo": "@bar"
207
- },
208
- content: [
209
- "@123"
210
- ]
211
- }
212
- }
213
- });
214
-
215
- data.demoConfig = {
216
- 'NFormGroup:00': {
217
- $props: {
218
- label: pi.Locale.trans('Redirect'),
219
- icon: 'fa fa-directions'
220
- },
221
- content: {
222
- 'div:00': {
223
- class: 'grid grid--row grid--wrap grid--30',
224
- content: {
225
- 'div:00': {
226
- class: 'col--1-1 col--1-2@sm',
227
- content: {
228
- 'NFormItem:00': {
229
- $props: {
230
- label: pi.Locale.trans('URL')
231
- },
232
- content: {
233
- 'NInput:00': {
234
- model: {
235
- path: 'option.url'
236
- }
237
- }
238
- }
239
- },
240
- }
241
- },
242
- 'div:10': {
243
- class: 'col--1-1 col--1-2@sm',
244
- content: {
245
- 'NFormItem:00': {
246
- $props: {
247
- label: pi.Locale.trans('Menu')
248
- },
249
- content: {
250
- 'Nswitch:00': {
251
- model: {
252
- path: 'option.redirect'
253
- },
254
- content: [
255
- pi.Locale.trans("foobar")
256
- ]
257
- }
258
- }
259
- }
260
- }
261
- }
262
- }
263
- }
264
- }
265
- },
266
- };
267
-
268
- data.configData = { label: 'asdasda' };
269
-
270
- data.testData = [];
271
-
272
- let itemGenerator = function (count = 100, index = 0) {
273
- return pi.Arr.each(pi.Arr.make(count), function (value) {
274
-
275
- let id = pi.UUID();
276
-
277
- return {
278
- id: id,
279
- value: id,
280
- matrix: 10,
281
- label: `Item ${index++}`,
282
- image: 'https://picsum.photos/300/300.jpg?' + id,
283
- date: pi.Now.make('now').format('YYYY-MM-DD HH:mm:ss', true),
284
- enabled: !! Math.floor(Math.random() * 2)
285
- };
286
- });
287
- };
288
-
289
-
290
- data.cascaderData = pi.Arr.each(itemGenerator(5), function (item) {
291
-
292
- let children = pi.Arr.each(itemGenerator(5), function (item) {
293
- return pi.Obj.assign(item, { children: itemGenerator(5) });
294
- });
295
-
296
- return pi.Obj.assign(item, { children: children });
297
- });
298
-
299
- data.virtualData = itemGenerator(10000);
300
-
301
- data.virtualTree = pi.Arr.each(itemGenerator(100), function (item) {
302
- return pi.Obj.assign(item, { children: itemGenerator(10) });
303
- });
304
-
305
-
306
- data.virtualItem = null;
307
-
308
- data.treeSelect = null;
309
- data.treeMatrix = [data.virtualTree[3]];
310
-
311
- data.foobar = 'huhu';
312
-
313
- data.n_theme = pi.Cookie.get('theme', 'light', 'string');
314
-
315
- pi.Dom.find('#theme').attr('href', '../dist/themes/' +
316
- data.n_theme + '.css');
317
-
318
- data.n_form = {
319
- size: 'md', conditional: true, modelValue: false
320
- };
321
-
322
- data.n_tags = {
323
- size: 'md',
324
- };
325
-
326
- data.n_rating = {
327
- size: 'md', choice: 'No stars|:value star|:value stars', disabled: false
328
- };
329
-
330
- data.n_button = {
331
- icon: 'fa fa-ghost', size: 'md', square: false, link: false, disabled: false
332
- };
333
-
334
- data.n_textarea = {
335
- size: 'md', placeholder: 'Placeholder', autoRows: false, disabled: false
336
- };
337
-
338
- data.n_input = {
339
- value: 'Demo', icon: 'fa fa-ghost', size: 'md', placeholder: 'Placeholder', disabled: false
340
- };
341
-
342
- data.n_number = {
343
- test: '', value: 3, size: 'md', placeholder: '', disabled: false, minValue: 0, maxValue: 10
344
- };
345
-
346
- data.n_select = {
347
- size: 'md', allowCreate: false, clearable: true, disabled: false
348
- };
349
-
350
- data.n_cascader = {
351
- size: 'md', type: 'primary', clearable: true, disabled: false
352
- };
353
-
354
- data.n_checkbox = {
355
- size: 'md', type: 'primary', disabled: false
356
- };
357
-
358
- data.n_radio = {
359
- size: 'md', type: 'primary', disabled: false
360
- };
361
-
362
- data.n_slider = {
363
- size: 'md', disabled: false, temp_value: 30,
364
- };
365
-
366
- data.n_switch = {
367
- size: 'md', disabled: false
368
- };
369
-
370
- data.n_datepicker = {
371
- size: 'md', type: 'primary', clearable: true, disabled: false
372
- };
373
-
374
- data.n_timepicker = {
375
- size: 'md', type: 'primary', clearable: true, disabled: false
376
- };
377
-
378
- data.n_datetimepicker = {
379
- size: 'md', type: 'primary', clearable: true, disabled: false
380
- };
381
-
382
- data.n_durationpicker = {
383
- size: 'md', type: 'primary', clearable: true, disabled: false, modelValue: 124521
384
- };
385
-
386
- data.n_transfer = {
387
- size: 'md', type: 'primary', disabled: false
388
- };
389
-
390
- data.n_modal = {
391
- size: 'md', type: 'default', disabled: false
392
- };
393
-
394
- data.n_confirm = {
395
- size: 'md', type: 'primary', disabled: false
396
- };
397
-
398
- data.n_tabs = {
399
- value: 'default', size: 'md', type: 'primary'
400
- };
401
-
402
- data.n_collapse = {
403
- value: ['default'], size: 'md', type: 'primary', relative: false
404
- };
405
-
406
- data.n_paginator = {
407
- size: 'md', type: 'primary'
408
- };
409
-
410
- data.n_draggable = {
411
- count: 0
412
- };
413
-
414
- data.n_loader = {
415
- size: 'md', type: 'primary', visible: true
416
- };
417
-
418
- data.n_map = {
419
- lat: 53.55, lng: 9.99
420
- };
421
-
422
- data.n_preview = {
423
- file: null
424
- };
425
-
426
- let methods = {};
427
-
428
- var config = {
429
- data: function () {
430
-
431
- this.icons = pi.Obj.assign(nano.Icons, {
432
- ghost: 'fa fa-ghost'
433
- });
434
-
435
- data.demoIcons = pi.Arr.reduce(pi.Obj.values(nano.Icons), function (merge, icon) {
436
- return pi.Obj.assign(merge, { [icon]: icon });
437
- }, {});
438
-
439
- return data;
440
- },
441
- mounted: function () {
442
- let self = this;
443
- },
444
- methods: methods
445
- };
446
-
447
- window.App = Vue.createApp(config);
448
-
449
- window.App.config.devtools = true;
450
-
451
- window.App.use(function (App) {
452
- nano.Install(App);
453
- });
454
-
455
- window.App.mount('#app');
456
- });
457
-
458
- })(window.nano);
459
- </script>
460
-
461
- </body>
462
- </html>