@visns-studio/visns-components 4.10.47 → 5.0.0

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 (41) hide show
  1. package/package.json +28 -30
  2. package/src/components/cms/Field.jsx +39 -63
  3. package/src/components/crm/Breadcrumb.jsx +2 -18
  4. package/src/components/crm/DataGrid.jsx +23 -379
  5. package/src/components/crm/Field.jsx +16 -215
  6. package/src/components/crm/Form.jsx +81 -79
  7. package/src/components/crm/MultiSelect.jsx +25 -71
  8. package/src/components/crm/Navigation.jsx +7 -11
  9. package/src/components/crm/QrCode.jsx +8 -12
  10. package/src/components/crm/QuickAction.jsx +1 -0
  11. package/src/components/crm/generic/GenericAuth.jsx +2 -6
  12. package/src/components/crm/generic/GenericDashboard.jsx +30 -340
  13. package/src/components/crm/generic/GenericDetail.jsx +37 -80
  14. package/src/components/crm/generic/GenericDynamic.jsx +76 -94
  15. package/src/components/crm/generic/GenericFormBuilder.jsx +19 -79
  16. package/src/components/crm/generic/GenericIndex.jsx +1 -2
  17. package/src/components/crm/generic/styles/GenericDetail.module.scss +0 -51
  18. package/src/components/crm/generic/styles/GenericFormBuilder.module.scss +0 -5
  19. package/src/components/crm/styles/DataGrid.module.scss +25 -0
  20. package/src/components/crm/styles/Field.module.scss +0 -210
  21. package/src/components/crm/styles/Form.module.scss +0 -78
  22. package/src/components/crm/styles/Navigation.module.scss +4 -10
  23. package/src/components/crm/styles/QrCode.module.scss +0 -18
  24. package/src/index.js +0 -8
  25. package/src/components/crm/generic/styles/GenericDashboard.module.scss +0 -325
  26. package/src/components/crm/sketch/SketchField.jsx +0 -395
  27. package/src/components/crm/sketch/arrow.jsx +0 -108
  28. package/src/components/crm/sketch/circle.jsx +0 -75
  29. package/src/components/crm/sketch/default-tool.jsx +0 -16
  30. package/src/components/crm/sketch/fabrictool.jsx +0 -22
  31. package/src/components/crm/sketch/history.jsx +0 -144
  32. package/src/components/crm/sketch/json/config.json +0 -14
  33. package/src/components/crm/sketch/line.jsx +0 -64
  34. package/src/components/crm/sketch/pan.jsx +0 -48
  35. package/src/components/crm/sketch/pencil.jsx +0 -36
  36. package/src/components/crm/sketch/rectangle-label-object.jsx +0 -69
  37. package/src/components/crm/sketch/rectangle-label.jsx +0 -93
  38. package/src/components/crm/sketch/rectangle.jsx +0 -76
  39. package/src/components/crm/sketch/select.jsx +0 -16
  40. package/src/components/crm/sketch/tools.jsx +0 -11
  41. package/src/components/crm/sketch/utils.jsx +0 -67
@@ -22,6 +22,31 @@
22
22
  }
23
23
  }
24
24
 
25
+ .vs-datagrid--row:hover {
26
+ .InovuaReactDataGrid__row-cell-wrap {
27
+ background: rgb(240, 240, 240) !important;
28
+ cursor: pointer;
29
+ }
30
+ }
31
+
32
+ .InovuaReactDataGrid {
33
+ letter-spacing: 0.015rem !important;
34
+ color: black !important;
35
+ }
36
+
37
+ .InovuaReactDataGrid__header {
38
+ color: var(--primary-color) !important;
39
+ }
40
+
41
+ .InovuaReactDataGrid__row-hover-target:hover {
42
+ color: black !important;
43
+ background: rgb(240, 240, 240) !important;
44
+ }
45
+
46
+ .InovuaReactDataGrid__row:hover {
47
+ cursor: pointer;
48
+ }
49
+
25
50
  #smartTableSearchInput {
26
51
  background: #eeeeee;
27
52
  border: 1px solid rgba(var(--table-color-rgb), 1.1);
@@ -364,213 +364,3 @@ input[type='file']:hover {
364
364
  max-width: 15px;
365
365
  margin-right: 5px;
366
366
  }
367
-
368
- .modalwrap {
369
- background: var(--tertiary-color);
370
- border-radius: 3px;
371
- overflow: visible;
372
- border-top-left-radius: var(--br);
373
- border-top-right-radius: var(--br);
374
-
375
- .modal {
376
- width: 100%;
377
- position: relative;
378
-
379
- &__header {
380
- width: 100%;
381
- background: var(--primary-color);
382
- border: 2px solid rgba(var(--primary-color), 1.05);
383
- border-top-left-radius: var(--br);
384
- border-top-right-radius: var(--br);
385
- box-sizing: border-box;
386
-
387
- h1 {
388
- color: var(--secondary-color);
389
- margin: 0;
390
- padding: 0.75em 0.75em;
391
- font-size: 1.15em;
392
- }
393
-
394
- .modal__close {
395
- width: max-content;
396
- position: absolute;
397
- right: 5px;
398
- top: 5px;
399
- box-sizing: border-box;
400
- background: rgba(var(--primary-color), 1.08);
401
- cursor: pointer;
402
- padding: 8px 8px;
403
- margin: 0;
404
- outline: none;
405
- border: none;
406
- border-radius: var(--br);
407
- display: block;
408
- line-height: 1;
409
-
410
- svg {
411
- color: var(--secondary-color);
412
- display: block;
413
- }
414
- }
415
- }
416
-
417
- &__content {
418
- width: 100%;
419
- position: relative;
420
- padding: 0.25rem;
421
- box-sizing: border-box;
422
- border-top-left-radius: var(--br);
423
- border-top-right-radius: var(--br);
424
-
425
- .btn {
426
- background: var(--primary-color);
427
- border: 1px solid rgba(var(--primary-color), 1.05);
428
-
429
- &:hover {
430
- background: var(--secondary-color);
431
- color: var(--tertiary-color);
432
- }
433
- }
434
- }
435
- }
436
- }
437
-
438
- .top--modal {
439
- width: 100%;
440
- max-width: 1000px !important;
441
- height: auto;
442
- // display: none;
443
- padding: 0 !important;
444
- }
445
-
446
- // Canvas
447
-
448
- .drawDiv {
449
- width: 100%;
450
- display: flex;
451
- justify-content: space-between;
452
-
453
- img {
454
- width: 100%;
455
- max-width: 470px;
456
- display: block;
457
- margin: 0 auto;
458
- }
459
- }
460
-
461
- .drawactions {
462
- width: 100%;
463
- height: auto;
464
- list-style: none;
465
- padding: 0 1em 0 0;
466
- margin: 0;
467
- flex: 1;
468
- box-sizing: border-box;
469
-
470
- li {
471
- width: 100%;
472
- margin: 0 0 2px 0;
473
-
474
- button {
475
- width: 100%;
476
- color: var(--paragraph-color);
477
- border: 1px solid transparent;
478
- padding: 0.5em 1em;
479
- border-radius: 6px;
480
- text-align: left;
481
- font-size: 0.875em;
482
-
483
- .octicon {
484
- margin-right: 8px;
485
- transform: scale(0.8) translateY(-1px);
486
- }
487
- }
488
-
489
- .drawactions--save {
490
- background: #4ff1ba;
491
- color: var(--paragraph-color);
492
- }
493
-
494
- .drawactions--clear {
495
- background: #ff6a6a;
496
- color: var(--paragraph-color);
497
- }
498
-
499
- .drawactive {
500
- border: 1px solid rgba(var(--paragraph-color-rgb), 1.4);
501
- background: rgba(var(--paragraph-color-rgb), 0.2);
502
- color: rgba(var(--paragraph-color-rgb), 1.05);
503
- }
504
- }
505
- }
506
-
507
- .drawcontainer {
508
- display: block;
509
- flex: 0 1 80%;
510
- margin: 0;
511
- border: 1px dashed rgba(var(--primary-color-rgb), 1.2);
512
- padding: 5px;
513
- overflow: hidden;
514
- box-sizing: border-box;
515
- }
516
-
517
- .canvasWrap {
518
- display: block;
519
- margin: 0 auto;
520
- }
521
-
522
- .canvas-container {
523
- display: block;
524
- margin: 0 auto;
525
- }
526
-
527
- /* File List Styling */
528
- .file-list {
529
- list-style: none; /* Remove default list styles */
530
- padding: 0; /* Remove default padding */
531
- margin: 0; /* Remove default margin */
532
- border: 1px solid var(--border-color); /* Add a border */
533
- border-radius: var(--br); /* Rounded corners */
534
- background: var(--tertiary-color); /* Background color */
535
- max-height: 200px; /* Limit height */
536
- overflow-y: auto; /* Scroll if too many files */
537
- margin-top: 0.5em; /* Space above the list */
538
- }
539
-
540
- /* File List Item Styling */
541
- .file-list li {
542
- display: flex; /* Flexbox for layout */
543
- justify-content: space-between; /* Space between text and button */
544
- align-items: center; /* Center items vertically */
545
- padding: 0.5em 1em; /* Padding for items */
546
- border-bottom: 1px solid var(--border-color); /* Border between items */
547
- color: var(--paragraph-color); /* Text color */
548
- transition: background 0.3s; /* Transition for hover effect */
549
- }
550
-
551
- .file-list li:hover {
552
- background: rgba(
553
- var(--paragraph-color-rgb),
554
- 0.1
555
- ); /* Change background on hover */
556
- }
557
-
558
- /* Trash Button Styling */
559
- .trash-button {
560
- background: transparent; /* Transparent background */
561
- border: none; /* No border */
562
- cursor: pointer; /* Pointer cursor */
563
- color: var(--primary-color); /* Button color */
564
- display: flex; /* Flex for icon alignment */
565
- align-items: center; /* Center icon vertically */
566
- transition: color 0.3s; /* Transition for color change */
567
- }
568
-
569
- .trash-button:hover {
570
- color: var(--secondary-color); /* Change color on hover */
571
- }
572
-
573
- .trash-button svg {
574
- width: 1.5em; /* Adjust icon size */
575
- height: 1.5em; /* Adjust icon size */
576
- }
@@ -497,81 +497,3 @@ select {
497
497
  padding: 0.35em 1em;
498
498
  margin: 0 0.15em;
499
499
  }
500
-
501
- .modalwrap {
502
- background: var(--tertiary-color);
503
- border-radius: 3px;
504
- overflow: visible;
505
- border-top-left-radius: var(--br);
506
- border-top-right-radius: var(--br);
507
-
508
- .modal {
509
- width: 100%;
510
- position: relative;
511
-
512
- &__header {
513
- width: 100%;
514
- background: var(--primary-color);
515
- border: 2px solid rgba(var(--primary-color), 1.05);
516
- border-top-left-radius: var(--br);
517
- border-top-right-radius: var(--br);
518
- box-sizing: border-box;
519
-
520
- h1 {
521
- color: var(--secondary-color);
522
- margin: 0;
523
- padding: 0.75em 0.75em;
524
- font-size: 1.15em;
525
- }
526
-
527
- .modal__close {
528
- width: max-content;
529
- position: absolute;
530
- right: 5px;
531
- top: 5px;
532
- box-sizing: border-box;
533
- background: rgba(var(--primary-color), 1.08);
534
- cursor: pointer;
535
- padding: 8px 8px;
536
- margin: 0;
537
- outline: none;
538
- border: none;
539
- border-radius: var(--br);
540
- display: block;
541
- line-height: 1;
542
-
543
- svg {
544
- color: var(--secondary-color);
545
- display: block;
546
- }
547
- }
548
- }
549
-
550
- &__content {
551
- width: 100%;
552
- position: relative;
553
- padding: 0.25rem;
554
- box-sizing: border-box;
555
- border-top-left-radius: var(--br);
556
- border-top-right-radius: var(--br);
557
-
558
- .btn {
559
- background: var(--primary-color);
560
- border: 1px solid rgba(var(--primary-color), 1.05);
561
-
562
- &:hover {
563
- background: var(--secondary-color);
564
- color: var(--tertiary-color);
565
- }
566
- }
567
- }
568
- }
569
- }
570
-
571
- .top--modal {
572
- width: 100%;
573
- max-width: 1000px !important;
574
- height: auto;
575
- // display: none;
576
- padding: 0 !important;
577
- }
@@ -238,15 +238,12 @@
238
238
  align-items: center;
239
239
  }
240
240
 
241
- /* Hover and Active States for <a> */
242
- > ul a:hover,
243
- > ul a.active {
241
+ > ul a:hover {
244
242
  background: var(--primary-color-lighter);
245
243
  transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
246
244
  }
247
245
 
248
- > ul a:hover svg,
249
- > ul a.active svg {
246
+ > ul a:hover svg {
250
247
  color: var(--highlight-color);
251
248
  transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
252
249
  }
@@ -266,15 +263,12 @@
266
263
  appearance: none;
267
264
  }
268
265
 
269
- /* Hover and Active States for button */
270
- button:hover,
271
- button.active {
266
+ button:hover {
272
267
  background: var(--primary-color-lighter);
273
268
  transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
274
269
  }
275
270
 
276
- button:hover svg,
277
- button.active svg {
271
+ button:hover svg {
278
272
  color: var(--highlight-color);
279
273
  transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
280
274
  }
@@ -85,21 +85,3 @@
85
85
  margin: 0 0.15em;
86
86
  }
87
87
  }
88
-
89
- .btn {
90
- width: max-content;
91
- display: inline-block;
92
- position: relative;
93
- padding: 0.65rem 1rem;
94
- cursor: pointer;
95
- font-size: 1rem;
96
- color: var(--tertiary-color);
97
- text-decoration: none;
98
- overflow: hidden;
99
- background: var(--primary-color);
100
- border: 1px solid rgba(var(--primary-color--rgb), 1.1);
101
- border-radius: var(--br);
102
- outline: none;
103
- transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
104
- font-size: 1.25em;
105
- }
package/src/index.js CHANGED
@@ -37,7 +37,6 @@ import CmsSort from './components/cms/generic/CmsSort';
37
37
  import AuditLog from './components/crm/generic/AuditLog';
38
38
  import AuditLogs from './components/crm/generic/AuditLogs';
39
39
  import GenericAuth from './components/crm/generic/GenericAuth';
40
- import GenericDashboard from './components/crm/generic/GenericDashboard';
41
40
  import GenericDetail from './components/crm/generic/GenericDetail';
42
41
  import GenericDynamic from './components/crm/generic/GenericDynamic';
43
42
  import GenericFormBuilder from './components/crm/generic/GenericFormBuilder';
@@ -46,10 +45,6 @@ import GenericMain from './components/crm/generic/GenericMain';
46
45
  import GenericSort from './components/crm/generic/GenericSort';
47
46
  import NotificationList from './components/crm/generic/NotificationList';
48
47
 
49
- /** Sketching Components */
50
- import SketchField from './components/crm/sketch/SketchField';
51
- import Tools from './components/crm/sketch/tools';
52
-
53
48
  export {
54
49
  AsyncSelect,
55
50
  AuditLog,
@@ -68,7 +63,6 @@ export {
68
63
  Field,
69
64
  Form,
70
65
  GenericAuth,
71
- GenericDashboard,
72
66
  GenericDetail,
73
67
  GenericDynamic,
74
68
  GenericFormBuilder,
@@ -85,10 +79,8 @@ export {
85
79
  Reset,
86
80
  SelectList,
87
81
  Select,
88
- SketchField,
89
82
  SortableList,
90
83
  Table,
91
84
  TableFilter,
92
- Tools,
93
85
  Verify,
94
86
  };