@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/paginator/index.html DELETED
@@ -1,58 +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 Paginator</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-paginator size="small" :page="1" :limit="25" :total="264" />
30
- </n-form-item>
31
-
32
- </n-form>
33
- </div>
34
-
35
- <script>
36
- (function (Nano) {
37
-
38
- 'use strict';
39
-
40
- pi.Dom.ready(function () {
41
-
42
- Vue.config.devtools = true;
43
-
44
- var config = {
45
- data: function() {
46
-
47
- return { form: {}, inverse: false };
48
- }
49
- };
50
-
51
- window.App = new Vue(config).$mount('#app');
52
-
53
- });
54
-
55
- })(window.Nano);
56
- </script>
57
- </body>
58
- </html>
package/demos/popover/index.html DELETED
@@ -1,103 +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 Popover</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 style="position: relative;">
20
-
21
- <div id="app">
22
- <n-form class="n-form">
23
-
24
- <n-form-item>
25
- <pre>{{ test }}</pre>
26
- </n-form-item>
27
-
28
- <n-form-item>
29
- <n-checkbox v-model="hide"></n-checkbox>
30
- </n-form-item>
31
-
32
- <div v-if="!hide" id="test" style="position: relative !important; background: #eee; height: 300px; overflow: hidden;">
33
- <n-scrollbar>
34
- <div>
35
- <n-button type="primary" refs="toggle">
36
- Popover 01
37
- </n-button>
38
- <n-popover trigger="hover" position="top-start" :width="300">
39
- <n-input v-model="test"></n-input>
40
- </n-popover>
41
- <br>
42
- <br>
43
- <br>
44
- <br>
45
- <br>
46
- <br>
47
- <br>
48
- <br>
49
- <br>
50
- <br>
51
- <br>
52
- <br>
53
- <br>
54
- <br>
55
- <br>
56
- <br>
57
- <br>
58
- <br>
59
- <br>
60
- <br>
61
- <br>
62
- <br>
63
- <br>
64
- <br>
65
- <br>
66
- <br>
67
- <br>
68
- <br>
69
- <br>
70
- <br>
71
- <br>
72
- <br>
73
- <br>
74
- <br>
75
- <n-button type="warning">
76
- Popover 02
77
- </n-button>
78
- </div>
79
- <n-popover trigger="context">
80
- Hello 2!
81
- </n-popover>
82
- </n-scrollbar>
83
- </div>
84
- </n-form>
85
- </div>
86
-
87
- <script>
88
- pi.Dom.ready(function () {
89
-
90
- Vue.config.devtools = true;
91
-
92
- var config = {
93
- data: function() {
94
- return { test: 'Foo', hide: false };
95
- }
96
- };
97
-
98
- window.App = new Vue(config).$mount('#app');
99
-
100
- });
101
- </script>
102
- </body>
103
- </html>
package/demos/radio/index.html DELETED
@@ -1,71 +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 Radio</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="Group Vertical">
25
- <n-radio-group align="vertical" v-model="form.option">
26
- <n-radio value="foo">Foo</n-radio>
27
- <n-radio value="bar">Bar</n-radio>
28
- <n-radio value="james">James</n-radio>
29
- <n-radio value="bond">Bond</n-radio>
30
- <n-radio value="chuck">Chuck</n-radio>
31
- <n-radio value="norris">Norris</n-radio>
32
- </n-radio-group>
33
- </n-form-item>
34
-
35
- <n-form-item label="Group Horizontal">
36
- <n-radio-group align="horizontal" v-model="form.option">
37
- <n-radio value="foo">Foo</n-radio>
38
- <n-radio value="bar">Bar</n-radio>
39
- <n-radio value="james">James</n-radio>
40
- <n-radio value="bond">Bond</n-radio>
41
- <n-radio value="chuck">Chuck</n-radio>
42
- <n-radio value="norris">Norris</n-radio>
43
- </n-radio-group>
44
- </n-form-item>
45
-
46
- </n-form>
47
- </div>
48
-
49
- <script>
50
- pi.Dom.ready(() => {
51
-
52
- Vue.config.devtools = true;
53
-
54
- var config = {
55
- data: function() {
56
-
57
- var form = {
58
- option: null
59
- };
60
-
61
- return {
62
- form: form, inverse: false
63
- };
64
- }
65
- };
66
-
67
- window.App = new Vue(config).$mount('#app');
68
- })
69
- </script>
70
- </body>
71
- </html>
package/demos/resizer/index.html DELETED
@@ -1,106 +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 Resizer</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
-
23
- <div style="border: 2px solid #000; display: inline-block; overflow: hidden;">
24
- <div style="position: relative; width: 600px; height: 30vw; max-width: 100%; overflow: auto;">
25
- <n-resizer :width="600" :min-width="300" :max-width="800">
26
- <div style="width: 600px;">
27
- <div style="margin-left: auto; height: 400px; width: 400px; background: lightcoral;">
28
- <!-- SPACER -->
29
- </div>
30
- <div style="margin-left: auto; height: 200px; width: 200px; background: lightblue;">
31
- <!-- SPACER -->
32
- </div>
33
- <div style="margin-left: auto; height: 300px; width: 300px; background: lightseagreen;">
34
- <!-- SPACER -->
35
- </div>
36
- <div style="margin-left: auto; height: 400px; width: 400px; background: lightcoral;">
37
- <!-- SPACER -->
38
- </div>
39
- <div style="margin-left: auto; height: 200px; width: 200px; background: lightblue;">
40
- <!-- SPACER -->
41
- </div>
42
- <div style="margin-left: auto; height: 300px; width: 300px; background: lightseagreen;">
43
- <!-- SPACER -->
44
- </div>
45
- <div style="margin-left: auto; height: 400px; width: 400px; background: lightcoral;">
46
- <!-- SPACER -->
47
- </div>
48
- <div style="margin-left: auto; height: 200px; width: 200px; background: lightblue;">
49
- <!-- SPACER -->
50
- </div>
51
- <div style="margin-left: auto; height: 300px; width: 300px; background: lightseagreen;">
52
- <!-- SPACER -->
53
- </div>
54
- </div>
55
- </n-resizer>
56
- </div>
57
- </div>
58
-
59
- </div>
60
-
61
- <script>
62
- (function (Nano) {
63
-
64
- 'use strict';
65
-
66
- pi.Dom.ready(function () {
67
-
68
- Vue.config.devtools = true;
69
-
70
- var config = {
71
- data: function () {
72
-
73
- let total = 0;
74
-
75
- let childGenerator = function (count) {
76
-
77
- if ( count === undefined ) {
78
- count = 300;
79
- }
80
-
81
- let children = Array(count).fill(null);
82
-
83
- pi.Arr.map(children, function (item) {
84
-
85
- total ++;
86
-
87
- item = {
88
- label: 'Item ' + total, id: 'id-' + total
89
- };
90
-
91
- return item;
92
- });
93
-
94
- return children;
95
- };
96
-
97
- return { items: childGenerator(80), items2: [] };
98
- }
99
- };
100
-
101
- window.App = new Vue(config).$mount('#app');
102
- });
103
- })(window.Nano);
104
- </script>
105
- </body>
106
- </html>
package/demos/scrollbar.html DELETED
@@ -1,328 +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
- <link id="theme" rel="stylesheet" href="../dist/themes/light.css">
14
-
15
- <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.prod.js"></script> -->
16
- <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
17
- <script src="https://unpkg.com/vue@3.4.6"></script>
18
- <!-- <script src="../node_modules/pico-js/dist/pico-js.js"></script> -->
19
- <script src="https://vankizmann.github.io/pico-js/dist/pico-js.js"></script>
20
- <script src="../dist/nano-ui.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
- <h2>NVirtualscroller</h2>
70
-
71
- <div class="grid grid--row grid--wrap grid--10-10">
72
- <div class="col--auto">
73
- <n-button type="primary" @click="virtualTree = virtualData">
74
- Swap items
75
- </n-button>
76
- </div>
77
- <div class="col--auto">
78
- <n-button type="primary" @click="$refs.virtualscroller.scrollIntoView(0)">
79
- Scroll to first item
80
- </n-button>
81
- </div>
82
- <div class="col--auto">
83
- <n-button type="primary" @click="$refs.virtualscroller.scrollIntoView(2000)">
84
- Scroll to item 2000
85
- </n-button>
86
- </div>
87
- <div class="col--auto">
88
- <n-button type="primary" @click="$refs.virtualscroller.scrollIntoView(7100)">
89
- Scroll to item 7100
90
- </n-button>
91
- </div>
92
- <div class="col--auto">
93
- <n-button type="primary" @click="$refs.virtualscroller.scrollIntoView(-1)">
94
- Scroll to last item
95
- </n-button>
96
- </div>
97
- </div>
98
-
99
- <n-virtualscroller ref="virtualscroller" :items="virtualData" style="height: 500px; margin-top: 30px; box-shadow: 0 0 2px 2px #dddedf; border-radius: 4px;">
100
- <template v-slot:default="{ value }">
101
- <div style="padding: 0 15px; line-height: 30px;">{{ value.label }}</div>
102
- </template>
103
- </n-virtualscroller>
104
-
105
- <n-draglist v-model:items="virtualTree" unique-prop="uid" :render-select="true" :render-expand="true" style="height: 300px; margin-top: 30px; border: 2px solid #dddedf; border-radius: 4px;">
106
- <template v-slot:default="{ value, item }">
107
- <div style="padding: 0 15px; line-height: 34px;">{{ item.label }}</div>
108
- </template>
109
- </n-draglist>
110
-
111
- <n-table ref="table" v-model:items="virtualTree" unique-prop="uid" :render-expand="true" :item-height="36" style="margin-top: 30px; min-height: 500px;">
112
- <n-table-column label="Label" type="string" prop="label"></n-table-column>
113
- <n-table-column v-model="treeSelect" label="Matrix 1" type="select" :matrix="1" :width="120">
114
- <template v-slot:default>Text wohoo</template>
115
- </n-table-column>
116
- <n-table-column v-model="treeMatrix" label="Matrix 2" type="matrix" :matrix="2" align="center" :fixed-width="120"></n-table-column>
117
- <n-table-column v-model="treeMatrix" label="Matrix 4" type="matrix" :matrix="4" align="center" :fixed-width="120"></n-table-column>
118
- <n-table-column v-model="treeMatrix" label="Matrix 8" type="matrix" :matrix="8" align="center" :fixed-width="120"></n-table-column>
119
- <n-table-column v-model="treeMatrix" label="Matrix 16" type="matrix" :matrix="16" align="center" :fixed-width="120"></n-table-column>
120
- </n-table>
121
-
122
- </div>
123
- </div>
124
-
125
- <script>
126
- (function (nano) {
127
-
128
- 'use strict';
129
-
130
- pi.Dom.ready(function () {
131
-
132
- let data = {};
133
-
134
- data.sizes = {
135
- xs: 'XS',
136
- sm: 'SM',
137
- md: 'MD',
138
- lg: 'LG'
139
- };
140
-
141
- data.types = {
142
- primary: 'Primary',
143
- secondary: 'Secondary',
144
- success: 'Success',
145
- warning: 'Warning',
146
- danger: 'Danger',
147
- info: 'Info'
148
- };
149
-
150
- data.modals = {
151
- default: 'Default',
152
- preview: 'Preview',
153
- };
154
-
155
- data.demoConfig = {
156
- 'div': {
157
- class: [
158
- 'foobar'
159
- ],
160
- content: {
161
- 'NInput:page_id': {
162
- model: {
163
- path: 'page_id'
164
- }
165
- },
166
- 'NInput:page_id2': {
167
- model: {
168
- path: 'page_id'
169
- }
170
- }
171
- }
172
- }
173
- };
174
-
175
- data.configData = {};
176
-
177
- data.testData = [];
178
-
179
- let itemGenerator = function (count = 100, index = 0) {
180
- return pi.Arr.each(pi.Arr.make(count), function (value) {
181
-
182
- let id = pi.UUID();
183
-
184
- return {
185
- uid: id,
186
- value: id,
187
- matrix: 10,
188
- label: `Item ${index++}`,
189
- image: 'https://picsum.photos/400/400?' + id,
190
- date: pi.Now.make().format('YYYY-MM-DD HH:mm:ss', true),
191
- enabled: !! Math.floor(Math.random() * 2)
192
- };
193
- });
194
- };
195
-
196
-
197
- data.cascaderData = pi.Arr.each(itemGenerator(5), function (item) {
198
-
199
- let children = pi.Arr.each(itemGenerator(5), function (item) {
200
- return pi.Obj.assign(item, { children: itemGenerator(5) });
201
- });
202
-
203
- return pi.Obj.assign(item, { children: children });
204
- });
205
-
206
- data.virtualData = itemGenerator(10000);
207
-
208
- data.virtualTree = pi.Arr.each(itemGenerator(1000), function (item) {
209
- return pi.Obj.assign(item, { children: itemGenerator(20) });
210
- });
211
-
212
- data.treeSelect = null;
213
- data.treeMatrix = [data.virtualTree[3]];
214
-
215
- data.n_button = {
216
- icon: 'fa fa-ghost', size: 'md', square: false, link: false, disabled: false
217
- };
218
-
219
- data.n_textarea = {
220
- size: 'md', placeholder: 'Placeholder', autoRows: false, disabled: false
221
- };
222
-
223
- data.n_input = {
224
- value: 'Demo', icon: 'fa fa-ghost', size: 'md', placeholder: 'Placeholder', disabled: false
225
- };
226
-
227
- data.n_number = {
228
- value: 3, size: 'md', placeholder: '', disabled: false
229
- };
230
-
231
- data.n_select = {
232
- size: 'md', allowCreate: false, clearable: true, disabled: false
233
- };
234
-
235
- data.n_cascader = {
236
- size: 'md', type: 'primary', clearable: true, disabled: false
237
- };
238
-
239
- data.n_checkbox = {
240
- size: 'md', type: 'primary', disabled: false
241
- };
242
-
243
- data.n_radio = {
244
- size: 'md', type: 'primary', disabled: false
245
- };
246
-
247
- data.n_switch = {
248
- size: 'md', disabled: false
249
- };
250
-
251
- data.n_datepicker = {
252
- size: 'md', type: 'primary', clearable: true, disabled: false
253
- };
254
-
255
- data.n_timepicker = {
256
- size: 'md', type: 'primary', clearable: true, disabled: false
257
- };
258
-
259
- data.n_transfer = {
260
- size: 'md', type: 'primary', disabled: false
261
- };
262
-
263
- data.n_modal = {
264
- size: 'md', type: 'default', disabled: false
265
- };
266
-
267
- data.n_confirm = {
268
- size: 'md', type: 'primary', disabled: false
269
- };
270
-
271
- data.n_tabs = {
272
- value: 'default', size: 'md', type: 'primary'
273
- };
274
-
275
- data.n_paginator = {
276
- size: 'md', type: 'primary'
277
- };
278
-
279
- data.n_draggable = {
280
- count: 0
281
- };
282
-
283
- data.n_loader = {
284
- size: 'md', type: 'primary', visible: true
285
- };
286
-
287
- let methods = {};
288
-
289
- methods.log = function (val) {
290
- console.log(val || 'Log fired');
291
- };
292
-
293
- methods.notify = function (type) {
294
- this.Notify('Lorem ipsum dolore', type);
295
- };
296
-
297
- var config = {
298
- data: function () {
299
-
300
- this.icons = pi.Obj.assign(nano.Icons, {
301
- ghost: 'fa fa-ghost'
302
- });
303
-
304
- data.demoIcons = pi.Arr.reduce(pi.Obj.values(nano.Icons), function (merge, icon) {
305
- return pi.Obj.assign(merge, { [icon]: icon });
306
- }, {});
307
-
308
- return data;
309
- },
310
- methods: methods
311
- };
312
-
313
- window.App = Vue.createApp(config);
314
-
315
- window.App.config.devtools = true;
316
-
317
- window.App.use(function (App) {
318
- nano.Install(App);
319
- });
320
-
321
- window.App.mount('#app');
322
- window.DEBUG_NDLIST = true;
323
- });
324
-
325
- })(window.nano);
326
- </script>
327
- </body>
328
- </html>