@fewangsit/wangsvue-presets 1.0.80

package/wangsvue/steps/index.d.ts

@@ -0,0 +1,108 @@
+declare namespace _default {
+    namespace root {
+        let _class: string;
+        export { _class as class };
+    }
+    namespace menu {
+        let _class_1: string;
+        export { _class_1 as class };
+    }
+    namespace menuitem {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    function action({ props, context, state }: {
+        props: any;
+        context: any;
+        state: any;
+    }): {
+        class: (string | {
+            'pr-4 min-[576px]:pr-32 md:pr-40': boolean;
+            'cursor-pointer'?: undefined;
+            'after:border-surface-200'?: undefined;
+            'after:border-primary-500'?: undefined;
+            'after:hidden'?: undefined;
+        } | {
+            'cursor-pointer': boolean;
+            'pr-4 min-[576px]:pr-32 md:pr-40'?: undefined;
+            'after:border-surface-200'?: undefined;
+            'after:border-primary-500'?: undefined;
+            'after:hidden'?: undefined;
+        } | {
+            'after:border-surface-200': boolean;
+            'pr-4 min-[576px]:pr-32 md:pr-40'?: undefined;
+            'cursor-pointer'?: undefined;
+            'after:border-primary-500'?: undefined;
+            'after:hidden'?: undefined;
+        } | {
+            'after:border-primary-500': boolean;
+            'pr-4 min-[576px]:pr-32 md:pr-40'?: undefined;
+            'cursor-pointer'?: undefined;
+            'after:border-surface-200'?: undefined;
+            'after:hidden'?: undefined;
+        } | {
+            'after:hidden': boolean;
+            'pr-4 min-[576px]:pr-32 md:pr-40'?: undefined;
+            'cursor-pointer'?: undefined;
+            'after:border-surface-200'?: undefined;
+            'after:border-primary-500'?: undefined;
+        })[];
+    };
+    function step({ context, props, state }: {
+        context: any;
+        props: any;
+        state: any;
+    }): {
+        class: (string | {
+            'text-surface-400/60': boolean;
+            'border-surface-100': boolean;
+            'bg-surface-0': boolean;
+            'border-primary-500'?: undefined;
+            'text-primary-500'?: undefined;
+            'bg-primary-500'?: undefined;
+            'text-surface-0'?: undefined;
+            'hover:border-surface-300'?: undefined;
+        } | {
+            'border-primary-500': any;
+            'text-primary-500': any;
+            'text-surface-400/60'?: undefined;
+            'border-surface-100'?: undefined;
+            'bg-surface-0'?: undefined;
+            'bg-primary-500'?: undefined;
+            'text-surface-0'?: undefined;
+            'hover:border-surface-300'?: undefined;
+        } | {
+            'bg-primary-500': boolean;
+            'text-surface-0': boolean;
+            'border-primary-500': boolean;
+            'text-surface-400/60'?: undefined;
+            'border-surface-100'?: undefined;
+            'bg-surface-0'?: undefined;
+            'text-primary-500'?: undefined;
+            'hover:border-surface-300'?: undefined;
+        } | {
+            'hover:border-surface-300': boolean;
+            'text-surface-400/60'?: undefined;
+            'border-surface-100'?: undefined;
+            'bg-surface-0'?: undefined;
+            'border-primary-500'?: undefined;
+            'text-primary-500'?: undefined;
+            'bg-primary-500'?: undefined;
+            'text-surface-0'?: undefined;
+        })[];
+    };
+    function label({ context }: {
+        context: any;
+    }): {
+        class: (string | {
+            'font-medium': any;
+            'text-surface-400/60'?: undefined;
+            'text-surface-800/80'?: undefined;
+        } | {
+            'text-surface-400/60': boolean;
+            'text-surface-800/80': any;
+            'font-medium'?: undefined;
+        })[];
+    };
+}
+export default _default;

package/wangsvue/steps/index.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: {
+        class: 'relative',
+    },
+    menu: {
+        class: 'p-0 m-0 list-none flex justify-center',
+    },
+    menuitem: {
+        class: [
+            // Flexbox and Position
+            'relative',
+            'flex',
+            'justify-center',
+        ],
+    },
+    action: function (_a) {
+        var props = _a.props, context = _a.context, state = _a.state;
+        return ({
+            class: [
+                // Flexbox
+                'inline-flex items-start relative',
+                'flex-col',
+                // Transitions and Shape
+                'transition-shadow',
+                'rounded-md',
+                // Spacing
+                {
+                    'pr-4 min-[576px]:pr-32 md:pr-40': props.model.length !== context.index + 1,
+                },
+                // Colors
+                'bg-surface-0',
+                '',
+                // Misc
+                { 'cursor-pointer': !props.readonly },
+                // After
+                'after:border-t-2',
+                {
+                    'after:border-surface-200': state.d_activeStep <= context.index,
+                },
+                {
+                    'after:border-primary-500': state.d_activeStep > context.index,
+                },
+                'after:w-full',
+                'after:absolute',
+                'after:top-1/2',
+                'after:left-0',
+                'after:transform',
+                'after:-mt-3',
+                { 'after:hidden': props.model.length == context.index + 1 },
+            ],
+        });
+    },
+    step: function (_a) {
+        var context = _a.context, props = _a.props, state = _a.state;
+        return ({
+            class: [
+                // Flexbox
+                'flex items-center justify-center',
+                // Position
+                'z-40',
+                // Shape
+                'rounded-full',
+                'border-2',
+                // Size
+                'w-[2rem]',
+                'h-[2rem]',
+                'text-sm',
+                'leading-[2rem]',
+                // Colors
+                {
+                    'text-surface-400/60': !context.active && state.d_activeStep < context.index,
+                    'border-surface-100': !context.active && state.d_activeStep < context.index,
+                    'bg-surface-0': state.d_activeStep <= context.index,
+                },
+                {
+                    'border-primary-500': context.active,
+                    'text-primary-500': context.active,
+                },
+                {
+                    'bg-primary-500': state.d_activeStep > context.index,
+                    'text-surface-0': state.d_activeStep > context.index,
+                    'border-primary-500': state.d_activeStep > context.index,
+                },
+                // States
+                {
+                    'hover:border-surface-300': !context.active && !props.readonly,
+                },
+                // Transition
+                'transition-colors duration-200 ease-in-out',
+            ],
+        });
+    },
+    label: function (_a) {
+        var context = _a.context;
+        return ({
+            class: [
+                'relative',
+                // Font
+                'text-sm leading-none',
+                { 'font-medium': context.active },
+                // Display
+                'block',
+                // Spacing
+                'mt-2',
+                // Colors
+                {
+                    'text-surface-400/60': !context.active,
+                    'text-surface-800/80': context.active,
+                },
+                // Text and Overflow
+                'whitespace-nowrap',
+                'overflow-ellipsis',
+                'max-w-full',
+            ],
+        });
+    },
+};