@fewangsit/wangsvue-presets 1.0.80

package/wangsvue/datatable/index.js

@@ -0,0 +1,253 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: {
+        'data-wv-name': 'datatable',
+        'data-wv-section': 'root',
+    },
+    tablewrapper: {
+        'class': [
+            'overflow-auto relative scrollbar-w-thin',
+            'rounded-lg rounded-br-none rounded-bl-none',
+        ],
+        'data-wv-section': 'tablewrapper',
+    },
+    scrollheightwrapper: function (_a) {
+        var props = _a.props;
+        return ({
+            'class': [
+                'overflow-hidden w-full min-w-max',
+                {
+                    '!overflow-y-auto': !!props.scrollHeight,
+                },
+            ],
+            'style': "scrollbar-width: none; max-height: ".concat(props.scrollHeight),
+            'data-wv-section': 'scrollheightwrapper',
+        });
+    },
+    table: {
+        'class': [
+            'min-w-max w-full',
+            '!border-separate !border-spacing-0 border !border-solid !border-primary-100 !border-t-0 !border-l-0 !border-r-0 !rounded-lg',
+        ],
+        'data-wv-section': 'table',
+    },
+    tbody: {
+        class: [
+            '[&_tr:last-of-type>td]:!border-b-0',
+            '[&_tr:last-of-type>td:last-child]:!rounded-br-lg',
+            '[&_tr:last-of-type>td:first-child]:!rounded-bl-lg',
+        ],
+    },
+    thead: {
+        class: ['sticky top-0 z-50'],
+    },
+    headerrow: {
+        class: ['border-b border-primary-100'],
+    },
+    bodyrow: function (_a) {
+        var context = _a.context, props = _a.props;
+        return ({
+            class: [
+                'border-b border-general-100 group',
+                {
+                    '!h-[35px]': props.rowHeight === 'fixed', // Style(DXJCiX2e): set table row height to fixed 35px
+                },
+                // Color
+                'text-general-800 text-xs font-normal',
+                {
+                    'bg-transparent': !context.selected,
+                    'bg-primary-100': context.selected,
+                },
+                // State
+                {
+                    'focus:outline-none focus:outline-offset-0': props.selectionType,
+                    // To sets the bg to single action td
+                    'hover:!bg-primary-50': !context.highlighted,
+                    'hover:!bg-warning-300 !bg-warning-200': context.highlighted,
+                },
+                // Transition
+                {
+                    'transition duration-200': (props.selectionType && !context.selected) || props.rowHover,
+                },
+                'px-4 transition-transform',
+                { 'select-none': context.dragging, 'select-auto': !context.dragging },
+                { '!cursor-grab [&_label]:!cursor-grab': context.draggable },
+                // Misc
+                { 'cursor-pointer': props.selectionType !== 'none' && !context.disabled },
+            ],
+        });
+    },
+    headercell: function (_a) {
+        var context = _a.context;
+        return {
+            'class': [
+                'text-xs font-semibold text-white p-2 text-left cursor-pointer',
+                { 'bg-primary-400': !context.sorted || !context.sortable },
+                { 'bg-primary-500': context.sorted },
+                {
+                    'sticky right-0 hover:bg-primary-500': context.customColumn,
+                    '!cursor-default': !context.customColumn && !context.sortable,
+                },
+                'border-0 !border-b border-solid',
+                'border-primary-100',
+            ],
+            'data-wv-section': 'headercell',
+        };
+    },
+    headercellcontent: {
+        'class': ['inline-flex gap-2 items-center leading-[18px]'],
+        'data-wv-section': 'headercellcontent',
+    },
+    headercellreorderable: {
+        'class': ['w-[35px] !py-1'],
+        'data-wv-section': 'headercellreorderable',
+    },
+    draggableicon: {
+        class: 'w-[18px] h-[18px] !p-0 !m-0 !cursor-grab [&_label]:!cursor-grab',
+    },
+    headercheckbox: function (_a) {
+        var context = _a.context;
+        return ({
+            'class': [
+                {
+                    '[&_[data-pc-section=box]]:!border-white [&_[data-pc-section=box]]:!bg-transparent': !context.isSelectedAll,
+                },
+            ],
+            'data-wv-section': 'headercheckbox',
+        });
+    },
+    headercellcheckbox: {
+        'class': 'w-[35px] text-center',
+        'data-wv-section': 'headercellcheckbox',
+    },
+    headertoggler: {
+        'class': ['w-[40px] text-center !py-1'],
+        'data-wv-section': 'headertoggler',
+    },
+    columnvisibilityicon: {
+        class: ['!w-4 !h-4 !mx-auto'],
+        info: 'Visibilitas Kolom',
+    },
+    headertogglerbutton: function (_a) {
+        var context = _a.context;
+        return ({
+            'class': [
+                '!p-0 !m-0 !w-auto !h-auto',
+                { 'rotate-180': context.isExpandedAll },
+                { 'rotate-0': !context.isExpandedAll },
+            ],
+            'icon-class': 'w-6 h-6 text-white',
+            'data-wv-section': 'headertogglerbutton',
+        });
+    },
+    rowcheckbox: {
+        'class': '',
+        'data-wv-section': 'rowcheckbox',
+    },
+    bodycell: {
+        'class': [
+            'text-xs px-2 py-0.5',
+            'border-0 !border-b !border-solid border-primary-100',
+            '[&:has([data-wv-section=rowcheckbox])]:text-center',
+            '[&:has([data-wv-section=rowcheckbox])]:text-center',
+        ],
+        'data-wv-section': 'bodycell',
+    },
+    multirowcontainer: function (_a) {
+        var props = _a.props;
+        return ({
+            class: ['grid grid-cols-1', "grid-rows-".concat(props.attributes.length)],
+        });
+    },
+    multirow: function (_a) {
+        var context = _a.context;
+        return ({
+            class: [
+                '!h-[35px] flex items-center px-2',
+                { '!border-t border-primary-100 !border-solid': !context.firstIndex },
+            ],
+        });
+    },
+    rowtogglerbutton: function (_a) {
+        var context = _a.context;
+        return ({
+            'class': [
+                '!p-0 !m-0 !w-auto !h-auto',
+                { 'rotate-180': context.isRowExpanded },
+                { 'rotate-0': !context.isRowExpanded },
+            ],
+            'icon-class': 'w-6 h-6',
+            'data-wv-section': 'rowtogglerbutton',
+        });
+    },
+    childrowheader: {
+        'class': 'font-semibold text-xs',
+        'data-wv-section': 'childrowheader',
+    },
+    celleditableelement: {
+        'class': [
+            'focus:px-2',
+            'w-full inline-block py-2 focus:outline-grayscale-600 focus:outline-1',
+        ],
+        'data-wv-section': 'celleditableelement',
+    },
+    rowsingleactioncell: function (_a) {
+        var props = _a.props, context = _a.context;
+        return ({
+            'class': [
+                'w-[35px]',
+                {
+                    'sticky bg-white': props.useOption,
+                    '!bg-primary-100': context.selected,
+                    'group-hover:!bg-primary-50': !context.highlighted,
+                    'group-hover:!bg-warning-300 !bg-warning-200': context.highlighted,
+                },
+            ],
+            'data-wv-section': 'rowsingleactioncell',
+        });
+    },
+    singleactionwrapper: {
+        'class': ['relative w-full h-full flex items-center justify-center'],
+        'data-wv-section': 'singleactionwrapper',
+    },
+    singleactionbutton: function (_a) {
+        var props = _a.props;
+        return ({
+            'class': [
+                {
+                    'pointer-events-none !border-general-100 [&>i]:text-general-200': props.disableAllRows,
+                },
+                { 'pointer-events-auto': !props.disableAllRows },
+            ],
+            'tooltip': 'Aksi',
+            'data-wv-section': 'singleactionbutton',
+        });
+    },
+    nodatalottiewrapper: {
+        'class': 'w-full p-4 flex items-center justify-center',
+        'data-wv-section': 'nodatalottiewrapper',
+    },
+    nodatalottie: {
+        'class': 'w-44 h-auto',
+        'data-wv-section': 'nodatalottie',
+    },
+    loadingtablewrapper: {
+        'class': 'sticky left-0 w-full p-4 flex items-center justify-center',
+        'data-wv-section': 'loadingtablewrapper',
+    },
+    loadingtablelottie: {
+        'class': 'w-20 h-auto',
+        'data-wv-section': 'loadingtablelottie',
+    },
+    paginator: function (_a) {
+        var context = _a.context;
+        return ({
+            'current-page-report-template': context.totalRecords
+                ? 'Menampilkan {first} - {last} dari {totalRecords}'
+                : 'Tidak ditemukan data',
+            'class': '',
+            'template': 'FirstPageLink PrevPageLink PageLinks JumpToPageInput NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown',
+        });
+    },
+};

package/wangsvue/dataview/index.d.ts

@@ -0,0 +1,15 @@
+declare namespace _default {
+    namespace content {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace grid {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    namespace header {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+}
+export default _default;

package/wangsvue/dataview/index.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    content: {
+        class: [
+            // Spacing
+            'p-0',
+            // Shape
+            'border-0',
+            // Color
+            'text-surface-700/80',
+            'bg-surface-0',
+        ],
+    },
+    grid: {
+        class: [
+            // Flex
+            'flex flex-wrap',
+            // Spacing
+            'ml-0 mr-0 mt-0',
+            // Color
+            'bg-surface-0',
+        ],
+    },
+    header: {
+        class: [
+            'font-semibold',
+            // Spacing
+            'p-6',
+            // Color
+            'text-surface-800/80',
+            'bg-surface-0',
+            'border-surface-200 border-b',
+        ],
+    },
+};

package/wangsvue/dataviewlayoutoptions/index.d.ts

@@ -0,0 +1,13 @@
+declare namespace _default {
+    function listbutton({ props }: {
+        props: any;
+    }): {
+        class: string[];
+    };
+    function gridbutton({ props }: {
+        props: any;
+    }): {
+        class: string[];
+    };
+}
+export default _default;

package/wangsvue/dataviewlayoutoptions/index.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    listbutton: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Font
+                'leading-none',
+                // Flex Alignment
+                'inline-flex items-center align-bottom text-center',
+                // Shape
+                'rounded-md rounded-r-none',
+                // Spacing
+                'px-2.5 py-1.5',
+                // Color
+                'ring-1 ring-surface-200',
+                props.modelValue === 'list'
+                    ? 'bg-surface-100 text-surface-700'
+                    : 'bg-surface-0 text-surface-700/80',
+                // States
+                'focus:outline-none focus:outline-offset-0 focus:ring-primary-500',
+                'hover:bg-surface-200/80',
+                // Transition
+                'transition duration-200',
+                // Misc
+                'cursor-pointer select-none overflow-hidden',
+            ],
+        });
+    },
+    gridbutton: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Font
+                'leading-none',
+                // Flex Alignment
+                'inline-flex items-center align-bottom text-center',
+                // Shape
+                'rounded-md rounded-l-none',
+                // Spacing
+                'px-2.5 py-1.5',
+                // Color
+                'ring-1 ring-surface-200',
+                props.modelValue === 'grid'
+                    ? 'bg-surface-100 text-surface-700'
+                    : 'bg-surface-0 text-surface-700/80',
+                // States
+                'focus:outline-none focus:outline-offset-0 focus:ring-primary-500',
+                'hover:bg-surface-200/80',
+                // Transition
+                'transition duration-200',
+                // Misc
+                'cursor-pointer select-none overflow-hidden',
+            ],
+        });
+    },
+};

package/wangsvue/dialog/index.d.ts

@@ -0,0 +1,87 @@
+declare namespace _default {
+    function root({ state }: {
+        state: any;
+    }): {
+        class: (string | {
+            'sm:max-w-[90vw]': boolean;
+            'transition-none'?: undefined;
+            'transform-none'?: undefined;
+            '!w-screen'?: undefined;
+            '!h-screen'?: undefined;
+            '!max-h-full'?: undefined;
+            '!top-0'?: undefined;
+            '!left-0'?: undefined;
+        } | {
+            'transition-none': any;
+            'transform-none': any;
+            '!w-screen': any;
+            '!h-screen': any;
+            '!max-h-full': any;
+            '!top-0': any;
+            '!left-0': any;
+            'sm:max-w-[90vw]'?: undefined;
+        })[];
+    };
+    namespace header {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace title {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    namespace icons {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    namespace closeButton {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+    namespace maximizablebutton {
+        let _class_4: string[];
+        export { _class_4 as class };
+    }
+    namespace closeButtonIcon {
+        let _class_5: string[];
+        export { _class_5 as class };
+    }
+    namespace maximizableicon {
+        let _class_6: string[];
+        export { _class_6 as class };
+    }
+    function content({ state, instance }: {
+        state: any;
+        instance: any;
+    }): {
+        class: (string | {
+            grow: any;
+        })[];
+    };
+    namespace footer {
+        let _class_7: string[];
+        export { _class_7 as class };
+    }
+    function mask({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'p-5': boolean;
+            'has-[.mask-active]:bg-transparent bg-dialog-mask'?: undefined;
+            'has-[.mask-active]:backdrop-blur-none backdrop-blur-sm'?: undefined;
+        } | {
+            'has-[.mask-active]:bg-transparent bg-dialog-mask': any;
+            'has-[.mask-active]:backdrop-blur-none backdrop-blur-sm': any;
+            'p-5'?: undefined;
+        })[];
+    };
+    function transition({ props }: {
+        props: any;
+    }): {
+        enterFromClass: string;
+        enterActiveClass: string;
+        leaveActiveClass: string;
+        leaveToClass: string;
+    };
+}
+export default _default;

package/wangsvue/dialog/index.js

@@ -0,0 +1,220 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: function (_a) {
+        var state = _a.state;
+        return ({
+            class: [
+                // Shape
+                // 'rounded-lg',
+                // 'shadow-xl',
+                // 'border-0',
+                'rounded-[0.4375em]',
+                'shadow-panel',
+                // Layout
+                'flex flex-col',
+                // Spacing
+                'p-6',
+                'gap-3',
+                // Background
+                'bg-white',
+                // Size
+                'max-h-[90vh]',
+                { 'sm:max-w-[90vw]': !state.maximized },
+                'm-0',
+                // Transitions
+                'transform',
+                'scale-100',
+                // Maximized State
+                {
+                    'transition-none': state.maximized,
+                    'transform-none': state.maximized,
+                    '!w-screen': state.maximized,
+                    '!h-screen': state.maximized,
+                    '!max-h-full': state.maximized,
+                    '!top-0': state.maximized,
+                    '!left-0': state.maximized,
+                },
+            ],
+        });
+    },
+    header: {
+        class: [
+            // Flexbox and Alignment
+            'flex items-center gap-2',
+            'shrink-0',
+            // Shape
+            'rounded-tl-lg',
+            'rounded-tr-lg',
+            // Colors
+            'text-general-800',
+        ],
+    },
+    title: {
+        class: [
+            'text-general-800 text-sm font-bold leading-[19.12px] tracking-[0.24px]',
+        ],
+    },
+    icons: {
+        class: ['flex items-center ml-auto'],
+    },
+    closeButton: {
+        class: [
+            'relative',
+            // Flexbox and Alignment
+            'flex items-center justify-center',
+            // Size and Spacing
+            'w-6 h-6 !p-0.5',
+            // Shape
+            'border-0',
+            'rounded-full',
+            // Colors
+            'text-general-200',
+            'bg-transparent',
+            // Transitions
+            'transition duration-200 ease-in-out',
+            // States
+            'hover:bg-general-50 hover:text-general-300',
+            // Misc
+            'overflow-hidden',
+        ],
+    },
+    maximizablebutton: {
+        class: [
+            'relative',
+            // Flexbox and Alignment
+            'flex items-center justify-center',
+            // Size and Spacing
+            'mr-2',
+            'last:mr-0',
+            'w-6 h-6',
+            // Shape
+            'border-0',
+            'rounded-full',
+            // Colors
+            'text-surface-500',
+            'bg-transparent',
+            // Transitions
+            'transition duration-200 ease-in-out',
+            // States
+            'hover:text-surface-700',
+            'hover:bg-surface-100',
+            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-inset',
+            'focus:ring-primary-500',
+            // Misc
+            'overflow-hidden',
+        ],
+    },
+    closeButtonIcon: {
+        class: [
+            // Display
+            'inline-block',
+            // Color
+            'text-general-200',
+            // Size
+            'w-3.5',
+            'h-3.5',
+        ],
+    },
+    maximizableicon: {
+        class: [
+            // Display
+            'inline-block',
+            // Size
+            'w-3',
+            'h-3',
+        ],
+    },
+    content: function (_a) {
+        var state = _a.state, instance = _a.instance;
+        return ({
+            class: [
+                // Font
+                '!text-general-800 text-xs font-normal',
+                'pr-1.5 -mr-1.5 pl-1.5 -ml-1.5 pt-1.5 -mt-1.5 !pb-1.5 -mb-1.5',
+                // Layout
+                'flex flex-col gap-3',
+                // Shape
+                // Colors
+                'text-surface-600',
+                // Misc
+                'overflow-y-auto scrollbar-w-none',
+                {
+                    grow: state === null || state === void 0 ? void 0 : state.maximized,
+                },
+            ],
+        });
+    },
+    footer: {
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-end',
+            'shrink-0',
+            'text-right',
+            'gap-1 mt-2',
+            // Shape
+            'border-t-0',
+            'rounded-b-lg',
+            // Colors
+            'bg-inherit',
+            'text-surface-700/80',
+        ],
+    },
+    mask: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Transitions
+                'transition',
+                'duration-300',
+                { 'p-5': !props.position == 'full' },
+                // Background and Effects
+                {
+                    'has-[.mask-active]:bg-transparent bg-dialog-mask': props.modal,
+                    'has-[.mask-active]:backdrop-blur-none backdrop-blur-sm': props.modal,
+                },
+            ],
+        });
+    },
+    transition: function (_a) {
+        var props = _a.props;
+        return props.position === 'top'
+            ? {
+                enterFromClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active',
+                enterActiveClass: 'transition-all duration-200 ease-out',
+                leaveActiveClass: 'transition-all duration-200 ease-out',
+                leaveToClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active',
+            }
+            : props.position === 'bottom'
+                ? {
+                    enterFromClass: 'opacity-0 scale-75 translate-y-full mask-active',
+                    enterActiveClass: 'transition-all duration-200 ease-out',
+                    leaveActiveClass: 'transition-all duration-200 ease-out',
+                    leaveToClass: 'opacity-0 scale-75 translate-x-0 translate-y-full translate-z-0 mask-active',
+                }
+                : props.position === 'left' ||
+                    props.position === 'topleft' ||
+                    props.position === 'bottomleft'
+                    ? {
+                        enterFromClass: 'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0 mask-active',
+                        enterActiveClass: 'transition-all duration-200 ease-out',
+                        leaveActiveClass: 'transition-all duration-200 ease-out',
+                        leaveToClass: 'opacity-0 scale-75  -translate-x-full translate-y-0 translate-z-0 mask-active',
+                    }
+                    : props.position === 'right' ||
+                        props.position === 'topright' ||
+                        props.position === 'bottomright'
+                        ? {
+                            enterFromClass: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active',
+                            enterActiveClass: 'transition-all duration-200 ease-out',
+                            leaveActiveClass: 'transition-all duration-200 ease-out',
+                            leaveToClass: 'opacity-0 scale-75 opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active',
+                        }
+                        : {
+                            enterFromClass: 'opacity-0 scale-75 mask-active',
+                            enterActiveClass: 'transition-all duration-200 ease-out',
+                            leaveActiveClass: 'transition-all duration-200 ease-out',
+                            leaveToClass: 'opacity-0 scale-75 mask-active',
+                        };
+    },
+};