@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/grid.html DELETED
@@ -1,321 +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
- <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
- <n-button type="primary" @click="$refs.virtualscroller.scrollIntoView(0)">
77
- Scroll to first item
78
- </n-button>
79
- </div>
80
- <div class="col--auto">
81
- <n-button type="primary" @click="$refs.virtualscroller.scrollIntoView(2000)">
82
- Scroll to item 2000
83
- </n-button>
84
- </div>
85
- <div class="col--auto">
86
- <n-button type="primary" @click="$refs.virtualscroller.scrollIntoView(7100)">
87
- Scroll to item 7100
88
- </n-button>
89
- </div>
90
- <div class="col--auto">
91
- <n-button type="primary" @click="$refs.virtualscroller.scrollIntoView(-1)">
92
- Scroll to last item
93
- </n-button>
94
- </div>
95
- </div>
96
-
97
- <n-virtualscroller ref="virtualscroller" :items="virtualData" :item-height="100" :item-width="200" style="height: 500px; margin-top: 30px; box-shadow: 0 0 2px 2px #dddedf; border-radius: 4px;">
98
- <template v-slot:default="{ value }">
99
- <div style="padding: 0 15px; line-height: 30px;">{{ value.label }}</div>
100
- </template>
101
- </n-virtualscroller>
102
-
103
- <n-draggrid ref="draggrid" v-model:items="virtualTree" :item-height="100" :item-width="200" style="height: 500px; margin-top: 30px; box-shadow: 0 0 2px 2px #dddedf; border-radius: 4px;">
104
- <template v-slot:default="{ item }">
105
- <div style="width: 200px; height: 100px; padding: 0 15px; line-height: 30px;">{{ item.label }}</div>
106
- </template>
107
- </n-draggrid>
108
-
109
- <n-draggrid ref="draggrid" v-model:items="testData" :item-height="100" :item-width="200" :threshold="0" style="height: 500px; margin-top: 30px; box-shadow: 0 0 2px 2px #dddedf; border-radius: 4px;">
110
- <template v-slot:default="{ item }">
111
- <div style="width: 200px; height: 100px; padding: 0 15px; line-height: 30px;">{{ item.label }}</div>
112
- </template>
113
- </n-draggrid>
114
-
115
-
116
- </div>
117
- </div>
118
-
119
- <script>
120
- (function (nano) {
121
-
122
- 'use strict';
123
-
124
- pi.Dom.ready(function () {
125
-
126
- let data = {};
127
-
128
- data.sizes = {
129
- xs: 'XS',
130
- sm: 'SM',
131
- md: 'MD',
132
- lg: 'LG'
133
- };
134
-
135
- data.types = {
136
- primary: 'Primary',
137
- secondary: 'Secondary',
138
- success: 'Success',
139
- warning: 'Warning',
140
- danger: 'Danger',
141
- info: 'Info'
142
- };
143
-
144
- data.modals = {
145
- default: 'Default',
146
- preview: 'Preview',
147
- };
148
-
149
- data.demoConfig = {
150
- 'div': {
151
- class: [
152
- 'foobar'
153
- ],
154
- content: {
155
- 'NInput:page_id': {
156
- model: {
157
- path: 'page_id'
158
- }
159
- },
160
- 'NInput:page_id2': {
161
- model: {
162
- path: 'page_id'
163
- }
164
- }
165
- }
166
- }
167
- };
168
-
169
- data.configData = {};
170
-
171
- data.testData = [];
172
-
173
- let itemGenerator = function (count = 100, index = 0) {
174
- return pi.Arr.each(pi.Arr.make(count), function (value) {
175
-
176
- let id = pi.UUID();
177
-
178
- return {
179
- id: id,
180
- value: id,
181
- matrix: 10,
182
- label: `Item ${index++}`,
183
- image: 'https://picsum.photos/400/400?' + id,
184
- date: pi.Now.make().format('YYYY-MM-DD HH:mm:ss', true),
185
- enabled: !! Math.floor(Math.random() * 2)
186
- };
187
- });
188
- };
189
-
190
-
191
- data.cascaderData = pi.Arr.each(itemGenerator(5), function (item) {
192
-
193
- let children = pi.Arr.each(itemGenerator(5), function (item) {
194
- return pi.Obj.assign(item, { children: itemGenerator(5) });
195
- });
196
-
197
- return pi.Obj.assign(item, { children: children });
198
- });
199
-
200
- data.virtualData = itemGenerator(10000);
201
-
202
- data.virtualTree = pi.Arr.each(itemGenerator(50), function (item) {
203
- return pi.Obj.assign(item, { children: itemGenerator(20) });
204
- });
205
-
206
- data.treeSelect = null;
207
- data.treeMatrix = [data.virtualTree[3]];
208
-
209
- data.n_button = {
210
- icon: 'fa fa-ghost', size: 'md', square: false, link: false, disabled: false
211
- };
212
-
213
- data.n_textarea = {
214
- size: 'md', placeholder: 'Placeholder', autoRows: false, disabled: false
215
- };
216
-
217
- data.n_input = {
218
- value: 'Demo', icon: 'fa fa-ghost', size: 'md', placeholder: 'Placeholder', disabled: false
219
- };
220
-
221
- data.n_number = {
222
- value: 3, size: 'md', placeholder: '', disabled: false
223
- };
224
-
225
- data.n_select = {
226
- size: 'md', allowCreate: false, clearable: true, disabled: false
227
- };
228
-
229
- data.n_cascader = {
230
- size: 'md', type: 'primary', clearable: true, disabled: false
231
- };
232
-
233
- data.n_checkbox = {
234
- size: 'md', type: 'primary', disabled: false
235
- };
236
-
237
- data.n_radio = {
238
- size: 'md', type: 'primary', disabled: false
239
- };
240
-
241
- data.n_switch = {
242
- size: 'md', disabled: false
243
- };
244
-
245
- data.n_datepicker = {
246
- size: 'md', type: 'primary', clearable: true, disabled: false
247
- };
248
-
249
- data.n_timepicker = {
250
- size: 'md', type: 'primary', clearable: true, disabled: false
251
- };
252
-
253
- data.n_transfer = {
254
- size: 'md', type: 'primary', disabled: false
255
- };
256
-
257
- data.n_modal = {
258
- size: 'md', type: 'default', disabled: false
259
- };
260
-
261
- data.n_confirm = {
262
- size: 'md', type: 'primary', disabled: false
263
- };
264
-
265
- data.n_tabs = {
266
- value: 'default', size: 'md', type: 'primary'
267
- };
268
-
269
- data.n_paginator = {
270
- size: 'md', type: 'primary'
271
- };
272
-
273
- data.n_draggable = {
274
- count: 0
275
- };
276
-
277
- data.n_loader = {
278
- size: 'md', type: 'primary', visible: true
279
- };
280
-
281
- let methods = {};
282
-
283
- methods.log = function (val) {
284
- console.log(val || 'Log fired');
285
- };
286
-
287
- methods.notify = function (type) {
288
- this.Notify('Lorem ipsum dolore', type);
289
- };
290
-
291
- var config = {
292
- data: function () {
293
-
294
- this.icons = pi.Obj.assign(nano.Icons, {
295
- ghost: 'fa fa-ghost'
296
- });
297
-
298
- data.demoIcons = pi.Arr.reduce(pi.Obj.values(nano.Icons), function (merge, icon) {
299
- return pi.Obj.assign(merge, { [icon]: icon });
300
- }, {});
301
-
302
- return data;
303
- },
304
- methods: methods
305
- };
306
-
307
- window.App = Vue.createApp(config);
308
-
309
- window.App.config.devtools = true;
310
-
311
- window.App.use(function (App) {
312
- nano.Install(App);
313
- });
314
-
315
- window.App.mount('#app');
316
- });
317
-
318
- })(window.nano);
319
- </script>
320
- </body>
321
- </html>
package/demos/input/index.html DELETED
@@ -1,100 +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 Input</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="Small">
29
- <n-input :value="form.name" size="small" />
30
- </n-form-item>
31
-
32
- <n-form-item label="Default">
33
- <n-input v-model="form.name" size="default" />
34
- </n-form-item>
35
-
36
- <n-form-item label="Large">
37
- <n-input v-model="form.name" size="large" />
38
- </n-form-item>
39
-
40
- <n-form-item label="Disabled">
41
- <n-input v-model="form.name" :disabled="true" />
42
- </n-form-item>
43
-
44
- <n-form-item label="Info">
45
- <n-input v-model="form.name" icon="fa fa-times" :icon-disabled="form.name === ''" @icon-click="form.name = ''" />
46
- </n-form-item>
47
-
48
- <n-form-item label="Password">
49
- <n-input v-model="form.name" :native-type="nativeType" :icon="icon" @icon-click="changeNative" />
50
- </n-form-item>
51
-
52
- <n-form-item label="Object">
53
- <pre>{{ form }}</pre>
54
- </n-form-item>
55
-
56
- </n-form>
57
- </div>
58
-
59
- <script>
60
- pi.Dom.ready(() => {
61
-
62
- Vue.config.devtools = true;
63
-
64
- var config = {
65
-
66
- computed: {
67
-
68
- icon: function() {
69
- return this.nativeType === 'text' ?
70
- 'fa fa-eye-slash' : 'fa fa-eye';
71
- }
72
-
73
- },
74
-
75
- methods: {
76
-
77
- changeNative: function() {
78
- this.nativeType = this.nativeType === 'text' ?
79
- 'password' : 'text';
80
- }
81
-
82
- },
83
-
84
- data: function() {
85
-
86
- var form = {
87
- name: ''
88
- };
89
-
90
- return {
91
- form: form, inverse: false, nativeType: 'password'
92
- };
93
- }
94
- };
95
-
96
- window.App = new Vue(config).$mount('#app');
97
- })
98
- </script>
99
- </body>
100
- </html>
package/demos/map/index.html DELETED
@@ -1,81 +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 Map</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://maps.googleapis.com/maps/api/js?key=AIzaSyDvJ7NNFrrSL13b3xEB07Itw0luJSHDTmE"></script>
15
-
16
- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
17
- <script src="https://vankizmann.github.io/@kizmann/pico-js/dist/@kizmann/pico-js.js"></script>
18
- <script src="../../dist/nano-ui.js"></script>
19
-
20
- </head>
21
- <body>
22
-
23
- <div id="app">
24
- <n-form :form="form">
25
-
26
- <n-form-item :label="trans('Address')">
27
- <n-button-group>
28
- <n-input v-model="address"></n-input>
29
- <n-button @click="setMarkerByAddress">{{ trans('Set marker') }}</n-button>
30
- </n-button-group>
31
- </n-form-item>
32
-
33
- <n-form-item>
34
- <n-map>
35
- <n-map-marker ref="marker" :lat.sync="form.lat" :lng.sync="form.lng" :draggable="true">
36
- <div style="padding: 20px; background: yellow; color: red;">Huhu!</div>
37
- </n-map-marker>
38
- </n-map>
39
- </n-form-item>
40
-
41
- <n-form-item label="Object">
42
- <pre>{{ form }}</pre>
43
- </n-form-item>
44
-
45
- </n-form>
46
- </div>
47
-
48
- <script>
49
- pi.Dom.ready(() => {
50
-
51
- Vue.config.devtools = true;
52
-
53
- var config = {
54
-
55
- data: function() {
56
-
57
- var form = {
58
- lat: 53.565000, lng: 10.042280
59
- };
60
-
61
- return {
62
- form: form, address: ''
63
- };
64
- },
65
-
66
- methods: {
67
-
68
- setMarkerByAddress()
69
- {
70
- this.$refs.marker.setMarkerByAddress(this.address);
71
- }
72
-
73
- }
74
-
75
- };
76
-
77
- window.App = new Vue(config).$mount('#app');
78
- })
79
- </script>
80
- </body>
81
- </html>
package/demos/matrix/index.html DELETED
@@ -1,104 +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 Matrix</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="Tree">
29
- <n-matrix v-model="form.cascade" :items="form.value" title-prop="label" :multiple="false">
30
- <n-matrix-column label="Test"></n-matrix-column>
31
- </n-matrix>
32
- </n-form-item>
33
-
34
- </n-form>
35
- </div>
36
-
37
- <script>
38
- (function (Nano) {
39
-
40
- 'use strict';
41
-
42
- pi.Dom.ready(function () {
43
-
44
- Vue.config.devtools = true;
45
-
46
- var config = {
47
- data: function() {
48
-
49
- let total = 0;
50
-
51
- let childGenerator = function(count, depth, current) {
52
-
53
- if ( count === undefined ) {
54
- count = 3;
55
- }
56
-
57
- if ( depth === undefined ) {
58
- depth = 3;
59
- }
60
-
61
- if ( current === undefined ) {
62
- current = 1;
63
- }
64
-
65
- let children = Array(
66
- Math.floor((Math.random() * count) + 2)
67
- ).fill(null);
68
-
69
- pi.Arr.map(children, function (item) {
70
-
71
- total++;
72
-
73
- item = {
74
- label: 'Item ' + total,
75
- id: 'value-' + total,
76
- children: []
77
- };
78
-
79
- if ( current < depth ) {
80
- item.children = childGenerator(count, depth, current + 1);
81
- }
82
-
83
- return item;
84
- });
85
-
86
- return children;
87
- };
88
-
89
- var form = {
90
- value: childGenerator(), cascade: []
91
- };
92
-
93
- return { form: form, inverse: false };
94
- }
95
- };
96
-
97
- window.App = new Vue(config).$mount('#app');
98
-
99
- });
100
-
101
- })(window.Nano);
102
- </script>
103
- </body>
104
- </html>