@fewangsit/wangsvue-presets 1.0.80 → 1.0.81-alpha.1

package/wangsvue/megamenu/index.js

@@ -1,202 +1,218 @@
-"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',
-    },
-};
+export default {
+  root: ({ props }) => ({
+    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: ({ props }) => ({
+    class: [
+      // Flexbox
+      'sm:flex sm:row-gap-2 sm:col-gap-4',
+      'items-center',
+      'flex-wrap',
+      'flex-col sm:flex-row',
+      { hidden: !props?.mobileActive, flex: 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: ({ props }) => ({
+    class: [
+      'sm:relative static',
+      {
+        'sm:w-auto w-full': props.horizontal,
+        'w-full': !props.horizontal,
+      },
+    ],
+  }),
+  content: ({ props, context }) => ({
+    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: ({ props }) => ({
+    class: [
+      {
+        'ml-auto sm:ml-2': props.horizontal,
+        'ml-auto': !props.horizontal,
+      },
+    ],
+  }),
+  panel: ({ props }) => ({
+    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.js

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