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

package/fixedasset/style.css

@@ -5,6 +5,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");
@@ -888,6 +892,10 @@
   mask-size: 100% 100%;
 }
 
+.\!pointer-events-none{
+  pointer-events: none !important;
+}
+
 .pointer-events-none{
   pointer-events: none;
 }
@@ -1449,6 +1457,10 @@
   height: 10px;
 }
 
+.h-\[13px\]{
+  height: 13px;
+}
+
 .h-\[18px\]{
   height: 18px;
 }
@@ -1687,6 +1699,10 @@
   width: 10px;
 }
 
+.w-\[13px\]{
+  width: 13px;
+}
+
 .w-\[18px\]{
   width: 18px;
 }
@@ -2633,6 +2649,10 @@
   border-left-width: 1px;
 }
 
+.border-l-4{
+  border-left-width: 4px;
+}
+
 .border-r{
   border-right-width: 1px;
 }
@@ -2743,6 +2763,11 @@
   border-color: rgb(0 99 247 / var(--tw-border-opacity));
 }
 
+.border-success-500{
+  --tw-border-opacity: 1;
+  border-color: rgb(0 164 85 / var(--tw-border-opacity));
+}
+
 .border-success-600{
   --tw-border-opacity: 1;
   border-color: rgb(0 133 69 / var(--tw-border-opacity));
@@ -3883,6 +3908,10 @@
   caret-color: #003b94;
 }
 
+.\!opacity-60{
+  opacity: 0.6 !important;
+}
+
 .opacity-0{
   opacity: 0;
 }
@@ -4965,6 +4994,11 @@ h6,
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-danger-100:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 204 211 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-danger-300\/20:hover{
   background-color: rgb(255 102 122 / 0.2);
 }
@@ -5095,6 +5129,11 @@ h6,
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-success-100:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(184 255 220 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-success-300\/20:hover{
   background-color: rgb(46 255 154 / 0.2);
 }

package/fixedasset/toast/index.d.ts

@@ -11,8 +11,8 @@ declare namespace _default {
         props: any;
     }): {
         class: (string | {
-            'border-success-600 text-white bg-success-500': boolean;
-            'border-danger text-white bg-danger-500': boolean;
+            'border-success-500 text-success-500 bg-success-50': boolean;
+            'border-danger-500 text-danger-500 bg-danger-50': boolean;
             'border-primary-500 text-primary-500 bg-primary-50': boolean;
         })[];
         'data-wv-severity': any;
@@ -41,9 +41,9 @@ declare namespace _default {
         props: any;
     }): {
         class: (string | {
-            'text-white': boolean;
-            'text-danger': boolean;
-            'text-primary-500': boolean;
+            'text-success-500 hover:bg-success-100': boolean;
+            'text-danger-500 hover:bg-danger-100': boolean;
+            'text-primary-500 hover:bg-primary-100': boolean;
         })[];
     };
     namespace closeicon {

package/fixedasset/toast/index.js

@@ -19,13 +19,13 @@ exports.default = {
         var props = _a.props;
         return ({
             'class': [
-                'border-0 mt-6',
+                'border-l-4 mt-6',
                 'rounded-[7px] w-full',
                 'shadow-lg',
                 // Colors
                 {
-                    'border-success-600 text-white bg-success-500': props.message.severity === 'success',
-                    'border-danger text-white bg-danger-500': props.message.severity === 'error',
+                    'border-success-500 text-success-500 bg-success-50': props.message.severity === 'success',
+                    'border-danger-500 text-danger-500 bg-danger-50': props.message.severity === 'error',
                     'border-primary-500 text-primary-500 bg-primary-50': props.message.severity === 'info',
                 },
             ],
@@ -66,9 +66,9 @@ exports.default = {
                 // Colors
                 'bg-transparent',
                 {
-                    'text-white': props.message.severity === 'success',
-                    'text-danger': props.message.severity === 'error',
-                    'text-primary-500': props.message.severity === 'info',
+                    'text-success-500 hover:bg-success-100': props.message.severity === 'success',
+                    'text-danger-500 hover:bg-danger-100': props.message.severity === 'error',
+                    'text-primary-500 hover:bg-primary-100': props.message.severity === 'info',
                 },
                 // Transitions
                 'transition duration-200 ease-in-out',
@@ -81,7 +81,7 @@ exports.default = {
     closeicon: {
         class: [
             // Sizing and Spacing
-            'w-3 h-3',
+            'w-[13px] h-[13px]',
             'shrink-0',
         ],
     },

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.1",
+  "version": "1.0.84-alpha.3",
   "author": "Wangsit FE Developer",
   "description": "Wangsit VueJS Component Library Presets",
   "main": "index.js",

package/wangsvue/checkbox/index.js

@@ -23,7 +23,7 @@ exports.default = {
                 'items-center',
                 'justify-center',
                 // Size
-                'w-full',
+                'w-4',
                 'h-full',
                 // Shape
                 'rounded',
@@ -64,7 +64,7 @@ exports.default = {
         class: [
             'peer',
             // Size
-            'w-full ',
+            'w-4',
             'h-full',
             // Position
             'absolute',