@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/builder.html DELETED
@@ -1,411 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
- <title>Nano UI</title>
8
-
9
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
10
- <link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
11
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
12
- <link rel="stylesheet" href="../dist/nano-ui.css">
13
- <link id="theme" rel="stylesheet" href="../dist/themes/light.css">
14
-
15
- <link rel="stylesheet" href="../style.css">
16
-
17
- <style>
18
-
19
- div {
20
- box-sizing: border-box;
21
- }
22
-
23
- body {
24
- font-family: 'Inter', 'Helvetica', 'Arial', sans-serif;
25
- font-size: 14px;
26
- height: 100%;
27
- overflow-x: hidden;
28
- }
29
-
30
- #app {
31
- overflow-x: hidden;
32
- }
33
-
34
- .app-container {
35
- max-width: 1440px;
36
- margin: 0 auto;
37
- padding: 20px 30px 40px 30px;
38
- }
39
-
40
- .app-options {
41
- border-bottom: 1px solid rgba(110, 110, 110, 0.15);
42
- margin-bottom: 20px;
43
- }
44
-
45
- h2 {
46
- font-size: 32px;
47
- font-weight: bold;
48
- padding-bottom: 10px;
49
- margin: 50px 0 15px;
50
- border-bottom: 1px solid rgba(110, 110, 110, 0.15);
51
- }
52
-
53
- </style>
54
-
55
- <script src="https://unpkg.com/moment"></script>
56
- <script src="https://unpkg.com/vue@3.4.6"></script>
57
- <script src="https://vankizmann.github.io/pico-js/dist/pico-js.js"></script>
58
- <script src="../dist/nano-ui.js"></script>
59
- <script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
60
- <script src="https://maps.googleapis.com/maps/api/js"></script>
61
-
62
- </head>
63
- <body class="n-demo">
64
-
65
- <div id="app">
66
- <div class="app-container">
67
- <n-builder :model-value="demoConfigNext" :model="demoModel" :scope="demoScope"></n-builder>
68
- </div>
69
- </div>
70
-
71
- <script>
72
-
73
- (function (nano) {
74
-
75
- 'use strict';
76
-
77
- pi.Locale.set('URL', "URL2");
78
- pi.Locale.set('URX', "URX2");
79
-
80
- pi.Dom.ready(function () {
81
-
82
- let data = {};
83
-
84
- data.demoModel = {
85
- test: true,
86
- label: 'foobar',
87
- option: {
88
- url: 'http://', redirect: 'AHA'
89
- }
90
- };
91
-
92
- data.demoScope = {
93
- testme: () => {
94
- console.log('abc');
95
- }
96
- }
97
-
98
- data.sizes = {
99
- xs: 'XS',
100
- sm: 'SM',
101
- md: 'MD',
102
- lg: 'LG'
103
- };
104
-
105
- data.types = {
106
- primary: 'Primary',
107
- secondary: 'Secondary',
108
- success: 'Success',
109
- warning: 'Warning',
110
- danger: 'Danger',
111
- info: 'Info'
112
- };
113
-
114
- data.modals = {
115
- default: 'Default',
116
- preview: 'Preview',
117
- };
118
-
119
- pi.Obj.set(data, 'demoConfigNext.NFormGroup:root', {
120
- vShow: [
121
- '$model.test'
122
- ],
123
- props: {
124
- label: '$model.label',
125
- icon: 'fa fa-directions'
126
- }
127
- });
128
-
129
- pi.Obj.set(data, 'demoConfigNext.NFormGroup:root.content.NFormItem:url', {
130
- props: {
131
- label: '\\@URX',
132
- test: function() {
133
- console.log(123);
134
- }
135
- },
136
- content: {
137
- 'NInput': {
138
- binds: {
139
- modelValue: '$model.option.url'
140
- }
141
- }
142
- }
143
- });
144
-
145
- pi.Obj.set(data, 'demoConfigNext.NFormGroup:root.content.NFormItem:menu', {
146
- props: {
147
- label: pi.Locale.trans('Menu')
148
- },
149
- content: {
150
- 'NSwitch': {
151
- binds: {
152
- modelValue: '$model.option.redirect'
153
- },
154
- props: {
155
- "foo": "@bar"
156
- },
157
- content: [
158
- "@123"
159
- ]
160
- }
161
- }
162
- });
163
-
164
- data.demoConfig = {
165
- 'NFormGroup:00': {
166
- $props: {
167
- label: pi.Locale.trans('Redirect'),
168
- icon: 'fa fa-directions'
169
- },
170
- content: {
171
- 'div:00': {
172
- class: 'grid grid--row grid--wrap grid--30',
173
- content: {
174
- 'div:00': {
175
- class: 'col--1-1 col--1-2@sm',
176
- content: {
177
- 'NFormItem:00': {
178
- $props: {
179
- label: pi.Locale.trans('URL')
180
- },
181
- content: {
182
- 'NInput:00': {
183
- model: {
184
- path: 'option.url'
185
- }
186
- }
187
- }
188
- },
189
- }
190
- },
191
- 'div:10': {
192
- class: 'col--1-1 col--1-2@sm',
193
- content: {
194
- 'NFormItem:00': {
195
- $props: {
196
- label: pi.Locale.trans('Menu')
197
- },
198
- content: {
199
- 'Nswitch:00': {
200
- model: {
201
- path: 'option.redirect'
202
- },
203
- content: [
204
- pi.Locale.trans("foobar")
205
- ]
206
- }
207
- }
208
- }
209
- }
210
- }
211
- }
212
- }
213
- }
214
- },
215
- };
216
-
217
- data.configData = { label: 'asdasda' };
218
-
219
- data.testData = [];
220
-
221
- let itemGenerator = function (count = 100, index = 0) {
222
- return pi.Arr.each(pi.Arr.make(count), function (value) {
223
-
224
- let id = pi.UUID();
225
-
226
- return {
227
- id: id,
228
- value: id,
229
- matrix: 10,
230
- label: `Item ${index++}`,
231
- image: 'https://picsum.photos/300/300.jpg?' + id,
232
- date: pi.Now.make('now').format('YYYY-MM-DD HH:mm:ss', true),
233
- enabled: !! Math.floor(Math.random() * 2)
234
- };
235
- });
236
- };
237
-
238
-
239
- data.cascaderData = pi.Arr.each(itemGenerator(5), function (item) {
240
-
241
- let children = pi.Arr.each(itemGenerator(5), function (item) {
242
- return pi.Obj.assign(item, { children: itemGenerator(5) });
243
- });
244
-
245
- return pi.Obj.assign(item, { children: children });
246
- });
247
-
248
- data.virtualData = itemGenerator(10000);
249
-
250
- data.virtualTree = pi.Arr.each(itemGenerator(100), function (item) {
251
- return pi.Obj.assign(item, { children: itemGenerator(10) });
252
- });
253
-
254
-
255
- data.virtualItem = null;
256
-
257
- data.treeSelect = null;
258
- data.treeMatrix = [data.virtualTree[3]];
259
-
260
- data.foobar = 'huhu';
261
-
262
- data.n_theme = pi.Cookie.get('theme', 'light', 'string');
263
-
264
- pi.Dom.find('#theme').attr('href', '../dist/themes/' +
265
- data.n_theme + '.css');
266
-
267
- data.n_form = {
268
- size: 'md', conditional: true, modelValue: false
269
- };
270
-
271
- data.n_tags = {
272
- size: 'md',
273
- };
274
-
275
- data.n_rating = {
276
- size: 'md', choice: 'No stars|:value star|:value stars', disabled: false
277
- };
278
-
279
- data.n_button = {
280
- icon: 'fa fa-ghost', size: 'md', square: false, link: false, disabled: false
281
- };
282
-
283
- data.n_textarea = {
284
- size: 'md', placeholder: 'Placeholder', autoRows: false, disabled: false
285
- };
286
-
287
- data.n_input = {
288
- value: 'Demo', icon: 'fa fa-ghost', size: 'md', placeholder: 'Placeholder', disabled: false
289
- };
290
-
291
- data.n_number = {
292
- test: '', value: 3, size: 'md', placeholder: '', disabled: false, minValue: 0, maxValue: 10
293
- };
294
-
295
- data.n_select = {
296
- size: 'md', allowCreate: false, clearable: true, disabled: false
297
- };
298
-
299
- data.n_cascader = {
300
- size: 'md', type: 'primary', clearable: true, disabled: false
301
- };
302
-
303
- data.n_checkbox = {
304
- size: 'md', type: 'primary', disabled: false
305
- };
306
-
307
- data.n_radio = {
308
- size: 'md', type: 'primary', disabled: false
309
- };
310
-
311
- data.n_slider = {
312
- size: 'md', disabled: false, temp_value: 30,
313
- };
314
-
315
- data.n_switch = {
316
- size: 'md', disabled: false
317
- };
318
-
319
- data.n_datepicker = {
320
- size: 'md', type: 'primary', clearable: true, disabled: false
321
- };
322
-
323
- data.n_timepicker = {
324
- size: 'md', type: 'primary', clearable: true, disabled: false
325
- };
326
-
327
- data.n_datetimepicker = {
328
- size: 'md', type: 'primary', clearable: true, disabled: false
329
- };
330
-
331
- data.n_durationpicker = {
332
- size: 'md', type: 'primary', clearable: true, disabled: false, modelValue: 124521
333
- };
334
-
335
- data.n_transfer = {
336
- size: 'md', type: 'primary', disabled: false
337
- };
338
-
339
- data.n_modal = {
340
- size: 'md', type: 'default', disabled: false
341
- };
342
-
343
- data.n_confirm = {
344
- size: 'md', type: 'primary', disabled: false
345
- };
346
-
347
- data.n_tabs = {
348
- value: 'default', size: 'md', type: 'primary'
349
- };
350
-
351
- data.n_collapse = {
352
- value: ['default'], size: 'md', type: 'primary', relative: false
353
- };
354
-
355
- data.n_paginator = {
356
- size: 'md', type: 'primary'
357
- };
358
-
359
- data.n_draggable = {
360
- count: 0
361
- };
362
-
363
- data.n_loader = {
364
- size: 'md', type: 'primary', visible: true
365
- };
366
-
367
- data.n_map = {
368
- lat: 53.55, lng: 9.99
369
- };
370
-
371
- data.n_preview = {
372
- file: null
373
- };
374
-
375
- let methods = {};
376
-
377
- var config = {
378
- data: function () {
379
-
380
- this.icons = pi.Obj.assign(nano.Icons, {
381
- ghost: 'fa fa-ghost'
382
- });
383
-
384
- data.demoIcons = pi.Arr.reduce(pi.Obj.values(nano.Icons), function (merge, icon) {
385
- return pi.Obj.assign(merge, { [icon]: icon });
386
- }, {});
387
-
388
- return data;
389
- },
390
- mounted: function () {
391
- let self = this;
392
- },
393
- methods: methods
394
- };
395
-
396
- window.App = Vue.createApp(config);
397
-
398
- window.App.config.devtools = true;
399
-
400
- window.App.use(function (App) {
401
- nano.Install(App);
402
- });
403
-
404
- window.App.mount('#app');
405
- });
406
-
407
- })(window.nano);
408
- </script>
409
-
410
- </body>
411
- </html>
package/demos/button/index.html DELETED
@@ -1,129 +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 Button</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="Regular">
29
- <n-button type="primary">Primary</n-button>
30
- <n-button type="secondary">Secondary</n-button>
31
- <n-button type="success">Success</n-button>
32
- <n-button type="warning">Warning</n-button>
33
- <n-button type="danger">Danger</n-button>
34
- <n-button type="info">Info</n-button>
35
- <n-button type="link">Link</n-button>
36
- </n-form-item>
37
-
38
- <n-form-item label="Disabled">
39
- <n-button type="primary" :disabled="true">Primary</n-button>
40
- <n-button type="secondary" :disabled="true">Secondary</n-button>
41
- <n-button type="success" :disabled="true">Success</n-button>
42
- <n-button type="warning" :disabled="true">Warning</n-button>
43
- <n-button type="danger" :disabled="true">Danger</n-button>
44
- <n-button type="info" :disabled="true">Info</n-button>
45
- <n-button type="link" :disabled="true">Link</n-button>
46
- </n-form-item>
47
-
48
- <n-form-item label="Outline default">
49
- <n-button type="primary" :outline="true">Primary</n-button>
50
- <n-button type="secondary" :outline="true">Secondary</n-button>
51
- <n-button type="success" :outline="true">Success</n-button>
52
- <n-button type="warning" :outline="true">Warning</n-button>
53
- <n-button type="danger" :outline="true">Danger</n-button>
54
- <n-button type="info" :outline="true">Info</n-button>
55
- </n-form-item>
56
-
57
- <n-form-item label="Outline disabled">
58
- <n-button type="primary" :outline="true" :disabled="true">Primary</n-button>
59
- <n-button type="secondary" :outline="true" :disabled="true">Secondary</n-button>
60
- <n-button type="success" :outline="true" :disabled="true">Success</n-button>
61
- <n-button type="warning" :outline="true" :disabled="true">Warning</n-button>
62
- <n-button type="danger" :outline="true" :disabled="true">Danger</n-button>
63
- <n-button type="info" :outline="true" :disabled="true">Info</n-button>
64
- </n-form-item>
65
-
66
- <n-form-item label="Icon">
67
- <n-button type="success" icon="fa fa-check-circle" icon-position="after">Success</n-button>
68
- <n-button type="warning" icon="fa fa-exclamation-circle">Warning</n-button>
69
- <n-button type="danger" icon="fa fa-times-circle">Danger</n-button>
70
- <n-button type="info" icon="fa fa-info-circle">Info</n-button>
71
- </n-form-item>
72
-
73
- <n-form-item label="Square">
74
- <n-button type="success" icon="fa fa-check-circle" :square="true"></n-button>
75
- <n-button type="warning" icon="fa fa-exclamation-circle" :square="true"></n-button>
76
- <n-button type="danger" icon="fa fa-times-circle" :square="true"></n-button>
77
- <n-button type="info" icon="fa fa-info-circle" :square="true"></n-button>
78
- </n-form-item>
79
-
80
- <n-form-item label="Group">
81
- <n-button-group>
82
- <n-button type="primary" icon="fa fa-angle-left">
83
- Previous
84
- </n-button>
85
- <n-button type="primary" icon="fa fa-angle-right" icon-position="after">
86
- Next
87
- </n-button>
88
- </n-button-group>
89
- </n-form-item>
90
-
91
- <n-form-item label="Group square">
92
- <n-button-group>
93
- <n-button type="primary" icon="fa fa-check-circle" :square="true"></n-button>
94
- <n-button type="primary" icon="fa fa-times-circle" :square="true"></n-button>
95
- </n-button-group>
96
- </n-form-item>
97
-
98
- <n-form-item label="Sizes">
99
- <n-button type="primary" size="small">Small</n-button>
100
- <n-button type="primary" size="default">Regular</n-button>
101
- <n-button type="primary" size="large">Large</n-button>
102
- </n-form-item>
103
-
104
- </n-form>
105
- </div>
106
-
107
- <script>
108
- pi.Dom.ready(() => {
109
-
110
- Vue.config.devtools = true;
111
-
112
- var config = {
113
- data: function() {
114
-
115
- var form = {
116
- //
117
- };
118
-
119
- return {
120
- form: form, inverse: false
121
- };
122
- }
123
- };
124
-
125
- window.App = new Vue(config).$mount('#app');
126
- })
127
- </script>
128
- </body>
129
- </html>
package/demos/cascader/index.html DELETED
@@ -1,127 +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 Cascader</title>
8
-
9
- <link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
10
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
11
- <link rel="stylesheet" href="../../dist/nano-ui.css">
12
- <link rel="stylesheet" href="../style.css">
13
-
14
- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
15
- <script src="https://vankizmann.github.io/@kizmann/pico-js/dist/@kizmann/pico-js.js"></script>
16
- <script src="../../dist/nano-ui.js"></script>
17
-
18
- </head>
19
- <body>
20
-
21
- <div id="app">
22
- <n-form :form="form" :class="{ 'n-inverse': inverse }">
23
-
24
- <n-form-item label="Inverse">
25
- <n-checkbox v-model="inverse">Inverse</n-checkbox>
26
- </n-form-item>
27
-
28
- <n-form-item label="Click">
29
- <n-cascader v-model="form.value" :items="items" trigger="click"></n-cascader>
30
- </n-form-item>
31
-
32
- <n-form-item label="Hover">
33
- <n-cascader v-model="form.value" :items="items" trigger="hover"></n-cascader>
34
- </n-form-item>
35
-
36
- <n-form-item label="Clearable">
37
- <n-cascader v-model="form.value" :items="items" :clearable="true"></n-cascader>
38
- </n-form-item>
39
-
40
- <n-form-item label="Disabled">
41
- <n-cascader v-model="form.value" :items="items" :disabled="true"></n-cascader>
42
- </n-form-item>
43
-
44
- <n-form-item label="Object">
45
- <pre>{{ form }}</pre>
46
- </n-form-item>
47
-
48
- <div style="height: 600px; overflow-y: scroll; background: #efefef; position: relative;">
49
- <div style="padding: 800px 0 80px;">
50
- <n-form-item label="Default">
51
- <n-cascader v-model="form.value" :items="items"></n-cascader>
52
- </n-form-item>
53
- </div>
54
- </div>
55
-
56
- </n-form>
57
- </div>
58
-
59
- <script>
60
- pi.Dom.ready(function () {
61
-
62
- Vue.config.devtools = true;
63
-
64
- var config = {
65
- data: function () {
66
-
67
- let total = 0;
68
-
69
- let childGenerator = function(count, depth, current) {
70
-
71
- if ( count === undefined ) {
72
- count = 10;
73
- }
74
-
75
- if ( depth === undefined ) {
76
- depth = 5;
77
- }
78
-
79
- if ( current === undefined ) {
80
- current = 1;
81
- }
82
-
83
- let children = Array(
84
- Math.floor(Math.random() * (count + 1))
85
- ).fill(null);
86
-
87
- pi.Arr.map(children, function(item) {
88
-
89
- total++;
90
-
91
- item = {
92
- label: 'Item ' + (Math.floor(Math.random() * 2) === 1 ? 'long text is here given' : '') + total,
93
- value: 'value-' + total,
94
- disabled: !! Math.floor(Math.random() * 2),
95
- children: []
96
- };
97
-
98
- if ( current < depth ) {
99
- item.children = childGenerator(count, depth, current + 1);
100
- }
101
-
102
- return item;
103
- });
104
-
105
- return children;
106
- };
107
-
108
- var form = {
109
- value: []
110
- };
111
-
112
- var self = this;
113
-
114
- pi.Any.delay(function () {
115
- self.items = childGenerator();
116
- }, 2000);
117
-
118
- return { form: form, inverse: false, items: [] };
119
- }
120
- };
121
-
122
- window.App = new Vue(config).$mount('#app');
123
-
124
- });
125
- </script>
126
- </body>
127
- </html>