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

package/wangsvue/panel/index.js

@@ -1,85 +1,95 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    root: {
-        class: 'shadow-md rounded-lg',
-    },
-    header: function (_a) {
-        var props = _a.props;
-        return ({
-            class: [
-                // Alignments
-                'flex items-center justify-between',
-                // Colors
-                'text-surface-700/80',
-                'bg-surface-0',
-                'border-b border-surface-200',
-                //Shape
-                'rounded-tl-lg rounded-tr-lg',
-                // Conditional Spacing
-                {
-                    'px-5 md:px-6 py-5': !props.toggleable,
-                    'py-3 px-5 md:px-6': props.toggleable,
-                },
-            ],
-        });
-    },
-    title: {
-        class: 'leading-none font-medium',
-    },
-    toggler: {
-        class: [
-            // Alignments
-            'inline-flex items-center justify-center',
-            // Sized
-            'w-8 h-8',
-            //Shape
-            'border-0 rounded-full',
-            //Color
-            'bg-transparent',
-            'text-surface-600',
-            // States
-            'hover:text-surface-900',
-            'hover:bg-surface-50',
-            'focus:outline-none focus:outline-offset-0 focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-inset',
-            // Transitions
-            'transition duration-200 ease-in-out',
-            // Misc
-            'overflow-hidden relative no-underline',
-        ],
-    },
-    togglerIcon: {
-        class: 'inline-block',
-    },
-    content: {
-        class: [
-            // Spacing
-            'py-6 px-5 md:px-6',
-            // Shape
-            'last:rounded-br-lg last:rounded-bl-lg',
-            //Color
-            'bg-surface-0',
-            'text-surface-700/80',
-        ],
-    },
-    footer: {
-        class: [
-            // Spacing
-            'py-6 px-5 md:px-6',
-            //Shape
-            'rounded-bl-lg rounded-br-lg',
-            // Color
-            'bg-surface-0',
-            'text-surface-600',
-            'border-t border-surface-200',
-        ],
-    },
-    transition: {
-        enterFromClass: 'max-h-0',
-        enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
-        enterToClass: 'max-h-[1000px]',
-        leaveFromClass: 'max-h-[1000px]',
-        leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
-        leaveToClass: 'max-h-0',
-    },
-};
+export default {
+  root: {
+    class: 'shadow-md rounded-lg',
+  },
+  header: ({ props }) => ({
+    class: [
+      // Alignments
+      'flex items-center justify-between',
+
+      // Colors
+      'text-surface-700/80',
+      'bg-surface-0',
+      'border-b border-surface-200',
+
+      //Shape
+      'rounded-tl-lg rounded-tr-lg',
+
+      // Conditional Spacing
+      {
+        'px-5 md:px-6 py-5': !props.toggleable,
+        'py-3 px-5 md:px-6': props.toggleable,
+      },
+    ],
+  }),
+  title: {
+    class: 'leading-none font-medium',
+  },
+  toggler: {
+    class: [
+      // Alignments
+      'inline-flex items-center justify-center',
+
+      // Sized
+      'w-8 h-8',
+
+      //Shape
+      'border-0 rounded-full',
+
+      //Color
+      'bg-transparent',
+      'text-surface-600',
+
+      // States
+      'hover:text-surface-900',
+      'hover:bg-surface-50',
+      'focus:outline-none focus:outline-offset-0 focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-inset',
+
+      // Transitions
+      'transition duration-200 ease-in-out',
+
+      // Misc
+      'overflow-hidden relative no-underline',
+    ],
+  },
+  togglerIcon: {
+    class: 'inline-block',
+  },
+  content: {
+    class: [
+      // Spacing
+      'py-6 px-5 md:px-6',
+
+      // Shape
+      'last:rounded-br-lg last:rounded-bl-lg',
+
+      //Color
+      'bg-surface-0',
+      'text-surface-700/80',
+    ],
+  },
+  footer: {
+    class: [
+      // Spacing
+      'py-6 px-5 md:px-6',
+
+      //Shape
+      'rounded-bl-lg rounded-br-lg',
+
+      // Color
+      'bg-surface-0',
+      'text-surface-600',
+      'border-t border-surface-200',
+    ],
+  },
+  transition: {
+    enterFromClass: 'max-h-0',
+    enterActiveClass:
+      'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+    enterToClass: 'max-h-[1000px]',
+    leaveFromClass: 'max-h-[1000px]',
+    leaveActiveClass:
+      'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+    leaveToClass: 'max-h-0',
+  },
+};

package/wangsvue/panelmenu/index.js

@@ -1,124 +1,136 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    panel: {
-        class: 'mb-1',
-    },
-    header: {
-        class: [
-            'rounded-md',
-            'outline-none',
-            'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-primary-400/50',
-        ],
-    },
-    headercontent: function (_a) {
-        var _b, _c;
-        var context = _a.context, instance = _a.instance;
-        return ({
-            class: [
-                // Shape
-                'rounded-t-md',
-                {
-                    'rounded-br-md rounded-bl-md': !context.active || ((_b = instance.activeItem) === null || _b === void 0 ? void 0 : _b.items) === undefined,
-                    'rounded-br-0 rounded-bl-0': context.active && ((_c = instance.activeItem) === null || _c === void 0 ? void 0 : _c.items) !== undefined,
-                },
-                // Color
-                'border border-surface-200',
-                'bg-surface-0',
-                'text-surface-600/80',
-                { 'text-surface-900 ark:text-surface-0': context.active },
-                // Transition
-                'transition duration-200 ease-in-out',
-                'transition-shadow duration-200',
-            ],
-        });
-    },
-    headeraction: {
-        class: [
-            'relative',
-            // Font
-            'font-semibold',
-            'text-sm',
-            'leading-none',
-            // Flex & Alignments
-            'flex items-center',
-            // Spacing
-            'px-3 py-2',
-            // Misc
-            'select-none cursor-pointer no-underline',
-        ],
-    },
-    headerlabel: {
-        class: 'leading-none',
-    },
-    headerIcon: {
-        class: 'mr-2 text-sm',
-    },
-    submenuicon: {
-        class: 'ml-auto order-last text-sm',
-    },
-    menucontent: {
-        class: [
-            // Spacing
-            'py-1',
-            // Shape
-            'border border-t-0',
-            'rounded-t-none rounded-br-md rounded-bl-md',
-            // Color
-            'text-surface-700/80',
-            'bg-surface-0',
-            'border-surface-200',
-        ],
-    },
-    menu: {
-        class: ['outline-none', 'm-0 p-0 list-none'],
-    },
-    content: {
-        class: [
-            // Shape
-            'border-none rounded-none',
-            // Color
-            'text-surface-700/80',
-            // Transition
-            'transition-shadow duration-200',
-        ],
-    },
-    action: function (_a) {
-        var context = _a.context;
-        return ({
-            class: [
-                'relative',
-                // Font
-                'text-sm leading-none',
-                // Flex & Alignments
-                'flex items-center',
-                // Spacing
-                'py-2 px-3',
-                // Color
-                'text-surface-700/80',
-                // States
-                'hover:bg-surface-100/80 hover:text-surface-700',
-                {
-                    'bg-surface-200 text-surface-700/80': context.focused,
-                },
-                // Misc
-                'cursor-pointer no-underline',
-                'select-none overflow-hidden',
-            ],
-        });
-    },
-    icon: {
-        class: 'mr-2',
-    },
-    submenu: {
-        class: 'p-0 pl-4 m-0 list-none',
-    },
-    transition: {
-        enterFromClass: 'max-h-0',
-        enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
-        enterToClass: 'max-h-[1000px]',
-        leaveFromClass: 'max-h-[1000px]',
-        leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
-        leaveToClass: 'max-h-0',
-    },
-};
+export default {
+  panel: {
+    class: 'mb-1',
+  },
+  header: {
+    class: [
+      'rounded-md',
+      'outline-none',
+      'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-primary-400/50',
+    ],
+  },
+  headercontent: ({ context, instance }) => ({
+    class: [
+      // Shape
+      'rounded-t-md',
+      {
+        'rounded-br-md rounded-bl-md':
+          !context.active || instance.activeItem?.items === undefined,
+        'rounded-br-0 rounded-bl-0':
+          context.active && instance.activeItem?.items !== undefined,
+      },
+
+      // Color
+      'border border-surface-200',
+      'bg-surface-0',
+      'text-surface-600/80',
+      { 'text-surface-900 ark:text-surface-0': context.active },
+
+      // Transition
+      'transition duration-200 ease-in-out',
+      'transition-shadow duration-200',
+    ],
+  }),
+  headeraction: {
+    class: [
+      'relative',
+
+      // Font
+      'font-semibold',
+      'text-sm',
+      'leading-none',
+
+      // Flex & Alignments
+      'flex items-center',
+
+      // Spacing
+      'px-3 py-2',
+
+      // Misc
+      'select-none cursor-pointer no-underline',
+    ],
+  },
+  headerlabel: {
+    class: 'leading-none',
+  },
+  headerIcon: {
+    class: 'mr-2 text-sm',
+  },
+  submenuicon: {
+    class: 'ml-auto order-last text-sm',
+  },
+  menucontent: {
+    class: [
+      // Spacing
+      'py-1',
+
+      // Shape
+      'border border-t-0',
+      'rounded-t-none rounded-br-md rounded-bl-md',
+
+      // Color
+      'text-surface-700/80',
+      'bg-surface-0',
+      'border-surface-200',
+    ],
+  },
+  menu: {
+    class: ['outline-none', 'm-0 p-0 list-none'],
+  },
+  content: {
+    class: [
+      // Shape
+      'border-none rounded-none',
+
+      // Color
+      'text-surface-700/80',
+
+      // Transition
+      'transition-shadow duration-200',
+    ],
+  },
+  action: ({ context }) => ({
+    class: [
+      'relative',
+
+      // Font
+      'text-sm leading-none',
+
+      // Flex & Alignments
+      'flex items-center',
+
+      // Spacing
+      'py-2 px-3',
+
+      // Color
+      'text-surface-700/80',
+
+      // States
+      'hover:bg-surface-100/80 hover:text-surface-700',
+      {
+        'bg-surface-200 text-surface-700/80':
+          context.focused,
+      },
+
+      // Misc
+      'cursor-pointer no-underline',
+      'select-none overflow-hidden',
+    ],
+  }),
+  icon: {
+    class: 'mr-2',
+  },
+  submenu: {
+    class: 'p-0 pl-4 m-0 list-none',
+  },
+  transition: {
+    enterFromClass: 'max-h-0',
+    enterActiveClass:
+      'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+    enterToClass: 'max-h-[1000px]',
+    leaveFromClass: 'max-h-[1000px]',
+    leaveActiveClass:
+      'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+    leaveToClass: 'max-h-0',
+  },
+};

package/wangsvue/password/index.js

@@ -1,96 +1,98 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    root: function (_a) {
-        var props = _a.props;
-        return ({
-            class: [
-                'w-full',
-                'inline-flex relative',
-                // 'border-[0.5px] border-general-200 rounded',
-                'text-general-800',
-                {
-                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled,
-                },
-            ],
-        });
-    },
-    input: {
-        class: [
-            '!bg-primary-500',
-            'placeholder:!font-normal',
-            // 'bg-white text-general-800 placeholder:text-general-200 placeholder:font-light',
-            // 'w-full h-full !max-h-[43px]',
-            // 'py-1 px-3 items-center space-x-1',
-            // 'flex flex-shrink-0 self-stretch',
-            // 'text-xs leading-[133.333%] tracking-[0.24px]',
-            // 'rounded shadow-sm',
-            // 'appearance-none outline-none focus:ring-primary-500',
-        ],
-    },
-    panel: {
-        class: [
-            // Spacing
-            'p-3',
-            // Shape
-            'border-0',
-            'shadow-md rounded-md',
-            // Colors
-            'bg-white',
-            'text-general-800',
-            '',
-        ],
-    },
-    meter: {
-        class: [
-            // Position and Overflow
-            'overflow-hidden',
-            'relative',
-            // Shape and Size
-            'border-0',
-            'h-2',
-            'rounded-md',
-            // Spacing
-            'mb-2',
-            // Colors
-            'bg-surface-100',
-        ],
-    },
-    meterlabel: function (_a) {
-        var _b, _c, _d;
-        var instance = _a.instance;
-        return ({
-            class: [
-                // Size
-                'h-full',
-                // Colors
-                {
-                    'bg-red-500/50': ((_b = instance === null || instance === void 0 ? void 0 : instance.meter) === null || _b === void 0 ? void 0 : _b.strength) == 'weak',
-                    'bg-orange-500/50': ((_c = instance === null || instance === void 0 ? void 0 : instance.meter) === null || _c === void 0 ? void 0 : _c.strength) == 'medium',
-                    'bg-green-500/50': ((_d = instance === null || instance === void 0 ? void 0 : instance.meter) === null || _d === void 0 ? void 0 : _d.strength) == 'strong',
-                },
-                // Transitions
-                'transition-all duration-1000 ease-in-out',
-            ],
-        });
-    },
-    showicon: {
-        class: [
-            'absolute top-[54%] right-3 -mt-2',
-            'text-general-200',
-            'focus-visible:text-general-500 hover:text-general-500',
-        ],
-    },
-    hideicon: {
-        class: [
-            'absolute top-[54%] right-3 -mt-2',
-            'text-general-200',
-        ],
-    },
-    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: ({ props }) => ({
+    class: [
+      'w-full',
+      'inline-flex relative',
+      // 'border-[0.5px] border-general-200 rounded',
+      'text-general-800',
+      {
+        'opacity-60 select-none pointer-events-none cursor-default':
+          props.disabled,
+      },
+    ],
+  }),
+  input: {
+    class: [
+      '!bg-primary-500',
+      'placeholder:!font-normal',
+      // 'bg-white text-general-800 placeholder:text-general-200 placeholder:font-light',
+      // 'w-full h-full !max-h-[43px]',
+      // 'py-1 px-3 items-center space-x-1',
+      // 'flex flex-shrink-0 self-stretch',
+      // 'text-xs leading-[133.333%] tracking-[0.24px]',
+      // 'rounded shadow-sm',
+      // 'appearance-none outline-none focus:ring-primary-500',
+    ],
+  },
+  panel: {
+    class: [
+      // Spacing
+      'p-3',
+
+      // Shape
+      'border-0',
+      'shadow-md rounded-md',
+
+      // Colors
+      'bg-white',
+      'text-general-800',
+      '',
+    ],
+  },
+  meter: {
+    class: [
+      // Position and Overflow
+      'overflow-hidden',
+      'relative',
+
+      // Shape and Size
+      'border-0',
+      'h-2',
+      'rounded-md',
+
+      // Spacing
+      'mb-2',
+
+      // Colors
+      'bg-surface-100',
+    ],
+  },
+  meterlabel: ({ instance }) => ({
+    class: [
+      // Size
+      'h-full',
+
+      // Colors
+      {
+        'bg-red-500/50': instance?.meter?.strength == 'weak',
+        'bg-orange-500/50':
+          instance?.meter?.strength == 'medium',
+        'bg-green-500/50':
+          instance?.meter?.strength == 'strong',
+      },
+
+      // Transitions
+      'transition-all duration-1000 ease-in-out',
+    ],
+  }),
+  showicon: {
+    class: [
+      'absolute top-[54%] right-3 -mt-2',
+      'text-general-200',
+      'focus-visible:text-general-500 hover:text-general-500',
+    ],
+  },
+  hideicon: {
+    class: [
+      'absolute top-[54%] right-3 -mt-2',
+      'text-general-200',
+    ],
+  },
+  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',
+  },
+};