@fewangsit/wangsvue-presets 1.0.84-alpha.0 → 1.0.84-alpha.1

package/fixedasset/tabmenu/index.d.ts

@@ -17,31 +17,79 @@ declare namespace _default {
         state: any;
     }): {
         class: (string | {
+            'rounded-xl py-1 px-3': boolean;
+            'p-2 pb-1.5 pt-0.5 !h-6': boolean;
+            'ml-1': boolean;
+            'border-b-2'?: undefined;
+            'border-primary-500'?: undefined;
+            'border-grayscale-400'?: undefined;
+            'text-grayscale-600'?: undefined;
+            'text-primary-500'?: undefined;
+            'bg-primary-50 text-primary-500'?: undefined;
+            'bg-grayscale-200 text-grayscale-800'?: undefined;
+            'bg-transparent '?: undefined;
+            'focus-visible:border-primary-200 focus-visible:text-primary-400'?: undefined;
+            'pointer-events-none'?: undefined;
+            'opacity-60'?: undefined;
+        } | {
+            'border-b-2': boolean;
+            'rounded-xl py-1 px-3'?: undefined;
+            'p-2 pb-1.5 pt-0.5 !h-6'?: undefined;
+            'ml-1'?: undefined;
+            'border-primary-500'?: undefined;
+            'border-grayscale-400'?: undefined;
+            'text-grayscale-600'?: undefined;
+            'text-primary-500'?: undefined;
+            'bg-primary-50 text-primary-500'?: undefined;
+            'bg-grayscale-200 text-grayscale-800'?: undefined;
+            'bg-transparent '?: undefined;
+            'focus-visible:border-primary-200 focus-visible:text-primary-400'?: undefined;
+            'pointer-events-none'?: undefined;
+            'opacity-60'?: undefined;
+        } | {
+            'border-primary-500': any;
+            'border-grayscale-400': boolean;
+            'text-grayscale-600': boolean;
+            'text-primary-500': any;
+            'bg-primary-50 text-primary-500': any;
+            'bg-grayscale-200 text-grayscale-800': boolean;
             'bg-transparent ': boolean;
-            'text-grayscale-900': boolean;
-            'border-primary-400': boolean;
-            'border-primary-100': boolean;
-            'text-primary-500': boolean;
+            'rounded-xl py-1 px-3'?: undefined;
+            'p-2 pb-1.5 pt-0.5 !h-6'?: undefined;
+            'ml-1'?: undefined;
+            'border-b-2'?: undefined;
             'focus-visible:border-primary-200 focus-visible:text-primary-400'?: undefined;
             'pointer-events-none'?: undefined;
             'opacity-60'?: undefined;
         } | {
             'focus-visible:border-primary-200 focus-visible:text-primary-400': boolean;
-            'bg-transparent '?: undefined;
-            'text-grayscale-900'?: undefined;
-            'border-primary-400'?: undefined;
-            'border-primary-100'?: undefined;
+            'rounded-xl py-1 px-3'?: undefined;
+            'p-2 pb-1.5 pt-0.5 !h-6'?: undefined;
+            'ml-1'?: undefined;
+            'border-b-2'?: undefined;
+            'border-primary-500'?: undefined;
+            'border-grayscale-400'?: undefined;
+            'text-grayscale-600'?: undefined;
             'text-primary-500'?: undefined;
+            'bg-primary-50 text-primary-500'?: undefined;
+            'bg-grayscale-200 text-grayscale-800'?: undefined;
+            'bg-transparent '?: undefined;
             'pointer-events-none'?: undefined;
             'opacity-60'?: undefined;
         } | {
             'pointer-events-none': any;
             'opacity-60': any;
-            'bg-transparent '?: undefined;
-            'text-grayscale-900'?: undefined;
-            'border-primary-400'?: undefined;
-            'border-primary-100'?: undefined;
+            'rounded-xl py-1 px-3'?: undefined;
+            'p-2 pb-1.5 pt-0.5 !h-6'?: undefined;
+            'ml-1'?: undefined;
+            'border-b-2'?: undefined;
+            'border-primary-500'?: undefined;
+            'border-grayscale-400'?: undefined;
+            'text-grayscale-600'?: undefined;
             'text-primary-500'?: undefined;
+            'bg-primary-50 text-primary-500'?: undefined;
+            'bg-grayscale-200 text-grayscale-800'?: undefined;
+            'bg-transparent '?: undefined;
             'focus-visible:border-primary-200 focus-visible:text-primary-400'?: undefined;
         })[];
     };

package/fixedasset/tabmenu/index.js

@@ -9,7 +9,6 @@ exports.default = {
         class: [
             // Flexbox
             'flex flex-1',
-            // Size
             // Spacing
             'list-none',
             'p-0 m-0',
@@ -27,28 +26,34 @@ exports.default = {
             class: [
                 'relative',
                 // Font
-                'font-normal',
-                'text-xs',
+                'font-medium',
+                'text-xs leading-4 tracking-[0.02em]',
                 // Flexbox and Alignment
                 'flex items-center',
                 // Spacing
-                'p-2 pb-1.5 pt-0.5 !h-6',
+                {
+                    'rounded-xl py-1 px-3': context.type === 'pill',
+                    'p-2 pb-1.5 pt-0.5 !h-6': context.type !== 'pill',
+                    'ml-1': context.type === 'pill' && context.index !== 0,
+                },
                 // Shape
-                'border-b-2',
+                {
+                    'border-b-2': context.type !== 'pill',
+                },
                 // Colors and Conditions
                 {
-                    'bg-transparent ': state.d_activeIndex !== context.index,
-                    'text-grayscale-900': state.d_activeIndex !== context.index,
-                    'border-primary-400': state.d_activeIndex === context.index,
-                    'border-primary-100': state.d_activeIndex !== context.index,
-                    'text-primary-500': state.d_activeIndex === context.index,
+                    'border-primary-500': state.active,
+                    'border-grayscale-400': !state.active,
+                    'text-grayscale-600': !state.active,
+                    'text-primary-500': state.active,
+                    'bg-primary-50 text-primary-500': context.type === 'pill' && state.active,
+                    'bg-grayscale-200 text-grayscale-800': context.type === 'pill' && !state.active,
+                    'bg-transparent ': context.type !== 'pill' && !state.active,
                 },
                 // States
-                'hover:bg-primary-50',
                 'focus-visible:outline-none focus-visible:outline-offset-0',
-                'focus-visible:bg-primary-50',
                 {
-                    'focus-visible:border-primary-200 focus-visible:text-primary-400': state.d_activeIndex !== context.index,
+                    'focus-visible:border-primary-200 focus-visible:text-primary-400': !state.active,
                 },
                 // Disabled States
                 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fewangsit/wangsvue-presets",
-  "version": "1.0.84-alpha.0",
+  "version": "1.0.84-alpha.1",
   "author": "Wangsit FE Developer",
   "description": "Wangsit VueJS Component Library Presets",
   "main": "index.js",

package/wangsvue/style.css

@@ -1362,6 +1362,10 @@
   height: 1.5rem !important;
 }
 
+.\!h-\[10px\]{
+  height: 10px !important;
+}
+
 .\!h-\[11px\]{
   height: 11px !important;
 }
@@ -1443,6 +1447,10 @@
   height: 2rem;
 }
 
+.h-\[10px\]{
+  height: 10px;
+}
+
 .h-\[18px\]{
   height: 18px;
 }
@@ -1573,6 +1581,10 @@
   width: 1.5rem !important;
 }
 
+.\!w-\[10px\]{
+  width: 10px !important;
+}
+
 .\!w-\[11px\]{
   width: 11px !important;
 }
@@ -1669,6 +1681,10 @@
   width: 1%;
 }
 
+.w-\[10px\]{
+  width: 10px;
+}
+
 .w-\[18px\]{
   width: 18px;
 }
@@ -2438,6 +2454,10 @@
   border-radius: 0.125rem;
 }
 
+.rounded-xl{
+  border-radius: 0.75rem;
+}
+
 .rounded-b-lg{
   border-bottom-right-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
@@ -2679,6 +2699,11 @@
   border-color: rgb(243 244 246 / var(--tw-border-opacity));
 }
 
+.border-grayscale-400{
+  --tw-border-opacity: 1;
+  border-color: rgb(203 204 205 / var(--tw-border-opacity));
+}
+
 .border-grayscale-900{
   --tw-border-opacity: 1;
   border-color: rgb(38 38 39 / var(--tw-border-opacity));
@@ -2776,6 +2801,11 @@
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
+.bg-danger-100{
+  --tw-bg-opacity: 1;
+  background-color: rgb(231 195 182 / var(--tw-bg-opacity));
+}
+
 .bg-danger-200{
   --tw-bg-opacity: 1;
   background-color: rgb(219 165 146 / var(--tw-bg-opacity));
@@ -2824,6 +2854,16 @@
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
 }
 
+.bg-grayscale-200{
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 230 230 / var(--tw-bg-opacity));
+}
+
+.bg-grayscale-300{
+  --tw-bg-opacity: 1;
+  background-color: rgb(216 217 217 / var(--tw-bg-opacity));
+}
+
 .bg-grayscale-50{
   --tw-bg-opacity: 1;
   background-color: rgb(247 247 247 / var(--tw-bg-opacity));
@@ -2919,6 +2959,10 @@
   background-color: rgb(159 124 60 / var(--tw-bg-opacity));
 }
 
+.bg-primary-500\/20{
+  background-color: rgb(159 124 60 / 0.2);
+}
+
 .bg-primary-600{
   --tw-bg-opacity: 1;
   background-color: rgb(133 103 50 / var(--tw-bg-opacity));
@@ -3074,10 +3118,19 @@
   padding: 2px;
 }
 
+.p-\[5px\]{
+  padding: 5px;
+}
+
 .p-\[7px\]{
   padding: 7px;
 }
 
+.\!px-0{
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
+
 .\!px-1\.5{
   padding-left: 0.375rem !important;
   padding-right: 0.375rem !important;
@@ -3093,6 +3146,11 @@
   padding-right: 1.5rem !important;
 }
 
+.\!py-0{
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
+}
+
 .\!py-1{
   padding-top: 0.25rem !important;
   padding-bottom: 0.25rem !important;
@@ -3430,6 +3488,10 @@
   font-size: 14px;
 }
 
+.text-\[9px\]{
+  font-size: 9px;
+}
+
 .text-base{
   font-size: 1rem;
   line-height: 1.5rem;
@@ -3491,6 +3553,10 @@
   line-height: 1.25rem !important;
 }
 
+.leading-3{
+  line-height: .75rem;
+}
+
 .leading-4{
   line-height: 1rem;
 }
@@ -3650,6 +3716,11 @@
   color: rgb(183 75 36 / var(--tw-text-opacity));
 }
 
+.text-danger-600{
+  --tw-text-opacity: 1;
+  color: rgb(153 63 30 / var(--tw-text-opacity));
+}
+
 .text-danger-700{
   --tw-text-opacity: 1;
   color: rgb(122 50 24 / var(--tw-text-opacity));
@@ -3685,6 +3756,11 @@
   color: rgb(16 15 21 / var(--tw-text-opacity));
 }
 
+.text-grayscale-600{
+  --tw-text-opacity: 1;
+  color: rgb(151 153 155 / var(--tw-text-opacity));
+}
+
 .text-grayscale-800{
   --tw-text-opacity: 1;
   color: rgb(75 77 78 / var(--tw-text-opacity));
@@ -3785,6 +3861,10 @@
   text-decoration-line: none;
 }
 
+.caret-primary-700{
+  caret-color: #785930;
+}
+
 .opacity-0{
   opacity: 0;
 }
@@ -3979,6 +4059,11 @@
   --tw-ring-color: rgb(108 104 141 / var(--tw-ring-opacity));
 }
 
+.ring-general-500{
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(78 75 102 / var(--tw-ring-opacity));
+}
+
 .ring-gray-500{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
@@ -4768,6 +4853,11 @@ h6,
   --tw-ring-color: rgb(189 165 82 / var(--tw-ring-opacity));
 }
 
+.focus-within\:ring-primary-500:focus-within{
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(159 124 60 / var(--tw-ring-opacity));
+}
+
 .hover\:mx-6:hover{
   margin-left: 1.5rem;
   margin-right: 1.5rem;
@@ -4815,6 +4905,10 @@ h6,
   background-color: rgb(248 247 238 / var(--tw-bg-opacity)) !important;
 }
 
+.hover\:\!bg-primary-500\/90:hover{
+  background-color: rgb(159 124 60 / 0.9) !important;
+}
+
 .hover\:\!bg-success-500\/90:hover{
   background-color: rgb(0 147 132 / 0.9) !important;
 }
@@ -4859,6 +4953,11 @@ h6,
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-grayscale-300:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(216 217 217 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-grayscale-50:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(247 247 247 / var(--tw-bg-opacity));
@@ -4935,6 +5034,14 @@ h6,
   background-color: rgb(159 124 60 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-primary-500\/20:hover{
+  background-color: rgb(159 124 60 / 0.2);
+}
+
+.hover\:bg-primary-500\/\[8\%\]:hover{
+  background-color: rgb(159 124 60 / 8%);
+}
+
 .hover\:bg-primary-600:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(133 103 50 / var(--tw-bg-opacity));
@@ -5307,6 +5414,14 @@ h6,
   background-color: rgb(189 165 82 / 12%);
 }
 
+.active\:bg-primary-500\/90:active{
+  background-color: rgb(159 124 60 / 0.9);
+}
+
+.active\:bg-primary-500\/\[12\%\]:active{
+  background-color: rgb(159 124 60 / 12%);
+}
+
 .active\:bg-success-500\/90:active{
   background-color: rgb(0 147 132 / 0.9);
 }
@@ -5708,10 +5823,18 @@ h6,
   background-color: transparent !important;
 }
 
+.\[\&_i\]\:h-4 i{
+  height: 1rem;
+}
+
 .\[\&_i\]\:h-5 i{
   height: 1.25rem;
 }
 
+.\[\&_i\]\:w-4 i{
+  width: 1rem;
+}
+
 .\[\&_i\]\:w-5 i{
   width: 1.25rem;
 }