@kizmann/nano-ui 0.7.26 → 0.7.28

Sign up to get free protection for your applications and to get access to all the features.
Files changed (7) hide show
  1. package/demos/tabs.html +293 -0
  2. package/dist/nano-ui.js +2 -2
  3. package/dist/nano-ui.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/draggable/src/draglist/draglist.js +7 -0
  6. package/src/form/src/form/form.js +13 -48
  7. package/src/input/src/input/input.js +40 -16
package/demos/tabs.html ADDED
@@ -0,0 +1,293 @@
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@next"></script>
17
+ <script src="https://vankizmann.github.io/pico-js/dist/pico-js.js"></script>
18
+ <script src="../dist/nano-ui.js"></script>
19
+ <script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
20
+ <script src="https://maps.googleapis.com/maps/api/js"></script>
21
+
22
+ <link rel="stylesheet" href="../docs/dist/index.css">
23
+
24
+ <style>
25
+
26
+ body {
27
+ font-family: 'Helvetica', 'Roboto', 'Arial', sans-serif;
28
+ font-size: 14px;
29
+ height: 100%;
30
+ overflow-x: hidden;
31
+ }
32
+
33
+ #app {
34
+ overflow-x: hidden;
35
+ }
36
+
37
+ .app-scrollbar {
38
+ width: 100vw;
39
+ height: 100vh;
40
+ }
41
+
42
+ .app-container {
43
+ max-width: 1440px;
44
+ margin: 0 auto;
45
+ padding: 20px 30px 40px 30px;
46
+ }
47
+
48
+ .app-options {
49
+ border-bottom: 1px solid #eee;
50
+ margin-bottom: 20px;
51
+ }
52
+
53
+ h2 {
54
+ font-size: 32px;
55
+ font-weight: bold;
56
+ padding-bottom: 10px;
57
+ margin: 50px 0 15px;
58
+ border-bottom: 1px solid #eee;
59
+ }
60
+
61
+ </style>
62
+
63
+ </head>
64
+ <body>
65
+
66
+ <div id="app">
67
+ <div class="app-container">
68
+
69
+
70
+ <n-tabs ref="tabs1">
71
+ <n-tabs-item label="Foo" name="default">
72
+ asdasdas0000
73
+ <n-tabs ref="tabs2">
74
+ <n-tabs-item label="Bar" name="default">
75
+ asdasdas11111
76
+ </n-tabs-item>
77
+ <n-tabs-item label="Si" name="si">
78
+ asdasdas2222
79
+ </n-tabs-item>
80
+ </n-tabs>
81
+ </n-tabs-item>
82
+ <n-tabs-item label="Hu" name="hu">
83
+ asdasdasxxxxx
84
+ </n-tabs-item>
85
+ </n-tabs>
86
+
87
+
88
+ </div>
89
+ </div>
90
+
91
+ <script>
92
+ (function (nano) {
93
+
94
+ 'use strict';
95
+
96
+ pi.Dom.ready(function () {
97
+
98
+ let data = {};
99
+
100
+ data.sizes = {
101
+ xs: 'XS',
102
+ sm: 'SM',
103
+ md: 'MD',
104
+ lg: 'LG'
105
+ };
106
+
107
+ data.types = {
108
+ primary: 'Primary',
109
+ secondary: 'Secondary',
110
+ success: 'Success',
111
+ warning: 'Warning',
112
+ danger: 'Danger',
113
+ info: 'Info'
114
+ };
115
+
116
+ data.modals = {
117
+ default: 'Default',
118
+ preview: 'Preview',
119
+ };
120
+
121
+ data.demoConfig = {
122
+ 'div': {
123
+ class: [
124
+ 'foobar'
125
+ ],
126
+ content: {
127
+ 'NInput:page_id': {
128
+ model: {
129
+ path: 'page_id'
130
+ }
131
+ },
132
+ 'NInput:page_id2': {
133
+ model: {
134
+ path: 'page_id'
135
+ }
136
+ }
137
+ }
138
+ }
139
+ };
140
+
141
+ data.configData = {};
142
+
143
+ data.testData = [];
144
+
145
+ let itemGenerator = function (count = 100, index = 0) {
146
+ return pi.Arr.each(pi.Arr.make(count), function (value) {
147
+
148
+ let id = pi.UUID();
149
+
150
+ return {
151
+ id: id,
152
+ value: id,
153
+ matrix: 10,
154
+ label: `Item ${index++}`,
155
+ image: 'https://picsum.photos/400/400?' + id,
156
+ date: pi.Now.make().format('YYYY-MM-DD HH:mm:ss', true),
157
+ enabled: !! Math.floor(Math.random() * 2)
158
+ };
159
+ });
160
+ };
161
+
162
+
163
+ data.cascaderData = pi.Arr.each(itemGenerator(5), function (item) {
164
+
165
+ let children = pi.Arr.each(itemGenerator(5), function (item) {
166
+ return pi.Obj.assign(item, { children: itemGenerator(5) });
167
+ });
168
+
169
+ return pi.Obj.assign(item, { children: children });
170
+ });
171
+
172
+ data.virtualData = itemGenerator(10000);
173
+
174
+ data.virtualTree = pi.Arr.each(itemGenerator(50), function (item) {
175
+ return pi.Obj.assign(item, { children: itemGenerator(20) });
176
+ });
177
+
178
+ data.treeSelect = null;
179
+ data.treeMatrix = [data.virtualTree[3]];
180
+
181
+ data.n_button = {
182
+ icon: 'fa fa-ghost', size: 'md', square: false, link: false, disabled: false
183
+ };
184
+
185
+ data.n_textarea = {
186
+ size: 'md', placeholder: 'Placeholder', autoRows: false, disabled: false
187
+ };
188
+
189
+ data.n_input = {
190
+ value: 'Demo', icon: 'fa fa-ghost', size: 'md', placeholder: 'Placeholder', disabled: false
191
+ };
192
+
193
+ data.n_number = {
194
+ value: 3, size: 'md', placeholder: '', disabled: false
195
+ };
196
+
197
+ data.n_select = {
198
+ size: 'md', allowCreate: false, clearable: true, disabled: false
199
+ };
200
+
201
+ data.n_cascader = {
202
+ size: 'md', type: 'primary', clearable: true, disabled: false
203
+ };
204
+
205
+ data.n_checkbox = {
206
+ size: 'md', type: 'primary', disabled: false
207
+ };
208
+
209
+ data.n_radio = {
210
+ size: 'md', type: 'primary', disabled: false
211
+ };
212
+
213
+ data.n_switch = {
214
+ size: 'md', disabled: false
215
+ };
216
+
217
+ data.n_datepicker = {
218
+ size: 'md', type: 'primary', clearable: true, disabled: false
219
+ };
220
+
221
+ data.n_timepicker = {
222
+ size: 'md', type: 'primary', clearable: true, disabled: false
223
+ };
224
+
225
+ data.n_transfer = {
226
+ size: 'md', type: 'primary', disabled: false
227
+ };
228
+
229
+ data.n_modal = {
230
+ size: 'md', type: 'default', disabled: false
231
+ };
232
+
233
+ data.n_confirm = {
234
+ size: 'md', type: 'primary', disabled: false
235
+ };
236
+
237
+ data.n_tabs = {
238
+ value: 'default', size: 'md', type: 'primary'
239
+ };
240
+
241
+ data.n_paginator = {
242
+ size: 'md', type: 'primary'
243
+ };
244
+
245
+ data.n_draggable = {
246
+ count: 0
247
+ };
248
+
249
+ data.n_loader = {
250
+ size: 'md', type: 'primary', visible: true
251
+ };
252
+
253
+ let methods = {};
254
+
255
+ methods.log = function (val) {
256
+ console.log(val || 'Log fired');
257
+ };
258
+
259
+ methods.notify = function (type) {
260
+ this.Notify('Lorem ipsum dolore', type);
261
+ };
262
+
263
+ var config = {
264
+ data: function () {
265
+
266
+ this.icons = pi.Obj.assign(nano.Icons, {
267
+ ghost: 'fa fa-ghost'
268
+ });
269
+
270
+ data.demoIcons = pi.Arr.reduce(pi.Obj.values(nano.Icons), function (merge, icon) {
271
+ return pi.Obj.assign(merge, { [icon]: icon });
272
+ }, {});
273
+
274
+ return data;
275
+ },
276
+ methods: methods
277
+ };
278
+
279
+ window.App = Vue.createApp(config);
280
+
281
+ window.App.config.devtools = true;
282
+
283
+ window.App.use(function (App) {
284
+ nano.Install(App);
285
+ });
286
+
287
+ window.App.mount('#app');
288
+ });
289
+
290
+ })(window.nano);
291
+ </script>
292
+ </body>
293
+ </html>