@fewangsit/wangsvue-presets 1.0.80

package/wangsvue/sidebar/index.d.ts

@@ -0,0 +1,66 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            '!transition-none !transform-none !w-screen !h-screen !max-h-full !top-0 !left-0': boolean;
+            'h-full w-full max-w-[28rem]'?: undefined;
+            'h-auto w-full'?: undefined;
+        } | {
+            'h-full w-full max-w-[28rem]': boolean;
+            'h-auto w-full': boolean;
+            '!transition-none !transform-none !w-screen !h-screen !max-h-full !top-0 !left-0'?: 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 closeicon {
+        let _class_4: string[];
+        export { _class_4 as class };
+    }
+    namespace content {
+        let _class_5: string[];
+        export { _class_5 as class };
+    }
+    function mask({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'p-5': boolean;
+            'has-[.mask-active]:bg-transparent bg-surface-500/70/70'?: undefined;
+            'has-[.mask-active]:backdrop-blur-none backdrop-blur-sm'?: undefined;
+        } | {
+            'has-[.mask-active]:bg-transparent bg-surface-500/70/70': any;
+            'has-[.mask-active]:backdrop-blur-none backdrop-blur-sm': any;
+            'p-5'?: undefined;
+        })[];
+    };
+    function transition({ props }: {
+        props: any;
+    }): {
+        enterFromClass: string;
+        leaveToClass: string;
+        enterActiveClass?: undefined;
+        leaveActiveClass?: undefined;
+    } | {
+        enterFromClass: string;
+        enterActiveClass: string;
+        leaveActiveClass: string;
+        leaveToClass: string;
+    };
+}
+export default _default;

package/wangsvue/sidebar/index.js

@@ -0,0 +1,145 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Flexbox
+                'flex flex-col',
+                // Position
+                'relative',
+                {
+                    '!transition-none !transform-none !w-screen !h-screen !max-h-full !top-0 !left-0': props.position == 'full',
+                },
+                // Size
+                {
+                    'h-full w-full max-w-[28rem]': props.position == 'left' || props.position == 'right',
+                    'h-auto w-full': props.position == 'top' || props.position == 'bottom',
+                },
+                // Shape
+                'border-0',
+                'shadow-xl',
+                // Colors
+                'bg-surface-0',
+                'text-surface-700/80',
+                '',
+                // Transitions
+                'transition-transform',
+                'duration-300',
+                // Misc
+                'pointer-events-auto',
+            ],
+        });
+    },
+    header: {
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-between',
+            'shrink-0',
+            // Spacing
+            'px-6 pt-6',
+            // Colors
+            'bg-surface-0',
+            'text-surface-700/80',
+        ],
+    },
+    title: {
+        class: ['font-semibold leading-6 text-base m-0'],
+    },
+    icons: {
+        class: ['flex items-center'],
+    },
+    closeButton: {
+        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',
+        ],
+    },
+    closeicon: {
+        class: [
+            // Display
+            'inline-block',
+            // Size
+            'w-3',
+            'h-3',
+        ],
+    },
+    content: {
+        class: [
+            // Spacing and Size
+            'px-6 pb-6',
+            'mt-6',
+            'h-full',
+            'w-full',
+            // Growth and Overflow
+            'grow',
+            'overflow-y-auto',
+        ],
+    },
+    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-surface-500/70/70': 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: 'translate-x-0 -translate-y-full translate-z-0 mask-active',
+                leaveToClass: 'translate-x-0 -translate-y-full translate-z-0 mask-active',
+            }
+            : props.position === 'bottom'
+                ? {
+                    enterFromClass: 'translate-x-0 translate-y-full translate-z-0 mask-active',
+                    leaveToClass: 'translate-x-0 translate-y-full translate-z-0 mask-active',
+                }
+                : props.position === 'left'
+                    ? {
+                        enterFromClass: '-translate-x-full translate-y-0 translate-z-0 mask-active',
+                        leaveToClass: '-translate-x-full translate-y-0 translate-z-0 mask-active',
+                    }
+                    : props.position === 'right'
+                        ? {
+                            enterFromClass: 'translate-x-full translate-y-0 translate-z-0 mask-active',
+                            leaveToClass: 'translate-x-full translate-y-0 translate-z-0 mask-active',
+                        }
+                        : {
+                            enterFromClass: 'opacity-0 mask-active',
+                            enterActiveClass: 'transition-opacity duration-400 ease-in',
+                            leaveActiveClass: 'transition-opacity duration-400 ease-in',
+                            leaveToClass: 'opacity-0 mask-active',
+                        };
+    },
+};

package/wangsvue/skeleton/index.d.ts

@@ -0,0 +1,16 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'animate-pulse': boolean;
+            'rounded-full'?: undefined;
+            'rounded-md'?: undefined;
+        } | {
+            'rounded-full': boolean;
+            'rounded-md': boolean;
+            'animate-pulse'?: undefined;
+        })[];
+    };
+}
+export default _default;

package/wangsvue/skeleton/index.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                'overflow-hidden',
+                {
+                    'animate-pulse': props.animation !== 'none',
+                },
+                // Round
+                {
+                    'rounded-full': props.shape === 'circle',
+                    'rounded-md': props.shape !== 'circle',
+                },
+                // Colors
+                'bg-general-50',
+            ],
+        });
+    },
+};

package/wangsvue/slider/index.d.ts

@@ -0,0 +1,55 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'h-2 w-full min-w-[15rem]': boolean;
+            'w-2 h-full min-h-[15rem]': boolean;
+            'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+        } | {
+            'opacity-60 select-none pointer-events-none cursor-default': any;
+            'h-2 w-full min-w-[15rem]'?: undefined;
+            'w-2 h-full min-h-[15rem]'?: undefined;
+        })[];
+    };
+    function range({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'top-0 left-0': boolean;
+            'bottom-0 left-0': boolean;
+            'h-full'?: undefined;
+            'w-full'?: undefined;
+        } | {
+            'h-full': boolean;
+            'w-full': boolean;
+            'top-0 left-0'?: undefined;
+            'bottom-0 left-0'?: undefined;
+        })[];
+    };
+    function handle({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'top-[50%] mt-[-0.5rem] ml-[-0.5rem]': boolean;
+            'left-[50%] mb-[-0.5rem] ml-[-0.5rem]': boolean;
+        })[];
+    };
+    function starthandler({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'top-[50%] mt-[-0.5rem] ml-[-0.5rem]': boolean;
+            'left-[50%] mb-[-0.5rem] ml-[-0.5rem]': boolean;
+        })[];
+    };
+    function endhandler({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'top-[50%] mt-[-0.5rem] ml-[-0.5rem]': boolean;
+            'left-[50%] mb-[-0.5rem] ml-[-0.5rem]': boolean;
+        })[];
+    };
+}
+export default _default;

package/wangsvue/slider/index.js

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                'relative',
+                'flex items-center',
+                // Size
+                {
+                    'h-2 w-full min-w-[15rem]': props.orientation == 'horizontal',
+                    'w-2 h-full min-h-[15rem]': props.orientation == 'vertical',
+                },
+                // Shape
+                'border-0 rounded-lg',
+                // Colors
+                'bg-surface-100',
+                // States
+                {
+                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled,
+                },
+            ],
+        });
+    },
+    range: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Position
+                'block absolute',
+                {
+                    'top-0 left-0': props.orientation == 'horizontal',
+                    'bottom-0 left-0': props.orientation == 'vertical',
+                },
+                //Size
+                {
+                    'h-full': props.orientation == 'horizontal',
+                    'w-full': props.orientation == 'vertical',
+                },
+                //Shape
+                'rounded-lg',
+                // Colors
+                'bg-primary-500',
+            ],
+        });
+    },
+    handle: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                'block',
+                // Size
+                'h-4',
+                'w-4',
+                {
+                    'top-[50%] mt-[-0.5rem] ml-[-0.5rem]': props.orientation == 'horizontal',
+                    'left-[50%] mb-[-0.5rem] ml-[-0.5rem]': props.orientation == 'vertical',
+                },
+                // Shape
+                'rounded-full',
+                'ring-2',
+                // Colors
+                'bg-surface-0',
+                'ring-primary-500',
+                // Transitions
+                'transition duration-200',
+                // Misc
+                'cursor-grab',
+                'touch-action-none',
+            ],
+        });
+    },
+    starthandler: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                'block',
+                // Size
+                'h-4',
+                'w-4',
+                {
+                    'top-[50%] mt-[-0.5rem] ml-[-0.5rem]': props.orientation == 'horizontal',
+                    'left-[50%] mb-[-0.5rem] ml-[-0.5rem]': props.orientation == 'vertical',
+                },
+                // Shape
+                'rounded-full',
+                'ring-2',
+                // Colors
+                'bg-surface-0',
+                'ring-primary-500',
+                // Transitions
+                'transition duration-200',
+                // Misc
+                'cursor-grab',
+                'touch-action-none',
+            ],
+        });
+    },
+    endhandler: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                'block',
+                // Size
+                'h-4',
+                'w-4',
+                {
+                    'top-[50%] mt-[-0.5rem] ml-[-0.5rem]': props.orientation == 'horizontal',
+                    'left-[50%] mb-[-0.5rem] ml-[-0.5rem]': props.orientation == 'vertical',
+                },
+                // Shape
+                'rounded-full',
+                'ring-2',
+                // Colors
+                'bg-surface-0',
+                'ring-primary-500',
+                // Transitions
+                'transition duration-200',
+                // Misc
+                'cursor-grab',
+                'touch-action-none',
+            ],
+        });
+    },
+};