@bagelink/vue 0.0.694 → 0.0.702

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 (43) hide show
  1. package/dist/components/Btn.vue.d.ts +1 -1
  2. package/dist/components/Btn.vue.d.ts.map +1 -1
  3. package/dist/components/ListItem.vue.d.ts +7 -0
  4. package/dist/components/ListItem.vue.d.ts.map +1 -1
  5. package/dist/components/ListView.vue.d.ts.map +1 -1
  6. package/dist/components/TableSchema.vue.d.ts.map +1 -1
  7. package/dist/components/form/BglForm.vue.d.ts +6 -5
  8. package/dist/components/form/BglForm.vue.d.ts.map +1 -1
  9. package/dist/components/form/BglMultiStepForm.vue.d.ts +82 -0
  10. package/dist/components/form/BglMultiStepForm.vue.d.ts.map +1 -0
  11. package/dist/components/form/index.d.ts +1 -0
  12. package/dist/components/form/index.d.ts.map +1 -1
  13. package/dist/components/form/inputs/TelInput.vue.d.ts +3 -3
  14. package/dist/components/form/inputs/TelInput.vue.d.ts.map +1 -1
  15. package/dist/components/form/inputs/TextInput.vue.d.ts.map +1 -1
  16. package/dist/components/layout/TabsNav.vue.d.ts +4 -0
  17. package/dist/components/layout/TabsNav.vue.d.ts.map +1 -1
  18. package/dist/index.cjs +281 -137
  19. package/dist/index.mjs +282 -138
  20. package/dist/style.css +589 -426
  21. package/dist/types/BagelForm.d.ts +1 -0
  22. package/dist/types/BagelForm.d.ts.map +1 -1
  23. package/dist/utils/BagelFormUtils.d.ts +346 -0
  24. package/dist/utils/BagelFormUtils.d.ts.map +1 -1
  25. package/package.json +13 -13
  26. package/src/components/Btn.vue +4 -1
  27. package/src/components/ListItem.vue +54 -2
  28. package/src/components/ListView.vue +0 -38
  29. package/src/components/TableSchema.vue +1 -2
  30. package/src/components/form/BglForm.vue +13 -15
  31. package/src/components/form/BglMultiStepForm.vue +121 -0
  32. package/src/components/form/index.ts +1 -0
  33. package/src/components/form/inputs/FileUploadURL.vue +2 -0
  34. package/src/components/form/inputs/SelectInput.vue +2 -2
  35. package/src/components/form/inputs/TelInput.vue +0 -1
  36. package/src/components/form/inputs/TextInput.vue +0 -1
  37. package/src/components/layout/TabsNav.vue +64 -1
  38. package/src/styles/appearance.css +121 -40
  39. package/src/styles/inputs.css +21 -13
  40. package/src/styles/layout.css +97 -84
  41. package/src/styles/mobilLayout.css +181 -168
  42. package/src/types/BagelForm.ts +1 -0
  43. package/src/utils/BagelFormUtils.ts +29 -1
package/src/styles/appearance.css CHANGED
@@ -156,10 +156,19 @@
156
156
  color: var(--bgl-blue-light) !important;
157
157
  }
158
158
 
159
+ .bg-bg {
160
+ background: var(--bgl-bg) !important;
161
+ }
162
+
163
+ .color-bg {
164
+ color: var(--bgl-bg) !important;
165
+ }
166
+
159
167
  .bg-black {
160
168
  background: var(--bgl-black) !important;
161
169
  }
162
170
 
171
+
163
172
  .color-black {
164
173
  color: var(--bgl-black) !important;
165
174
  }
@@ -264,7 +273,8 @@
264
273
  color: var(--bgl-green) !important;
265
274
  }
266
275
 
267
- .bg-input-white input {
276
+ .bg-input-white input,
277
+ .bg-input-white .selectinput-btn {
268
278
  background: var(--bgl-white) !important;
269
279
  }
270
280
 
@@ -272,7 +282,8 @@
272
282
  color: var(--bgl-white) !important;
273
283
  }
274
284
 
275
- .bg-input-primary input {
285
+ .bg-input-primary input,
286
+ .bg-input-primary .selectinput-btn {
276
287
  background: var(--bgl-primary) !important;
277
288
  }
278
289
 
@@ -280,7 +291,8 @@
280
291
  color: var(--bgl-primary) !important;
281
292
  }
282
293
 
283
- .bg-input-primary-tint input {
294
+ .bg-input-primary-tint input,
295
+ .bg-input-primary-tint .selectinput-btn {
284
296
  background: var(--bgl-primary-tint) !important;
285
297
  }
286
298
 
@@ -288,7 +300,8 @@
288
300
  color: var(--bgl-primary-tint) !important;
289
301
  }
290
302
 
291
- .bg-input-primary-light input {
303
+ .bg-input-primary-light input,
304
+ .bg-input-primary-light .selectinput-btn {
292
305
  background: var(--bgl-primary-light) !important;
293
306
  }
294
307
 
@@ -296,7 +309,8 @@
296
309
  color: var(--bgl-primary-light) !important;
297
310
  }
298
311
 
299
- .bg-input-blue-20 input {
312
+ .bg-input-blue-20 input,
313
+ .bg-input-blue-20 .selectinput-btn {
300
314
  background: var(--bgl-blue-20) !important;
301
315
  }
302
316
 
@@ -304,7 +318,8 @@
304
318
  color: var(--bgl-blue-20) !important;
305
319
  }
306
320
 
307
- .bg-input-blue-dark input {
321
+ .bg-input-blue-dark input,
322
+ .bg-input-blue-dark .selectinput-btn {
308
323
  background: var(--bgl-blue-dark) !important;
309
324
  }
310
325
 
@@ -312,7 +327,8 @@
312
327
  color: var(--bgl-blue-dark) !important;
313
328
  }
314
329
 
315
- .bg-input-blue-light input {
330
+ .bg-input-blue-light input,
331
+ .bg-input-blue-light .selectinput-btn {
316
332
  background: var(--bgl-blue-light) !important;
317
333
  }
318
334
 
@@ -320,7 +336,8 @@
320
336
  color: var(--bgl-blue-light) !important;
321
337
  }
322
338
 
323
- .bg-input-black input {
339
+ .bg-input-black input,
340
+ .bg-input-black .selectinput-btn {
324
341
  background: var(--bgl-black) !important;
325
342
  }
326
343
 
@@ -328,7 +345,8 @@
328
345
  color: var(--bgl-black) !important;
329
346
  }
330
347
 
331
- .bg-input-black-tint input {
348
+ .bg-input-black-tint input,
349
+ .bg-input-black-tint .selectinput-btn {
332
350
  background: var(--bgl-black-tint) !important;
333
351
  }
334
352
 
@@ -336,7 +354,8 @@
336
354
  color: var(--bgl-black-tint) !important;
337
355
  }
338
356
 
339
- .bg-input-gray input {
357
+ .bg-input-gray input,
358
+ .bg-input-gray .selectinput-btn {
340
359
  background: var(--bgl-gray) !important;
341
360
  }
342
361
 
@@ -344,7 +363,8 @@
344
363
  color: var(--bgl-gray) !important;
345
364
  }
346
365
 
347
- .bg-input-gray-light input {
366
+ .bg-input-gray-light input,
367
+ .bg-input-gray-light .selectinput-btn {
348
368
  background: var(--bgl-gray-light) !important;
349
369
  }
350
370
 
@@ -352,7 +372,8 @@
352
372
  color: var(--bgl-gray-light) !important;
353
373
  }
354
374
 
355
- .bg-input-gray-80 input {
375
+ .bg-input-gray-80 input,
376
+ .bg-input-gray-80 .selectinput-btn {
356
377
  background: var(--bgl-gray-80) !important;
357
378
  }
358
379
 
@@ -360,7 +381,8 @@
360
381
  color: var(--bgl-gray-80) !important;
361
382
  }
362
383
 
363
- .bg-input-gray-20 input {
384
+ .bg-input-gray-20 input,
385
+ .bg-input-gray-20 .selectinput-btn {
364
386
  background: var(--bgl-gray-20) !important;
365
387
  }
366
388
 
@@ -368,7 +390,8 @@
368
390
  color: var(--bgl-gray-20) !important;
369
391
  }
370
392
 
371
- .bg-input-pink input {
393
+ .bg-input-pink input,
394
+ .bg-input-pink .selectinput-btn {
372
395
  background: var(--bgl-pink) !important;
373
396
  }
374
397
 
@@ -376,7 +399,8 @@
376
399
  color: var(--bgl-pink) !important;
377
400
  }
378
401
 
379
- .bg-input-red input {
402
+ .bg-input-red input,
403
+ .bg-input-red .selectinput-btn {
380
404
  background: var(--bgl-red) !important;
381
405
  }
382
406
 
@@ -384,7 +408,8 @@
384
408
  color: var(--bgl-red) !important;
385
409
  }
386
410
 
387
- .bg-input-red-tint input {
411
+ .bg-input-red-tint input,
412
+ .bg-input-red-tint .selectinput-btn {
388
413
  background: var(--bgl-red-tint) !important;
389
414
  }
390
415
 
@@ -392,7 +417,8 @@
392
417
  color: var(--bgl-red-tint) !important;
393
418
  }
394
419
 
395
- .bg-input-yellow input {
420
+ .bg-input-yellow input,
421
+ .bg-input-yellow .selectinput-btn {
396
422
  background: var(--bgl-yellow) !important;
397
423
  }
398
424
 
@@ -400,7 +426,8 @@
400
426
  color: var(--bgl-yellow) !important;
401
427
  }
402
428
 
403
- .bg-input-yellow-light input {
429
+ .bg-input-yellow-light input,
430
+ .bg-input-yellow-light .selectinput-btn {
404
431
  background: var(--bgl-yellow-light) !important;
405
432
  }
406
433
 
@@ -408,11 +435,13 @@
408
435
  color: var(--bgl-yellow-light) !important;
409
436
  }
410
437
 
411
- .bg-input-green input {
438
+ .bg-input-green input,
439
+ .bg-input-green .selectinput-btn {
412
440
  background: var(--bgl-green) !important;
413
441
  }
414
442
 
415
- .bg-input-transparent input {
443
+ .bg-input-transparent input,
444
+ .bg-input-transparent .selectinput-btn {
416
445
  background: transparent !important;
417
446
  }
418
447
 
@@ -488,6 +517,10 @@
488
517
  border-inline-end: none !important
489
518
  }
490
519
 
520
+ .border-none {
521
+ border: none !important
522
+ }
523
+
491
524
  .border-inner-bottom-none>* {
492
525
  border-bottom: none !important
493
526
  }
@@ -504,6 +537,17 @@
504
537
  border-inline-end: none !important
505
538
  }
506
539
 
540
+ .border-inner-none>* {
541
+ border: none !important
542
+ }
543
+
544
+ .user-select-none {
545
+ user-select: none;
546
+ }
547
+
548
+ .user-select-all {
549
+ user-select: all;
550
+ }
507
551
 
508
552
 
509
553
  @media screen and (max-width: 910px) {
@@ -769,7 +813,8 @@
769
813
  background: transparent !important;
770
814
  }
771
815
 
772
- .m_bg-input-white input {
816
+ .m_bg-input-white input,
817
+ .m_bg-input-white .selectinput-btn {
773
818
  background: var(--bgl-white) !important;
774
819
  }
775
820
 
@@ -777,7 +822,8 @@
777
822
  color: var(--bgl-white) !important;
778
823
  }
779
824
 
780
- .m_bg-input-primary input {
825
+ .m_bg-input-primary input,
826
+ .m_bg-input-primary .selectinput-btn {
781
827
  background: var(--bgl-primary) !important;
782
828
  }
783
829
 
@@ -785,7 +831,8 @@
785
831
  color: var(--bgl-primary) !important;
786
832
  }
787
833
 
788
- .m_bg-input-primary-tint input {
834
+ .m_bg-input-primary-tint input,
835
+ .m_bg-input-primary-tint .selectinput-btn {
789
836
  background: var(--bgl-primary-tint) !important;
790
837
  }
791
838
 
@@ -793,7 +840,8 @@
793
840
  color: var(--bgl-primary-tint) !important;
794
841
  }
795
842
 
796
- .m_bg-input-primary-light input {
843
+ .m_bg-input-primary-light input,
844
+ .m_bg-input-primary-light .selectinput-btn {
797
845
  background: var(--bgl-primary-light) !important;
798
846
  }
799
847
 
@@ -801,7 +849,8 @@
801
849
  color: var(--bgl-primary-light) !important;
802
850
  }
803
851
 
804
- .m_bg-input-blue-20 input {
852
+ .m_bg-input-blue-20 input,
853
+ .m_bg-input-blue-20 .selectinput-btn {
805
854
  background: var(--bgl-blue-20) !important;
806
855
  }
807
856
 
@@ -809,7 +858,8 @@
809
858
  color: var(--bgl-blue-20) !important;
810
859
  }
811
860
 
812
- .m_bg-input-blue-dark input {
861
+ .m_bg-input-blue-dark input,
862
+ .m_bg-input-blue-dark .selectinput-btn {
813
863
  background: var(--bgl-blue-dark) !important;
814
864
  }
815
865
 
@@ -817,7 +867,8 @@
817
867
  color: var(--bgl-blue-dark) !important;
818
868
  }
819
869
 
820
- .m_bg-input-blue-light input {
870
+ .m_bg-input-blue-light input,
871
+ .m_bg-input-blue-light .selectinput-btn {
821
872
  background: var(--bgl-blue-light) !important;
822
873
  }
823
874
 
@@ -825,7 +876,8 @@
825
876
  color: var(--bgl-blue-light) !important;
826
877
  }
827
878
 
828
- .m_bg-input-black input {
879
+ .m_bg-input-black input,
880
+ .m_bg-input-black .selectinput-btn {
829
881
  background: var(--bgl-black) !important;
830
882
  }
831
883
 
@@ -833,7 +885,8 @@
833
885
  color: var(--bgl-black) !important;
834
886
  }
835
887
 
836
- .m_bg-input-black-tint input {
888
+ .m_bg-input-black-tint input,
889
+ .m_bg-input-black-tint .selectinput-btn {
837
890
  background: var(--bgl-black-tint) !important;
838
891
  }
839
892
 
@@ -841,7 +894,8 @@
841
894
  color: var(--bgl-black-tint) !important;
842
895
  }
843
896
 
844
- .m_bg-input-gray input {
897
+ .m_bg-input-gray input,
898
+ .m_bg-input-gray .selectinput-btn {
845
899
  background: var(--bgl-gray) !important;
846
900
  }
847
901
 
@@ -849,7 +903,8 @@
849
903
  color: var(--bgl-gray) !important;
850
904
  }
851
905
 
852
- .m_bg-input-gray-light input {
906
+ .m_bg-input-gray-light input,
907
+ .m_bg-input-gray-light .selectinput-btn {
853
908
  background: var(--bgl-gray-light) !important;
854
909
  }
855
910
 
@@ -857,7 +912,8 @@
857
912
  color: var(--bgl-gray-light) !important;
858
913
  }
859
914
 
860
- .m_bg-input-gray-80 input {
915
+ .m_bg-input-gray-80 input,
916
+ .m_bg-input-gray-80 .selectinput-btn {
861
917
  background: var(--bgl-gray-80) !important;
862
918
  }
863
919
 
@@ -865,7 +921,8 @@
865
921
  color: var(--bgl-gray-80) !important;
866
922
  }
867
923
 
868
- .m_bg-input-gray-20 input {
924
+ .m_bg-input-gray-20 input,
925
+ .m_bg-input-gray-20 .selectinput-btn {
869
926
  background: var(--bgl-gray-20) !important;
870
927
  }
871
928
 
@@ -873,7 +930,8 @@
873
930
  color: var(--bgl-gray-20) !important;
874
931
  }
875
932
 
876
- .m_bg-input-pink input {
933
+ .m_bg-input-pink input,
934
+ .m_bg-input-pink .selectinput-btn {
877
935
  background: var(--bgl-pink) !important;
878
936
  }
879
937
 
@@ -881,7 +939,8 @@
881
939
  color: var(--bgl-pink) !important;
882
940
  }
883
941
 
884
- .m_bg-input-red input {
942
+ .m_bg-input-red input,
943
+ .m_bg-input-red .selectinput-btn {
885
944
  background: var(--bgl-red) !important;
886
945
  }
887
946
 
@@ -889,7 +948,8 @@
889
948
  color: var(--bgl-red) !important;
890
949
  }
891
950
 
892
- .m_bg-input-red-tint input {
951
+ .m_bg-input-red-tint input,
952
+ .m_bg-input-red-tint .selectinput-btn {
893
953
  background: var(--bgl-red-tint) !important;
894
954
  }
895
955
 
@@ -897,7 +957,8 @@
897
957
  color: var(--bgl-red-tint) !important;
898
958
  }
899
959
 
900
- .m_bg-input-yellow input {
960
+ .m_bg-input-yellow input,
961
+ .m_bg-input-yellow .selectinput-btn {
901
962
  background: var(--bgl-yellow) !important;
902
963
  }
903
964
 
@@ -905,7 +966,8 @@
905
966
  color: var(--bgl-yellow) !important;
906
967
  }
907
968
 
908
- .m_bg-input-yellow-light input {
969
+ .m_bg-input-yellow-light input,
970
+ .m_bg-input-yellow-light .selectinput-btn {
909
971
  background: var(--bgl-yellow-light) !important;
910
972
  }
911
973
 
@@ -913,7 +975,8 @@
913
975
  color: var(--bgl-yellow-light) !important;
914
976
  }
915
977
 
916
- .m_bg-input-green input {
978
+ .m_bg-input-green input,
979
+ .m_bg-input-green .selectinput-btn {
917
980
  background: var(--bgl-green) !important;
918
981
  }
919
982
 
@@ -921,7 +984,8 @@
921
984
  color: var(--bgl-green) !important;
922
985
  }
923
986
 
924
- .m_bg-input-transparent input {
987
+ .m_bg-input-transparent input,
988
+ .m_bg-input-transparent .selectinput-btn {
925
989
  background: transparent !important;
926
990
  }
927
991
 
@@ -960,6 +1024,10 @@
960
1024
  border-inline-end: 1px solid var(--border-color)
961
1025
  }
962
1026
 
1027
+ .m_border-none {
1028
+ border: none !important
1029
+ }
1030
+
963
1031
  .m_border-inner-bottom>* {
964
1032
  border-bottom: 1px solid var(--border-color)
965
1033
  }
@@ -976,6 +1044,11 @@
976
1044
  border-inline-end: 1px solid var(--border-color)
977
1045
  }
978
1046
 
1047
+ .m_border-inner-none>* {
1048
+ border: none !important
1049
+ }
1050
+
1051
+
979
1052
  .m_border-bottom-none {
980
1053
  border-bottom: none !important
981
1054
  }
@@ -1007,4 +1080,12 @@
1007
1080
  .m_border-inner-end-none>* {
1008
1081
  border-inline-end: none !important
1009
1082
  }
1083
+
1084
+ .m_user-select-none {
1085
+ user-select: none;
1086
+ }
1087
+
1088
+ .m_user-select-all {
1089
+ user-select: all;
1090
+ }
1010
1091
  }
package/src/styles/inputs.css CHANGED
@@ -9,7 +9,7 @@ select {
9
9
  .bagel-input-error input,
10
10
  .bagel-input-error button,
11
11
  .bagel-input-error textarea {
12
- outline: 1px solid var(--bgl-red);
12
+ outline: 1px solid var(--bgl-red);
13
13
  }
14
14
 
15
15
  .bagel-input {
@@ -102,22 +102,34 @@ select {
102
102
  }
103
103
 
104
104
 
105
- .bagel-input input::-webkit-input-placeholder, .bagel-input textarea::-webkit-input-placeholder, .bagel-input select::-webkit-input-placeholder, .custom-select .input::-webkit-input-placeholder {
105
+ .bagel-input input::-webkit-input-placeholder,
106
+ .bagel-input textarea::-webkit-input-placeholder,
107
+ .bagel-input select::-webkit-input-placeholder,
108
+ .custom-select .input::-webkit-input-placeholder {
106
109
  color: var(--placeholder-color);
107
110
  }
108
111
 
109
112
 
110
- .bagel-input input::-moz-placeholder, .bagel-input textarea::-moz-placeholder, .bagel-input select::-moz-placeholder, .custom-select .input::-moz-placeholder {
113
+ .bagel-input input::-moz-placeholder,
114
+ .bagel-input textarea::-moz-placeholder,
115
+ .bagel-input select::-moz-placeholder,
116
+ .custom-select .input::-moz-placeholder {
111
117
  color: var(--placeholder-color);
112
118
  }
113
119
 
114
120
 
115
- .bagel-input input:-ms-input-placeholder, .bagel-input textarea:-ms-input-placeholder, .bagel-input select:-ms-input-placeholder, .custom-select .input:-ms-input-placeholder {
121
+ .bagel-input input:-ms-input-placeholder,
122
+ .bagel-input textarea:-ms-input-placeholder,
123
+ .bagel-input select:-ms-input-placeholder,
124
+ .custom-select .input:-ms-input-placeholder {
116
125
  color: var(--placeholder-color);
117
126
  }
118
127
 
119
128
 
120
- .bagel-input input::-ms-input-placeholder, .bagel-input textarea::-ms-input-placeholder, .bagel-input select::-ms-input-placeholder, .custom-select .input::-ms-input-placeholder {
129
+ .bagel-input input::-ms-input-placeholder,
130
+ .bagel-input textarea::-ms-input-placeholder,
131
+ .bagel-input select::-ms-input-placeholder,
132
+ .custom-select .input::-ms-input-placeholder {
121
133
  color: var(--placeholder-color);
122
134
  }
123
135
 
@@ -137,12 +149,12 @@ select {
137
149
 
138
150
  .bagel-input.search-wrap input {
139
151
  -webkit-padding-end: 2rem;
140
- padding-inline-end: 2rem;
152
+ padding-inline-end: 2rem;
141
153
  }
142
154
 
143
155
  .bagel-input.search-wrap .bgl_icon-font {
144
156
  -webkit-margin-start: -1.75rem;
145
- margin-inline-start: -1.75rem;
157
+ margin-inline-start: -1.75rem;
146
158
  }
147
159
 
148
160
  .bagel-input select {
@@ -219,8 +231,7 @@ select {
219
231
  width: 100%;
220
232
  }
221
233
 
222
- .input.active
223
- .bagel-input input:focus-visible,
234
+ .input.active .bagel-input input:focus-visible,
224
235
  .bagel-input select:focus-visible,
225
236
  .bagel-input textarea:focus-visible,
226
237
  .bagel-input button:focus-visible,
@@ -228,6 +239,7 @@ select {
228
239
  outline-color: var(--bgl-primary-tint);
229
240
  box-shadow: inset 0 0 10px #00000012;
230
241
  }
242
+
231
243
  .bagel-input input:focus,
232
244
  .bagel-input select:focus,
233
245
  .bagel-input textarea:focus,
@@ -307,8 +319,4 @@ select {
307
319
  .bagel-input.wider input {
308
320
  min-width: 120px;
309
321
  }
310
-
311
- .bagel-input label {
312
- line-height: 1.2;
313
- }
314
322
  }