@kizmann/nano-ui 0.7.2 → 0.7.5
Sign up to get free protection for your applications and to get access to all the features.
- package/demos/overview.html +13 -7
- package/dist/nano-ui.css +1 -1
- package/dist/nano-ui.js +1 -1
- package/dist/nano-ui.js.map +1 -1
- package/dist/themes/basic.css +2029 -0
- package/dist/themes/flat.css +1806 -0
- package/dist/themes/flat.dark.css +1809 -0
- package/package.json +2 -2
- package/src/draggable/src/draghandler/draghandler.js +35 -27
- package/src/input-number/src/input-number/input-number.js +9 -1
- package/src/preview/src/preview/preview.scss +0 -11
- package/src/select/src/select/select.js +27 -0
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@kizmann/nano-ui",
|
3
|
-
"version": "0.7.
|
3
|
+
"version": "0.7.5",
|
4
4
|
"license": "MIT",
|
5
5
|
"private": false,
|
6
6
|
"author": "Eduard Kizmann <kizmann@protonmail.ch>",
|
@@ -17,7 +17,7 @@
|
|
17
17
|
"@babel/plugin-proposal-export-default-from": "^7.2.0",
|
18
18
|
"@babel/plugin-proposal-object-rest-spread": "^7.4.4",
|
19
19
|
"@babel/preset-env": "^7.4.4",
|
20
|
-
"@kizmann/pico-js": "^0.3.
|
20
|
+
"@kizmann/pico-js": "^0.3.17",
|
21
21
|
"@vue/babel-plugin-jsx": "^1.0.0",
|
22
22
|
"@vue/babel-preset-jsx": "^1.2.4",
|
23
23
|
"autoprefixer": "^9.6.1",
|
@@ -2,7 +2,8 @@ import { Arr, Obj, Num, Any, Dom, Event, Locale, UUID } from "@kizmann/pico-js";
|
|
2
2
|
|
3
3
|
global.dragMods = [];
|
4
4
|
|
5
|
-
class NDragCounter
|
5
|
+
class NDragCounter
|
6
|
+
{
|
6
7
|
|
7
8
|
$el = null;
|
8
9
|
|
@@ -62,7 +63,8 @@ class NDragCounter {
|
|
62
63
|
|
63
64
|
global.DragCounter = new NDragCounter;
|
64
65
|
|
65
|
-
class NDragIndicator
|
66
|
+
class NDragIndicator
|
67
|
+
{
|
66
68
|
|
67
69
|
$el = null;
|
68
70
|
|
@@ -127,7 +129,8 @@ class NDragIndicator {
|
|
127
129
|
|
128
130
|
}
|
129
131
|
|
130
|
-
class NDraghandler
|
132
|
+
class NDraghandler
|
133
|
+
{
|
131
134
|
|
132
135
|
uid = null;
|
133
136
|
|
@@ -218,7 +221,7 @@ class NDraghandler {
|
|
218
221
|
let isNode = Dom.find(event.target)
|
219
222
|
.closest('.n-draglist-item');
|
220
223
|
|
221
|
-
if ( isNode || !
|
224
|
+
if ( isNode || !this.cacheNodes.length ) {
|
222
225
|
return;
|
223
226
|
}
|
224
227
|
|
@@ -230,12 +233,12 @@ class NDraghandler {
|
|
230
233
|
|
231
234
|
let allowDrop = this.rootNode.allowDrop;
|
232
235
|
|
233
|
-
if ( !
|
236
|
+
if ( !Any.isFunction(allowDrop) ) {
|
234
237
|
allowDrop = () => this.rootNode.allowDrop;
|
235
238
|
}
|
236
239
|
|
237
240
|
let rainbow = Arr.each(this.cacheNodes, (node) => {
|
238
|
-
return !!
|
241
|
+
return !!allowDrop(node, null, this.strategy);
|
239
242
|
});
|
240
243
|
|
241
244
|
this.strategy = 'root';
|
@@ -269,7 +272,7 @@ class NDraghandler {
|
|
269
272
|
|
270
273
|
onDragendRoot(event)
|
271
274
|
{
|
272
|
-
if ( !
|
275
|
+
if ( !this.cacheNodes.length ) {
|
273
276
|
return;
|
274
277
|
}
|
275
278
|
|
@@ -285,7 +288,7 @@ class NDraghandler {
|
|
285
288
|
|
286
289
|
onDragdropRoot(event)
|
287
290
|
{
|
288
|
-
if ( !
|
291
|
+
if ( !this.cacheNodes.length ) {
|
289
292
|
return;
|
290
293
|
}
|
291
294
|
|
@@ -319,7 +322,7 @@ class NDraghandler {
|
|
319
322
|
|
320
323
|
bindDragdrop(...args)
|
321
324
|
{
|
322
|
-
if ( !
|
325
|
+
if ( !this.dropNodes.length ) {
|
323
326
|
return;
|
324
327
|
}
|
325
328
|
|
@@ -328,7 +331,7 @@ class NDraghandler {
|
|
328
331
|
this.rootNode.$emit('update:selected',
|
329
332
|
this.rootNode.tempSelected);
|
330
333
|
|
331
|
-
if ( !
|
334
|
+
if ( !this.rootNode.removeNode ) {
|
332
335
|
return;
|
333
336
|
}
|
334
337
|
|
@@ -344,7 +347,7 @@ class NDraghandler {
|
|
344
347
|
|
345
348
|
onDragstartNode(event, node)
|
346
349
|
{
|
347
|
-
if ( !
|
350
|
+
if ( !this.rootNode.isSelected(node) ) {
|
348
351
|
this.rootNode.$emit('update:selected',
|
349
352
|
this.rootNode.tempSelected = [node.uid]);
|
350
353
|
}
|
@@ -373,16 +376,16 @@ class NDraghandler {
|
|
373
376
|
{
|
374
377
|
event.preventDefault();
|
375
378
|
|
376
|
-
if ( !
|
379
|
+
if ( !this.dragcount[node.uid] ) {
|
377
380
|
this.dragcount[node.uid] = 0;
|
378
381
|
}
|
379
382
|
|
380
|
-
this.dragcount[node.uid]++;
|
383
|
+
this.dragcount[node.uid] ++;
|
381
384
|
}
|
382
385
|
|
383
386
|
onDragoverNode(event, node)
|
384
387
|
{
|
385
|
-
if ( !
|
388
|
+
if ( !this.cacheNodes.length ) {
|
386
389
|
return;
|
387
390
|
}
|
388
391
|
|
@@ -404,18 +407,18 @@ class NDraghandler {
|
|
404
407
|
|
405
408
|
let allowDrop = this.rootNode.allowDrop;
|
406
409
|
|
407
|
-
if ( !
|
410
|
+
if ( !Any.isFunction(allowDrop) ) {
|
408
411
|
allowDrop = () => this.rootNode.allowDrop;
|
409
412
|
}
|
410
413
|
|
411
414
|
let rainbow = Arr.each(this.cacheNodes, (node) => {
|
412
|
-
return !!
|
415
|
+
return !!allowDrop(node, targetNode, this.strategy);
|
413
416
|
});
|
414
417
|
|
415
418
|
let isInSelf = Arr.has(node.value.cascade,
|
416
419
|
this.rootNode.tempSelected);
|
417
420
|
|
418
|
-
rainbow.push(!
|
421
|
+
rainbow.push(!isInSelf);
|
419
422
|
|
420
423
|
if ( Arr.has(rainbow, false) ) {
|
421
424
|
this.strategy = 'nodrop';
|
@@ -440,7 +443,7 @@ class NDraghandler {
|
|
440
443
|
|
441
444
|
onDragleaveNode(event, node)
|
442
445
|
{
|
443
|
-
this.dragcount[node.uid]--;
|
446
|
+
this.dragcount[node.uid] --;
|
444
447
|
|
445
448
|
if ( this.dragcount[node.uid] !== 0 ) {
|
446
449
|
return;
|
@@ -464,7 +467,7 @@ class NDraghandler {
|
|
464
467
|
|
465
468
|
onDragdropNode(event, node)
|
466
469
|
{
|
467
|
-
if ( !
|
470
|
+
if ( !this.cacheNodes.length ) {
|
468
471
|
return;
|
469
472
|
}
|
470
473
|
|
@@ -566,7 +569,7 @@ class NDraghandler {
|
|
566
569
|
this.unlinkNodes(clone);
|
567
570
|
}
|
568
571
|
|
569
|
-
if ( !
|
572
|
+
if ( !this.dropNodes.length ) {
|
570
573
|
Arr.each(this.cacheNodes, (value, key) => {
|
571
574
|
this.cacheNodes[key]['item'] = this.rootNode.transformDrop(value.item);
|
572
575
|
});
|
@@ -634,12 +637,12 @@ class NDraghandler {
|
|
634
637
|
removeNodes(clone, prop = 'items')
|
635
638
|
{
|
636
639
|
clone[prop] = Arr.filter(clone[prop], (node) => {
|
637
|
-
return !!
|
640
|
+
return !!node;
|
638
641
|
});
|
639
642
|
|
640
643
|
Arr.map(clone[prop], (node) => {
|
641
644
|
|
642
|
-
if ( !
|
645
|
+
if ( !node[this.rootNode.childProp] ) {
|
643
646
|
return node;
|
644
647
|
}
|
645
648
|
|
@@ -669,8 +672,10 @@ class NDraghandler {
|
|
669
672
|
return clone;
|
670
673
|
}
|
671
674
|
|
672
|
-
let targetRoute = [
|
673
|
-
|
675
|
+
let targetRoute = [
|
676
|
+
target.value.route,
|
677
|
+
this.rootNode.childProp
|
678
|
+
].join('.');
|
674
679
|
|
675
680
|
let children = Obj.get(clone,
|
676
681
|
targetRoute, []);
|
@@ -765,7 +770,8 @@ class NDraghandler {
|
|
765
770
|
this.rootNode.$emit('update:items', clone.items);
|
766
771
|
}
|
767
772
|
|
768
|
-
reduce(items, ...props)
|
773
|
+
reduce(items, ...props)
|
774
|
+
{
|
769
775
|
return Arr.reduce(items, (merge, item, index) =>
|
770
776
|
this.reduceItem(merge, item, Num.int(index), ...props), []);
|
771
777
|
}
|
@@ -797,8 +803,10 @@ class NDraghandler {
|
|
797
803
|
return Arr.merge(merge, [virtual]);
|
798
804
|
}
|
799
805
|
|
800
|
-
let childRoute = [
|
801
|
-
|
806
|
+
let childRoute = [
|
807
|
+
route, index,
|
808
|
+
this.rootNode.childProp
|
809
|
+
].join('.');
|
802
810
|
|
803
811
|
let props = [
|
804
812
|
depth + 1, childRoute, tempCascade
|
@@ -252,7 +252,7 @@ export default {
|
|
252
252
|
let value = event.target.value;
|
253
253
|
|
254
254
|
let format = this.format.replace(':count',
|
255
|
-
`([0-9
|
255
|
+
`([0-9\\,\\.\\-\\s]+)`);
|
256
256
|
|
257
257
|
let regex = new RegExp(`^${format}$`);
|
258
258
|
|
@@ -267,6 +267,14 @@ export default {
|
|
267
267
|
|
268
268
|
value = Num.float(value).toFixed(this.precision);
|
269
269
|
|
270
|
+
if ( value < this.min ) {
|
271
|
+
value = this.min;
|
272
|
+
}
|
273
|
+
|
274
|
+
if ( value > this.max ) {
|
275
|
+
value = this.max;
|
276
|
+
}
|
277
|
+
|
270
278
|
this.$emit('update:modelValue',
|
271
279
|
this.tempValue = Num.float(value));
|
272
280
|
|
@@ -5,17 +5,6 @@
|
|
5
5
|
display: inline-flex;
|
6
6
|
}
|
7
7
|
|
8
|
-
.n-preview:before {
|
9
|
-
z-index: 5;
|
10
|
-
content: '\00a0';
|
11
|
-
position: absolute;
|
12
|
-
top: 0;
|
13
|
-
left: 0;
|
14
|
-
display: block;
|
15
|
-
width: 100%;
|
16
|
-
height: 100%;
|
17
|
-
}
|
18
|
-
|
19
8
|
.n-preview--cover img {
|
20
9
|
object-fit: cover !important;
|
21
10
|
}
|
@@ -150,6 +150,29 @@ export default {
|
|
150
150
|
|
151
151
|
},
|
152
152
|
|
153
|
+
computed: {
|
154
|
+
|
155
|
+
empty()
|
156
|
+
{
|
157
|
+
return Any.isEmpty(this.tempValue);
|
158
|
+
},
|
159
|
+
|
160
|
+
custom()
|
161
|
+
{
|
162
|
+
let result = Arr.filter(this.elements, (element) => {
|
163
|
+
|
164
|
+
if ( Any.isArray(this.tempValue) ) {
|
165
|
+
return Arr.has(this.tempValue, element.value);
|
166
|
+
}
|
167
|
+
|
168
|
+
return element.value === this.tempValue;
|
169
|
+
});
|
170
|
+
|
171
|
+
return result.length === 0;
|
172
|
+
}
|
173
|
+
|
174
|
+
},
|
175
|
+
|
153
176
|
data()
|
154
177
|
{
|
155
178
|
return {
|
@@ -618,6 +641,10 @@ export default {
|
|
618
641
|
onKeydown: this.onKeydownInput
|
619
642
|
};
|
620
643
|
|
644
|
+
if ( ! this.search && this.custom ) {
|
645
|
+
props.value = this.tempValue;
|
646
|
+
}
|
647
|
+
|
621
648
|
if ( ! this.focus ) {
|
622
649
|
props.value = modelLabel;
|
623
650
|
}
|