@fewangsit/wangsvue-presets 1.0.81-alpha.2 → 1.0.82

package/wangsvue/steps/index.js

@@ -1,119 +1,132 @@
-"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',
-            ],
-        });
-    },
-};
+export 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: ({ props, context, state }) => ({
+    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: ({ context, props, state }) => ({
+    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: ({ context }) => ({
+    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',
+    ],
+  }),
+};

package/wangsvue/tabmenu/index.js

@@ -1,75 +1,84 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    root: {
-        class: 'overflow-x-auto',
-        style: 'scrollbar-width: none',
-    },
-    menu: {
-        class: [
-            // Flexbox
-            'flex flex-1',
-            // Size
-            // Spacing
-            'list-none',
-            'p-0 m-0',
-            // Colors
-            'text-general-100',
-        ],
-    },
-    menuitem: {
-        class: 'mr-0',
-    },
-    action: function (_a) {
-        var _b, _c;
-        var context = _a.context, state = _a.state;
-        return ({
-            class: [
-                'relative',
-                // Font
-                'font-normal',
-                'text-xs',
-                // Flexbox and Alignment
-                'flex items-center',
-                // Spacing
-                'p-2 pb-1.5 pt-0.5 !h-6',
-                // Shape
-                'border-b-2',
-                // Colors and Conditions
-                {
-                    'bg-transparent ': state.d_activeIndex !== context.index,
-                    'text-grayscale-900': state.d_activeIndex !== context.index,
-                    'border-primary-400': state.d_activeIndex === context.index,
-                    'border-primary-100': state.d_activeIndex !== context.index,
-                    'text-primary-500': state.d_activeIndex === context.index,
-                },
-                // States
-                'hover:bg-primary-50',
-                'focus-visible:outline-none focus-visible:outline-offset-0',
-                'focus-visible:bg-primary-50',
-                {
-                    'focus-visible:border-primary-200 focus-visible:text-primary-400': state.d_activeIndex !== context.index,
-                },
-                // Disabled States
-                {
-                    'pointer-events-none': (_b = context.item) === null || _b === void 0 ? void 0 : _b.disabled,
-                    'opacity-60': (_c = context.item) === null || _c === void 0 ? void 0 : _c.disabled,
-                },
-                // Transitions
-                'transition-all duration-200',
-                // Misc
-                'cursor-pointer select-none text-decoration-none',
-                'overflow-hidden',
-                'user-select-none',
-                '!no-underline',
-                'whitespace-nowrap',
-            ],
-        });
-    },
-    icon: {
-        class: 'mr-2',
-    },
-    inkbar: {
-        class: 'grow border-b-2 border-primary-100',
-    },
-};
+export default {
+  root: {
+    class: 'overflow-x-auto',
+    style: 'scrollbar-width: none',
+  },
+  menu: {
+    class: [
+      // Flexbox
+      'flex flex-1',
+
+      // Size
+
+      // Spacing
+      'list-none',
+      'p-0 m-0',
+
+      // Colors
+      'text-general-100',
+    ],
+  },
+  menuitem: {
+    class: 'mr-0',
+  },
+  action: ({ context, state }) => ({
+    class: [
+      'relative',
+
+      // Font
+      'font-normal',
+      'text-xs',
+
+      // Flexbox and Alignment
+      'flex items-center',
+
+      // Spacing
+      'p-2 pb-1.5 pt-0.5 !h-6',
+
+      // Shape
+      'border-b-2',
+
+      // Colors and Conditions
+      {
+        'bg-transparent ': state.d_activeIndex !== context.index,
+        'text-grayscale-900': state.d_activeIndex !== context.index,
+
+        'border-primary-400': state.d_activeIndex === context.index,
+
+        'border-primary-100': state.d_activeIndex !== context.index,
+        'text-primary-500': state.d_activeIndex === context.index,
+      },
+
+      // States
+      'hover:bg-primary-50',
+      'focus-visible:outline-none focus-visible:outline-offset-0',
+      'focus-visible:bg-primary-50',
+      {
+        'focus-visible:border-primary-200 focus-visible:text-primary-400':
+          state.d_activeIndex !== context.index,
+      },
+
+      // Disabled States
+      {
+        'pointer-events-none': context.item?.disabled,
+        'opacity-60': context.item?.disabled,
+      },
+
+      // Transitions
+      'transition-all duration-200',
+
+      // Misc
+      'cursor-pointer select-none text-decoration-none',
+      'overflow-hidden',
+      'user-select-none',
+      '!no-underline',
+      'whitespace-nowrap',
+    ],
+  }),
+  icon: {
+    class: 'mr-2',
+  },
+  inkbar: {
+    class: 'grow border-b-2 border-primary-100',
+  },
+};