@fewangsit/wangsvue-presets 1.0.80

package/index.d.ts

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

package/index.js

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

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@fewangsit/wangsvue-presets",
+  "version": "1.0.80",
+  "author": "Wangsit FE Developer",
+  "description": "Wangsit VueJS Component Library Presets",
+  "main": "index.js",
+  "repository": "https://github.com/fewangsit/wangsvue",
+  "scripts": {
+    "dev": "sh dev.sh",
+    "build": "sh build.sh",
+    "release": "sh build.sh && sh release.sh"
+  }
+}

package/wangsvue/accordion/index.d.ts

@@ -0,0 +1,37 @@
+declare namespace _default {
+    namespace accordiontab {
+        function header({ props }: {
+            props: any;
+        }): {
+            class: (string | {
+                'select-none pointer-events-none cursor-default opacity-60': any;
+            })[];
+        };
+        function headerAction({ context }: {
+            context: any;
+        }): {
+            class: string[];
+        };
+        namespace headerIcon {
+            let _class: string;
+            export { _class as class };
+        }
+        namespace headerTitle {
+            let _class_1: string;
+            export { _class_1 as class };
+        }
+        namespace content {
+            let _class_2: string[];
+            export { _class_2 as class };
+        }
+        namespace transition {
+            let enterFromClass: string;
+            let enterActiveClass: string;
+            let enterToClass: string;
+            let leaveFromClass: string;
+            let leaveActiveClass: string;
+            let leaveToClass: string;
+        }
+    }
+}
+export default _default;

package/wangsvue/accordion/index.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    accordiontab: {
+        header: function (_a) {
+            var props = _a.props;
+            return ({
+                class: [
+                    // Sizing
+                    'pt-6 pb-0',
+                    'mt-6',
+                    // Shape
+                    'border-x-0 border-b-0',
+                    // Color
+                    'border border-surface-200',
+                    // State
+                    {
+                        'select-none pointer-events-none cursor-default opacity-60': props === null || props === void 0 ? void 0 : props.disabled,
+                    },
+                ],
+            });
+        },
+        headerAction: function (_a) {
+            var context = _a.context;
+            return ({
+                class: [
+                    //Font
+                    'font-semibold',
+                    'leading-7',
+                    // Alignments
+                    'flex items-center justify-between flex-row-reverse',
+                    'relative',
+                    // Shape
+                    'rounded-md',
+                    // Color
+                    'bg-transparent',
+                    'text-surface-900',
+                    // States
+                    'focus:outline-none focus:outline-offset-0 focus-visible:ring-2 focus-visible:ring-primary-600 ring-inset', // Focus
+                    // Misc
+                    'cursor-pointer no-underline select-none',
+                ],
+            });
+        },
+        headerIcon: {
+            class: 'inline-block ml-2',
+        },
+        headerTitle: {
+            class: 'leading-7',
+        },
+        content: {
+            class: [
+                // Font
+                'leading-7',
+                // Spacing
+                'pr-12 pt-2',
+                // Color
+                'text-surface-600',
+            ],
+        },
+        transition: {
+            enterFromClass: 'max-h-0',
+            enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+            enterToClass: 'max-h-[1000px]',
+            leaveFromClass: 'max-h-[1000px]',
+            leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+            leaveToClass: 'max-h-0',
+        },
+    },
+};

package/wangsvue/autocomplete/index.d.ts

@@ -0,0 +1,188 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'w-full': any;
+            'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+        } | {
+            'opacity-60 select-none pointer-events-none cursor-default': any;
+            'w-full'?: undefined;
+        })[];
+    };
+    function container({ props, state }: {
+        props: any;
+        state: any;
+    }): {
+        class: (string | {
+            'px-3 py-1.5': boolean;
+            'px-3 py-1': any;
+            'ring-1 ring-inset ring-surface-300'?: undefined;
+            'ring-2 ring-primary-500'?: undefined;
+        } | {
+            'ring-1 ring-inset ring-surface-300': boolean;
+            'ring-2 ring-primary-500': any;
+            'px-3 py-1.5'?: undefined;
+            'px-3 py-1'?: undefined;
+        })[];
+    };
+    function inputtoken({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'py-1.5 px-0': boolean;
+            'p-0.5': any;
+        })[];
+    };
+    function input({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'rounded-tr-none rounded-br-none': any;
+            'outline-none shadow-none rounded-none'?: undefined;
+            'w-full'?: undefined;
+            'py-1.5 px-3'?: undefined;
+            'p-0'?: undefined;
+            'bg-surface-0'?: undefined;
+            'border border-surface-300'?: undefined;
+            'border-0 bg-transparent'?: undefined;
+            'focus:outline-none focus:outline-offset-0 focus:ring-inset focus:ring-2 focus:ring-primary-500'?: undefined;
+        } | {
+            'outline-none shadow-none rounded-none': any;
+            'rounded-tr-none rounded-br-none'?: undefined;
+            'w-full'?: undefined;
+            'py-1.5 px-3'?: undefined;
+            'p-0'?: undefined;
+            'bg-surface-0'?: undefined;
+            'border border-surface-300'?: undefined;
+            'border-0 bg-transparent'?: undefined;
+            'focus:outline-none focus:outline-offset-0 focus:ring-inset focus:ring-2 focus:ring-primary-500'?: undefined;
+        } | {
+            'w-full': any;
+            'rounded-tr-none rounded-br-none'?: undefined;
+            'outline-none shadow-none rounded-none'?: undefined;
+            'py-1.5 px-3'?: undefined;
+            'p-0'?: undefined;
+            'bg-surface-0'?: undefined;
+            'border border-surface-300'?: undefined;
+            'border-0 bg-transparent'?: undefined;
+            'focus:outline-none focus:outline-offset-0 focus:ring-inset focus:ring-2 focus:ring-primary-500'?: undefined;
+        } | {
+            'py-1.5 px-3': boolean;
+            'p-0': any;
+            'rounded-tr-none rounded-br-none'?: undefined;
+            'outline-none shadow-none rounded-none'?: undefined;
+            'w-full'?: undefined;
+            'bg-surface-0'?: undefined;
+            'border border-surface-300'?: undefined;
+            'border-0 bg-transparent'?: undefined;
+            'focus:outline-none focus:outline-offset-0 focus:ring-inset focus:ring-2 focus:ring-primary-500'?: undefined;
+        } | {
+            'bg-surface-0': boolean;
+            'border border-surface-300': boolean;
+            'border-0 bg-transparent': any;
+            'rounded-tr-none rounded-br-none'?: undefined;
+            'outline-none shadow-none rounded-none'?: undefined;
+            'w-full'?: undefined;
+            'py-1.5 px-3'?: undefined;
+            'p-0'?: undefined;
+            'focus:outline-none focus:outline-offset-0 focus:ring-inset focus:ring-2 focus:ring-primary-500'?: undefined;
+        } | {
+            'focus:outline-none focus:outline-offset-0 focus:ring-inset focus:ring-2 focus:ring-primary-500': boolean;
+            'rounded-tr-none rounded-br-none'?: undefined;
+            'outline-none shadow-none rounded-none'?: undefined;
+            'w-full'?: undefined;
+            'py-1.5 px-3'?: undefined;
+            'p-0'?: undefined;
+            'bg-surface-0'?: undefined;
+            'border border-surface-300'?: undefined;
+            'border-0 bg-transparent'?: undefined;
+        })[];
+    };
+    namespace token {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace label {
+        let _class_1: string;
+        export { _class_1 as class };
+    }
+    namespace removeTokenIcon {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    namespace dropdownbutton {
+        export namespace root_1 {
+            let _class_3: string[];
+            export { _class_3 as class };
+        }
+        export { root_1 as root };
+    }
+    namespace loadingicon {
+        let _class_4: string[];
+        export { _class_4 as class };
+    }
+    namespace panel {
+        let _class_5: string[];
+        export { _class_5 as class };
+    }
+    namespace list {
+        let _class_6: string;
+        export { _class_6 as class };
+    }
+    function item({ context }: {
+        context: any;
+    }): {
+        class: (string | {
+            'font-normal': boolean;
+            'font-bold': any;
+            'text-surface-700/80'?: undefined;
+            'bg-surface-200 text-surface-700/80'?: undefined;
+            'bg-primary-500 text-white'?: undefined;
+            'bg-transparent text-surface-700/80'?: undefined;
+        } | {
+            'text-surface-700/80': boolean;
+            'font-normal'?: undefined;
+            'font-bold'?: undefined;
+            'bg-surface-200 text-surface-700/80'?: undefined;
+            'bg-primary-500 text-white'?: undefined;
+            'bg-transparent text-surface-700/80'?: undefined;
+        } | {
+            'bg-surface-200 text-surface-700/80': boolean;
+            'font-normal'?: undefined;
+            'font-bold'?: undefined;
+            'text-surface-700/80'?: undefined;
+            'bg-primary-500 text-white'?: undefined;
+            'bg-transparent text-surface-700/80'?: undefined;
+        } | {
+            'bg-primary-500 text-white': any;
+            'font-normal'?: undefined;
+            'font-bold'?: undefined;
+            'text-surface-700/80'?: undefined;
+            'bg-surface-200 text-surface-700/80'?: undefined;
+            'bg-transparent text-surface-700/80'?: undefined;
+        } | {
+            'bg-transparent text-surface-700/80': any;
+            'font-normal'?: undefined;
+            'font-bold'?: undefined;
+            'text-surface-700/80'?: undefined;
+            'bg-surface-200 text-surface-700/80'?: undefined;
+            'bg-primary-500 text-white'?: undefined;
+        })[];
+    };
+    namespace itemgroup {
+        let _class_7: string[];
+        export { _class_7 as class };
+    }
+    namespace emptymessage {
+        let _class_8: string[];
+        export { _class_8 as class };
+    }
+    namespace transition {
+        let enterFromClass: string;
+        let enterActiveClass: string;
+        let leaveActiveClass: string;
+        let leaveToClass: string;
+    }
+}
+export default _default;

package/wangsvue/autocomplete/index.js

@@ -0,0 +1,247 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                'relative',
+                // Flex
+                'inline-flex',
+                // Size
+                { 'w-full': props.multiple },
+                // Color
+                'text-surface-900',
+                //States
+                {
+                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled,
+                },
+            ],
+        });
+    },
+    container: function (_a) {
+        var props = _a.props, state = _a.state;
+        return ({
+            class: [
+                // Font
+                'font-sans sm:text-sm leading-none',
+                // Flex
+                'flex items-center flex-wrap',
+                'gap-1',
+                // Spacing
+                'm-0 list-none',
+                'px-3 py-1',
+                { 'px-3 py-1.5': !props.multiple, 'px-3 py-1': props.multiple },
+                // Size
+                'w-full',
+                // Shape
+                'appearance-none rounded-md',
+                // Color
+                'text-surface-900',
+                'bg-surface-0',
+                'placeholder:text-surface-400',
+                'shadow-sm',
+                // States
+                'focus:outline-none focus:outline-offset-0',
+                {
+                    'ring-1 ring-inset ring-surface-300': !state.focused,
+                    'ring-2 ring-primary-500': state.focused,
+                },
+                // Transition
+                'transition duration-200 ease-in-out',
+                // Misc
+                'cursor-text overflow-hidden',
+            ],
+        });
+    },
+    inputtoken: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                { 'py-1.5 px-0': !props.multiple, 'p-0.5': props.multiple },
+                ,
+                'inline-flex flex-auto',
+            ],
+        });
+    },
+    input: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Font
+                'font-sans sm:text-sm leading-none',
+                // Shape
+                'appearance-none rounded-md',
+                { 'rounded-tr-none rounded-br-none': props.dropdown },
+                { 'outline-none shadow-none rounded-none': props.multiple },
+                // Size
+                { 'w-full': props.multiple },
+                // Spacing
+                'm-0',
+                { 'py-1.5 px-3': !props.multiple, 'p-0': props.multiple },
+                // Colors
+                'text-surface-700/80',
+                {
+                    'bg-surface-0': !props.multiple,
+                    'border border-surface-300': !props.multiple,
+                    'border-0 bg-transparent': props.multiple,
+                },
+                // States
+                {
+                    'focus:outline-none focus:outline-offset-0 focus:ring-inset focus:ring-2 focus:ring-primary-500': !props.multiple,
+                },
+                // Transition
+                'transition-colors duration-200',
+            ],
+        });
+    },
+    token: {
+        class: [
+            // Flexbox
+            'inline-flex items-center',
+            // Spacing
+            'py-0.5 px-3',
+            // Shape
+            'rounded-[1.14rem]',
+            // Colors
+            'text-surface-700/70',
+            'bg-surface-200',
+        ],
+    },
+    label: {
+        class: 'leading-5',
+    },
+    removeTokenIcon: {
+        class: [
+            // Shape
+            'rounded-md leading-6',
+            // Spacing
+            'ml-2',
+            // Size
+            'w-4 h-4',
+            // Transition
+            'transition duration-200 ease-in-out',
+            // Misc
+            'cursor-pointer',
+        ],
+    },
+    dropdownbutton: {
+        root: {
+            class: [
+                'relative text-sm leading-none',
+                // Alignments
+                'items-center inline-flex text-center align-bottom',
+                // Shape
+                'rounded-r-md',
+                // Size
+                'px-2.5 py-1.5',
+                '-ml-[1px]',
+                // Colors
+                'text-surface-600',
+                'bg-surface-100',
+                'ring-1 ring-inset ring-surface-300',
+                // States
+                'hover:bg-surface-200',
+                'focus:outline-none focus:outline-offset-0 focus:ring-1',
+                'focus:ring-primary-500',
+            ],
+        },
+    },
+    loadingicon: {
+        class: [
+            'text-sm leading-none text-surface-500',
+            'absolute top-[50%] right-[0.5rem] -mt-2 animate-spin',
+        ],
+    },
+    panel: {
+        class: [
+            // Position
+            'absolute top-0 left-0',
+            'mt-2',
+            // Shape
+            'border-0',
+            'rounded-md',
+            'shadow-md',
+            'max-h-[15rem]',
+            'overflow-auto',
+            // Color
+            'bg-surface-0',
+            'text-surface-800/80',
+            'ring-1 ring-inset ring-surface-300',
+        ],
+    },
+    list: {
+        class: 'py-1 list-none m-0',
+    },
+    item: function (_a) {
+        var context = _a.context;
+        return ({
+            class: [
+                // Font
+                'sm:text-sm',
+                'leading-none',
+                { 'font-normal': !context.selected, 'font-bold': context.selected },
+                // Position
+                'relative',
+                // Shape
+                'border-0',
+                'rounded-none',
+                // Spacing
+                'm-0',
+                'py-2 px-4',
+                // Color
+                {
+                    'text-surface-700/80': !context.focused && !context.selected,
+                },
+                {
+                    'bg-surface-200 text-surface-700/80': context.focused && !context.selected,
+                },
+                {
+                    'bg-primary-500 text-white': context.focused && context.selected,
+                },
+                {
+                    'bg-transparent text-surface-700/80': !context.focused && context.selected,
+                },
+                //States
+                'hover:bg-primary-500 hover:text-white',
+                // Misc
+                'cursor-pointer',
+                'overflow-hidden',
+                'whitespace-nowrap',
+            ],
+        });
+    },
+    itemgroup: {
+        class: [
+            //Font
+            'font-bold',
+            'sm:text-sm',
+            // Spacing
+            'm-0',
+            'py-2 px-4',
+            // Color
+            'text-surface-800/80',
+            'bg-surface-0',
+            // Misc
+            'cursor-auto',
+        ],
+    },
+    emptymessage: {
+        class: [
+            // Font
+            'leading-none',
+            'sm:text-sm',
+            // Spacing
+            'py-2 px-4',
+            // Color
+            'text-surface-800/80',
+            'bg-transparent',
+        ],
+    },
+    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/wangsvue/avatar/index.d.ts

@@ -0,0 +1,85 @@
+declare namespace _default {
+    function root({ props, parent }: {
+        props: any;
+        parent: any;
+    }): {
+        class: (string | {
+            'text-sm': boolean;
+            'text-lg': boolean;
+            'text-xl': boolean;
+            'h-[30px] w-[30px]'?: undefined;
+            'w-12 h-12'?: undefined;
+            'w-16 h-16'?: undefined;
+            '-ml-4'?: undefined;
+            'rounded-lg'?: undefined;
+            'rounded-full'?: undefined;
+            'border-[0.5px]'?: undefined;
+            'border-gray-100'?: undefined;
+        } | {
+            'h-[30px] w-[30px]': boolean;
+            'w-12 h-12': boolean;
+            'w-16 h-16': boolean;
+            'text-sm'?: undefined;
+            'text-lg'?: undefined;
+            'text-xl'?: undefined;
+            '-ml-4'?: undefined;
+            'rounded-lg'?: undefined;
+            'rounded-full'?: undefined;
+            'border-[0.5px]'?: undefined;
+            'border-gray-100'?: undefined;
+        } | {
+            '-ml-4': boolean;
+            'text-sm'?: undefined;
+            'text-lg'?: undefined;
+            'text-xl'?: undefined;
+            'h-[30px] w-[30px]'?: undefined;
+            'w-12 h-12'?: undefined;
+            'w-16 h-16'?: undefined;
+            'rounded-lg'?: undefined;
+            'rounded-full'?: undefined;
+            'border-[0.5px]'?: undefined;
+            'border-gray-100'?: undefined;
+        } | {
+            'rounded-lg': boolean;
+            'rounded-full': boolean;
+            'text-sm'?: undefined;
+            'text-lg'?: undefined;
+            'text-xl'?: undefined;
+            'h-[30px] w-[30px]'?: undefined;
+            'w-12 h-12'?: undefined;
+            'w-16 h-16'?: undefined;
+            '-ml-4'?: undefined;
+            'border-[0.5px]'?: undefined;
+            'border-gray-100'?: undefined;
+        } | {
+            'border-[0.5px]': boolean;
+            'text-sm'?: undefined;
+            'text-lg'?: undefined;
+            'text-xl'?: undefined;
+            'h-[30px] w-[30px]'?: undefined;
+            'w-12 h-12'?: undefined;
+            'w-16 h-16'?: undefined;
+            '-ml-4'?: undefined;
+            'rounded-lg'?: undefined;
+            'rounded-full'?: undefined;
+            'border-gray-100'?: undefined;
+        } | {
+            'border-gray-100': boolean;
+            'text-sm'?: undefined;
+            'text-lg'?: undefined;
+            'text-xl'?: undefined;
+            'h-[30px] w-[30px]'?: undefined;
+            'w-12 h-12'?: undefined;
+            'w-16 h-16'?: undefined;
+            '-ml-4'?: undefined;
+            'rounded-lg'?: undefined;
+            'rounded-full'?: undefined;
+            'border-[0.5px]'?: undefined;
+        })[];
+    };
+    namespace image {
+        let _class: string;
+        export { _class as class };
+    }
+}
+export default _default;