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

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/fixedasset/tree/index.d.ts

@@ -3,18 +3,22 @@ declare namespace _default {
         let _class: string[];
         export { _class as class };
     }
-    export namespace wrapper {
+    export namespace loadingOverlay {
         let _class_1: string[];
         export { _class_1 as class };
     }
-    export namespace container {
+    export namespace wrapper {
         let _class_2: string[];
         export { _class_2 as class };
     }
-    export namespace node {
+    export namespace container {
         let _class_3: string[];
         export { _class_3 as class };
     }
+    export namespace node {
+        let _class_4: string[];
+        export { _class_4 as class };
+    }
     export function content({ context, props }: {
         context: any;
         props: any;
@@ -22,15 +26,33 @@ declare namespace _default {
         class: (string | {
             'bg-primary-50 !text-primary-500 [&_*]:text-primary-500': any;
             'hover:bg-primary-50'?: undefined;
+            '!pointer-events-none !opacity-60 !cursor-default'?: undefined;
             'cursor-pointer select-none'?: undefined;
+            'cursor-pointer'?: undefined;
         } | {
             'hover:bg-primary-50': boolean;
             'bg-primary-50 !text-primary-500 [&_*]:text-primary-500'?: undefined;
+            '!pointer-events-none !opacity-60 !cursor-default'?: undefined;
             'cursor-pointer select-none'?: undefined;
+            'cursor-pointer'?: undefined;
+        } | {
+            '!pointer-events-none !opacity-60 !cursor-default': any;
+            'bg-primary-50 !text-primary-500 [&_*]:text-primary-500'?: undefined;
+            'hover:bg-primary-50'?: undefined;
+            'cursor-pointer select-none'?: undefined;
+            'cursor-pointer'?: undefined;
         } | {
             'cursor-pointer select-none': boolean;
             'bg-primary-50 !text-primary-500 [&_*]:text-primary-500'?: undefined;
             'hover:bg-primary-50'?: undefined;
+            '!pointer-events-none !opacity-60 !cursor-default'?: undefined;
+            'cursor-pointer'?: undefined;
+        } | {
+            'cursor-pointer': boolean;
+            'bg-primary-50 !text-primary-500 [&_*]:text-primary-500'?: undefined;
+            'hover:bg-primary-50'?: undefined;
+            '!pointer-events-none !opacity-60 !cursor-default'?: undefined;
+            'cursor-pointer select-none'?: undefined;
         })[];
     };
     export function toggler({ context }: {
@@ -39,15 +61,16 @@ declare namespace _default {
         class: (string | {
             invisible: any;
         })[];
+        'data-wv-section': string;
     };
     export namespace togglericon {
-        let _class_4: string[];
-        export { _class_4 as class };
+        let _class_5: string[];
+        export { _class_5 as class };
     }
     export namespace nodeCheckbox {
         export namespace root_1 {
-            let _class_5: string[];
-            export { _class_5 as class };
+            let _class_6: string[];
+            export { _class_6 as class };
         }
         export { root_1 as root };
         export function box({ props, context }: {
@@ -75,39 +98,39 @@ declare namespace _default {
             })[];
         };
         export namespace input {
-            let _class_6: string[];
-            export { _class_6 as class };
-        }
-        export namespace icon {
             let _class_7: string[];
             export { _class_7 as class };
         }
+        export namespace icon {
+            let _class_8: string[];
+            export { _class_8 as class };
+        }
     }
     export namespace nodeicon {
-        let _class_8: string[];
-        export { _class_8 as class };
-    }
-    export namespace subgroup {
         let _class_9: string[];
         export { _class_9 as class };
     }
-    export namespace filtercontainer {
+    export namespace subgroup {
         let _class_10: string[];
         export { _class_10 as class };
     }
-    export namespace input_1 {
+    export namespace filtercontainer {
         let _class_11: string[];
         export { _class_11 as class };
     }
-    export { input_1 as input };
-    export namespace loadingicon {
+    export namespace input_1 {
         let _class_12: string[];
         export { _class_12 as class };
     }
-    export namespace searchicon {
+    export { input_1 as input };
+    export namespace loadingicon {
         let _class_13: string[];
         export { _class_13 as class };
     }
+    export namespace searchicon {
+        let _class_14: string[];
+        export { _class_14 as class };
+    }
     export function label({ props }: {
         props: any;
     }): {

package/fixedasset/tree/index.js

@@ -5,12 +5,16 @@ exports.default = {
         class: [
             'relative',
             // Space
+            'w-full h-full',
             // Shape
             'rounded-md',
             'min-h-8',
             // Color
         ],
     },
+    loadingOverlay: {
+        class: ['flex justify-center items-center absolute z-1 h-full w-full'],
+    },
     wrapper: {
         class: ['overflow-auto'],
     },
@@ -24,14 +28,16 @@ exports.default = {
     },
     node: {
         class: [
-            'p-[2px]',
+            'p-0',
+            'pl-1',
             'rounded-md',
             'focus:outline-none focus:outline-offset-0',
         ],
     },
     content: function (_a) {
         var context = _a.context, props = _a.props;
-        return ({
+        console.log(context);
+        return {
             class: [
                 // Flex and Alignment
                 'flex items-center',
@@ -46,22 +52,27 @@ exports.default = {
                 },
                 // States
                 {
-                    'hover:bg-primary-50': props.selectionMode == 'single' || props.selectionMode == 'multiple',
+                    'hover:bg-primary-50': props.selectionMode == 'single' ||
+                        props.selectionMode == 'multiple',
+                },
+                {
+                    '!pointer-events-none !opacity-60 !cursor-default': context.disabled,
                 },
                 // Transition
                 'transition-shadow duration-200',
                 {
-                    'cursor-pointer select-none': props.selectionMode == 'single' || props.selectionMode == 'multiple',
+                    'cursor-pointer select-none': props.selectionMode == 'single' ||
+                        props.selectionMode == 'multiple',
                 },
                 // Miscelanous
-                'cursor-pointer',
+                { 'cursor-pointer': !context.disabled },
             ],
-        });
+        };
     },
     toggler: function (_a) {
         var context = _a.context;
         return ({
-            class: [
+            'class': [
                 // Flex and Alignment
                 'inline-flex items-center justify-center',
                 'shrink-0',
@@ -84,6 +95,7 @@ exports.default = {
                 // Misc
                 'cursor-pointer select-none',
             ],
+            'data-wv-section': 'tree-node-toggler',
         });
     },
     togglericon: {

package/fixedasset/treeselect/index.js

@@ -103,7 +103,7 @@ exports.default = {
         },
         node: {
             class: [
-                'p-[2px]',
+                'p-0',
                 'rounded-md',
                 'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-500',
             ],

package/package.json

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

package/wangsvue/style.css

@@ -7,6 +7,10 @@
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z'/%3E%3C/svg%3E");
 }
 
+.ic-minus {
+  --svg: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik01IDExdjJoMTR2LTJ6Ii8+PC9zdmc+');
+}
+
 .ic-arrow-up-s {
   /* ri--arrow-up-s-line */
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m12 10.828l-4.95 4.95l-1.414-1.414L12 8l6.364 6.364l-1.414 1.414z'/%3E%3C/svg%3E");
@@ -898,6 +902,10 @@
   mask-size: 100% 100%;
 }
 
+.\!pointer-events-none{
+  pointer-events: none !important;
+}
+
 .pointer-events-none{
   pointer-events: none;
 }
@@ -1362,6 +1370,10 @@
   height: 1.5rem !important;
 }
 
+.\!h-\[10px\]{
+  height: 10px !important;
+}
+
 .\!h-\[11px\]{
   height: 11px !important;
 }
@@ -1443,6 +1455,10 @@
   height: 2rem;
 }
 
+.h-\[10px\]{
+  height: 10px;
+}
+
 .h-\[18px\]{
   height: 18px;
 }
@@ -1573,6 +1589,10 @@
   width: 1.5rem !important;
 }
 
+.\!w-\[10px\]{
+  width: 10px !important;
+}
+
 .\!w-\[11px\]{
   width: 11px !important;
 }
@@ -1669,6 +1689,10 @@
   width: 1%;
 }
 
+.w-\[10px\]{
+  width: 10px;
+}
+
 .w-\[18px\]{
   width: 18px;
 }
@@ -2438,6 +2462,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 +2707,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 +2809,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 +2862,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 +2967,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 +3126,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 +3154,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 +3496,10 @@
   font-size: 14px;
 }
 
+.text-\[9px\]{
+  font-size: 9px;
+}
+
 .text-base{
   font-size: 1rem;
   line-height: 1.5rem;
@@ -3491,6 +3561,10 @@
   line-height: 1.25rem !important;
 }
 
+.leading-3{
+  line-height: .75rem;
+}
+
 .leading-4{
   line-height: 1rem;
 }
@@ -3650,6 +3724,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 +3764,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 +3869,14 @@
   text-decoration-line: none;
 }
 
+.caret-primary-700{
+  caret-color: #785930;
+}
+
+.\!opacity-60{
+  opacity: 0.6 !important;
+}
+
 .opacity-0{
   opacity: 0;
 }
@@ -3979,6 +4071,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 +4865,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 +4917,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 +4965,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 +5046,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 +5426,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 +5835,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;
 }