@fewangsit/wangsvue-presets 1.0.80

package/wangsvue/progressbar/index.d.ts

@@ -0,0 +1,117 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: {
+            'grid items-center gap-2': boolean;
+            'grid-cols-[max-content,auto]': boolean;
+            'grid-cols-[auto,max-content]': boolean;
+        }[];
+        'data-wv-name': string;
+        'data-wv-section': string;
+    };
+    function container({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'order-2': boolean;
+            'order-1': boolean;
+            'h-3.5'?: undefined;
+            'h-1.5'?: undefined;
+            'bg-general-100 m-0 border-0 progressbar-value-animate before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-primary-400 after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000'?: undefined;
+        } | {
+            'h-3.5': boolean;
+            'h-1.5': boolean;
+            'order-2'?: undefined;
+            'order-1'?: undefined;
+            'bg-general-100 m-0 border-0 progressbar-value-animate before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-primary-400 after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000'?: undefined;
+        } | {
+            'bg-general-100 m-0 border-0 progressbar-value-animate before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-primary-400 after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000': boolean;
+            'order-2'?: undefined;
+            'order-1'?: undefined;
+            'h-3.5'?: undefined;
+            'h-1.5'?: undefined;
+        })[];
+        'data-wv-section': string;
+    };
+    function value({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'absolute flex items-center justify-center': boolean;
+            'bg-warning-500'?: undefined;
+            'min-w-[6px] !bg-grayscale-500'?: undefined;
+            'bg-success-1000'?: undefined;
+            'bg-danger-500'?: undefined;
+            'bg-primary-400'?: undefined;
+            'h-1.5 w-0'?: undefined;
+            'h-3.5 w-0'?: undefined;
+            'transition-width duration-1000 ease-in-out'?: undefined;
+            'progressbar-value-animate'?: undefined;
+            'before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-inherit '?: undefined;
+            'after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000'?: undefined;
+        } | {
+            'bg-warning-500': boolean;
+            'min-w-[6px] !bg-grayscale-500': boolean;
+            'bg-success-1000': boolean;
+            'bg-danger-500': boolean;
+            'bg-primary-400': boolean;
+            'absolute flex items-center justify-center'?: undefined;
+            'h-1.5 w-0'?: undefined;
+            'h-3.5 w-0'?: undefined;
+            'transition-width duration-1000 ease-in-out'?: undefined;
+            'progressbar-value-animate'?: undefined;
+            'before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-inherit '?: undefined;
+            'after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000'?: undefined;
+        } | {
+            'h-1.5 w-0': boolean;
+            'h-3.5 w-0': boolean;
+            'absolute flex items-center justify-center'?: undefined;
+            'bg-warning-500'?: undefined;
+            'min-w-[6px] !bg-grayscale-500'?: undefined;
+            'bg-success-1000'?: undefined;
+            'bg-danger-500'?: undefined;
+            'bg-primary-400'?: undefined;
+            'transition-width duration-1000 ease-in-out'?: undefined;
+            'progressbar-value-animate'?: undefined;
+            'before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-inherit '?: undefined;
+            'after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000'?: undefined;
+        } | {
+            'transition-width duration-1000 ease-in-out': boolean;
+            'progressbar-value-animate': boolean;
+            'absolute flex items-center justify-center'?: undefined;
+            'bg-warning-500'?: undefined;
+            'min-w-[6px] !bg-grayscale-500'?: undefined;
+            'bg-success-1000'?: undefined;
+            'bg-danger-500'?: undefined;
+            'bg-primary-400'?: undefined;
+            'h-1.5 w-0'?: undefined;
+            'h-3.5 w-0'?: undefined;
+            'before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-inherit '?: undefined;
+            'after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000'?: undefined;
+        } | {
+            'before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-inherit ': boolean;
+            'after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000': boolean;
+            'absolute flex items-center justify-center'?: undefined;
+            'bg-warning-500'?: undefined;
+            'min-w-[6px] !bg-grayscale-500'?: undefined;
+            'bg-success-1000'?: undefined;
+            'bg-danger-500'?: undefined;
+            'bg-primary-400'?: undefined;
+            'h-1.5 w-0'?: undefined;
+            'h-3.5 w-0'?: undefined;
+            'transition-width duration-1000 ease-in-out'?: undefined;
+            'progressbar-value-animate'?: undefined;
+        })[];
+    };
+    function label({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'absolute inset-0 mr-1 !text-xs': boolean;
+            'order-1': boolean;
+            'order-2': boolean;
+        })[];
+    };
+}
+export default _default;

package/wangsvue/progressbar/index.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: function (_a) {
+        var props = _a.props;
+        return ({
+            'class': [
+                {
+                    'grid items-center gap-2': props.mode === 'determinate',
+                    'grid-cols-[max-content,auto]': props.valuePosition === 'left-side',
+                    'grid-cols-[auto,max-content]': props.valuePosition === 'right-side',
+                },
+            ],
+            'data-wv-name': 'progressbar',
+            'data-wv-section': 'root',
+        });
+    },
+    container: function (_a) {
+        var props = _a.props;
+        return ({
+            'class': [
+                // Position and Overflow
+                'relative overflow-hidden',
+                {
+                    'order-2': props.valuePosition === 'left-side',
+                    'order-1': props.valuePosition === 'right-side',
+                },
+                // Shape and Size
+                {
+                    'h-3.5': props.mode !== 'indeterminate' && props.valuePosition === 'inside',
+                    'h-1.5': props.mode === 'indeterminate' || props.valuePosition !== 'inside',
+                },
+                // Indeterminate Animation Classes
+                {
+                    'bg-general-100 m-0 border-0 progressbar-value-animate before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-primary-400 after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000': props.mode === 'indeterminate',
+                },
+                'border-0',
+                'rounded-full',
+                'bg-general-100',
+            ],
+            'data-wv-section': 'container',
+        });
+    },
+    value: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Flexbox & Overflow & Position
+                'rounded-full',
+                {
+                    'absolute flex items-center justify-center': props.mode !== 'indeterminate',
+                },
+                // Colors
+                {
+                    'bg-warning-500': (props.value < 100 &&
+                        props.value > 0 &&
+                        props.severity !== 'danger') ||
+                        props.severity === 'warning',
+                    'min-w-[6px] !bg-grayscale-500': +props.value === 0,
+                    'bg-success-1000': props.severity === 'success' || +props.value === 100,
+                    'bg-danger-500': props.severity === 'danger',
+                    'bg-primary-400': props.severity === 'primary',
+                },
+                // Spacing & Sizing
+                'm-0',
+                {
+                    'h-1.5 w-0': props.mode !== 'indeterminate' && props.valuePosition !== 'inside',
+                    'h-3.5 w-0': props.mode !== 'indeterminate' && props.valuePosition === 'inside',
+                },
+                // Shape
+                'border-0',
+                // Transitions
+                {
+                    'transition-width duration-1000 ease-in-out': props.mode !== 'indeterminate',
+                    'progressbar-value-animate': props.mode === 'indeterminate',
+                },
+                // Before & After (indeterminate)
+                {
+                    'before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-inherit ': props.mode === 'indeterminate',
+                    'after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000': props.mode === 'indeterminate',
+                },
+            ],
+        });
+    },
+    label: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Flexbox
+                'inline-flex justify-end',
+                // Font and Text
+                'font-medium text-[14px] leading-4',
+                'leading-none',
+                {
+                    'absolute inset-0 mr-1 !text-xs': props.valuePosition === 'inside',
+                    'order-1': props.valuePosition === 'left-side',
+                    'order-2': props.valuePosition === 'right-side',
+                },
+            ],
+        });
+    },
+};

package/wangsvue/rating/index.d.ts

@@ -0,0 +1,47 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'opacity-60 select-none pointer-events-none cursor-default': any;
+        })[];
+    };
+    function cancelitem({ context }: {
+        context: any;
+    }): {
+        class: (string | {
+            'outline-none ring-2 ring-primary-500': any;
+        })[];
+    };
+    namespace cancelicon {
+        let _class: string[];
+        export { _class as class };
+    }
+    function item({ props, context }: {
+        props: any;
+        context: any;
+    }): {
+        class: (string | {
+            'outline-none ring-2 ring-primary-500': any;
+            'cursor-pointer'?: undefined;
+            'cursor-default'?: undefined;
+        } | {
+            'cursor-pointer': boolean;
+            'cursor-default': any;
+            'outline-none ring-2 ring-primary-500'?: undefined;
+        })[];
+    };
+    function officon({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'hover:text-primary-500': boolean;
+        })[];
+    };
+    function onicon({ props }: {
+        props: any;
+    }): {
+        class: string[];
+    };
+}
+export default _default;

package/wangsvue/rating/index.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                'relative',
+                // Flex & Alignment
+                'flex items-center',
+                'gap-1',
+                // Misc
+                {
+                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled,
+                },
+            ],
+        });
+    },
+    cancelitem: function (_a) {
+        var context = _a.context;
+        return ({
+            class: [
+                // Flex & Alignment
+                'inline-flex items-center',
+                //State
+                {
+                    'outline-none ring-2 ring-primary-500': context.focused,
+                },
+                // Misc
+                'cursor-pointer',
+            ],
+        });
+    },
+    cancelicon: {
+        class: [
+            // Size
+            'w-5 h-5',
+            // Color
+            'text-red-500',
+        ],
+    },
+    item: function (_a) {
+        var props = _a.props, context = _a.context;
+        return ({
+            class: [
+                // Flex & Alignment
+                'inline-flex items-center',
+                // State
+                {
+                    'outline-none ring-2 ring-primary-500': context.focused,
+                },
+                // Misc
+                {
+                    'cursor-pointer': !props.readonly,
+                    'cursor-default': props.readonly,
+                },
+            ],
+        });
+    },
+    officon: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Size
+                'w-5 h-5',
+                // Color
+                'text-surface-700',
+                // State
+                { 'hover:text-primary-500': !props.readonly },
+                // Transition
+                'transition duration-200 ease-in',
+            ],
+        });
+    },
+    onicon: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Size
+                'w-5 h-5',
+                // Color
+                'text-primary-500',
+                // Transition
+                'transition duration-200 ease-in',
+            ],
+        });
+    },
+};

package/wangsvue/ripple/index.d.ts

@@ -0,0 +1,8 @@
+declare namespace _default {
+    namespace root {
+        let _class: string[];
+        export { _class as class };
+        export let style: string;
+    }
+}
+export default _default;

package/wangsvue/ripple/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: {
+        class: ['block absolute bg-surface-0/50 rounded-full pointer-events-none'],
+        style: 'transform: scale(0)',
+    },
+};

package/wangsvue/scrollpanel/index.d.ts

@@ -0,0 +1,19 @@
+declare namespace _default {
+    namespace wrapper {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace content {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    namespace barX {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    namespace barY {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+}
+export default _default;

package/wangsvue/scrollpanel/index.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    wrapper: {
+        class: [
+            // Size & Position
+            'h-full w-full',
+            // Layering
+            'z-[1]',
+            // Spacing
+            'overflow-hidden',
+            // Misc
+            'relative float-left',
+        ],
+    },
+    content: {
+        class: [
+            // Size & Spacing
+            'h-[calc(100%+12px)] w-[calc(100%+12px)] pr-[12px] pb-[12px] pl-0 pt-0',
+            // Overflow & Scrollbar
+            'overflow-scroll scrollbar-none',
+            // Box Model
+            'box-border',
+            // Position
+            'relative',
+            // Webkit Specific
+            '[&::-webkit-scrollbar]:hidden',
+        ],
+    },
+    barX: {
+        class: [
+            // Size & Position
+            'h-[6px] bottom-0',
+            // Appearance
+            'bg-surface-100 rounded',
+            // Interactivity
+            'cursor-pointer',
+            // Visibility & Layering
+            'invisible z-20',
+            // Transition
+            'transition duration-[250ms] ease-linear',
+            // Misc
+            'relative',
+        ],
+    },
+    barY: {
+        class: [
+            // Size & Position
+            'w-[6px] top-0',
+            // Appearance
+            'bg-surface-100 rounded',
+            // Interactivity
+            'cursor-pointer',
+            // Visibility & Layering
+            'z-20',
+            // Transition
+            'transition duration-[250ms] ease-linear',
+            // Misc
+            'relative',
+        ],
+    },
+};

package/wangsvue/scrolltop/index.d.ts

@@ -0,0 +1,50 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            sticky: boolean;
+            fixed: boolean;
+            'rounded-md h-8 w-8'?: undefined;
+            'h-12 w-12 rounded-full shadow-md'?: undefined;
+            'bg-primary-500 hover:bg-primary-600'?: undefined;
+            'bg-surface-500 hover:bg-surface-600'?: undefined;
+            'hover:bg-primary-600'?: undefined;
+            'hover:bg-surface-600'?: undefined;
+        } | {
+            'rounded-md h-8 w-8': boolean;
+            'h-12 w-12 rounded-full shadow-md': boolean;
+            sticky?: undefined;
+            fixed?: undefined;
+            'bg-primary-500 hover:bg-primary-600'?: undefined;
+            'bg-surface-500 hover:bg-surface-600'?: undefined;
+            'hover:bg-primary-600'?: undefined;
+            'hover:bg-surface-600'?: undefined;
+        } | {
+            'bg-primary-500 hover:bg-primary-600': boolean;
+            'bg-surface-500 hover:bg-surface-600': boolean;
+            sticky?: undefined;
+            fixed?: undefined;
+            'rounded-md h-8 w-8'?: undefined;
+            'h-12 w-12 rounded-full shadow-md'?: undefined;
+            'hover:bg-primary-600'?: undefined;
+            'hover:bg-surface-600'?: undefined;
+        } | {
+            'hover:bg-primary-600': boolean;
+            'hover:bg-surface-600': boolean;
+            sticky?: undefined;
+            fixed?: undefined;
+            'rounded-md h-8 w-8'?: undefined;
+            'h-12 w-12 rounded-full shadow-md'?: undefined;
+            'bg-primary-500 hover:bg-primary-600'?: undefined;
+            'bg-surface-500 hover:bg-surface-600'?: undefined;
+        })[];
+    };
+    namespace transition {
+        let enterFromClass: string;
+        let enterActiveClass: string;
+        let leaveActiveClass: string;
+        let leaveToClass: string;
+    }
+}
+export default _default;

package/wangsvue/scrolltop/index.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Flex & Alignment
+                'flex items-center justify-center',
+                // Positioning
+                {
+                    sticky: props.target === 'parent',
+                    fixed: props.target === 'window',
+                },
+                'bottom-[20px] right-[20px]',
+                'ml-auto',
+                // Shape & Size
+                {
+                    'rounded-md h-8 w-8': props.target === 'parent',
+                    'h-12 w-12 rounded-full shadow-md': props.target === 'window',
+                },
+                // Color
+                'text-white',
+                {
+                    'bg-primary-500 hover:bg-primary-600': props.target === 'parent',
+                    'bg-surface-500 hover:bg-surface-600': props.target === 'window',
+                },
+                // States
+                {
+                    'hover:bg-primary-600': props.target === 'parent',
+                    'hover:bg-surface-600': props.target === 'window',
+                },
+            ],
+        });
+    },
+    transition: {
+        enterFromClass: 'opacity-0',
+        enterActiveClass: 'transition-opacity duration-150',
+        leaveActiveClass: 'transition-opacity duration-150',
+        leaveToClass: 'opacity-0',
+    },
+};

package/wangsvue/selectbutton/index.d.ts

@@ -0,0 +1,35 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: string[];
+    };
+    function button({ context }: {
+        context: any;
+    }): {
+        class: (string | {
+            'bg-surface-0': boolean;
+            'text-primary-500': boolean;
+            'text-surface-0': any;
+            'bg-primary-500': any;
+            'focus:bg-primary-50 '?: undefined;
+            'hover:bg-primary-50 '?: undefined;
+            'focus:bg-primary-600'?: undefined;
+            'hover:bg-primary-600'?: undefined;
+        } | {
+            'focus:bg-primary-50 ': boolean;
+            'hover:bg-primary-50 ': boolean;
+            'focus:bg-primary-600': any;
+            'hover:bg-primary-600': any;
+            'bg-surface-0'?: undefined;
+            'text-primary-500'?: undefined;
+            'text-surface-0'?: undefined;
+            'bg-primary-500'?: undefined;
+        })[];
+    };
+    namespace label {
+        let _class: string;
+        export { _class as class };
+    }
+}
+export default _default;

package/wangsvue/selectbutton/index.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                'shadow-sm flex flex-col min-w-[43px] w-max',
+                // {
+                //   'opacity-60 select-none pointer-events-none cursor-default':
+                //     props.disabled,
+                // },
+            ],
+        });
+    },
+    button: function (_a) {
+        var context = _a.context;
+        return ({
+            class: [
+                'relative',
+                // Font
+                'text-body-medium',
+                // Flex Alignment
+                'inline-flex items-center align-bottom text-center',
+                // Spacing
+                'px-3 py-[5px]',
+                // Shape
+                'ring-1 ring-inset ring-primary-500',
+                'first:!rounded-t first:!rounded-b-none',
+                'last:!rounded-t-none last:!rounded-b ',
+                // Color
+                {
+                    'bg-surface-0': !context.active,
+                    'text-primary-500': !context.active,
+                    'text-surface-0': context.active,
+                    'bg-primary-500': context.active,
+                },
+                // States
+                'focus:outline-none focus:outline-offset-0 focus:z-10',
+                {
+                    'focus:bg-primary-50 ': !context.active,
+                    'hover:bg-primary-50 ': !context.active,
+                    'focus:bg-primary-600': context.active,
+                    'hover:bg-primary-600': context.active,
+                },
+                // {
+                //   'opacity-60 select-none pointer-events-none cursor-default':
+                //     context.disabled,
+                // },
+                // Transition
+                'transition duration-200',
+                // Misc
+                'cursor-pointer select-none overflow-hidden',
+            ],
+        });
+    },
+    label: {
+        class: 'font-semibold',
+    },
+};