@kizmann/nano-ui 0.9.10 → 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 (294) hide show
  1. package/README.md +1 -1
  2. package/dist/nano-ui.css +1 -2
  3. package/dist/nano-ui.js +3 -3
  4. package/dist/nano-ui.js.map +1 -1
  5. package/dist/themes/dark.css +1 -2
  6. package/dist/themes/light.css +1 -2
  7. package/package.json +25 -12
  8. package/src/alert/src/alert/alert.scss +5 -4
  9. package/src/button/src/button/button.scss +5 -5
  10. package/src/button/src/button-group/button-group.scss +5 -4
  11. package/src/cascader/src/cascader/cascader.scss +5 -4
  12. package/src/cascader/src/cascader-panel/cascader-panel.scss +5 -4
  13. package/src/checkbox/src/checkbox/checkbox.scss +5 -4
  14. package/src/checkbox/src/checkbox-group/checkbox-group.scss +5 -4
  15. package/src/collapse/src/collapse/collapse.scss +5 -4
  16. package/src/collapse/src/collapse-item/collapse-item.scss +5 -4
  17. package/src/config/src/builder/builder.scss +17 -13
  18. package/src/config/src/reference-panel/reference-panel.scss +7 -4
  19. package/src/confirm/src/confirm/confirm.scss +5 -4
  20. package/src/datepicker/src/datepicker/datepicker.scss +5 -4
  21. package/src/datepicker/src/datepicker-panel/datepicker-panel.scss +5 -4
  22. package/src/datetimepicker/src/datetimepicker/datetimepicker.js +0 -4
  23. package/src/datetimepicker/src/datetimepicker/datetimepicker.scss +5 -4
  24. package/src/draggable/src/draggrid/draggrid.scss +5 -4
  25. package/src/draggable/src/draggrid-item/draggrid-item.scss +5 -4
  26. package/src/draggable/src/draglist/draglist.scss +5 -4
  27. package/src/draggable/src/draglist-item/draglist-item.scss +5 -4
  28. package/src/draggable/src/dropzone/dropzone.scss +5 -4
  29. package/src/drawer/index.js +5 -0
  30. package/src/drawer/index.scss +1 -0
  31. package/src/drawer/src/drawer/drawer.js +431 -0
  32. package/src/drawer/src/drawer/drawer.scss +136 -0
  33. package/src/durationpicker/src/durationpicker/durationpicker.scss +5 -4
  34. package/src/empty/src/empty-icon/empty-icon.scss +5 -4
  35. package/src/form/index.js +6 -0
  36. package/src/form/index.scss +2 -0
  37. package/src/form/src/form/form.js +11 -1
  38. package/src/form/src/form-frame/form-frame.js +42 -0
  39. package/src/form/src/form-frame/form-frame.scss +28 -0
  40. package/src/form/src/form-frame-item/form-frame-item.js +114 -0
  41. package/src/form/src/form-group/form-group.js +33 -1
  42. package/src/form/src/form-group/form-group.scss +5 -4
  43. package/src/form/src/form-item/form-item.scss +5 -4
  44. package/src/form/src/form-menu/form-menu.js +89 -0
  45. package/src/form/src/form-menu/form-menu.scss +9 -0
  46. package/src/index.js +1 -0
  47. package/src/index.scss +1 -0
  48. package/src/info/src/info/info.scss +5 -4
  49. package/src/info/src/info-column/info-column.scss +7 -4
  50. package/src/input/src/input/input.scss +5 -4
  51. package/src/input-number/src/input-number/input-number.scss +5 -4
  52. package/src/loader/src/loader/loader.scss +5 -4
  53. package/src/modal/src/modal/modal.scss +5 -4
  54. package/src/notification/src/notification/notification.scss +5 -4
  55. package/src/paginator/src/paginator/paginator.scss +5 -4
  56. package/src/popover/src/popover/popover.scss +5 -4
  57. package/src/radio/src/radio/radio.scss +5 -4
  58. package/src/radio/src/radio-group/radio-group.scss +5 -4
  59. package/src/rating/src/rating/rating.scss +5 -4
  60. package/src/root/vars.scss +84 -81
  61. package/src/select/src/select/select.scss +5 -4
  62. package/src/slider/src/slider/slider.scss +5 -4
  63. package/src/switch/src/switch/switch.scss +6 -4
  64. package/src/table/src/table/table.scss +15 -0
  65. package/src/table/src/table-cell/table-cell.scss +5 -4
  66. package/src/tabs/src/tabs/tabs.scss +5 -4
  67. package/src/tabs/src/tabs-item/tabs-item.scss +5 -4
  68. package/src/tags/src/tags-item/tags-item.scss +5 -4
  69. package/src/textarea/src/textarea/textarea.scss +5 -4
  70. package/src/timepicker/src/timepicker/timepicker.scss +5 -4
  71. package/src/timepicker/src/timepicker-panel/timepicker-panel.scss +5 -4
  72. package/src/transfer/src/transfer/transfer.scss +5 -4
  73. package/themes/macos/alert/src/alert/alert.scss +4 -3
  74. package/themes/macos/button/src/button/button.scss +8 -3
  75. package/themes/macos/cascader/src/cascader/cascader.scss +5 -4
  76. package/themes/macos/checkbox/src/checkbox/checkbox.scss +5 -4
  77. package/themes/macos/collapse/src/collapse/collapse.scss +4 -3
  78. package/themes/macos/collapse/src/collapse-item/collapse-item.scss +4 -3
  79. package/themes/macos/confirm/src/confirm/confirm.scss +4 -3
  80. package/themes/macos/datepicker/src/datepicker/datepicker.scss +5 -4
  81. package/themes/macos/datepicker/src/datepicker-panel/datepicker-panel.scss +4 -3
  82. package/themes/macos/datetimepicker/src/datetimepicker/datetimepicker.scss +14 -12
  83. package/themes/macos/draggable/src/draggrid/draggrid.scss +4 -3
  84. package/themes/macos/draggable/src/draggrid-item/draggrid-item.scss +4 -3
  85. package/themes/macos/draggable/src/draglist/draglist.scss +4 -3
  86. package/themes/macos/draggable/src/draglist-item/draglist-item.scss +6 -5
  87. package/themes/macos/draggable/src/dropzone/dropzone.scss +4 -3
  88. package/themes/macos/drawer/index.scss +1 -0
  89. package/themes/macos/drawer/src/drawer/drawer.scss +35 -0
  90. package/themes/macos/durationpicker/src/durationpicker/durationpicker.scss +5 -4
  91. package/themes/macos/file/src/file/file.scss +4 -3
  92. package/themes/macos/form/src/form-group/form-group.scss +4 -3
  93. package/themes/macos/index-dark.scss +1 -39
  94. package/themes/macos/index-light.scss +1 -39
  95. package/themes/macos/index.scss +1 -2
  96. package/themes/macos/input/src/input/input.scss +6 -5
  97. package/themes/macos/input-number/src/input-number/input-number.scss +6 -5
  98. package/themes/macos/loader/src/loader/loader.scss +4 -3
  99. package/themes/macos/modal/src/modal/modal.scss +6 -5
  100. package/themes/macos/notification/src/notification/notification.scss +4 -3
  101. package/themes/macos/popover/src/popover/popover.scss +9 -8
  102. package/themes/macos/radio/src/radio/radio.scss +5 -4
  103. package/themes/macos/rating/src/rating/rating.scss +4 -3
  104. package/themes/macos/root/vars-dark.scss +87 -74
  105. package/themes/macos/root/vars-light.scss +87 -74
  106. package/themes/macos/root/vars.scss +88 -74
  107. package/themes/macos/select/src/select/select.scss +5 -4
  108. package/themes/macos/switch/src/switch/switch.scss +6 -4
  109. package/themes/macos/table/src/table/table.scss +3 -3
  110. package/themes/macos/table/src/table-cell/table-cell.scss +5 -4
  111. package/themes/macos/tabs/src/tabs/tabs.scss +4 -3
  112. package/themes/macos/tabs/src/tabs-item/tabs-item.scss +4 -3
  113. package/themes/macos/tags/src/tags-item/tags-item.scss +6 -4
  114. package/themes/macos/textarea/src/textarea/textarea.scss +5 -4
  115. package/themes/macos/timepicker/src/timepicker/timepicker.scss +5 -4
  116. package/themes/macos/timepicker/src/timepicker-panel/timepicker-panel.scss +4 -3
  117. package/babel.config.js +0 -17
  118. package/bun.lockb +0 -0
  119. package/demos/builder.html +0 -411
  120. package/demos/button/index.html +0 -129
  121. package/demos/cascader/index.html +0 -127
  122. package/demos/chart/index.html +0 -53
  123. package/demos/checkbox/index.html +0 -97
  124. package/demos/config/index.html +0 -95
  125. package/demos/confirm/index.html +0 -78
  126. package/demos/datepicker/index.html +0 -69
  127. package/demos/draggable/index.html +0 -127
  128. package/demos/form/index.html +0 -83
  129. package/demos/grid.html +0 -321
  130. package/demos/input/index.html +0 -100
  131. package/demos/map/index.html +0 -81
  132. package/demos/matrix/index.html +0 -104
  133. package/demos/modal/index.html +0 -98
  134. package/demos/overview.html +0 -1416
  135. package/demos/paginator/index.html +0 -58
  136. package/demos/popover/index.html +0 -103
  137. package/demos/radio/index.html +0 -71
  138. package/demos/resizer/index.html +0 -106
  139. package/demos/scrollbar.html +0 -328
  140. package/demos/select/index.html +0 -174
  141. package/demos/select.html +0 -164
  142. package/demos/style.css +0 -50
  143. package/demos/switch/index.html +0 -69
  144. package/demos/table/index.html +0 -126
  145. package/demos/tabs/index.html +0 -110
  146. package/demos/tabs.html +0 -293
  147. package/demos/textarea/index.html +0 -77
  148. package/demos/timepicker/index.html +0 -66
  149. package/demos/transfer/index.html +0 -88
  150. package/demos/wysiwyg/index.html +0 -49
  151. package/docs/README.md +0 -34
  152. package/docs/_sidebar.md +0 -36
  153. package/docs/dist/docs.css +0 -2
  154. package/docs/files/data/draggable.md +0 -143
  155. package/docs/files/data/map.md +0 -1
  156. package/docs/files/data/paginator.md +0 -23
  157. package/docs/files/data/table.md +0 -247
  158. package/docs/files/data/virtualscroller.md +0 -2
  159. package/docs/files/form/button.md +0 -122
  160. package/docs/files/form/cascader.md +0 -164
  161. package/docs/files/form/checkbox.md +0 -179
  162. package/docs/files/form/datepicker.md +0 -78
  163. package/docs/files/form/form.md +0 -52
  164. package/docs/files/form/input.md +0 -90
  165. package/docs/files/form/radio.md +0 -150
  166. package/docs/files/form/select.md +0 -202
  167. package/docs/files/form/switch.md +0 -92
  168. package/docs/files/form/textarea.md +0 -102
  169. package/docs/files/form/timepicker.md +0 -78
  170. package/docs/files/form/transfer.md +0 -30
  171. package/docs/files/others/config.md +0 -8
  172. package/docs/files/others/confirm.md +0 -51
  173. package/docs/files/others/loader.md +0 -22
  174. package/docs/files/others/modal.md +0 -32
  175. package/docs/files/others/notification.md +0 -52
  176. package/docs/files/others/popover.md +0 -36
  177. package/docs/files/others/resizer.md +0 -8
  178. package/docs/files/others/scrollbar.md +0 -8
  179. package/docs/files/others/tabs.md +0 -32
  180. package/docs/index.html +0 -176
  181. package/docs/src/scss/docsify/basic/_coverpage.sass +0 -95
  182. package/docs/src/scss/docsify/basic/_layout.sass +0 -472
  183. package/docs/src/scss/docsify/syntax.scss +0 -139
  184. package/docs/src/scss/docsify/vue.sass +0 -250
  185. package/docs/src/scss/index.scss +0 -448
  186. package/docs/src/scss/mixins/base.scss +0 -14
  187. package/docs/src/scss/mixins/grid.scss +0 -212
  188. package/docs/src/scss/mixins/media.scss +0 -34
  189. package/docs/src/scss/mixins/space.scss +0 -61
  190. package/mix-manifest.json +0 -4
  191. package/nano.svg +0 -52
  192. package/postcss.config.js +0 -14
  193. package/themes/light/alert/index.scss +0 -1
  194. package/themes/light/alert/src/alert/alert.scss +0 -26
  195. package/themes/light/button/index.scss +0 -2
  196. package/themes/light/button/src/button/button.scss +0 -46
  197. package/themes/light/button/src/button-group/button-group.scss +0 -1
  198. package/themes/light/cascader/index.scss +0 -2
  199. package/themes/light/cascader/src/cascader/cascader.scss +0 -45
  200. package/themes/light/cascader/src/cascader-panel/cascader-panel.scss +0 -13
  201. package/themes/light/checkbox/index.scss +0 -2
  202. package/themes/light/checkbox/src/checkbox/checkbox.scss +0 -44
  203. package/themes/light/checkbox/src/checkbox-group/checkbox-group.scss +0 -1
  204. package/themes/light/collapse/index.scss +0 -2
  205. package/themes/light/collapse/src/collapse/collapse.scss +0 -21
  206. package/themes/light/collapse/src/collapse-item/collapse-item.scss +0 -21
  207. package/themes/light/confirm/index.scss +0 -1
  208. package/themes/light/confirm/src/confirm/confirm.scss +0 -13
  209. package/themes/light/datepicker/index.scss +0 -2
  210. package/themes/light/datepicker/src/datepicker/datepicker.scss +0 -49
  211. package/themes/light/datepicker/src/datepicker-panel/datepicker-panel.scss +0 -43
  212. package/themes/light/datetimepicker/index.scss +0 -1
  213. package/themes/light/datetimepicker/src/datetimepicker/datetimepicker.scss +0 -49
  214. package/themes/light/demo/index.scss +0 -1
  215. package/themes/light/demo/src/demo/demo.scss +0 -11
  216. package/themes/light/draggable/index.scss +0 -9
  217. package/themes/light/draggable/src/draggrid/draggrid.scss +0 -13
  218. package/themes/light/draggable/src/draggrid-item/draggrid-item.scss +0 -65
  219. package/themes/light/draggable/src/draghandler/draghandler.scss +0 -15
  220. package/themes/light/draggable/src/draglist/draglist.scss +0 -13
  221. package/themes/light/draggable/src/draglist-item/draglist-item.scss +0 -72
  222. package/themes/light/draggable/src/dropzone/dropzone.scss +0 -13
  223. package/themes/light/durationpicker/index.scss +0 -1
  224. package/themes/light/durationpicker/src/durationpicker/durationpicker.scss +0 -49
  225. package/themes/light/empty/index.scss +0 -1
  226. package/themes/light/empty/src/empty-icon/empty-icon.scss +0 -13
  227. package/themes/light/file/index.scss +0 -1
  228. package/themes/light/file/src/file/file.scss +0 -38
  229. package/themes/light/form/index.scss +0 -3
  230. package/themes/light/form/src/form/form.scss +0 -1
  231. package/themes/light/form/src/form-group/form-group.scss +0 -17
  232. package/themes/light/form/src/form-item/form-item.scss +0 -29
  233. package/themes/light/index.scss +0 -38
  234. package/themes/light/info/index.scss +0 -3
  235. package/themes/light/info/src/info/info.scss +0 -5
  236. package/themes/light/info/src/info-column/info-column.scss +0 -5
  237. package/themes/light/info/src/info-field/info-field.scss +0 -5
  238. package/themes/light/input/index.scss +0 -1
  239. package/themes/light/input/src/input/input.scss +0 -37
  240. package/themes/light/input-number/index.scss +0 -1
  241. package/themes/light/input-number/src/input-number/input-number.scss +0 -46
  242. package/themes/light/loader/index.scss +0 -1
  243. package/themes/light/loader/src/loader/loader.scss +0 -21
  244. package/themes/light/map/index.scss +0 -1
  245. package/themes/light/map/src/map/map.scss +0 -1
  246. package/themes/light/modal/index.scss +0 -1
  247. package/themes/light/modal/src/modal/modal.scss +0 -51
  248. package/themes/light/notification/index.scss +0 -1
  249. package/themes/light/notification/src/notification/notification.scss +0 -24
  250. package/themes/light/paginator/index.scss +0 -1
  251. package/themes/light/paginator/src/paginator/paginator.scss +0 -5
  252. package/themes/light/popover/index.scss +0 -1
  253. package/themes/light/popover/src/popover/popover.scss +0 -100
  254. package/themes/light/radio/index.scss +0 -2
  255. package/themes/light/radio/src/radio/radio.scss +0 -44
  256. package/themes/light/radio/src/radio-group/radio-group.scss +0 -1
  257. package/themes/light/rating/index.scss +0 -1
  258. package/themes/light/rating/src/rating/rating.scss +0 -18
  259. package/themes/light/resizer/index.scss +0 -1
  260. package/themes/light/resizer/src/resizer/resizer.scss +0 -5
  261. package/themes/light/root/vars.scss +0 -183
  262. package/themes/light/scrollbar/index.scss +0 -1
  263. package/themes/light/scrollbar/src/scrollbar/scrollbar.scss +0 -6
  264. package/themes/light/select/index.scss +0 -2
  265. package/themes/light/select/src/select/select.scss +0 -46
  266. package/themes/light/select/src/select-option/select-option.scss +0 -1
  267. package/themes/light/switch/index.scss +0 -1
  268. package/themes/light/switch/src/switch/switch.scss +0 -28
  269. package/themes/light/table/index.scss +0 -4
  270. package/themes/light/table/src/table/table.scss +0 -14
  271. package/themes/light/table/src/table-cell/table-cell.scss +0 -50
  272. package/themes/light/table/src/table-column/table-column.scss +0 -32
  273. package/themes/light/table/src/table-filter/table-filter.scss +0 -1
  274. package/themes/light/tabs/index.scss +0 -2
  275. package/themes/light/tabs/src/tabs/tabs.scss +0 -21
  276. package/themes/light/tabs/src/tabs-item/tabs-item.scss +0 -18
  277. package/themes/light/tags/index.scss +0 -2
  278. package/themes/light/tags/src/tags/tags.scss +0 -1
  279. package/themes/light/tags/src/tags-item/tags-item.scss +0 -28
  280. package/themes/light/textarea/index.scss +0 -1
  281. package/themes/light/textarea/src/textarea/textarea.scss +0 -29
  282. package/themes/light/timepicker/index.scss +0 -2
  283. package/themes/light/timepicker/src/timepicker/timepicker.scss +0 -49
  284. package/themes/light/timepicker/src/timepicker-panel/timepicker-panel.scss +0 -26
  285. package/themes/light/transfer/index.scss +0 -1
  286. package/themes/light/transfer/src/transfer/transfer.scss +0 -17
  287. package/themes/light/virtualscroller/index.scss +0 -1
  288. package/themes/light/virtualscroller/src/virtualscroller/virtualscroller.scss +0 -1
  289. package/webpack.config.js +0 -143
  290. package/webservy.json +0 -8
  291. /package/{.nojekyll → dist/.ignore.js} +0 -0
  292. /package/{themes/light → src}/root/image/empty-default.svg +0 -0
  293. /package/{themes/light → src}/root/image/empty-space.svg +0 -0
  294. /package/{themes/light → src}/root/image/star-default.svg +0 -0
package/demos/tabs/index.html DELETED
@@ -1,110 +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 Tabs</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="List">
29
- <n-tabs>
30
- <n-tabs-item label="Hallo" name="default" icon="fa fa-ghost">
31
- Hallo
32
- </n-tabs-item>
33
- <n-tabs-item label="Keep" name="keep" :keep="true" icon="fa fa-cat">
34
- Keep
35
- </n-tabs-item>
36
- <n-tabs-item label="Test" name="test" :preload="true">
37
- Test
38
- </n-tabs-item>
39
- </n-tabs>
40
- </n-form-item>
41
-
42
- </n-form>
43
- </div>
44
-
45
- <script>
46
- (function (Nano) {
47
-
48
- 'use strict';
49
-
50
- pi.Dom.ready(function () {
51
-
52
- Vue.config.devtools = true;
53
-
54
- var config = {
55
- data: function() {
56
-
57
- let total = 0;
58
-
59
- let childGenerator = function(count, depth, current) {
60
-
61
- if ( count === undefined ) {
62
- count = 3;
63
- }
64
-
65
- if ( depth === undefined ) {
66
- depth = 2;
67
- }
68
-
69
- if ( current === undefined ) {
70
- current = 1;
71
- }
72
-
73
- let children = Array(count).fill(null);
74
-
75
- pi.Arr.map(children, function (item) {
76
-
77
- total++;
78
-
79
- item = {
80
- label: 'Item ' + total,
81
- id: 'value-' + total,
82
- children: []
83
- };
84
-
85
- if ( current < depth ) {
86
- item.children = childGenerator(10, depth, current + 1);
87
- }
88
-
89
- return item;
90
- });
91
-
92
- return children;
93
- };
94
-
95
- var form = {
96
- value: childGenerator(9000, 1)
97
- };
98
-
99
- return { form: form, inverse: false };
100
- }
101
- };
102
-
103
- window.App = new Vue(config).$mount('#app');
104
-
105
- });
106
-
107
- })(window.Nano);
108
- </script>
109
- </body>
110
- </html>
package/demos/tabs.html DELETED
@@ -1,293 +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 rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
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
-
14
-
15
- <script src="https://unpkg.com/moment"></script>
16
- <script src="https://unpkg.com/vue@3.4.6"></script>
17
- <script src="https://vankizmann.github.io/pico-js/dist/pico-js.js"></script>
18
- <script src="../dist/nano-ui.js"></script>
19
- <script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
20
- <script src="https://maps.googleapis.com/maps/api/js"></script>
21
-
22
- <link rel="stylesheet" href="../docs/dist/index.css">
23
-
24
- <style>
25
-
26
- body {
27
- font-family: 'Helvetica', 'Roboto', 'Arial', sans-serif;
28
- font-size: 14px;
29
- height: 100%;
30
- overflow-x: hidden;
31
- }
32
-
33
- #app {
34
- overflow-x: hidden;
35
- }
36
-
37
- .app-scrollbar {
38
- width: 100vw;
39
- height: 100vh;
40
- }
41
-
42
- .app-container {
43
- max-width: 1440px;
44
- margin: 0 auto;
45
- padding: 20px 30px 40px 30px;
46
- }
47
-
48
- .app-options {
49
- border-bottom: 1px solid #eee;
50
- margin-bottom: 20px;
51
- }
52
-
53
- h2 {
54
- font-size: 32px;
55
- font-weight: bold;
56
- padding-bottom: 10px;
57
- margin: 50px 0 15px;
58
- border-bottom: 1px solid #eee;
59
- }
60
-
61
- </style>
62
-
63
- </head>
64
- <body>
65
-
66
- <div id="app">
67
- <div class="app-container">
68
-
69
-
70
- <n-tabs ref="tabs1">
71
- <n-tabs-item label="Foo" name="default">
72
- asdasdas0000
73
- <n-tabs ref="tabs2">
74
- <n-tabs-item label="Bar" name="default">
75
- asdasdas11111
76
- </n-tabs-item>
77
- <n-tabs-item label="Si" name="si">
78
- asdasdas2222
79
- </n-tabs-item>
80
- </n-tabs>
81
- </n-tabs-item>
82
- <n-tabs-item label="Hu" name="hu">
83
- asdasdasxxxxx
84
- </n-tabs-item>
85
- </n-tabs>
86
-
87
-
88
- </div>
89
- </div>
90
-
91
- <script>
92
- (function (nano) {
93
-
94
- 'use strict';
95
-
96
- pi.Dom.ready(function () {
97
-
98
- let data = {};
99
-
100
- data.sizes = {
101
- xs: 'XS',
102
- sm: 'SM',
103
- md: 'MD',
104
- lg: 'LG'
105
- };
106
-
107
- data.types = {
108
- primary: 'Primary',
109
- secondary: 'Secondary',
110
- success: 'Success',
111
- warning: 'Warning',
112
- danger: 'Danger',
113
- info: 'Info'
114
- };
115
-
116
- data.modals = {
117
- default: 'Default',
118
- preview: 'Preview',
119
- };
120
-
121
- data.demoConfig = {
122
- 'div': {
123
- class: [
124
- 'foobar'
125
- ],
126
- content: {
127
- 'NInput:page_id': {
128
- model: {
129
- path: 'page_id'
130
- }
131
- },
132
- 'NInput:page_id2': {
133
- model: {
134
- path: 'page_id'
135
- }
136
- }
137
- }
138
- }
139
- };
140
-
141
- data.configData = {};
142
-
143
- data.testData = [];
144
-
145
- let itemGenerator = function (count = 100, index = 0) {
146
- return pi.Arr.each(pi.Arr.make(count), function (value) {
147
-
148
- let id = pi.UUID();
149
-
150
- return {
151
- id: id,
152
- value: id,
153
- matrix: 10,
154
- label: `Item ${index++}`,
155
- image: 'https://picsum.photos/400/400?' + id,
156
- date: pi.Now.make().format('YYYY-MM-DD HH:mm:ss', true),
157
- enabled: !! Math.floor(Math.random() * 2)
158
- };
159
- });
160
- };
161
-
162
-
163
- data.cascaderData = pi.Arr.each(itemGenerator(5), function (item) {
164
-
165
- let children = pi.Arr.each(itemGenerator(5), function (item) {
166
- return pi.Obj.assign(item, { children: itemGenerator(5) });
167
- });
168
-
169
- return pi.Obj.assign(item, { children: children });
170
- });
171
-
172
- data.virtualData = itemGenerator(10000);
173
-
174
- data.virtualTree = pi.Arr.each(itemGenerator(50), function (item) {
175
- return pi.Obj.assign(item, { children: itemGenerator(20) });
176
- });
177
-
178
- data.treeSelect = null;
179
- data.treeMatrix = [data.virtualTree[3]];
180
-
181
- data.n_button = {
182
- icon: 'fa fa-ghost', size: 'md', square: false, link: false, disabled: false
183
- };
184
-
185
- data.n_textarea = {
186
- size: 'md', placeholder: 'Placeholder', autoRows: false, disabled: false
187
- };
188
-
189
- data.n_input = {
190
- value: 'Demo', icon: 'fa fa-ghost', size: 'md', placeholder: 'Placeholder', disabled: false
191
- };
192
-
193
- data.n_number = {
194
- value: 3, size: 'md', placeholder: '', disabled: false
195
- };
196
-
197
- data.n_select = {
198
- size: 'md', allowCreate: false, clearable: true, disabled: false
199
- };
200
-
201
- data.n_cascader = {
202
- size: 'md', type: 'primary', clearable: true, disabled: false
203
- };
204
-
205
- data.n_checkbox = {
206
- size: 'md', type: 'primary', disabled: false
207
- };
208
-
209
- data.n_radio = {
210
- size: 'md', type: 'primary', disabled: false
211
- };
212
-
213
- data.n_switch = {
214
- size: 'md', disabled: false
215
- };
216
-
217
- data.n_datepicker = {
218
- size: 'md', type: 'primary', clearable: true, disabled: false
219
- };
220
-
221
- data.n_timepicker = {
222
- size: 'md', type: 'primary', clearable: true, disabled: false
223
- };
224
-
225
- data.n_transfer = {
226
- size: 'md', type: 'primary', disabled: false
227
- };
228
-
229
- data.n_modal = {
230
- size: 'md', type: 'default', disabled: false
231
- };
232
-
233
- data.n_confirm = {
234
- size: 'md', type: 'primary', disabled: false
235
- };
236
-
237
- data.n_tabs = {
238
- value: 'default', size: 'md', type: 'primary'
239
- };
240
-
241
- data.n_paginator = {
242
- size: 'md', type: 'primary'
243
- };
244
-
245
- data.n_draggable = {
246
- count: 0
247
- };
248
-
249
- data.n_loader = {
250
- size: 'md', type: 'primary', visible: true
251
- };
252
-
253
- let methods = {};
254
-
255
- methods.log = function (val) {
256
- console.log(val || 'Log fired');
257
- };
258
-
259
- methods.notify = function (type) {
260
- this.Notify('Lorem ipsum dolore', type);
261
- };
262
-
263
- var config = {
264
- data: function () {
265
-
266
- this.icons = pi.Obj.assign(nano.Icons, {
267
- ghost: 'fa fa-ghost'
268
- });
269
-
270
- data.demoIcons = pi.Arr.reduce(pi.Obj.values(nano.Icons), function (merge, icon) {
271
- return pi.Obj.assign(merge, { [icon]: icon });
272
- }, {});
273
-
274
- return data;
275
- },
276
- methods: methods
277
- };
278
-
279
- window.App = Vue.createApp(config);
280
-
281
- window.App.config.devtools = true;
282
-
283
- window.App.use(function (App) {
284
- nano.Install(App);
285
- });
286
-
287
- window.App.mount('#app');
288
- });
289
-
290
- })(window.nano);
291
- </script>
292
- </body>
293
- </html>
package/demos/textarea/index.html DELETED
@@ -1,77 +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 Textarea</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">
23
-
24
- <n-form-item label="Small">
25
- <n-textarea v-model="form.text" size="small"></n-textarea>
26
- </n-form-item>
27
-
28
- <n-form-item label="Default">
29
- <n-textarea v-model="form.text" size="default"></n-textarea>
30
- </n-form-item>
31
-
32
- <n-form-item label="Large">
33
- <n-textarea v-model="form.text" size="large"></n-textarea>
34
- </n-form-item>
35
-
36
- <n-form-item label="Disabled">
37
- <n-textarea v-model="form.text" :disabled="true"></n-textarea>
38
- </n-form-item>
39
-
40
- <n-form-item label="Auto Rows">
41
- <n-textarea v-model="form.text" :auto-rows="true" placeholder="Textarea with auto rows"></n-textarea>
42
- </n-form-item>
43
-
44
- <n-form-item label="Max Length">
45
- <n-textarea v-model="form.text" :max-length="50" placeholder="Textarea with max length"></n-textarea>
46
- </n-form-item>
47
-
48
- <n-form-item label="Object">
49
- <pre>{{ form }}</pre>
50
- </n-form-item>
51
-
52
- </n-form>
53
- </div>
54
-
55
- <script>
56
- pi.Dom.ready(() => {
57
-
58
- Vue.config.devtools = true;
59
-
60
- var config = {
61
- data: function() {
62
-
63
- var form = {
64
- text: ''
65
- };
66
-
67
- return {
68
- form: form
69
- };
70
- }
71
- };
72
-
73
- window.App = new Vue(config).$mount('#app');
74
- })
75
- </script>
76
- </body>
77
- </html>
package/demos/timepicker/index.html DELETED
@@ -1,66 +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 Datepicker</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="Default">
25
- <n-timepicker v-model="form.date" minutes-interval="30"></n-timepicker>
26
- </n-form-item>
27
-
28
- <n-form-item label="Clearable">
29
- <n-timepicker v-model="form.date" :clearable="true"></n-timepicker>
30
- </n-form-item>
31
-
32
- <n-form-item label="Disabled">
33
- <n-timepicker v-model="form.date" :disabled="true"></n-timepicker>
34
- </n-form-item>
35
-
36
- <n-form-item label="Object">
37
- <pre>{{ form }}</pre>
38
- </n-form-item>
39
-
40
- </n-form>
41
- </div>
42
-
43
- <script>
44
- pi.Dom.ready(() => {
45
-
46
- Vue.config.devtools = true;
47
-
48
- var config = {
49
-
50
- data: function() {
51
-
52
- var form = {
53
- date: 'now', arrive: 'now', depart: 'now+2days'
54
- };
55
-
56
- return {
57
- form: form, inverse: false
58
- };
59
- }
60
- };
61
-
62
- window.App = new Vue(config).$mount('#app');
63
- })
64
- </script>
65
- </body>
66
- </html>
package/demos/transfer/index.html DELETED
@@ -1,88 +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 Transfer</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-transfer v-model="form.value" :items="items" trigger="click"></n-transfer>
30
- </n-form-item>
31
-
32
- <n-form-item label="Object">
33
- <pre>{{ form }}</pre>
34
- </n-form-item>
35
-
36
- </n-form>
37
- </div>
38
-
39
- <script>
40
- (function (Nano) {
41
-
42
- 'use strict';
43
-
44
- pi.Dom.ready(() => {
45
-
46
- Vue.config.devtools = true;
47
-
48
- var config = {
49
- data: function() {
50
-
51
- let total = 0;
52
-
53
- let childGenerator = function(count = 200) {
54
-
55
- let children = Array(count).fill(null);
56
-
57
- pi.Arr.map(children, function(item) {
58
-
59
- total++;
60
-
61
- item = {
62
- label: 'Foobar ' + total, id: 'id-' + total
63
- };
64
-
65
- return item;
66
- });
67
-
68
- return children;
69
- };
70
-
71
- var items = childGenerator();
72
-
73
- var form = {
74
- value: items.slice(0, 5)
75
- };
76
-
77
- return { form: form, inverse: false, items: items };
78
- }
79
- };
80
-
81
- window.App = new Vue(config).$mount('#app');
82
-
83
- });
84
-
85
- })(window.Nano);
86
- </script>
87
- </body>
88
- </html>
package/demos/wysiwyg/index.html DELETED
@@ -1,49 +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 WYSIWYG</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
- <!--[if IE ]>
15
- <script src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.append%2CElement.prototype.before%2CElement.prototype.classList%2CElement.prototype.closest%2CElement.prototype.matches%2CElement.prototype.prepend%2CElement.prototype.remove%2CNodeList.prototype.%40%40iterator%2CNodeList.prototype.forEach%2CNode.prototype.contains%2CMutationObserver%2CURL%2CElement%2CDocumentFragment%2CDocumentFragment.prototype.append%2CDocumentFragment.prototype.prepend%2CHTMLDocument%2Cdocument.querySelector%2Cdocument.getElementsByClassName%2Cdocument%2CgetComputedStyle%2CrequestAnimationFrame"></script>
16
- <![endif]-->
17
-
18
- <script src="https://cdnjs.cloudflare.com/ajax/libs/rangy/1.3.0/rangy-core.min.js"></script>
19
- <script src="https://cdnjs.cloudflare.com/ajax/libs/rangy/1.3.0/rangy-classapplier.min.js"></script>
20
- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
21
- <script src="../../dist/nano-ui.js"></script>
22
-
23
- </head>
24
- <body style="position: relative;">
25
-
26
- <div id="app">
27
- <div class="n-form">
28
-
29
- <n-wysiwyg v-model="text" />
30
- </div>
31
- </div>
32
-
33
- <script>
34
- pi.Dom.ready(function () {
35
-
36
- Vue.config.devtools = true;
37
-
38
- var config = {
39
- data: function() {
40
- return { text: '<p>Wie ist meine <a href="http://google.com" target="_self">IP?</a></p>' };
41
- }
42
- };
43
-
44
- window.App = new Vue(config).$mount('#app');
45
-
46
- });
47
- </script>
48
- </body>
49
- </html>