@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/select/index.html DELETED
@@ -1,174 +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 Select</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="Test">
29
- <n-select v-model="form.name3" size="default">
30
- </n-select>
31
- </n-form-item>
32
-
33
- <n-form-item label="Test">
34
- <n-select v-model="form.name2" size="default" :allow-create="true" :window="true">
35
- <n-select-option value="mike">Mike</n-select-option>
36
- <n-select-option value="alex">Alex</n-select-option>
37
- <n-select-option value="hans">Hans</n-select-option>
38
- </n-select>
39
- </n-form-item>
40
-
41
- <n-form-item label="Small">
42
- <n-select v-model="form.name" size="small">
43
- <n-select-option value="mike">Mike</n-select-option>
44
- <n-select-option value="alex">Alex</n-select-option>
45
- <n-select-option value="hans">Hans</n-select-option>
46
- </n-select>
47
- </n-form-item>
48
-
49
- <n-form-item label="Default">
50
- <n-select v-model="form.name" size="default">
51
- <n-select-option value="mike">Mike</n-select-option>
52
- <n-select-option value="alex">Alex</n-select-option>
53
- <n-select-option value="hans">Hans</n-select-option>
54
- <n-select-option value="mike1">Mike</n-select-option>
55
- <n-select-option value="alex2">Alex</n-select-option>
56
- <n-select-option value="hans3">Hans</n-select-option>
57
- <n-select-option value="mike4">Mike</n-select-option>
58
- <n-select-option value="alex5">Alex</n-select-option>
59
- <n-select-option value="hans6">Hans</n-select-option>
60
- <n-select-option value="mike11">Mike</n-select-option>
61
- <n-select-option value="alex21">Alex</n-select-option>
62
- <n-select-option value="hans31">Hans</n-select-option>
63
- <n-select-option value="mike41">Mike</n-select-option>
64
- <n-select-option value="alex51">Alex</n-select-option>
65
- <n-select-option value="hans61">Hans</n-select-option>
66
- </n-select>
67
- </n-form-item>
68
-
69
- <n-form-item label="Large">
70
- <n-select v-model="form.name" size="large">
71
- <n-select-option value="mike">Mike</n-select-option>
72
- <n-select-option value="alex">Alex</n-select-option>
73
- <n-select-option value="hans">Hans</n-select-option>
74
- </n-select>
75
- </n-form-item>
76
-
77
- <n-form-item label="Clearable">
78
- <n-select v-model="form.name" :clearable="true">
79
- <n-select-option value="mike">Mike</n-select-option>
80
- <n-select-option value="alex">Alex</n-select-option>
81
- <n-select-option value="hans">Hans</n-select-option>
82
- </n-select>
83
- </n-form-item>
84
-
85
- <n-form-item label="Disabled">
86
- <n-select v-model="form.name" :disabled="true">
87
- <n-select-option value="mike">Mike</n-select-option>
88
- <n-select-option value="alex">Alex</n-select-option>
89
- <n-select-option value="hans">Hans</n-select-option>
90
- </n-select>
91
- </n-form-item>
92
-
93
- <n-form-item label="Multiple">
94
- <n-select v-model="form.names" :multiple="true" :clearble="true">
95
- <n-select-option value="mike">Mike</n-select-option>
96
- <n-select-option value="alex">Alex</n-select-option>
97
- <n-select-option value="hans">Hans</n-select-option>
98
- <n-select-option value="mike1">Mike</n-select-option>
99
- <n-select-option value="alex2">Alex</n-select-option>
100
- <n-select-option value="hans3">Hans</n-select-option>
101
- <n-select-option value="mike4">Mike</n-select-option>
102
- <n-select-option value="alex5">Alex</n-select-option>
103
- <n-select-option value="hans6">Hans</n-select-option>
104
- <n-select-option value="mike11">Mike</n-select-option>
105
- <n-select-option value="alex21">Alex</n-select-option>
106
- <n-select-option value="hans31">Hans</n-select-option>
107
- <n-select-option value="mike41">Mike</n-select-option>
108
- <n-select-option value="alex51">Alex</n-select-option>
109
- <n-select-option value="hans61">Hans</n-select-option>
110
- </n-select>
111
- </n-form-item>
112
-
113
- <n-form-item label="Multiple clearable">
114
- <n-select v-model="form.names" :multiple="true" :clearable="true">
115
- <n-select-option value="mike">Mike</n-select-option>
116
- <n-select-option value="alex">Alex</n-select-option>
117
- <n-select-option value="hans">Hans</n-select-option>
118
- </n-select>
119
- </n-form-item>
120
-
121
- <n-form-item label="Multiple custom options">
122
- <n-select v-model="form.custom" :multiple="true" :allow-create="true">
123
- <n-select-option value="foobar">Foobar</n-select-option>
124
- </n-select>
125
- </n-form-item>
126
-
127
- <n-form-item label="Object">
128
- <pre>{{ form }}</pre>
129
- </n-form-item>
130
-
131
- <div style="height: 600px; overflow-y: scroll; background: #efefef; position: relative;">
132
- <div style="padding: 800px 0 80px;">
133
- <n-form-item label="Default">
134
- <n-select v-model="form.name" size="default">
135
- <n-select-option value="mike">Mike</n-select-option>
136
- <n-select-option value="alex">Alex</n-select-option>
137
- <n-select-option value="hans">Hans</n-select-option>
138
- <n-select-option value="mike1">Mike</n-select-option>
139
- <n-select-option value="alex2">Alex</n-select-option>
140
- <n-select-option value="hans3">Hans</n-select-option>
141
- <n-select-option value="mike4">Mike</n-select-option>
142
- <n-select-option value="alex5">Alex</n-select-option>
143
- <n-select-option value="hans6">Hans</n-select-option>
144
- </n-select>
145
- </n-form-item>
146
- </div>
147
- </div>
148
-
149
- </n-form>
150
- </div>
151
-
152
- <script>
153
- pi.Dom.ready(function () {
154
-
155
- Vue.config.devtools = true;
156
-
157
- var config = {
158
- data: function() {
159
-
160
- var form = {
161
- name2: null, name3: 0, name: 'mike4', names: ['mike4'], custom: []
162
- };
163
-
164
- return {
165
- form: form, inverse: false
166
- };
167
- }
168
- };
169
-
170
- window.App = new Vue(config).$mount('#app');
171
- })
172
- </script>
173
- </body>
174
- </html>
package/demos/select.html DELETED
@@ -1,164 +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="./style.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>NSelect</h2>
70
-
71
- <div class="grid grid--row grid--wrap grid--10-10">
72
- <div class="col--auto">
73
- <n-select type="secondary" :multiple="true" :options="virtualData" :lazy="true"></n-select>
74
- </div>
75
- </div>
76
-
77
- </div>
78
- </div>
79
-
80
- <script>
81
- (function (nano) {
82
-
83
- 'use strict';
84
-
85
- pi.Dom.ready(function () {
86
-
87
- let data = {};
88
-
89
- data.sizes = {
90
- xs: 'XS',
91
- sm: 'SM',
92
- md: 'MD',
93
- lg: 'LG'
94
- };
95
-
96
- data.types = {
97
- primary: 'Primary',
98
- secondary: 'Secondary',
99
- success: 'Success',
100
- warning: 'Warning',
101
- danger: 'Danger',
102
- info: 'Info'
103
- };
104
-
105
- data.modals = {
106
- default: 'Default',
107
- preview: 'Preview',
108
- };
109
-
110
- let itemGenerator = function (count = 100, index = 0) {
111
-
112
- let list = {};
113
-
114
- pi.Arr.each(pi.Arr.make(count), function () {
115
- return list[pi.UUID()] = `Item ${index ++}`;
116
- });
117
-
118
- return list;
119
- };
120
-
121
- data.virtualData = itemGenerator(1000);
122
-
123
- let methods = {};
124
-
125
- methods.log = function (val) {
126
- console.log(val || 'Log fired');
127
- };
128
-
129
- methods.notify = function (type) {
130
- this.Notify('Lorem ipsum dolore', type);
131
- };
132
-
133
- var config = {
134
- data: function () {
135
-
136
- this.icons = pi.Obj.assign(nano.Icons, {
137
- ghost: 'fa fa-ghost'
138
- });
139
-
140
- data.demoIcons = pi.Arr.reduce(pi.Obj.values(nano.Icons), function (merge, icon) {
141
- return pi.Obj.assign(merge, { [icon]: icon });
142
- }, {});
143
-
144
- return data;
145
- },
146
- methods: methods
147
- };
148
-
149
- window.App = Vue.createApp(config);
150
-
151
- window.App.config.devtools = true;
152
-
153
- window.App.use(function (App) {
154
- nano.Install(App);
155
- });
156
-
157
- window.App.mount('#app');
158
- window.DEBUG_NDLIST = true;
159
- });
160
-
161
- })(window.nano);
162
- </script>
163
- </body>
164
- </html>
package/demos/style.css DELETED
@@ -1,50 +0,0 @@
1
-
2
- * {
3
- outline: none;
4
- }
5
-
6
- html, body {
7
- -webkit-font-smoothing: subpixel-antialiased;
8
- -moz-osx-font-smoothing: grayscale;
9
- font-size: 15px;
10
- font-family: 'Helvetica', 'Arial', sans-serif;
11
- font-variant-numeric: normal;
12
- font-feature-settings: normal;
13
- }
14
-
15
- body {
16
- font-size: 14px;
17
- min-height: 100vh;
18
- }
19
-
20
- #app {
21
- max-width: 1024px;
22
- width: 100%;
23
- margin: 0 auto;
24
- padding: 30px;
25
- }
26
-
27
- div {
28
- box-sizing: border-box;
29
- }
30
-
31
- pre {
32
- font-family: 'Fira Code', monospace;
33
- }
34
-
35
- .n-inverse {
36
- color: #fff;
37
- }
38
-
39
- .n-inverse pre {
40
- color: #fff;
41
- }
42
-
43
- #app > .n-form {
44
- border-radius: 4px;
45
- padding: 30px;
46
- }
47
-
48
- .n-inverse {
49
- background: #1b2229;
50
- }
package/demos/switch/index.html DELETED
@@ -1,69 +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 Switch</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="Test">
25
- <n-switch v-model="form.test" />
26
- </n-form-item>
27
-
28
- <n-form-item label="Test">
29
- <n-switch v-model="form.test" size="small" on-type="success" />
30
- </n-form-item>
31
-
32
- <n-form-item label="Test">
33
- <n-switch v-model="form.test" size="large" on-type="warning" />
34
- </n-form-item>
35
-
36
- <n-form-item label="Test">
37
- <n-switch v-model="form.test" on-type="danger" />
38
- </n-form-item>
39
-
40
- <n-form-item label="Test">
41
- <n-switch v-model="form.test" on-type="info" />
42
- </n-form-item>
43
-
44
- </n-form>
45
- </div>
46
-
47
- <script>
48
- pi.Dom.ready(() => {
49
-
50
- Vue.config.devtools = true;
51
-
52
- var config = {
53
- data: function() {
54
-
55
- var form = {
56
- test: false
57
- };
58
-
59
- return {
60
- form: form, inverse: false
61
- };
62
- }
63
- };
64
-
65
- window.App = new Vue(config).$mount('#app');
66
- })
67
- </script>
68
- </body>
69
- </html>
package/demos/table/index.html DELETED
@@ -1,126 +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 Table</title>
8
-
9
- <script src="https://cdn.jsdelivr.net/npm/resize-observer-polyfill@1.5.1/dist/ResizeObserver.min.js"></script>
10
-
11
- <link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
12
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
13
- <link rel="stylesheet" href="../../dist/nano-ui.css">
14
- <link rel="stylesheet" href="../style.css">
15
-
16
- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.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
-
25
- <div style="padding: 0 20px; margin-bottom: 20px;">
26
- <n-button @click="kill = true">Kill all instances</n-button>
27
- </div>
28
-
29
- <div v-if="kill === false" class="adapt-height" style="overflow: hidden; padding: 20px;">
30
- <div>
31
- <n-table v-model="items" :item-height="100" :viewport-height="600" :render-expand="true" :render-select="true" :close-filter-on-enter="true" :sort-on-label="true">
32
- <n-table-column prop="label" type="string" label="Label" :fluid="true" :sort="true" :width="100"></n-table-column>
33
- <n-table-column prop="image" type="image" label="Image" :sort="true" :fixed-width="90" preview-prop="image"></n-table-column>
34
- <n-table-column prop="date" type="datetime" label="Date" :filter="true" :width="250"></n-table-column>
35
- <n-table-column prop="id" align="center" type="string" :sort="true" :filter="true" label="ID" :default-width="250"></n-table-column>
36
- </n-table>
37
- </div>
38
- </div>
39
-
40
- <div v-if="kill === true" class="adapt-height" style="overflow: hidden; padding: 20px;">
41
- <n-table v-model="target" :viewport-height="true" style="height: 50vh;">
42
- <n-table-column prop="label" type="string" label="Label"></n-table-column>
43
- <n-table-column prop="id" align="center" type="string" label="ID"></n-table-column>
44
- <n-table-column prop="id1" align="center" type="string" label="ID"></n-table-column>
45
- <n-table-column prop="id2" align="center" type="string" label="ID"></n-table-column>
46
- <n-table-column prop="id3" align="center" type="string" label="ID"></n-table-column>
47
- <n-table-column prop="id4" align="center" type="string" label="ID"></n-table-column>
48
- <n-table-column prop="id5" align="center" type="string" label="ID"></n-table-column>
49
- </n-table>
50
- </div>
51
-
52
- </div>
53
-
54
- <script>
55
- (function (Nano) {
56
-
57
- 'use strict';
58
-
59
- pi.Dom.ready(function () {
60
-
61
- Vue.config.devtools = true;
62
-
63
- var config = {
64
- data: function () {
65
-
66
- let total = 0;
67
-
68
- let childGenerator = function (count, depth, current) {
69
-
70
- if ( count === undefined ) {
71
- count = 3;
72
- }
73
-
74
- if ( depth === undefined ) {
75
- depth = 2;
76
- }
77
-
78
- if ( current === undefined ) {
79
- current = 1;
80
- }
81
-
82
- let children = Array(count).fill(null);
83
-
84
- pi.Arr.map(children, function (item) {
85
-
86
- total++;
87
-
88
- item = {
89
- label: 'Item ' + total,
90
- id: 'value-' + total,
91
- image: 'https://picsum.photos/100/100?' + total,
92
- preview: 'https://www.youtube.com/embed/xbuzqU6Cggg',
93
- date: new Date,
94
- children: []
95
- };
96
-
97
- if ( current < depth ) {
98
- item.children = childGenerator(count > 3 ? 3 : count, depth, current + 1);
99
- }
100
-
101
- return item;
102
- });
103
-
104
- return children;
105
- };
106
-
107
- let self = this;
108
-
109
- // setTimeout(function () {
110
- // self.items = childGenerator(5, 7);
111
- // }, 100);
112
-
113
- setTimeout(function () {
114
- self.target = childGenerator(200, 1);
115
- }, 2000);
116
-
117
- return { items: childGenerator(500, 2), target: [], kill: false };
118
- }
119
- };
120
-
121
- window.App = new Vue(config).$mount('#app');
122
- });
123
- })(window.Nano);
124
- </script>
125
- </body>
126
- </html>