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

package/wangsvue/selectbutton/index.js

@@ -1,60 +1,59 @@
-"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',
-    },
-};
+export default {
+  root: ({ props }) => ({
+    class: [
+      'shadow-sm flex flex-col min-w-[43px] w-max',
+      // {
+      //   'opacity-60 select-none pointer-events-none cursor-default':
+      //     props.disabled,
+      // },
+    ],
+  }),
+  button: ({ context }) => ({
+    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',
+  },
+};

package/wangsvue/sidebar/index.js

@@ -1,145 +1,165 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    root: function (_a) {
-        var props = _a.props;
-        return ({
-            class: [
-                // Flexbox
-                'flex flex-col',
-                // Position
-                'relative',
-                {
-                    '!transition-none !transform-none !w-screen !h-screen !max-h-full !top-0 !left-0': props.position == 'full',
-                },
-                // Size
-                {
-                    'h-full w-full max-w-[28rem]': props.position == 'left' || props.position == 'right',
-                    'h-auto w-full': props.position == 'top' || props.position == 'bottom',
-                },
-                // Shape
-                'border-0',
-                'shadow-xl',
-                // Colors
-                'bg-surface-0',
-                'text-surface-700/80',
-                '',
-                // Transitions
-                'transition-transform',
-                'duration-300',
-                // Misc
-                'pointer-events-auto',
-            ],
-        });
-    },
-    header: {
-        class: [
-            // Flexbox and Alignment
-            'flex items-center justify-between',
-            'shrink-0',
-            // Spacing
-            'px-6 pt-6',
-            // Colors
-            'bg-surface-0',
-            'text-surface-700/80',
-        ],
-    },
-    title: {
-        class: ['font-semibold leading-6 text-base m-0'],
-    },
-    icons: {
-        class: ['flex items-center'],
-    },
-    closeButton: {
-        class: [
-            'relative',
-            // Flexbox and Alignment
-            'flex items-center justify-center',
-            // Size and Spacing
-            'mr-2',
-            'last:mr-0',
-            'w-6 h-6',
-            // Shape
-            'border-0',
-            'rounded-full',
-            // Colors
-            'text-surface-500',
-            'bg-transparent',
-            // Transitions
-            'transition duration-200 ease-in-out',
-            // States
-            'hover:text-surface-700',
-            'hover:bg-surface-100',
-            'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-inset',
-            'focus:ring-primary-500',
-            // Misc
-            'overflow-hidden',
-        ],
-    },
-    closeicon: {
-        class: [
-            // Display
-            'inline-block',
-            // Size
-            'w-3',
-            'h-3',
-        ],
-    },
-    content: {
-        class: [
-            // Spacing and Size
-            'px-6 pb-6',
-            'mt-6',
-            'h-full',
-            'w-full',
-            // Growth and Overflow
-            'grow',
-            'overflow-y-auto',
-        ],
-    },
-    mask: function (_a) {
-        var props = _a.props;
-        return ({
-            class: [
-                // Transitions
-                'transition',
-                'duration-300',
-                { 'p-5': !props.position == 'full' },
-                // Background and Effects
-                {
-                    'has-[.mask-active]:bg-transparent bg-surface-500/70/70': props.modal,
-                    'has-[.mask-active]:backdrop-blur-none backdrop-blur-sm': props.modal,
-                },
-            ],
-        });
-    },
-    transition: function (_a) {
-        var props = _a.props;
-        return props.position === 'top'
-            ? {
-                enterFromClass: 'translate-x-0 -translate-y-full translate-z-0 mask-active',
-                leaveToClass: 'translate-x-0 -translate-y-full translate-z-0 mask-active',
-            }
-            : props.position === 'bottom'
-                ? {
-                    enterFromClass: 'translate-x-0 translate-y-full translate-z-0 mask-active',
-                    leaveToClass: 'translate-x-0 translate-y-full translate-z-0 mask-active',
-                }
-                : props.position === 'left'
-                    ? {
-                        enterFromClass: '-translate-x-full translate-y-0 translate-z-0 mask-active',
-                        leaveToClass: '-translate-x-full translate-y-0 translate-z-0 mask-active',
-                    }
-                    : props.position === 'right'
-                        ? {
-                            enterFromClass: 'translate-x-full translate-y-0 translate-z-0 mask-active',
-                            leaveToClass: 'translate-x-full translate-y-0 translate-z-0 mask-active',
-                        }
-                        : {
-                            enterFromClass: 'opacity-0 mask-active',
-                            enterActiveClass: 'transition-opacity duration-400 ease-in',
-                            leaveActiveClass: 'transition-opacity duration-400 ease-in',
-                            leaveToClass: 'opacity-0 mask-active',
-                        };
-    },
-};
+export default {
+  root: ({ props }) => ({
+    class: [
+      // Flexbox
+      'flex flex-col',
+
+      // Position
+      'relative',
+      {
+        '!transition-none !transform-none !w-screen !h-screen !max-h-full !top-0 !left-0':
+          props.position == 'full',
+      },
+
+      // Size
+      {
+        'h-full w-full max-w-[28rem]':
+          props.position == 'left' || props.position == 'right',
+        'h-auto w-full': props.position == 'top' || props.position == 'bottom',
+      },
+
+      // Shape
+      'border-0',
+      'shadow-xl',
+
+      // Colors
+      'bg-surface-0',
+      'text-surface-700/80',
+      '',
+
+      // Transitions
+      'transition-transform',
+      'duration-300',
+
+      // Misc
+      'pointer-events-auto',
+    ],
+  }),
+  header: {
+    class: [
+      // Flexbox and Alignment
+      'flex items-center justify-between',
+      'shrink-0',
+
+      // Spacing
+      'px-6 pt-6',
+
+      // Colors
+      'bg-surface-0',
+      'text-surface-700/80',
+    ],
+  },
+  title: {
+    class: ['font-semibold leading-6 text-base m-0'],
+  },
+  icons: {
+    class: ['flex items-center'],
+  },
+  closeButton: {
+    class: [
+      'relative',
+
+      // Flexbox and Alignment
+      'flex items-center justify-center',
+
+      // Size and Spacing
+      'mr-2',
+      'last:mr-0',
+      'w-6 h-6',
+
+      // Shape
+      'border-0',
+      'rounded-full',
+
+      // Colors
+      'text-surface-500',
+      'bg-transparent',
+
+      // Transitions
+      'transition duration-200 ease-in-out',
+
+      // States
+      'hover:text-surface-700',
+      'hover:bg-surface-100',
+      'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-inset',
+      'focus:ring-primary-500',
+
+      // Misc
+      'overflow-hidden',
+    ],
+  },
+  closeicon: {
+    class: [
+      // Display
+      'inline-block',
+
+      // Size
+      'w-3',
+      'h-3',
+    ],
+  },
+  content: {
+    class: [
+      // Spacing and Size
+      'px-6 pb-6',
+      'mt-6',
+      'h-full',
+      'w-full',
+
+      // Growth and Overflow
+      'grow',
+      'overflow-y-auto',
+    ],
+  },
+  mask: ({ props }) => ({
+    class: [
+      // Transitions
+      'transition',
+      'duration-300',
+      { 'p-5': !props.position == 'full' },
+
+      // Background and Effects
+      {
+        'has-[.mask-active]:bg-transparent bg-surface-500/70/70':
+          props.modal,
+        'has-[.mask-active]:backdrop-blur-none backdrop-blur-sm': props.modal,
+      },
+    ],
+  }),
+  transition: ({ props }) => {
+    return props.position === 'top'
+      ? {
+          enterFromClass:
+            'translate-x-0 -translate-y-full translate-z-0 mask-active',
+          leaveToClass:
+            'translate-x-0 -translate-y-full translate-z-0 mask-active',
+        }
+      : props.position === 'bottom'
+        ? {
+            enterFromClass:
+              'translate-x-0 translate-y-full translate-z-0 mask-active',
+            leaveToClass:
+              'translate-x-0 translate-y-full translate-z-0 mask-active',
+          }
+        : props.position === 'left'
+          ? {
+              enterFromClass:
+                '-translate-x-full translate-y-0 translate-z-0 mask-active',
+              leaveToClass:
+                '-translate-x-full translate-y-0 translate-z-0 mask-active',
+            }
+          : props.position === 'right'
+            ? {
+                enterFromClass:
+                  'translate-x-full translate-y-0 translate-z-0 mask-active',
+                leaveToClass:
+                  'translate-x-full translate-y-0 translate-z-0 mask-active',
+              }
+            : {
+                enterFromClass: 'opacity-0 mask-active',
+                enterActiveClass: 'transition-opacity duration-400 ease-in',
+                leaveActiveClass: 'transition-opacity duration-400 ease-in',
+                leaveToClass: 'opacity-0 mask-active',
+              };
+  },
+};

package/wangsvue/skeleton/index.js

@@ -1,22 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    root: function (_a) {
-        var props = _a.props;
-        return ({
-            class: [
-                'overflow-hidden',
-                {
-                    'animate-pulse': props.animation !== 'none',
-                },
-                // Round
-                {
-                    'rounded-full': props.shape === 'circle',
-                    'rounded-md': props.shape !== 'circle',
-                },
-                // Colors
-                'bg-general-50',
-            ],
-        });
-    },
-};
+export default {
+  root: ({ props }) => ({
+    class: [
+      'overflow-hidden',
+      {
+        'animate-pulse': props.animation !== 'none',
+      },
+
+      // Round
+      {
+        'rounded-full': props.shape === 'circle',
+        'rounded-md': props.shape !== 'circle',
+      },
+
+      // Colors
+      'bg-general-50',
+    ],
+  }),
+};