@fewangsit/wangsvue-presets 1.0.85-alpha.3 → 1.0.85-alpha.5

package/fixedasset/menu/index.js

@@ -12,7 +12,6 @@ exports.default = {
             'min-w-[196px]',
             'max-h-[90vh] overflow-y-auto',
             'rounded-md',
-            'border-[0.5px] border-solid border-grayscale-900',
             'max-w-[400px]',
             'translate-y-1',
             // Spacing

package/fixedasset/multiselect/index.d.ts

@@ -58,12 +58,12 @@ declare namespace _default {
             context: any;
         }) => {
             class: (string | {
-                'border-general-300': any;
-                'border-grayscale-900': boolean;
+                'border-general-200': any;
+                'border-general-100': boolean;
                 'bg-white': boolean;
                 'bg-general-50': any;
-                'bg-grayscale-900': boolean;
-                'bg-general-300': any;
+                'bg-primary-500 border-primary-500': boolean;
+                'bg-general-200': any;
                 'ring-8 ring-primary-400/[12%]'?: undefined;
                 'peer-focus-visible:ring-8 peer-focus-visible:ring-offset-0 peer-focus-visible:ring-primary-400/[8%]'?: undefined;
                 'peer-active:ring-8 peer-active:ring-offset-0 peer-active:ring-primary-400/[12%]'?: undefined;
@@ -74,12 +74,12 @@ declare namespace _default {
                 '[&_i]:text-transparent'?: undefined;
             } | {
                 'ring-8 ring-primary-400/[12%]': any;
-                'border-general-300'?: undefined;
-                'border-grayscale-900'?: undefined;
+                'border-general-200'?: undefined;
+                'border-general-100'?: undefined;
                 'bg-white'?: undefined;
                 'bg-general-50'?: undefined;
-                'bg-grayscale-900'?: undefined;
-                'bg-general-300'?: undefined;
+                'bg-primary-500 border-primary-500'?: undefined;
+                'bg-general-200'?: undefined;
                 'peer-focus-visible:ring-8 peer-focus-visible:ring-offset-0 peer-focus-visible:ring-primary-400/[8%]'?: undefined;
                 'peer-active:ring-8 peer-active:ring-offset-0 peer-active:ring-primary-400/[12%]'?: undefined;
                 'cursor-default bg-general-50 border-general-200'?: undefined;
@@ -92,12 +92,12 @@ declare namespace _default {
                 'peer-active:ring-8 peer-active:ring-offset-0 peer-active:ring-primary-400/[12%]': boolean;
                 'cursor-default bg-general-50 border-general-200': boolean;
                 'bg-general-200 border-general-200': any;
-                'border-general-300'?: undefined;
-                'border-grayscale-900'?: undefined;
+                'border-general-200'?: undefined;
+                'border-general-100'?: undefined;
                 'bg-white'?: undefined;
                 'bg-general-50'?: undefined;
-                'bg-grayscale-900'?: undefined;
-                'bg-general-300'?: undefined;
+                'bg-primary-500 border-primary-500'?: undefined;
+                'bg-general-200'?: undefined;
                 'ring-8 ring-primary-400/[12%]'?: undefined;
                 '[&_i]:bg-transparent'?: undefined;
                 '[&_i]:text-white'?: undefined;
@@ -106,12 +106,12 @@ declare namespace _default {
                 '[&_i]:bg-transparent': boolean;
                 '[&_i]:text-white': any;
                 '[&_i]:text-transparent': boolean;
-                'border-general-300'?: undefined;
-                'border-grayscale-900'?: undefined;
+                'border-general-200'?: undefined;
+                'border-general-100'?: undefined;
                 'bg-white'?: undefined;
                 'bg-general-50'?: undefined;
-                'bg-grayscale-900'?: undefined;
-                'bg-general-300'?: undefined;
+                'bg-primary-500 border-primary-500'?: undefined;
+                'bg-general-200'?: undefined;
                 'ring-8 ring-primary-400/[12%]'?: undefined;
                 'peer-focus-visible:ring-8 peer-focus-visible:ring-offset-0 peer-focus-visible:ring-primary-400/[8%]'?: undefined;
                 'peer-active:ring-8 peer-active:ring-offset-0 peer-active:ring-primary-400/[12%]'?: undefined;
@@ -125,6 +125,14 @@ declare namespace _default {
         icon: {
             class: string[];
         };
+        label: ({ props }: {
+            props: any;
+        }) => {
+            class: any[];
+        };
+        tooltipicon: {
+            class: string;
+        };
     };
     export { presetCheckbox as itemCheckbox };
     export namespace closeButton {

package/fixedasset/multiselect/index.js

@@ -165,12 +165,7 @@ exports.default = {
         ],
     },
     headerCheckbox: __assign(__assign({}, index_js_1.default), { root: {
-            class: __spreadArray(__spreadArray([
-                '!mx-auto'
-            ], index_js_1.default.root.class, true), [
-                '[&:not(:has(svg))_[data-pc-section=box]]:!bg-primary-400',
-                '[&:not(:has(svg))_[data-pc-section=box]]:!border-white',
-            ], false),
+            class: __spreadArray(['!mx-auto'], index_js_1.default.root.class, true),
         } }),
     itemCheckbox: index_js_1.default,
     closeButton: {

package/fixedasset/style.css

@@ -1372,10 +1372,6 @@
   height: 10px !important;
 }
 
-.\!h-\[11px\]{
-  height: 11px !important;
-}
-
 .\!h-\[35px\]{
   height: 35px !important;
 }
@@ -1599,10 +1595,6 @@
   width: 10px !important;
 }
 
-.\!w-\[11px\]{
-  width: 11px !important;
-}
-
 .\!w-\[272px\]{
   width: 272px !important;
 }
@@ -1785,6 +1777,10 @@
   min-width: 272px !important;
 }
 
+.min-w-0{
+  min-width: 0px;
+}
+
 .min-w-52{
   min-width: 13rem;
 }
@@ -2100,6 +2096,10 @@
   cursor: grab !important;
 }
 
+.\!cursor-move{
+  cursor: move !important;
+}
+
 .cursor-auto{
   cursor: auto;
 }
@@ -2262,6 +2262,10 @@
   justify-content: space-between;
 }
 
+.justify-items-start{
+  justify-items: start;
+}
+
 .gap-0\.5{
   gap: 0.125rem;
 }
@@ -2282,6 +2286,10 @@
   gap: 0.75rem;
 }
 
+.gap-4{
+  gap: 1rem;
+}
+
 .gap-6{
   gap: 1.5rem;
 }
@@ -2298,6 +2306,10 @@
   gap: 6px;
 }
 
+.gap-px{
+  gap: 1px;
+}
+
 .gap-x-0{
   -moz-column-gap: 0px;
        column-gap: 0px;
@@ -2308,6 +2320,11 @@
        column-gap: 0.125rem;
 }
 
+.gap-x-3{
+  -moz-column-gap: 0.75rem;
+       column-gap: 0.75rem;
+}
+
 .gap-x-6{
   -moz-column-gap: 1.5rem;
        column-gap: 1.5rem;
@@ -2657,6 +2674,10 @@
   border-bottom-width: 2px;
 }
 
+.border-b-\[0\.5px\]{
+  border-bottom-width: 0.5px;
+}
+
 .border-l{
   border-left-width: 1px;
 }
@@ -2809,6 +2830,11 @@
   background-color: rgb(235 234 240 / var(--tw-bg-opacity)) !important;
 }
 
+.\!bg-grayscale-50{
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(247 247 247 / var(--tw-bg-opacity)) !important;
+}
+
 .\!bg-grayscale-500{
   --tw-bg-opacity: 1 !important;
   background-color: rgb(189 190 191 / var(--tw-bg-opacity)) !important;
@@ -2838,6 +2864,11 @@
   background-color: rgb(255 233 153 / var(--tw-bg-opacity)) !important;
 }
 
+.\!bg-white{
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
+}
+
 .bg-black{
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -2900,6 +2931,11 @@
   background-color: rgb(235 234 240 / var(--tw-bg-opacity));
 }
 
+.bg-general-500{
+  --tw-bg-opacity: 1;
+  background-color: rgb(78 75 102 / var(--tw-bg-opacity));
+}
+
 .bg-gray-500{
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
@@ -2974,6 +3010,11 @@
   background-color: rgb(148 191 255 / var(--tw-bg-opacity));
 }
 
+.bg-primary-300{
+  --tw-bg-opacity: 1;
+  background-color: rgb(97 160 255 / var(--tw-bg-opacity));
+}
+
 .bg-primary-300\/20{
   background-color: rgb(97 160 255 / 0.2);
 }
@@ -3202,6 +3243,11 @@
   padding-bottom: 0.75rem !important;
 }
 
+.\!py-\[4\.5px\]{
+  padding-top: 4.5px !important;
+  padding-bottom: 4.5px !important;
+}
+
 .px-0{
   padding-left: 0px;
   padding-right: 0px;
@@ -3331,10 +3377,18 @@
   padding-bottom: 0.375rem !important;
 }
 
+.\!pl-0\.5{
+  padding-left: 0.125rem !important;
+}
+
 .\!pl-1{
   padding-left: 0.25rem !important;
 }
 
+.\!pr-2{
+  padding-right: 0.5rem !important;
+}
+
 .pb-0{
   padding-bottom: 0px;
 }
@@ -4993,6 +5047,11 @@ h6,
   background-color: rgb(255 0 34 / 0.9) !important;
 }
 
+.hover\:\!bg-grayscale-50:hover{
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(247 247 247 / var(--tw-bg-opacity)) !important;
+}
+
 .hover\:\!bg-grayscale-900\/90:hover{
   background-color: rgb(38 38 39 / 0.9) !important;
 }
@@ -5106,6 +5165,11 @@ h6,
   background-color: rgb(148 191 255 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-primary-300:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(97 160 255 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-primary-300\/20:hover{
   background-color: rgb(97 160 255 / 0.2);
 }
@@ -5551,6 +5615,11 @@ h6,
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
 }
 
+.group:hover .group-hover\:\!bg-grayscale-50{
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(247 247 247 / var(--tw-bg-opacity)) !important;
+}
+
 .group:hover .group-hover\:\!bg-primary-50{
   --tw-bg-opacity: 1 !important;
   background-color: rgb(229 240 255 / var(--tw-bg-opacity)) !important;
@@ -5827,6 +5896,14 @@ h6,
   text-align: center;
 }
 
+.\[\&\:has\(\[selectable\=false\]\)\]\:\!cursor-not-allowed:has([selectable=false]){
+  cursor: not-allowed !important;
+}
+
+.\[\&\:has\(\[selectable\=false\]\)\]\:hover\:\!bg-transparent:hover:has([selectable=false]){
+  background-color: transparent !important;
+}
+
 .\[\&\:has\(input\)\]\:cursor-text:has(input){
   cursor: text;
 }
@@ -5841,6 +5918,10 @@ h6,
   background-color: rgb(46 130 255 / var(--tw-bg-opacity)) !important;
 }
 
+.\[\&\>\*\]\:w-full>*{
+  width: 100%;
+}
+
 .\[\&\>\[data-pc-name\=badge\]\]\:h-4>[data-pc-name=badge]{
   height: 1rem;
 }
@@ -5858,6 +5939,11 @@ h6,
   color: rgb(181 179 199 / var(--tw-text-opacity));
 }
 
+.\[\&\>td\]\:border-primary-200>td{
+  --tw-border-opacity: 1;
+  border-color: rgb(148 191 255 / var(--tw-border-opacity));
+}
+
 .\[\&\[aria-selected\=\"true\"\]\]\:rounded-\[20px\][aria-selected="true"]{
   border-radius: 20px;
 }
@@ -5886,6 +5972,10 @@ h6,
   color: rgb(32 30 41 / var(--tw-text-opacity));
 }
 
+.\[\&_\*\]\:cursor-default *{
+  cursor: default;
+}
+
 .\[\&_\*\]\:text-primary-500 *{
   --tw-text-opacity: 1;
   color: rgb(0 99 247 / var(--tw-text-opacity));
@@ -5936,12 +6026,22 @@ h6,
   visibility: hidden;
 }
 
-.\[\&_\[data-pc-section\=box\]\]\:\!border-white [data-pc-section=box]{
+.\[\&_\[data-pc-section\=box\]\]\:\!border-general-100 [data-pc-section=box]{
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(218 217 227 / var(--tw-border-opacity)) !important;
+}
+
+.\[\&_\[data-pc-section\=box\]\]\:\!bg-white [data-pc-section=box]{
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
+}
+
+.\[\&_\[data-wv-section\=box\]\]\:\!border-white [data-wv-section=box]{
   --tw-border-opacity: 1 !important;
   border-color: rgb(255 255 255 / var(--tw-border-opacity)) !important;
 }
 
-.\[\&_\[data-pc-section\=box\]\]\:\!bg-transparent [data-pc-section=box]{
+.\[\&_\[data-wv-section\=box\]\]\:\!bg-transparent [data-wv-section=box]{
   background-color: transparent !important;
 }
 
@@ -5982,6 +6082,10 @@ h6,
   cursor: grab !important;
 }
 
+.\[\&_label\]\:cursor-grab label{
+  cursor: grab;
+}
+
 .\[\&_span\]\:flex span{
   display: flex;
 }

package/package.json

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

package/wangsvue/button/index.d.ts

@@ -22,7 +22,7 @@ declare namespace _default {
         props: any;
     }): {
         class: (string | {
-            '!h-[11px] !w-[11px]': boolean;
+            '!h-3 !w-3': boolean;
         })[];
     };
     function loadingIcon({ props }: {

package/wangsvue/button/index.js

@@ -391,7 +391,7 @@ exports.default = {
     icon: function (_a) {
         var props = _a.props;
         return ({
-            class: ['shrink-0', { '!h-[11px] !w-[11px]': props.size === 'small' }],
+            class: ['shrink-0', { '!h-3 !w-3': props.size === 'small' }],
         });
     },
     loadingIcon: function (_a) {

package/wangsvue/buttondownload/index.d.ts

@@ -7,6 +7,7 @@ declare namespace _default {
     let icon: {
         class: string;
         'data-wv-section': string;
+        severity: string;
     };
 }
 export default _default;

package/wangsvue/buttondownload/index.js

@@ -9,5 +9,6 @@ exports.default = {
     icon: {
         'class': 'text-2xl',
         'data-wv-section': 'icon',
+        'severity': 'secondary',
     },
 };

package/wangsvue/buttonfilter/index.d.ts

@@ -1,11 +1,12 @@
 declare namespace _default {
-    let root: {
+    function root(): {
         class: string;
         'data-wv-name': string;
         'data-wv-section': string;
     };
-    let icon: {
+    function icon(): {
         class: string;
+        severity: string;
         'data-wv-section': string;
     };
 }

package/wangsvue/buttonfilter/index.js

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    root: {
+    root: function () { return ({
         'class': 'focus-within:ring-2 focus-within:ring-primary-400 focus-within:outline-none rounded-sm',
         'data-wv-name': 'buttonfilter',
         'data-wv-section': 'root',
-    },
-    icon: {
+    }); },
+    icon: function () { return ({
         'class': 'text-2xl',
+        'severity': 'secondary',
         'data-wv-section': 'icon',
-    },
+    }); },
 };

package/wangsvue/checkbox/index.d.ts

@@ -77,5 +77,14 @@ declare namespace _default {
         let _class_2: string[];
         export { _class_2 as class };
     }
+    function label({ props }: {
+        props: any;
+    }): {
+        class: any[];
+    };
+    namespace tooltipicon {
+        let _class_3: string;
+        export { _class_3 as class };
+    }
 }
 export default _default;

package/wangsvue/checkbox/index.js

@@ -4,6 +4,7 @@ exports.default = {
     root: {
         class: [
             'relative',
+            'w-max items-center cursor-pointer',
             'w-4 h-4',
             'shrink-0',
             // Alignment
@@ -33,10 +34,10 @@ exports.default = {
                 {
                     'border-general-300': props.disabled,
                     'border-grayscale-900': !props.disabled,
-                    'bg-white': !context.checked && !props.disabled,
-                    'bg-general-50': !context.checked && props.disabled,
-                    'bg-grayscale-900': context.checked && !props.disabled,
-                    'bg-general-300': context.checked && props.disabled,
+                    'bg-white': !(context.checked || context.partialChecked) && !props.disabled,
+                    'bg-general-50': !(context.checked || context.partialChecked) && props.disabled,
+                    'bg-grayscale-900': (context.checked || context.partialChecked) && !props.disabled,
+                    'bg-general-300': (context.checked || context.partialChecked) && props.disabled,
                 },
                 {
                     'ring-8 ring-primary-400/[12%]': !props.disabled && context.focused,
@@ -45,14 +46,14 @@ exports.default = {
                 {
                     'peer-focus-visible:ring-8 peer-focus-visible:ring-offset-0 peer-focus-visible:ring-primary-400/[8%]': !props.disabled,
                     'peer-active:ring-8 peer-active:ring-offset-0 peer-active:ring-primary-400/[12%]': !props.disabled,
-                    'cursor-default bg-general-50 border-general-200': props.disabled && !context.checked,
-                    'bg-general-200 border-general-200': props.disabled && context.checked,
+                    'cursor-default bg-general-50 border-general-200': props.disabled && !(context.checked || context.partialChecked),
+                    'bg-general-200 border-general-200': props.disabled && (context.checked || context.partialChecked),
                 },
                 // Icon state
                 {
-                    '[&_i]:bg-transparent': props.disabled && !context.checked,
-                    '[&_i]:text-white': context.checked,
-                    '[&_i]:text-transparent': !context.checked,
+                    '[&_i]:bg-transparent': props.disabled && !(context.checked || context.partialChecked),
+                    '[&_i]:text-white': context.checked || context.partialChecked,
+                    '[&_i]:text-transparent': !(context.checked || context.partialChecked),
                 },
                 // Transitions
                 'transition-all',
@@ -104,4 +105,17 @@ exports.default = {
             'duration-200',
         ],
     },
+    label: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                'flex items-start gap-px select-none text-xs tracking-[0.02em] leading-none',
+                'text-grayscale-900',
+                props.labelClass,
+            ],
+        });
+    },
+    tooltipicon: {
+        class: 'text-grayscale-900 w-[10px] h-[10px]',
+    },
 };

package/wangsvue/customcolumn/index.d.ts

@@ -0,0 +1,28 @@
+declare namespace _default {
+    namespace menustart {
+        let _class: string;
+        export { _class as class };
+    }
+    function menuitem({ context, props }: {
+        context: any;
+        props: any;
+    }): {
+        class: (string | {
+            '!pl-0.5 !pr-2 !py-[4.5px]': boolean;
+            'cursor-grab [&_label]:cursor-grab '?: undefined;
+            'cursor-default [&_*]:cursor-default'?: undefined;
+        } | {
+            'cursor-grab [&_label]:cursor-grab ': any;
+            'cursor-default [&_*]:cursor-default': boolean;
+            '!pl-0.5 !pr-2 !py-[4.5px]'?: undefined;
+        })[];
+    };
+    function dragicon({ context }: {
+        context: any;
+    }): {
+        class: (string | {
+            invisible: boolean;
+        })[];
+    };
+}
+export default _default;

package/wangsvue/customcolumn/index.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    menustart: {
+        class: 'border-b-[0.5px] border-solid border-grayscale-900',
+    },
+    menuitem: function (_a) {
+        var context = _a.context, props = _a.props;
+        return ({
+            class: [
+                'flex gap-1 py-[7px] px-4 transition-transform',
+                {
+                    '!pl-0.5 !pr-2 !py-[4.5px]': props.type === 'flat',
+                },
+                {
+                    'cursor-grab [&_label]:cursor-grab ': context.dragable,
+                    'cursor-default [&_*]:cursor-default': !context.dragable,
+                },
+                '[&:has([selectable=false])]:!cursor-not-allowed',
+                '[&:has([selectable=false])]:hover:!bg-transparent',
+            ],
+        });
+    },
+    dragicon: function (_a) {
+        var context = _a.context;
+        return ({
+            class: [
+                '!cursor-move w-[18px] h-[18px] !text-general-300 shrink-0',
+                { invisible: context.dragable === false },
+            ],
+        });
+    },
+};

package/wangsvue/datatable/index.d.ts

@@ -159,7 +159,7 @@ declare namespace _default {
         context: any;
     }): {
         class: {
-            '[&_[data-pc-section=box]]:!border-white [&_[data-pc-section=box]]:!bg-transparent': boolean;
+            '[&_[data-wv-section=box]]:!border-white [&_[data-wv-section=box]]:!bg-transparent': boolean;
         }[];
         'data-wv-section': string;
     };
@@ -256,6 +256,7 @@ declare namespace _default {
             'pointer-events-auto': boolean;
             'pointer-events-none !border-general-100 [&>i]:text-general-200'?: undefined;
         })[];
+        severity: string;
         tooltip: string;
         'data-wv-section': string;
     };

package/wangsvue/datatable/index.js

@@ -111,7 +111,7 @@ exports.default = {
         return ({
             'class': [
                 {
-                    '[&_[data-pc-section=box]]:!border-white [&_[data-pc-section=box]]:!bg-transparent': !context.isSelectedAll,
+                    '[&_[data-wv-section=box]]:!border-white [&_[data-wv-section=box]]:!bg-transparent': !context.isSelectedAll,
                 },
             ],
             'data-wv-section': 'headercheckbox',
@@ -149,6 +149,7 @@ exports.default = {
         'class': [
             'text-xs px-2 py-0.5',
             'border-0 !border-b !border-solid border-primary-100',
+            'justify-items-start',
             '[&:has([data-wv-section=rowcheckbox])]:text-center',
             '[&:has([data-wv-section=rowcheckbox])]:text-center',
         ],
@@ -220,6 +221,7 @@ exports.default = {
                 },
                 { 'pointer-events-auto': !props.disableAllRows },
             ],
+            'severity': 'secondary',
             'tooltip': 'Aksi',
             'data-wv-section': 'singleactionbutton',
         });

package/wangsvue/filtercontainer/index.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    namespace root {
+        let _class: string[];
+        export { _class as class };
+    }
+}
+export default _default;

package/wangsvue/filtercontainer/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: {
+        class: [
+            'bg-primary-50 rounded-[7px] [&>*]:w-full [&>*]min-w-0',
+            'grid items-end p-3 gap-4',
+        ],
+    },
+};