@fewangsit/wangsvue-presets 1.0.85-alpha.4 → 1.0.85-alpha.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (56) hide show
  1. package/fixedasset/badge/index.js +1 -1
  2. package/fixedasset/buttondownload/index.d.ts +2 -1
  3. package/fixedasset/buttondownload/index.js +6 -2
  4. package/fixedasset/buttonfilter/index.d.ts +13 -4
  5. package/fixedasset/buttonfilter/index.js +20 -7
  6. package/fixedasset/buttonradio/index.d.ts +23 -21
  7. package/fixedasset/buttonradio/index.js +21 -31
  8. package/fixedasset/buttonsearch/index.js +1 -1
  9. package/fixedasset/card/index.js +2 -2
  10. package/fixedasset/datatable/index.js +1 -0
  11. package/fixedasset/dropdown/index.d.ts +56 -39
  12. package/fixedasset/dropdown/index.js +24 -28
  13. package/fixedasset/filtercontainer/index.d.ts +7 -0
  14. package/fixedasset/filtercontainer/index.js +10 -0
  15. package/fixedasset/form/index.js +1 -1
  16. package/fixedasset/global.js +1 -1
  17. package/fixedasset/index.d.ts +4 -2
  18. package/fixedasset/index.js +94 -92
  19. package/fixedasset/index.system.js +2 -2
  20. package/fixedasset/inputcurrency/index.js +1 -1
  21. package/fixedasset/inputnumber/index.d.ts +25 -6
  22. package/fixedasset/inputnumber/index.js +36 -4
  23. package/fixedasset/inputphonenumber/index.d.ts +22 -12
  24. package/fixedasset/inputphonenumber/index.js +20 -7
  25. package/fixedasset/multiselect/index.d.ts +80 -44
  26. package/fixedasset/multiselect/index.js +50 -70
  27. package/fixedasset/style.css +153 -45
  28. package/fixedasset/textarea/index.js +3 -2
  29. package/fixedasset/toggleswitch/index.d.ts +100 -0
  30. package/{wangsvue/inputswitch → fixedasset/toggleswitch}/index.js +44 -17
  31. package/package.json +1 -1
  32. package/wangsvue/buttondownload/index.d.ts +1 -0
  33. package/wangsvue/buttondownload/index.js +1 -0
  34. package/wangsvue/buttonfilter/index.d.ts +3 -2
  35. package/wangsvue/buttonfilter/index.js +5 -4
  36. package/wangsvue/buttonradio/index.d.ts +24 -28
  37. package/wangsvue/buttonradio/index.js +20 -33
  38. package/wangsvue/datatable/index.js +1 -0
  39. package/wangsvue/dropdown/index.d.ts +33 -0
  40. package/wangsvue/dropdown/index.js +15 -6
  41. package/wangsvue/filtercontainer/index.d.ts +7 -0
  42. package/wangsvue/filtercontainer/index.js +10 -0
  43. package/wangsvue/index.d.ts +4 -2
  44. package/wangsvue/index.js +94 -92
  45. package/wangsvue/index.system.js +2 -2
  46. package/wangsvue/inputnumber/index.d.ts +25 -6
  47. package/wangsvue/inputnumber/index.js +36 -4
  48. package/wangsvue/inputphonenumber/index.d.ts +22 -12
  49. package/wangsvue/inputphonenumber/index.js +17 -5
  50. package/wangsvue/multiselect/index.d.ts +52 -4
  51. package/wangsvue/multiselect/index.js +28 -35
  52. package/wangsvue/style.css +158 -38
  53. package/wangsvue/toggleswitch/index.d.ts +105 -0
  54. package/{fixedasset/inputswitch → wangsvue/toggleswitch}/index.js +45 -17
  55. package/fixedasset/inputswitch/index.d.ts +0 -67
  56. package/wangsvue/inputswitch/index.d.ts +0 -67
@@ -964,6 +964,10 @@
964
964
  left: 0px;
965
965
  }
966
966
 
967
+ .left-0\.5{
968
+ left: 0.125rem;
969
+ }
970
+
967
971
  .left-2{
968
972
  left: 0.5rem;
969
973
  }
@@ -1473,6 +1477,10 @@
1473
1477
  height: 21px;
1474
1478
  }
1475
1479
 
1480
+ .h-\[26px\]{
1481
+ height: 26px;
1482
+ }
1483
+
1476
1484
  .h-\[2rem\]{
1477
1485
  height: 2rem;
1478
1486
  }
@@ -1777,6 +1785,14 @@
1777
1785
  min-width: 272px !important;
1778
1786
  }
1779
1787
 
1788
+ .min-w-0{
1789
+ min-width: 0px;
1790
+ }
1791
+
1792
+ .min-w-4{
1793
+ min-width: 1rem;
1794
+ }
1795
+
1780
1796
  .min-w-52{
1781
1797
  min-width: 13rem;
1782
1798
  }
@@ -1977,11 +1993,6 @@
1977
1993
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1978
1994
  }
1979
1995
 
1980
- .translate-x-3\.5{
1981
- --tw-translate-x: 0.875rem;
1982
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1983
- }
1984
-
1985
1996
  .translate-x-full{
1986
1997
  --tw-translate-x: 100%;
1987
1998
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1997,6 +2008,11 @@
1997
2008
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1998
2009
  }
1999
2010
 
2011
+ .translate-y-1\/2{
2012
+ --tw-translate-y: 50%;
2013
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2014
+ }
2015
+
2000
2016
  .translate-y-2\/4{
2001
2017
  --tw-translate-y: 50%;
2002
2018
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2258,6 +2274,10 @@
2258
2274
  justify-content: space-between;
2259
2275
  }
2260
2276
 
2277
+ .justify-items-start{
2278
+ justify-items: start;
2279
+ }
2280
+
2261
2281
  .gap-0\.5{
2262
2282
  gap: 0.125rem;
2263
2283
  }
@@ -2278,6 +2298,10 @@
2278
2298
  gap: 0.75rem;
2279
2299
  }
2280
2300
 
2301
+ .gap-4{
2302
+ gap: 1rem;
2303
+ }
2304
+
2281
2305
  .gap-6{
2282
2306
  gap: 1.5rem;
2283
2307
  }
@@ -2308,6 +2332,11 @@
2308
2332
  column-gap: 0.125rem;
2309
2333
  }
2310
2334
 
2335
+ .gap-x-3{
2336
+ -moz-column-gap: 0.75rem;
2337
+ column-gap: 0.75rem;
2338
+ }
2339
+
2311
2340
  .gap-x-6{
2312
2341
  -moz-column-gap: 1.5rem;
2313
2342
  column-gap: 1.5rem;
@@ -2460,6 +2489,10 @@
2460
2489
  border-radius: 60px;
2461
2490
  }
2462
2491
 
2492
+ .rounded-\[6px\]{
2493
+ border-radius: 6px;
2494
+ }
2495
+
2463
2496
  .rounded-\[7px\]{
2464
2497
  border-radius: 7px;
2465
2498
  }
@@ -2709,11 +2742,6 @@
2709
2742
  border-style: none;
2710
2743
  }
2711
2744
 
2712
- .\!border-danger-500{
2713
- --tw-border-opacity: 1 !important;
2714
- border-color: rgb(255 0 34 / var(--tw-border-opacity)) !important;
2715
- }
2716
-
2717
2745
  .\!border-general-100{
2718
2746
  --tw-border-opacity: 1 !important;
2719
2747
  border-color: rgb(218 217 227 / var(--tw-border-opacity)) !important;
@@ -2798,6 +2826,11 @@
2798
2826
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
2799
2827
  }
2800
2828
 
2829
+ .\!bg-danger-500{
2830
+ --tw-bg-opacity: 1 !important;
2831
+ background-color: rgb(255 0 34 / var(--tw-bg-opacity)) !important;
2832
+ }
2833
+
2801
2834
  .\!bg-general-100{
2802
2835
  --tw-bg-opacity: 1 !important;
2803
2836
  background-color: rgb(218 217 227 / var(--tw-bg-opacity)) !important;
@@ -2838,6 +2871,11 @@
2838
2871
  background-color: rgb(0 99 247 / var(--tw-bg-opacity)) !important;
2839
2872
  }
2840
2873
 
2874
+ .\!bg-success-500{
2875
+ --tw-bg-opacity: 1 !important;
2876
+ background-color: rgb(0 164 85 / var(--tw-bg-opacity)) !important;
2877
+ }
2878
+
2841
2879
  .\!bg-transparent{
2842
2880
  background-color: transparent !important;
2843
2881
  }
@@ -2914,11 +2952,21 @@
2914
2952
  background-color: rgb(235 234 240 / var(--tw-bg-opacity));
2915
2953
  }
2916
2954
 
2955
+ .bg-general-500{
2956
+ --tw-bg-opacity: 1;
2957
+ background-color: rgb(78 75 102 / var(--tw-bg-opacity));
2958
+ }
2959
+
2917
2960
  .bg-gray-500{
2918
2961
  --tw-bg-opacity: 1;
2919
2962
  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
2920
2963
  }
2921
2964
 
2965
+ .bg-grayscale-100{
2966
+ --tw-bg-opacity: 1;
2967
+ background-color: rgb(242 242 242 / var(--tw-bg-opacity));
2968
+ }
2969
+
2922
2970
  .bg-grayscale-200{
2923
2971
  --tw-bg-opacity: 1;
2924
2972
  background-color: rgb(229 230 230 / var(--tw-bg-opacity));
@@ -3101,6 +3149,10 @@
3101
3149
  --tw-bg-opacity: 0.9;
3102
3150
  }
3103
3151
 
3152
+ .bg-none{
3153
+ background-image: none;
3154
+ }
3155
+
3104
3156
  .fill-none{
3105
3157
  fill: none;
3106
3158
  }
@@ -3531,6 +3583,15 @@
3531
3583
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
3532
3584
  }
3533
3585
 
3586
+ .\!text-\[10px\]{
3587
+ font-size: 10px !important;
3588
+ }
3589
+
3590
+ .\!text-base{
3591
+ font-size: 1rem !important;
3592
+ line-height: 1.5rem !important;
3593
+ }
3594
+
3534
3595
  .\!text-xs{
3535
3596
  font-size: 0.75rem !important;
3536
3597
  line-height: 1rem !important;
@@ -3662,10 +3723,6 @@
3662
3723
  line-height: 1.125rem;
3663
3724
  }
3664
3725
 
3665
- .leading-\[12px\]{
3666
- line-height: 12px;
3667
- }
3668
-
3669
3726
  .leading-\[133\.333\%\]{
3670
3727
  line-height: 133.333%;
3671
3728
  }
@@ -3682,6 +3739,10 @@
3682
3739
  line-height: 19.12px;
3683
3740
  }
3684
3741
 
3742
+ .leading-\[22px\]{
3743
+ line-height: 22px;
3744
+ }
3745
+
3685
3746
  .leading-\[2rem\]{
3686
3747
  line-height: 2rem;
3687
3748
  }
@@ -3706,10 +3767,6 @@
3706
3767
  letter-spacing: 0.02em;
3707
3768
  }
3708
3769
 
3709
- .tracking-\[0\.03em\]{
3710
- letter-spacing: 0.03em;
3711
- }
3712
-
3713
3770
  .tracking-\[0\.2488px\]{
3714
3771
  letter-spacing: 0.2488px;
3715
3772
  }
@@ -4147,6 +4204,10 @@
4147
4204
  --tw-ring-color: rgb(0 99 247 / var(--tw-ring-opacity)) !important;
4148
4205
  }
4149
4206
 
4207
+ .\!ring-transparent{
4208
+ --tw-ring-color: transparent !important;
4209
+ }
4210
+
4150
4211
  .ring-blue-400\/50{
4151
4212
  --tw-ring-color: rgb(96 165 250 / 0.5);
4152
4213
  }
@@ -4166,11 +4227,21 @@
4166
4227
  --tw-ring-color: rgb(255 0 34 / var(--tw-ring-opacity));
4167
4228
  }
4168
4229
 
4230
+ .ring-general-100{
4231
+ --tw-ring-opacity: 1;
4232
+ --tw-ring-color: rgb(218 217 227 / var(--tw-ring-opacity));
4233
+ }
4234
+
4169
4235
  .ring-general-200{
4170
4236
  --tw-ring-opacity: 1;
4171
4237
  --tw-ring-color: rgb(181 179 199 / var(--tw-ring-opacity));
4172
4238
  }
4173
4239
 
4240
+ .ring-general-300{
4241
+ --tw-ring-opacity: 1;
4242
+ --tw-ring-color: rgb(144 140 171 / var(--tw-ring-opacity));
4243
+ }
4244
+
4174
4245
  .ring-general-400{
4175
4246
  --tw-ring-opacity: 1;
4176
4247
  --tw-ring-color: rgb(108 104 141 / var(--tw-ring-opacity));
@@ -4221,6 +4292,11 @@
4221
4292
  --tw-ring-color: rgb(204 224 255 / var(--tw-ring-opacity));
4222
4293
  }
4223
4294
 
4295
+ .ring-primary-200{
4296
+ --tw-ring-opacity: 1;
4297
+ --tw-ring-color: rgb(148 191 255 / var(--tw-ring-opacity));
4298
+ }
4299
+
4224
4300
  .ring-primary-400{
4225
4301
  --tw-ring-opacity: 1;
4226
4302
  --tw-ring-color: rgb(46 130 255 / var(--tw-ring-opacity));
@@ -4443,6 +4519,7 @@
4443
4519
 
4444
4520
  * {
4445
4521
  font-family: 'Manrope', sans-serif;
4522
+ scrollbar-width: thin;
4446
4523
  }
4447
4524
 
4448
4525
  .font-manrope {
@@ -4502,7 +4579,8 @@ h6,
4502
4579
  scrollbar-width: none;
4503
4580
  }
4504
4581
 
4505
- .scrollbar-w-thin {
4582
+ .scrollbar-w-thin,
4583
+ .p-virtualscroller {
4506
4584
  scrollbar-width: thin;
4507
4585
  }
4508
4586
 
@@ -4591,6 +4669,11 @@ h6,
4591
4669
  left: 0px;
4592
4670
  }
4593
4671
 
4672
+ .before\:left-0\.5::before{
4673
+ content: var(--tw-content);
4674
+ left: 0.125rem;
4675
+ }
4676
+
4594
4677
  .before\:left-1\/2::before{
4595
4678
  content: var(--tw-content);
4596
4679
  left: 50%;
@@ -4611,21 +4694,6 @@ h6,
4611
4694
  z-index: 50;
4612
4695
  }
4613
4696
 
4614
- .before\:-mt-\[6px\]::before{
4615
- content: var(--tw-content);
4616
- margin-top: -6px;
4617
- }
4618
-
4619
- .before\:ml-0::before{
4620
- content: var(--tw-content);
4621
- margin-left: 0px;
4622
- }
4623
-
4624
- .before\:ml-0\.5::before{
4625
- content: var(--tw-content);
4626
- margin-left: 0.125rem;
4627
- }
4628
-
4629
4697
  .before\:ml-4::before{
4630
4698
  content: var(--tw-content);
4631
4699
  margin-left: 1rem;
@@ -4677,15 +4745,15 @@ h6,
4677
4745
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
4678
4746
  }
4679
4747
 
4680
- .before\:translate-x-3::before{
4748
+ .before\:-translate-y-1\/2::before{
4681
4749
  content: var(--tw-content);
4682
- --tw-translate-x: 0.75rem;
4750
+ --tw-translate-y: -50%;
4683
4751
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
4684
4752
  }
4685
4753
 
4686
- .before\:translate-x-3\.5::before{
4754
+ .before\:translate-x-\[calc\(18px\)\]::before{
4687
4755
  content: var(--tw-content);
4688
- --tw-translate-x: 0.875rem;
4756
+ --tw-translate-x: calc(18px);
4689
4757
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
4690
4758
  }
4691
4759
 
@@ -4756,6 +4824,18 @@ h6,
4756
4824
  border-color: transparent;
4757
4825
  }
4758
4826
 
4827
+ .before\:\!bg-white::before{
4828
+ content: var(--tw-content);
4829
+ --tw-bg-opacity: 1 !important;
4830
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
4831
+ }
4832
+
4833
+ .before\:bg-general-100::before{
4834
+ content: var(--tw-content);
4835
+ --tw-bg-opacity: 1;
4836
+ background-color: rgb(218 217 227 / var(--tw-bg-opacity));
4837
+ }
4838
+
4759
4839
  .before\:bg-general-50::before{
4760
4840
  content: var(--tw-content);
4761
4841
  --tw-bg-opacity: 1;
@@ -4785,13 +4865,6 @@ h6,
4785
4865
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
4786
4866
  }
4787
4867
 
4788
- .before\:shadow::before{
4789
- content: var(--tw-content);
4790
- --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
4791
- --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
4792
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
4793
- }
4794
-
4795
4868
  .before\:shadow-xl::before{
4796
4869
  content: var(--tw-content);
4797
4870
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
@@ -5343,6 +5416,10 @@ h6,
5343
5416
  background-color: rgb(0 80 199 / var(--tw-bg-opacity));
5344
5417
  }
5345
5418
 
5419
+ .focus\:bg-none:focus{
5420
+ background-image: none;
5421
+ }
5422
+
5346
5423
  .focus\:px-2:focus{
5347
5424
  padding-left: 0.5rem;
5348
5425
  padding-right: 0.5rem;
@@ -5608,6 +5685,22 @@ h6,
5608
5685
  background-color: rgb(255 222 102 / var(--tw-bg-opacity)) !important;
5609
5686
  }
5610
5687
 
5688
+ .peer:focus-visible ~ .peer-focus-visible\:\!outline{
5689
+ outline-style: solid !important;
5690
+ }
5691
+
5692
+ .peer:focus-visible ~ .peer-focus-visible\:\!outline-offset-0{
5693
+ outline-offset: 0px !important;
5694
+ }
5695
+
5696
+ .peer:focus-visible ~ .peer-focus-visible\:\!outline-primary-400\/\[5\%\]{
5697
+ outline-color: rgb(46 130 255 / 5%) !important;
5698
+ }
5699
+
5700
+ .peer:focus-visible ~ .peer-focus-visible\:\!outline-primary-500\/\[5\%\]{
5701
+ outline-color: rgb(0 99 247 / 5%) !important;
5702
+ }
5703
+
5611
5704
  .peer:focus-visible ~ .peer-focus-visible\:ring-2{
5612
5705
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
5613
5706
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -5845,6 +5938,12 @@ h6,
5845
5938
  background-image: none;
5846
5939
  }
5847
5940
 
5941
+ .\[\&\:has\(\:focus\)\]\:ring-1:has(:focus){
5942
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
5943
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
5944
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
5945
+ }
5946
+
5848
5947
  .\[\&\:has\(\:focus\)\]\:\!ring-primary-400:has(:focus){
5849
5948
  --tw-ring-opacity: 1 !important;
5850
5949
  --tw-ring-color: rgb(46 130 255 / var(--tw-ring-opacity)) !important;
@@ -5860,6 +5959,11 @@ h6,
5860
5959
  --tw-ring-color: rgb(46 130 255 / var(--tw-ring-opacity));
5861
5960
  }
5862
5961
 
5962
+ .\[\&\:has\(\:focus\)\]\:ring-primary-500:has(:focus){
5963
+ --tw-ring-opacity: 1;
5964
+ --tw-ring-color: rgb(0 99 247 / var(--tw-ring-opacity));
5965
+ }
5966
+
5863
5967
  .\[\&\:has\(\:focus\)_\.inputgroupaddon\]\:\!ring-primary-400:has(:focus) .inputgroupaddon{
5864
5968
  --tw-ring-opacity: 1 !important;
5865
5969
  --tw-ring-color: rgb(46 130 255 / var(--tw-ring-opacity)) !important;
@@ -5896,6 +6000,10 @@ h6,
5896
6000
  background-color: rgb(46 130 255 / var(--tw-bg-opacity)) !important;
5897
6001
  }
5898
6002
 
6003
+ .\[\&\>\*\]\:w-full>*{
6004
+ width: 100%;
6005
+ }
6006
+
5899
6007
  .\[\&\>\[data-pc-name\=badge\]\]\:h-4>[data-pc-name=badge]{
5900
6008
  height: 1rem;
5901
6009
  }
@@ -16,7 +16,8 @@ exports.default = {
16
16
  return ({
17
17
  'class': __spreadArray(__spreadArray([
18
18
  // Font
19
- 'font-normal placeholder:text-general-200 placeholder:!font-normal text-xs',
19
+ 'font-medium text-xs tracking-[0.02em]',
20
+ 'placeholder:text-general-200 placeholder:!font-light',
20
21
  'w-full',
21
22
  {
22
23
  'resize-none': props.autoResize,
@@ -35,7 +36,7 @@ exports.default = {
35
36
  },
36
37
  // // States
37
38
  {
38
- 'bg-transparent text-general-800': !context.disabled,
39
+ 'bg-white text-general-800': !context.disabled,
39
40
  'bg-general-50 text-general-200': context.disabled,
40
41
  },
41
42
  'focus-visible:outline-none',
@@ -0,0 +1,100 @@
1
+ declare namespace _default {
2
+ function root({ props }: {
3
+ props: any;
4
+ }): {
5
+ class: (string | {
6
+ 'select-none pointer-events-none cursor-default': any;
7
+ })[];
8
+ };
9
+ function slider({ props }: {
10
+ props: any;
11
+ }): {
12
+ class: (string | {
13
+ 'before:transform before:translate-x-[calc(18px)]': boolean;
14
+ 'before:left-0.5'?: undefined;
15
+ ring?: undefined;
16
+ 'ring-[0.5px]'?: undefined;
17
+ 'before:bg-white'?: undefined;
18
+ 'before:bg-general-100'?: undefined;
19
+ 'bg-white ring-general-100'?: undefined;
20
+ 'bg-primary-500 ring-transparent'?: undefined;
21
+ 'bg-general-200 ring-transparent'?: undefined;
22
+ 'bg-general-200 ring-general-100'?: undefined;
23
+ '!bg-danger-500 before:!bg-white ring-transparent'?: undefined;
24
+ '!bg-success-500 before:!bg-white ring-transparent'?: undefined;
25
+ } | {
26
+ 'before:left-0.5': boolean;
27
+ 'before:transform before:translate-x-[calc(18px)]'?: undefined;
28
+ ring?: undefined;
29
+ 'ring-[0.5px]'?: undefined;
30
+ 'before:bg-white'?: undefined;
31
+ 'before:bg-general-100'?: undefined;
32
+ 'bg-white ring-general-100'?: undefined;
33
+ 'bg-primary-500 ring-transparent'?: undefined;
34
+ 'bg-general-200 ring-transparent'?: undefined;
35
+ 'bg-general-200 ring-general-100'?: undefined;
36
+ '!bg-danger-500 before:!bg-white ring-transparent'?: undefined;
37
+ '!bg-success-500 before:!bg-white ring-transparent'?: undefined;
38
+ } | {
39
+ ring: boolean;
40
+ 'ring-[0.5px]': boolean;
41
+ 'before:transform before:translate-x-[calc(18px)]'?: undefined;
42
+ 'before:left-0.5'?: undefined;
43
+ 'before:bg-white'?: undefined;
44
+ 'before:bg-general-100'?: undefined;
45
+ 'bg-white ring-general-100'?: undefined;
46
+ 'bg-primary-500 ring-transparent'?: undefined;
47
+ 'bg-general-200 ring-transparent'?: undefined;
48
+ 'bg-general-200 ring-general-100'?: undefined;
49
+ '!bg-danger-500 before:!bg-white ring-transparent'?: undefined;
50
+ '!bg-success-500 before:!bg-white ring-transparent'?: undefined;
51
+ } | {
52
+ 'before:bg-white': boolean;
53
+ 'before:bg-general-100': boolean;
54
+ 'bg-white ring-general-100': boolean;
55
+ 'bg-primary-500 ring-transparent': boolean;
56
+ 'bg-general-200 ring-transparent': any;
57
+ 'bg-general-200 ring-general-100': any;
58
+ 'before:transform before:translate-x-[calc(18px)]'?: undefined;
59
+ 'before:left-0.5'?: undefined;
60
+ ring?: undefined;
61
+ 'ring-[0.5px]'?: undefined;
62
+ '!bg-danger-500 before:!bg-white ring-transparent'?: undefined;
63
+ '!bg-success-500 before:!bg-white ring-transparent'?: undefined;
64
+ } | {
65
+ '!bg-danger-500 before:!bg-white ring-transparent': boolean;
66
+ '!bg-success-500 before:!bg-white ring-transparent': boolean;
67
+ 'before:transform before:translate-x-[calc(18px)]'?: undefined;
68
+ 'before:left-0.5'?: undefined;
69
+ ring?: undefined;
70
+ 'ring-[0.5px]'?: undefined;
71
+ 'before:bg-white'?: undefined;
72
+ 'before:bg-general-100'?: undefined;
73
+ 'bg-white ring-general-100'?: undefined;
74
+ 'bg-primary-500 ring-transparent'?: undefined;
75
+ 'bg-general-200 ring-transparent'?: undefined;
76
+ 'bg-general-200 ring-general-100'?: undefined;
77
+ })[];
78
+ };
79
+ function input({ props }: {
80
+ props: any;
81
+ }): {
82
+ class: (string | {
83
+ 'cursor-default': any;
84
+ 'cursor-pointer': boolean;
85
+ })[];
86
+ };
87
+ namespace label {
88
+ let _class: string[];
89
+ export { _class as class };
90
+ }
91
+ namespace labeltext {
92
+ let _class_1: string;
93
+ export { _class_1 as class };
94
+ }
95
+ namespace tooltipicon {
96
+ let _class_2: string;
97
+ export { _class_2 as class };
98
+ }
99
+ }
100
+ export default _default;
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ var isFirefoxBased = navigator.userAgent.includes('Firefox');
3
4
  exports.default = {
4
5
  root: function (_a) {
5
6
  var props = _a.props;
@@ -31,33 +32,40 @@ exports.default = {
31
32
  'rounded-[60px]',
32
33
  // Before:
33
34
  'before:absolute before:top-1/2',
34
- 'before:-mt-[6px] before:ml-0.5',
35
+ 'before:-translate-y-1/2',
35
36
  'before:h-3 before:w-3',
36
37
  'before:rounded-full',
37
38
  'before:duration-200 before:transition before:ease-in-out',
38
- 'before:shadow',
39
+ // Active position
39
40
  {
40
- 'before:bg-white before:bg-white': props.modelValue == props.trueValue,
41
- 'before:bg-primary-200': props.modelValue !== props.trueValue && !props.disabled,
42
- 'before:bg-general-50': props.modelValue !== props.trueValue && props.disabled,
41
+ 'before:transform before:translate-x-[calc(18px)]': props.modelValue == props.trueValue,
43
42
  },
43
+ // Inactive position
44
44
  {
45
- 'before:transform before:translate-x-3.5': props.modelValue == props.trueValue,
45
+ 'before:left-0.5': props.modelValue != props.trueValue,
46
46
  },
47
47
  // Colors
48
- 'border',
48
+ 'ring',
49
+ { 'ring': isFirefoxBased, 'ring-[0.5px]': !isFirefoxBased },
49
50
  {
50
- 'border-primary-200': props.modelValue !== props.trueValue && !props.disabled,
51
- 'border-transparent': props.modelValue == props.trueValue,
51
+ 'before:bg-white': props.modelValue == props.trueValue,
52
+ 'before:bg-general-100': props.modelValue !== props.trueValue,
53
+ // Inactive and Enabled
54
+ 'bg-white ring-general-100': props.modelValue !== props.trueValue && !props.disabled,
55
+ // Active and Enabled
56
+ 'bg-primary-500 ring-transparent': props.modelValue == props.trueValue && !props.disabled,
57
+ // Active and Disabled
58
+ 'bg-general-200 ring-transparent': props.modelValue == props.trueValue && props.disabled,
59
+ // Inactive and Disabled
60
+ 'bg-general-200 ring-general-100': props.modelValue !== props.trueValue && props.disabled,
52
61
  },
53
- {
54
- 'bg-white': props.modelValue !== props.trueValue && !props.disabled,
55
- 'bg-primary-500': props.modelValue == props.trueValue && !props.disabled,
56
- 'bg-primary-100': props.modelValue == props.trueValue && props.disabled,
57
- 'bg-general-100': props.modelValue !== props.trueValue && props.disabled,
62
+ // TriState colors
63
+ props.triState && {
64
+ '!bg-danger-500 before:!bg-white ring-transparent': props.modelValue == props.falseValue && !props.disabled,
65
+ '!bg-success-500 before:!bg-white ring-transparent': props.modelValue == props.trueValue && !props.disabled,
58
66
  },
59
67
  // States
60
- 'peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500',
68
+ 'peer-focus-visible:!outline peer-focus-visible:!outline-offset-0 peer-focus-visible:!outline-primary-500/[5%]',
61
69
  // Transition
62
70
  'transition-colors duration-200',
63
71
  // Misc
@@ -82,12 +90,10 @@ exports.default = {
82
90
  'm-0',
83
91
  // Shape
84
92
  'rounded',
85
- 'border',
86
93
  // Shape
87
94
  'opacity-0',
88
95
  'rounded-md',
89
96
  'outline-none',
90
- 'border-2 border-surface-300',
91
97
  // Misc
92
98
  'appearance-none',
93
99
  {
@@ -97,4 +103,25 @@ exports.default = {
97
103
  ],
98
104
  });
99
105
  },
106
+ label: {
107
+ class: [
108
+ 'relative',
109
+ 'w-max h-max items-start cursor-pointer',
110
+ 'flex items-start select-none text-xs tracking-[0.02em] font-medium',
111
+ 'text-general-800',
112
+ 'shrink-0',
113
+ // Alignment
114
+ 'inline-flex',
115
+ 'align-bottom',
116
+ // Transitions
117
+ 'transition-all',
118
+ 'duration-200',
119
+ ],
120
+ },
121
+ labeltext: {
122
+ class: 'ml-1 leading-4',
123
+ },
124
+ tooltipicon: {
125
+ class: 'text-primary-500 w-[10px] h-[10px]',
126
+ },
100
127
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fewangsit/wangsvue-presets",
3
- "version": "1.0.85-alpha.4",
3
+ "version": "1.0.85-alpha.6",
4
4
  "author": "Wangsit FE Developer",
5
5
  "description": "Wangsit VueJS Component Library Presets",
6
6
  "main": "index.js",
@@ -7,6 +7,7 @@ declare namespace _default {
7
7
  let icon: {
8
8
  class: string;
9
9
  'data-wv-section': string;
10
+ severity: string;
10
11
  };
11
12
  }
12
13
  export default _default;
@@ -9,5 +9,6 @@ exports.default = {
9
9
  icon: {
10
10
  'class': 'text-2xl',
11
11
  'data-wv-section': 'icon',
12
+ 'severity': 'secondary',
12
13
  },
13
14
  };
@@ -1,11 +1,12 @@
1
1
  declare namespace _default {
2
- let root: {
2
+ function root(): {
3
3
  class: string;
4
4
  'data-wv-name': string;
5
5
  'data-wv-section': string;
6
6
  };
7
- let icon: {
7
+ function icon(): {
8
8
  class: string;
9
+ severity: string;
9
10
  'data-wv-section': string;
10
11
  };
11
12
  }