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

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;
 }
@@ -2100,6 +2092,10 @@
   cursor: grab !important;
 }
 
+.\!cursor-move{
+  cursor: move !important;
+}
+
 .cursor-auto{
   cursor: auto;
 }
@@ -2298,6 +2294,10 @@
   gap: 6px;
 }
 
+.gap-px{
+  gap: 1px;
+}
+
 .gap-x-0{
   -moz-column-gap: 0px;
        column-gap: 0px;
@@ -2657,6 +2657,10 @@
   border-bottom-width: 2px;
 }
 
+.border-b-\[0\.5px\]{
+  border-bottom-width: 0.5px;
+}
+
 .border-l{
   border-left-width: 1px;
 }
@@ -2809,6 +2813,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 +2847,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));
@@ -2974,6 +2988,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 +3221,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 +3355,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 +5025,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 +5143,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 +5593,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 +5874,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;
 }
@@ -5858,6 +5913,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 +5946,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 +6000,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 +6056,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.4",
   "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/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',
@@ -220,6 +220,7 @@ exports.default = {
                 },
                 { 'pointer-events-auto': !props.disableAllRows },
             ],
+            'severity': 'secondary',
             'tooltip': 'Aksi',
             'data-wv-section': 'singleactionbutton',
         });

package/wangsvue/index.d.ts

@@ -43,6 +43,7 @@ declare namespace wangsvue {
     export { splitbutton };
     export { paginator };
     export { datatable };
+    export { customcolumn };
     export { tree };
     export { dataview };
     export { dataviewlayoutoptions };
@@ -139,6 +140,7 @@ import buttonfilter from './buttonfilter/index.js';
 import splitbutton from './splitbutton/index.js';
 import paginator from './paginator/index.js';
 import datatable from './datatable/index.js';
+import customcolumn from './customcolumn';
 import tree from './tree/index.js';
 import dataview from './dataview/index.js';
 import dataviewlayoutoptions from './dataviewlayoutoptions/index.js';

package/wangsvue/index.js

@@ -18,6 +18,7 @@ var index_js_15 = require("./changelog/index.js");
 var index_js_16 = require("./checkbox/index.js");
 var index_js_17 = require("./chip/index.js");
 var index_js_18 = require("./chips/index.js");
+var customcolumn_1 = require("./customcolumn");
 var index_js_19 = require("./colorpicker/index.js");
 var index_js_20 = require("./confirmpopup/index.js");
 var index_js_21 = require("./contextmenu/index.js");
@@ -145,6 +146,7 @@ var wangsvue = {
     // Data
     paginator: index_js_54.default,
     datatable: index_js_22.default,
+    customcolumn: customcolumn_1.default,
     tree: index_js_82.default,
     dataview: index_js_23.default,
     dataviewlayoutoptions: index_js_24.default,