@fewangsit/wangsvue-presets 1.0.81 → 1.0.82-alpha.1

package/fixedasset/treeselect/index.js

@@ -0,0 +1,338 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: function (_a) {
+        var props = _a.props, state = _a.state;
+        return ({
+            class: [
+                // Display and Position
+                'inline-flex',
+                'relative',
+                // Shape
+                'w-full md:w-56',
+                'rounded-md',
+                'shadow-sm',
+                // Color and Background
+                'bg-surface-0',
+                // States
+                {
+                    'ring-1 ring-inset ring-surface-300': !state.focused,
+                    'ring-2 ring-inset ring-primary-500': state.focused,
+                },
+                // Misc
+                'cursor-default',
+                'select-none',
+                { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled },
+            ],
+        });
+    },
+    labelContainer: {
+        class: ['overflow-hidden flex flex-auto cursor-pointer'],
+    },
+    label: {
+        class: [
+            'block leading-5',
+            // Space
+            'py-1.5 px-3',
+            // Color
+            'text-surface-800/80',
+            // Transition
+            'transition duration-200',
+            // Misc
+            'overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis',
+        ],
+    },
+    trigger: {
+        class: [
+            //Font
+            'sm:text-sm',
+            // Flexbox
+            'flex items-center justify-center',
+            'shrink-0',
+            // Color and Background
+            'bg-transparent',
+            'text-surface-500',
+            // Size
+            'w-12',
+            // Shape
+            'rounded-tr-md',
+            'rounded-br-md',
+        ],
+    },
+    panel: {
+        class: [
+            // Position
+            'absolute top-0 left-0',
+            'mt-2',
+            // Shape
+            'border-0',
+            'rounded-md',
+            'shadow-md',
+            // Color
+            'bg-surface-0',
+            'text-surface-800/80',
+            'ring-1 ring-inset ring-surface-300',
+        ],
+    },
+    wrapper: {
+        class: [
+            // Sizing
+            'max-h-[200px]',
+            // Misc
+            'overflow-auto',
+        ],
+    },
+    tree: {
+        root: {
+            class: [
+                'relative',
+                // Space
+                'p-1.5',
+            ],
+        },
+        wrapper: {
+            class: ['overflow-auto'],
+        },
+        container: {
+            class: [
+                // Spacing
+                'm-0 p-0',
+                // Misc
+                'list-none overflow-auto',
+            ],
+        },
+        node: {
+            class: [
+                'p-[2px]',
+                'rounded-md',
+                'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-500',
+            ],
+        },
+        content: function (_a) {
+            var context = _a.context, props = _a.props;
+            return ({
+                class: [
+                    // Flex and Alignment
+                    'flex items-center',
+                    // Shape
+                    'rounded-md',
+                    // Spacing
+                    'p-2',
+                    // Colors
+                    'text-surface-700',
+                    {
+                        'bg-surface-100 text-primary-500': context.selected,
+                    },
+                    // States
+                    {
+                        'hover:bg-surface-200': props.selectionMode == 'single' ||
+                            props.selectionMode == 'multiple',
+                    },
+                    // Transition
+                    'transition-shadow duration-200',
+                    {
+                        'cursor-pointer select-none': props.selectionMode == 'single' ||
+                            props.selectionMode == 'multiple',
+                    },
+                ],
+            });
+        },
+        toggler: function (_a) {
+            var context = _a.context;
+            return ({
+                class: [
+                    // Flex and Alignment
+                    'inline-flex items-center justify-center',
+                    // Shape
+                    'border-0 rounded-full',
+                    // Size and Spacing
+                    'mr-2',
+                    'w-6 h-6',
+                    // Spacing
+                    'mr-2',
+                    // Colors
+                    'text-surface-500',
+                    'bg-transparent',
+                    {
+                        invisible: context.leaf,
+                    },
+                    // 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',
+                    // Transition
+                    'transition duration-200',
+                    // Misc
+                    'cursor-pointer select-none',
+                ],
+            });
+        },
+        togglericon: {
+            class: [
+                // Size
+                'w-4 h-4',
+                // Color
+                'text-surface-500/70',
+            ],
+        },
+        nodeCheckbox: {
+            root: {
+                class: [
+                    'relative',
+                    // Alignment
+                    'inline-flex',
+                    'align-bottom',
+                    // Size
+                    'w-4',
+                    'h-4',
+                    // Spacing
+                    'mr-2',
+                    // Misc
+                    'cursor-default',
+                    'select-none',
+                ],
+            },
+            box: function (_a) {
+                var props = _a.props, context = _a.context;
+                return ({
+                    class: [
+                        // Alignment
+                        'flex',
+                        'items-center',
+                        'justify-center',
+                        // Size
+                        'w-4',
+                        'h-4',
+                        // Shape
+                        'rounded',
+                        'border',
+                        // Colors
+                        'text-surface-600',
+                        {
+                            'border-surface-300 bg-surface-0': !context.checked,
+                            'border-primary-500 bg-primary-500': context.checked,
+                        },
+                        {
+                            'ring-2 ring-primary-500': !props.disabled && context.focused,
+                            'cursor-default opacity-60': props.disabled,
+                        },
+                        // States
+                        {
+                            'peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500': !props.disabled,
+                            'cursor-default opacity-60': props.disabled,
+                        },
+                        // Transitions
+                        'transition-colors',
+                        'duration-200',
+                    ],
+                });
+            },
+            input: {
+                class: [
+                    'peer',
+                    // Size
+                    'w-full ',
+                    'h-full',
+                    // Position
+                    'absolute',
+                    'top-0 left-0',
+                    'z-10',
+                    // Spacing
+                    'p-0',
+                    'm-0',
+                    // Shape
+                    'rounded',
+                    'border',
+                    // Shape
+                    'opacity-0',
+                    'rounded-md',
+                    'outline-none',
+                    'border-2 border-surface-300',
+                    // Misc
+                    'appareance-none',
+                ],
+            },
+            icon: {
+                class: [
+                    // Font
+                    'text-normal',
+                    // Size
+                    'w-3',
+                    'h-3',
+                    // Colors
+                    'text-white',
+                    // Transitions
+                    'transition-all',
+                    'duration-200',
+                ],
+            },
+        },
+        nodeicon: {
+            class: [
+                // Space
+                'mr-2',
+                // Color
+                'text-surface-600/70',
+            ],
+        },
+        subgroup: {
+            class: ['m-0 list-none p-0 pl-2 mt-1'],
+        },
+        filtercontainer: {
+            class: [
+                'relative block',
+                // Space
+                'mb-2',
+                // Size
+                'w-full',
+            ],
+        },
+        input: {
+            class: [
+                'relative',
+                // Font
+                'font-sans leading-6',
+                'sm:text-sm',
+                // Spacing
+                'm-0',
+                'py-1.5 px-3 pr-10',
+                // Size
+                'w-full',
+                // Shape
+                'rounded-md',
+                // Colors
+                'text-surface-900',
+                'placeholder:text-surface-400',
+                'bg-surface-0',
+                'ring-1 ring-inset ring-surface-300',
+                // States
+                'hover:border-primary-500',
+                'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-500',
+                // Transition & Misc
+                'appearance-none',
+                'transition-colors duration-200',
+            ],
+        },
+        loadingicon: {
+            class: [
+                'text-surface-500',
+                'absolute top-[50%] right-[50%] -mt-2 -mr-2 animate-spin',
+            ],
+        },
+        searchicon: {
+            class: [
+                // Position
+                'absolute top-1/2 -mt-2 right-3',
+                // Color
+                'text-surface-600',
+            ],
+        },
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0',
+    },
+};

package/fixedasset/tristatecheckbox/index.d.ts

@@ -0,0 +1,49 @@
+declare namespace _default {
+    namespace root {
+        let _class: string[];
+        export { _class as class };
+    }
+    function box({ props, context }: {
+        props: any;
+        context: any;
+    }): {
+        class: (string | {
+            'border-general-100 bg-surface-0': boolean;
+            'border-primary-500 bg-primary-500': boolean;
+            'ring-2 ring-primary-500'?: undefined;
+            'cursor-default'?: undefined;
+            'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-primary'?: undefined;
+            'cursor-default bg-general-50 border-general-200'?: undefined;
+            'bg-general-200 border-general-200'?: undefined;
+        } | {
+            'ring-2 ring-primary-500': any;
+            'cursor-default': any;
+            'border-general-100 bg-surface-0'?: undefined;
+            'border-primary-500 bg-primary-500'?: undefined;
+            'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-primary'?: undefined;
+            'cursor-default bg-general-50 border-general-200'?: undefined;
+            'bg-general-200 border-general-200'?: undefined;
+        } | {
+            'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-primary': boolean;
+            'cursor-default bg-general-50 border-general-200': boolean;
+            'bg-general-200 border-general-200': any;
+            'border-general-100 bg-surface-0'?: undefined;
+            'border-primary-500 bg-primary-500'?: undefined;
+            'ring-2 ring-primary-500'?: undefined;
+            'cursor-default'?: undefined;
+        })[];
+    };
+    namespace input {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    namespace checkicon {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    namespace uncheckicon {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+}
+export default _default;

package/fixedasset/tristatecheckbox/index.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: {
+        class: [
+            'relative',
+            'w-4 h-4',
+            // Alignment
+            'inline-flex',
+            'align-bottom',
+            // Transitions
+            'transition-all',
+            'duration-200',
+        ],
+    },
+    box: function (_a) {
+        var props = _a.props, context = _a.context;
+        return ({
+            class: [
+                // Alignment
+                'flex',
+                'items-center',
+                'justify-center',
+                // Size
+                'w-full',
+                'h-full',
+                // Shape
+                'rounded',
+                'border-2',
+                // Colors
+                'text-surface-0',
+                {
+                    'border-general-100 bg-surface-0': !context.active && !props.disabled,
+                    'border-primary-500 bg-primary-500': context.active && !props.disabled,
+                },
+                {
+                    'ring-2 ring-primary-500': !props.disabled && context.focused,
+                    'cursor-default': props.disabled,
+                },
+                // States
+                {
+                    'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-primary': !props.disabled,
+                    'cursor-default bg-general-50 border-general-200': props.disabled && !context.active,
+                    'bg-general-200 border-general-200': props.disabled && context.active,
+                },
+                // Transitions
+                'transition-colors',
+                'duration-200',
+            ],
+        });
+    },
+    input: {
+        class: [
+            'peer',
+            // Size
+            'w-full ',
+            'h-full',
+            // Position
+            'absolute',
+            'top-0 left-0',
+            'z-10',
+            // Spacing
+            'p-0',
+            'm-0',
+            // Shape
+            'rounded',
+            'border',
+            // Shape
+            'opacity-0',
+            'rounded-md',
+            'outline-none',
+            'border-2 border-surface-300',
+            // Misc
+            'appareance-none',
+            'cursor-pointer',
+        ],
+    },
+    checkicon: {
+        class: [
+            // Font
+            'text-normal',
+            // Size
+            'w-3',
+            'h-3',
+            // Colors
+            'text-surface-0',
+            // Transitions
+            'transition-all',
+            'duration-200',
+        ],
+    },
+    uncheckicon: {
+        class: [
+            // Font
+            'text-normal',
+            // Size
+            'w-3',
+            'h-3',
+            // Colors
+            'text-surface-0',
+            // Transitions
+            'transition-all',
+            'duration-200',
+        ],
+    },
+};

package/fixedasset/validatormessage/index.d.ts

@@ -0,0 +1,8 @@
+declare namespace _default {
+    let root: {
+        class: string[];
+        'data-wv-name': string;
+        'data-wv-section': string;
+    };
+}
+export default _default;

package/fixedasset/validatormessage/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: {
+        'class': ['!mt-0 text-danger-500 text-xs font-light'],
+        'data-wv-name': 'validatormessage',
+        'data-wv-section': 'root',
+    },
+};

package/fixedasset/workcalendar/index.d.ts

@@ -0,0 +1,27 @@
+declare namespace _default {
+    function next({ context }: {
+        context: any;
+    }): {
+        class: (string | {
+            '!text-general-300 pointer-events-none': any;
+        })[];
+    };
+    function prev({ context }: {
+        context: any;
+    }): {
+        class: (string | {
+            '!text-general-300 pointer-events-none': any;
+        })[];
+    };
+    function daylabel({ context }: {
+        context: any;
+    }): {
+        class: (string | {
+            hidden: any;
+            'text-white !rounded-full focus:outline-none focus-visible:outline-none cursor-pointer': any;
+            'bg-danger-500 hover:bg-danger-500/90': boolean;
+            'bg-primary-1000 hover:bg-primary-1000/90': boolean;
+        })[];
+    };
+}
+export default _default;

package/fixedasset/workcalendar/index.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    next: function (_a) {
+        var context = _a.context;
+        return ({
+            class: [
+                'text-2xl text-general-900',
+                { '!text-general-300 pointer-events-none': context.disableNextButton },
+            ],
+        });
+    },
+    prev: function (_a) {
+        var context = _a.context;
+        return ({
+            class: [
+                'text-2xl text-general-900 rotate-180',
+                { '!text-general-300 pointer-events-none': context.disablePrevButton },
+            ],
+        });
+    },
+    daylabel: function (_a) {
+        var context = _a.context;
+        return ({
+            class: [
+                'flex items-center justify-center w-12 h-12 focus:outline-none focus-visible:outline-none cursor-pointer',
+                {
+                    'hidden': context.day.isOtherMonth,
+                    'text-white !rounded-full focus:outline-none focus-visible:outline-none cursor-pointer': context.day.isWorkDay || context.day.isNationalHoliday,
+                    'bg-danger-500 hover:bg-danger-500/90': context.day.state === 'holiday',
+                    'bg-primary-1000 hover:bg-primary-1000/90': context.day.state === 'workday',
+                },
+            ],
+        });
+    },
+};

package/index.d.ts

@@ -1 +1,2 @@
 export { default as wangsvue } from './wangsvue';
+export { default as fixedasset } from './fixedasset';

package/index.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.wangsvue = void 0;
+exports.fixedasset = exports.wangsvue = void 0;
 var wangsvue_1 = require("./wangsvue");
 Object.defineProperty(exports, "wangsvue", { enumerable: true, get: function () { return wangsvue_1.default; } });
+var fixedasset_1 = require("./fixedasset");
+Object.defineProperty(exports, "fixedasset", { enumerable: true, get: function () { return fixedasset_1.default; } });

package/package.json

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