@fewangsit/wangsvue-presets 1.0.80

package/wangsvue/megamenu/index.js

@@ -0,0 +1,202 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                'relative',
+                // Flexbox
+                'flex',
+                // Spacing
+                'min-h-[4rem]',
+                // Shape
+                'rounded-md',
+                'shadow-md',
+                // Color
+                'bg-surface-0',
+                'ring-1 ring-inset ring-surface-100 ring-offset-0',
+                {
+                    'items-center px-2 sm:px-6': props.orientation == 'horizontal',
+                    'flex-col justify-center sm:justify-start sm:w-48 px-2': props.orientation !== 'horizontal',
+                },
+            ],
+        });
+    },
+    menu: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Flexbox
+                'sm:flex sm:row-gap-2 sm:col-gap-4',
+                'items-center',
+                'flex-wrap',
+                'flex-col sm:flex-row',
+                { hidden: !(props === null || props === void 0 ? void 0 : props.mobileActive), flex: props === null || props === void 0 ? void 0 : props.mobileActive },
+                // Position
+                'absolute sm:relative',
+                'top-full left-0',
+                'sm:top-auto sm:left-auto',
+                // Size
+                'w-full sm:w-auto',
+                // Spacing
+                'm-0 ',
+                'py-2 px-1.5 sm:py-0 sm:p-0 sm:py-1.5',
+                'list-none',
+                // Shape
+                'shadow-md sm:shadow-none',
+                'border-0',
+                'sm:rounded-none rounded-md',
+                // Color
+                'bg-surface-0 sm:bg-transparent',
+                // Misc
+                'outline-none',
+            ],
+        });
+    },
+    menuitem: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                'sm:relative static',
+                {
+                    'sm:w-auto w-full': props.horizontal,
+                    'w-full': !props.horizontal,
+                },
+            ],
+        });
+    },
+    content: function (_a) {
+        var props = _a.props, context = _a.context;
+        return ({
+            class: [
+                // Shape
+                { 'rounded-md': props.level < 1 },
+                //  Colors
+                {
+                    'text-surface-500/70': !context.focused && !context.active,
+                    'text-surface-500/70 bg-surface-200': context.focused && !context.active,
+                    'text-surface-900/80 bg-surface-50': context.focused && context.active,
+                    'text-surface-900/80 bg-surface-50': !context.focused && context.active,
+                },
+                // Hover States
+                {
+                    'hover:bg-surface-50': !context.active,
+                    'hover:bg-surface-100 text-surface-900/80': context.active,
+                },
+                // Transitions
+                'transition-all',
+                'duration-200',
+            ],
+        });
+    },
+    action: {
+        class: [
+            'relative',
+            // Font
+            'sm:text-sm font-medium',
+            // Flexbox
+            'flex',
+            'items-center',
+            // Spacing
+            'py-2',
+            'px-3',
+            'my-1 sm:my-0',
+            // Misc
+            'select-none',
+            'cursor-pointer',
+            'no-underline ',
+            'overflow-hidden',
+        ],
+    },
+    icon: {
+        class: 'mr-2',
+    },
+    submenuicon: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                {
+                    'ml-auto sm:ml-2': props.horizontal,
+                    'ml-auto': !props.horizontal,
+                },
+            ],
+        });
+    },
+    panel: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Size
+                'w-auto',
+                // Spacing
+                'py-1',
+                'm-0 mx-2',
+                // Shape
+                'shadow-none sm:shadow-md',
+                'border-0',
+                // Color
+                'bg-surface-0',
+                // Position
+                'static sm:absolute',
+                'z-10',
+                {
+                    'sm:left-full top-0': !props.horizontal,
+                },
+            ],
+        });
+    },
+    grid: {
+        class: 'flex flex-wrap sm:flex-nowrap',
+    },
+    column: {
+        class: 'w-full sm:w-1/2',
+    },
+    submenu: {
+        class: ['m-0 list-none', 'py-1 px-2 w-full sm:min-w-[14rem]'],
+    },
+    submenuheader: {
+        class: [
+            'font-medium',
+            'sm:text-md',
+            // Spacing
+            'py-2.5 px-2',
+            'm-0',
+            // Shape
+            'border-b border-surface-200',
+            // Color
+            'text-surface-700/80',
+            'bg-surface-0',
+        ],
+    },
+    separator: {
+        class: 'border-t border-surface-200 my-1',
+    },
+    menubutton: {
+        class: [
+            // Flexbox
+            'flex sm:hidden',
+            'items-center justify-center',
+            // Size
+            'w-8',
+            'h-8',
+            // Shape
+            'rounded-full',
+            // Color
+            'text-surface-500/80',
+            // States
+            'hover:text-surface-600',
+            'hover:bg-surface-50',
+            'focus:outline-none focus:outline-offset-0',
+            'focus:ring-2 focus:ring-inset focus:ring-primary-500',
+            // Transitions
+            'transition duration-200 ease-in-out',
+            // Misc
+            'cursor-pointer',
+            'no-underline',
+        ],
+    },
+    end: {
+        class: 'ml-auto self-center',
+    },
+};

package/wangsvue/menu/index.d.ts

@@ -0,0 +1,49 @@
+declare namespace _default {
+    namespace root {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace menu {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    namespace start {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    namespace menuitem {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+    function content({ context }: {
+        context: any;
+    }): {
+        class: string[];
+    };
+    namespace action {
+        let _class_4: string[];
+        export { _class_4 as class };
+    }
+    namespace icon {
+        let _class_5: string[];
+        export { _class_5 as class };
+    }
+    function label({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            '!text-danger-500': any;
+        })[];
+    };
+    namespace submenuheader {
+        let _class_6: string[];
+        export { _class_6 as class };
+    }
+    namespace transition {
+        let enterFromClass: string;
+        let enterActiveClass: string;
+        let leaveActiveClass: string;
+        let leaveToClass: string;
+    }
+}
+export default _default;

package/wangsvue/menu/index.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: {
+        class: [
+            // Position
+            // Transition
+            'transition-transform',
+            'z-[3299]',
+            // Sizing and Shape
+            'w-max min-w-52',
+            '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
+            // 'p-1.5',
+            'shadow',
+            'overflow-hidden',
+            // Colors
+            'bg-white',
+            'text-general-800',
+        ],
+    },
+    menu: {
+        class: [
+            // Spacings and Shape
+            'list-none',
+            'm-0',
+            'p-0',
+            'outline-none',
+            'w-full',
+        ],
+    },
+    start: {
+        class: ['flex justify-end', 'py-[3px] px-4'],
+    },
+    menuitem: {
+        class: [
+            // Space
+            // Misc
+            'cursor-pointer',
+        ],
+    },
+    content: function (_a) {
+        var context = _a.context;
+        return ({
+            class: [
+                // Space
+                // 'px-2',
+                'w-full',
+                // Shape
+                'rounded-md',
+                // Colors
+                'text-inherit',
+                // Transitions
+                'transition-shadow',
+                'duration-200',
+            ],
+        });
+    },
+    action: {
+        class: [
+            'flex items-center justify-start gap-2',
+            'px-4 py-[7px]',
+            'hover:bg-primary-50/80',
+            'text-xs',
+            // 'relative',
+            // Font
+            // 'font-semibold',
+            // Flexbox
+            // 'flex',
+            // 'items-center',
+            // Spacing
+            // 'py-2',
+            // 'px-3',
+            // Misc
+            'no-underline',
+            'overflow-hidden',
+            'cursor-pointer',
+            'select-none',
+        ],
+    },
+    icon: {
+        class: [
+            // Spacing
+            'w-4 h-4',
+        ],
+    },
+    label: function (_a) {
+        var props = _a.props;
+        return ({
+            class: ['text-inherit', { '!text-danger-500': props.danger }],
+        });
+    },
+    submenuheader: {
+        class: [
+            // Font
+            'text-inherit',
+        ],
+    },
+    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/menubar/index.d.ts

@@ -0,0 +1,85 @@
+declare namespace _default {
+    namespace root {
+        let _class: string[];
+        export { _class as class };
+    }
+    function menu({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            hidden: boolean;
+            flex: any;
+        })[];
+    };
+    namespace menuitem {
+        let _class_1: string;
+        export { _class_1 as class };
+    }
+    function content({ props, context }: {
+        props: any;
+        context: any;
+    }): {
+        class: (string | {
+            'rounded-md': any;
+            'text-surface-500/70'?: undefined;
+            'text-surface-500/70 bg-surface-200'?: undefined;
+            'text-surface-900/80 bg-surface-50'?: undefined;
+            'hover:bg-surface-50'?: undefined;
+            'hover:bg-surface-100 text-surface-900/80'?: undefined;
+        } | {
+            'text-surface-500/70': boolean;
+            'text-surface-500/70 bg-surface-200': boolean;
+            'text-surface-900/80 bg-surface-50': any;
+            'rounded-md'?: undefined;
+            'hover:bg-surface-50'?: undefined;
+            'hover:bg-surface-100 text-surface-900/80'?: undefined;
+        } | {
+            'hover:bg-surface-50': boolean;
+            'hover:bg-surface-100 text-surface-900/80': any;
+            'rounded-md'?: undefined;
+            'text-surface-500/70'?: undefined;
+            'text-surface-500/70 bg-surface-200'?: undefined;
+            'text-surface-900/80 bg-surface-50'?: undefined;
+        })[];
+    };
+    function action({ context }: {
+        context: any;
+    }): {
+        class: (string | {
+            'pl-5 sm:pl-3': boolean;
+            'pl-7 sm:pl-3': boolean;
+        })[];
+    };
+    namespace icon {
+        let _class_2: string;
+        export { _class_2 as class };
+    }
+    function submenuicon({ props }: {
+        props: any;
+    }): {
+        class: {
+            'ml-auto sm:ml-2': any;
+            'ml-auto': boolean;
+        }[];
+    };
+    function submenu({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'sm:absolute sm:left-full sm:top-0': boolean;
+        })[];
+    };
+    namespace separator {
+        let _class_3: string;
+        export { _class_3 as class };
+    }
+    namespace button {
+        let _class_4: string[];
+        export { _class_4 as class };
+    }
+    namespace end {
+        let _class_5: string;
+        export { _class_5 as class };
+    }
+}
+export default _default;

package/wangsvue/menubar/index.js

@@ -0,0 +1,172 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: {
+        class: [
+            'relative',
+            // Flexbox
+            'flex',
+            'items-center',
+            'gap-6',
+            // Spacing
+            'px-6',
+            'min-h-[4rem]',
+            // Shape
+            'rounded-md',
+            'shadow-md',
+            // Color
+            'bg-surface-0',
+            'ring-1 ring-inset ring-surface-100 ring-offset-0',
+        ],
+    },
+    menu: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Flexbox
+                'sm:flex sm:row-gap-2 sm:col-gap-4',
+                'items-center',
+                'flex-wrap',
+                'flex-col sm:flex-row',
+                { hidden: !(props === null || props === void 0 ? void 0 : props.mobileActive), flex: props === null || props === void 0 ? void 0 : props.mobileActive },
+                // Position
+                'absolute sm:relative',
+                'top-full left-0',
+                'sm:top-auto sm:left-auto',
+                // Size
+                'w-full sm:w-auto',
+                // Spacing
+                'm-0 ',
+                'py-2 px-1.5 sm:py-0 sm:p-0 sm:py-1.5',
+                'list-none',
+                // Shape
+                'shadow-md sm:shadow-none',
+                'border-0',
+                'sm:rounded-none rounded-md',
+                // Color
+                'bg-surface-0 sm:bg-transparent',
+                // Misc
+                'outline-none',
+            ],
+        });
+    },
+    menuitem: {
+        class: 'sm:relative sm:w-auto w-full static',
+    },
+    content: function (_a) {
+        var props = _a.props, context = _a.context;
+        return ({
+            class: [
+                // Shape
+                { 'rounded-md': props.root },
+                //  Colors
+                {
+                    'text-surface-500/70': !context.focused && !context.active,
+                    'text-surface-500/70 bg-surface-200': context.focused && !context.active,
+                    'text-surface-900/80 bg-surface-50': !context.focused && context.active,
+                },
+                // Hover States
+                {
+                    'hover:bg-surface-50': !context.active,
+                    'hover:bg-surface-100 text-surface-900/80': context.active,
+                },
+                // Transitions
+                'transition-all',
+                'duration-200',
+            ],
+        });
+    },
+    action: function (_a) {
+        var context = _a.context;
+        return ({
+            class: [
+                'relative',
+                // Font
+                'sm:text-sm font-medium',
+                // Flexbox
+                'flex',
+                'items-center',
+                // Spacing
+                'py-2',
+                'px-3',
+                'my-1 sm:my-0',
+                // Size
+                {
+                    'pl-5 sm:pl-3': context.level === 1,
+                    'pl-7 sm:pl-3': context.level === 2,
+                },
+                // Misc
+                'select-none',
+                'cursor-pointer',
+                'no-underline ',
+                'overflow-hidden',
+            ],
+        });
+    },
+    icon: {
+        class: 'mr-2',
+    },
+    submenuicon: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                {
+                    'ml-auto sm:ml-2': props.root,
+                    'ml-auto': !props.root,
+                },
+            ],
+        });
+    },
+    submenu: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Size
+                'w-full sm:w-48',
+                // Spacing
+                'py-1',
+                'm-0 ',
+                'list-none',
+                // Shape
+                'shadow-none sm:shadow-md',
+                'border-0',
+                // Position
+                'static sm:absolute',
+                'z-10',
+                { 'sm:absolute sm:left-full sm:top-0': props.level > 1 },
+                // Color
+                'bg-surface-0',
+            ],
+        });
+    },
+    separator: {
+        class: 'border-t border-surface-200 my-1',
+    },
+    button: {
+        class: [
+            // Flexbox
+            'flex sm:hidden',
+            'items-center justify-center',
+            // Size
+            'w-8',
+            'h-8',
+            // Shape
+            'rounded-full',
+            // Color
+            'text-surface-500/80',
+            // States
+            'hover:text-surface-600',
+            'hover:bg-surface-50',
+            'focus:outline-none focus:outline-offset-0',
+            'focus:ring-2 focus:ring-inset focus:ring-primary-500',
+            // Transitions
+            'transition duration-200 ease-in-out',
+            // Misc
+            'cursor-pointer',
+            'no-underline',
+        ],
+    },
+    end: {
+        class: 'ml-auto self-center',
+    },
+};

package/wangsvue/message/index.d.ts

@@ -0,0 +1,41 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'text-blue-500': boolean;
+            'text-green-500': boolean;
+            'text-orange-500': boolean;
+            'text-red-500': boolean;
+        })[];
+    };
+    namespace wrapper {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace icon {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    namespace text {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    function button({ props }: {
+        props: any;
+    }): {
+        class: string[];
+    };
+    namespace closeicon {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+    namespace transition {
+        let enterFromClass: string;
+        let enterActiveClass: string;
+        let leaveFromClass: string;
+        let leaveActiveClass: string;
+        let leaveToClass: string;
+    }
+}
+export default _default;