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

package/wangsvue/progressbar/index.js

@@ -1,102 +1,112 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    root: function (_a) {
-        var props = _a.props;
-        return ({
-            'class': [
-                {
-                    'grid items-center gap-2': props.mode === 'determinate',
-                    'grid-cols-[max-content,auto]': props.valuePosition === 'left-side',
-                    'grid-cols-[auto,max-content]': props.valuePosition === 'right-side',
-                },
-            ],
-            'data-wv-name': 'progressbar',
-            'data-wv-section': 'root',
-        });
-    },
-    container: function (_a) {
-        var props = _a.props;
-        return ({
-            'class': [
-                // Position and Overflow
-                'relative overflow-hidden',
-                {
-                    'order-2': props.valuePosition === 'left-side',
-                    'order-1': props.valuePosition === 'right-side',
-                },
-                // Shape and Size
-                {
-                    'h-3.5': props.mode !== 'indeterminate' && props.valuePosition === 'inside',
-                    'h-1.5': props.mode === 'indeterminate' || props.valuePosition !== 'inside',
-                },
-                // Indeterminate Animation Classes
-                {
-                    'bg-general-100 m-0 border-0 progressbar-value-animate before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-primary-400 after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000': props.mode === 'indeterminate',
-                },
-                'border-0',
-                'rounded-full',
-                'bg-general-100',
-            ],
-            'data-wv-section': 'container',
-        });
-    },
-    value: function (_a) {
-        var props = _a.props;
-        return ({
-            class: [
-                // Flexbox & Overflow & Position
-                'rounded-full',
-                {
-                    'absolute flex items-center justify-center': props.mode !== 'indeterminate',
-                },
-                // Colors
-                {
-                    'bg-warning-500': (props.value < 100 &&
-                        props.value > 0 &&
-                        props.severity !== 'danger') ||
-                        props.severity === 'warning',
-                    'min-w-[6px] !bg-grayscale-500': +props.value === 0,
-                    'bg-success-1000': props.severity === 'success' || +props.value === 100,
-                    'bg-danger-500': props.severity === 'danger',
-                    'bg-primary-400': props.severity === 'primary',
-                },
-                // Spacing & Sizing
-                'm-0',
-                {
-                    'h-1.5 w-0': props.mode !== 'indeterminate' && props.valuePosition !== 'inside',
-                    'h-3.5 w-0': props.mode !== 'indeterminate' && props.valuePosition === 'inside',
-                },
-                // Shape
-                'border-0',
-                // Transitions
-                {
-                    'transition-width duration-1000 ease-in-out': props.mode !== 'indeterminate',
-                    'progressbar-value-animate': props.mode === 'indeterminate',
-                },
-                // Before & After (indeterminate)
-                {
-                    'before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-inherit ': props.mode === 'indeterminate',
-                    'after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000': props.mode === 'indeterminate',
-                },
-            ],
-        });
-    },
-    label: function (_a) {
-        var props = _a.props;
-        return ({
-            class: [
-                // Flexbox
-                'inline-flex justify-end',
-                // Font and Text
-                'font-medium text-[14px] leading-4',
-                'leading-none',
-                {
-                    'absolute inset-0 mr-1 !text-xs': props.valuePosition === 'inside',
-                    'order-1': props.valuePosition === 'left-side',
-                    'order-2': props.valuePosition === 'right-side',
-                },
-            ],
-        });
-    },
-};
+export default {
+  root: ({ props }) => ({
+    'class': [
+      {
+        'grid items-center gap-2': props.mode === 'determinate',
+        'grid-cols-[max-content,auto]': props.valuePosition === 'left-side',
+        'grid-cols-[auto,max-content]': props.valuePosition === 'right-side',
+      },
+    ],
+    'data-wv-name': 'progressbar',
+    'data-wv-section': 'root',
+  }),
+
+  container: ({ props }) => ({
+    'class': [
+      // Position and Overflow
+      'relative overflow-hidden',
+
+      {
+        'order-2': props.valuePosition === 'left-side',
+        'order-1': props.valuePosition === 'right-side',
+      },
+
+      // Shape and Size
+      {
+        'h-3.5':
+          props.mode !== 'indeterminate' && props.valuePosition === 'inside',
+        'h-1.5':
+          props.mode === 'indeterminate' || props.valuePosition !== 'inside',
+      },
+
+      // Indeterminate Animation Classes
+      {
+        'bg-general-100 m-0 border-0 progressbar-value-animate before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-primary-400 after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000':
+          props.mode === 'indeterminate',
+      },
+
+      'border-0',
+      'rounded-full',
+      'bg-general-100',
+    ],
+    'data-wv-section': 'container',
+  }),
+
+  value: ({ props }) => ({
+    class: [
+      // Flexbox & Overflow & Position
+      'rounded-full',
+      {
+        'absolute flex items-center justify-center':
+          props.mode !== 'indeterminate',
+      },
+
+      // Colors
+      {
+        'bg-warning-500':
+          (props.value < 100 &&
+            props.value > 0 &&
+            props.severity !== 'danger') ||
+          props.severity === 'warning',
+        'min-w-[6px] !bg-grayscale-500': +props.value === 0,
+        'bg-success-1000': props.severity === 'success' || +props.value === 100,
+        'bg-danger-500': props.severity === 'danger',
+        'bg-primary-400': props.severity === 'primary',
+      },
+
+      // Spacing & Sizing
+      'm-0',
+      {
+        'h-1.5 w-0':
+          props.mode !== 'indeterminate' && props.valuePosition !== 'inside',
+        'h-3.5 w-0':
+          props.mode !== 'indeterminate' && props.valuePosition === 'inside',
+      },
+
+      // Shape
+      'border-0',
+
+      // Transitions
+      {
+        'transition-width duration-1000 ease-in-out':
+          props.mode !== 'indeterminate',
+        'progressbar-value-animate': props.mode === 'indeterminate',
+      },
+
+      // Before & After (indeterminate)
+      {
+        'before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-inherit ':
+          props.mode === 'indeterminate',
+        'after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000':
+          props.mode === 'indeterminate',
+      },
+    ],
+  }),
+
+  label: ({ props }) => ({
+    class: [
+      // Flexbox
+      'inline-flex justify-end',
+
+      // Font and Text
+      'font-medium text-[14px] leading-4',
+      'leading-none',
+
+      {
+        'absolute inset-0 mr-1 !text-xs': props.valuePosition === 'inside',
+        'order-1': props.valuePosition === 'left-side',
+        'order-2': props.valuePosition === 'right-side',
+      },
+    ],
+  }),
+};

package/wangsvue/rating/index.js

@@ -1,88 +1,86 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    root: function (_a) {
-        var props = _a.props;
-        return ({
-            class: [
-                'relative',
-                // Flex & Alignment
-                'flex items-center',
-                'gap-1',
-                // Misc
-                {
-                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled,
-                },
-            ],
-        });
-    },
-    cancelitem: function (_a) {
-        var context = _a.context;
-        return ({
-            class: [
-                // Flex & Alignment
-                'inline-flex items-center',
-                //State
-                {
-                    'outline-none ring-2 ring-primary-500': context.focused,
-                },
-                // Misc
-                'cursor-pointer',
-            ],
-        });
-    },
-    cancelicon: {
-        class: [
-            // Size
-            'w-5 h-5',
-            // Color
-            'text-red-500',
-        ],
-    },
-    item: function (_a) {
-        var props = _a.props, context = _a.context;
-        return ({
-            class: [
-                // Flex & Alignment
-                'inline-flex items-center',
-                // State
-                {
-                    'outline-none ring-2 ring-primary-500': context.focused,
-                },
-                // Misc
-                {
-                    'cursor-pointer': !props.readonly,
-                    'cursor-default': props.readonly,
-                },
-            ],
-        });
-    },
-    officon: function (_a) {
-        var props = _a.props;
-        return ({
-            class: [
-                // Size
-                'w-5 h-5',
-                // Color
-                'text-surface-700',
-                // State
-                { 'hover:text-primary-500': !props.readonly },
-                // Transition
-                'transition duration-200 ease-in',
-            ],
-        });
-    },
-    onicon: function (_a) {
-        var props = _a.props;
-        return ({
-            class: [
-                // Size
-                'w-5 h-5',
-                // Color
-                'text-primary-500',
-                // Transition
-                'transition duration-200 ease-in',
-            ],
-        });
-    },
-};
+export default {
+  root: ({ props }) => ({
+    class: [
+      'relative',
+
+      // Flex & Alignment
+      'flex items-center',
+      'gap-1',
+
+      // Misc
+      {
+        'opacity-60 select-none pointer-events-none cursor-default':
+          props.disabled,
+      },
+    ],
+  }),
+  cancelitem: ({ context }) => ({
+    class: [
+      // Flex & Alignment
+      'inline-flex items-center',
+
+      //State
+      {
+        'outline-none ring-2 ring-primary-500':
+          context.focused,
+      },
+
+      // Misc
+      'cursor-pointer',
+    ],
+  }),
+  cancelicon: {
+    class: [
+      // Size
+      'w-5 h-5',
+
+      // Color
+      'text-red-500',
+    ],
+  },
+  item: ({ props, context }) => ({
+    class: [
+      // Flex & Alignment
+      'inline-flex items-center',
+
+      // State
+      {
+        'outline-none ring-2 ring-primary-500':
+          context.focused,
+      },
+
+      // Misc
+      {
+        'cursor-pointer': !props.readonly,
+        'cursor-default': props.readonly,
+      },
+    ],
+  }),
+  officon: ({ props }) => ({
+    class: [
+      // Size
+      'w-5 h-5',
+
+      // Color
+      'text-surface-700',
+
+      // State
+      { 'hover:text-primary-500': !props.readonly },
+
+      // Transition
+      'transition duration-200 ease-in',
+    ],
+  }),
+  onicon: ({ props }) => ({
+    class: [
+      // Size
+      'w-5 h-5',
+
+      // Color
+      'text-primary-500',
+
+      // Transition
+      'transition duration-200 ease-in',
+    ],
+  }),
+};

package/wangsvue/ripple/index.js

@@ -1,8 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    root: {
-        class: ['block absolute bg-surface-0/50 rounded-full pointer-events-none'],
-        style: 'transform: scale(0)',
-    },
-};
+export default {
+  root: {
+    class: ['block absolute bg-surface-0/50 rounded-full pointer-events-none'],
+    style: 'transform: scale(0)',
+  },
+};

package/wangsvue/scrollpanel/index.js

@@ -1,62 +1,77 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    wrapper: {
-        class: [
-            // Size & Position
-            'h-full w-full',
-            // Layering
-            'z-[1]',
-            // Spacing
-            'overflow-hidden',
-            // Misc
-            'relative float-left',
-        ],
-    },
-    content: {
-        class: [
-            // Size & Spacing
-            'h-[calc(100%+12px)] w-[calc(100%+12px)] pr-[12px] pb-[12px] pl-0 pt-0',
-            // Overflow & Scrollbar
-            'overflow-scroll scrollbar-none',
-            // Box Model
-            'box-border',
-            // Position
-            'relative',
-            // Webkit Specific
-            '[&::-webkit-scrollbar]:hidden',
-        ],
-    },
-    barX: {
-        class: [
-            // Size & Position
-            'h-[6px] bottom-0',
-            // Appearance
-            'bg-surface-100 rounded',
-            // Interactivity
-            'cursor-pointer',
-            // Visibility & Layering
-            'invisible z-20',
-            // Transition
-            'transition duration-[250ms] ease-linear',
-            // Misc
-            'relative',
-        ],
-    },
-    barY: {
-        class: [
-            // Size & Position
-            'w-[6px] top-0',
-            // Appearance
-            'bg-surface-100 rounded',
-            // Interactivity
-            'cursor-pointer',
-            // Visibility & Layering
-            'z-20',
-            // Transition
-            'transition duration-[250ms] ease-linear',
-            // Misc
-            'relative',
-        ],
-    },
-};
+export default {
+  wrapper: {
+    class: [
+      // Size & Position
+      'h-full w-full',
+
+      // Layering
+      'z-[1]',
+
+      // Spacing
+      'overflow-hidden',
+
+      // Misc
+      'relative float-left',
+    ],
+  },
+  content: {
+    class: [
+      // Size & Spacing
+      'h-[calc(100%+12px)] w-[calc(100%+12px)] pr-[12px] pb-[12px] pl-0 pt-0',
+
+      // Overflow & Scrollbar
+      'overflow-scroll scrollbar-none',
+
+      // Box Model
+      'box-border',
+
+      // Position
+      'relative',
+
+      // Webkit Specific
+      '[&::-webkit-scrollbar]:hidden',
+    ],
+  },
+  barX: {
+    class: [
+      // Size & Position
+      'h-[6px] bottom-0',
+
+      // Appearance
+      'bg-surface-100 rounded',
+
+      // Interactivity
+      'cursor-pointer',
+
+      // Visibility & Layering
+      'invisible z-20',
+
+      // Transition
+      'transition duration-[250ms] ease-linear',
+
+      // Misc
+      'relative',
+    ],
+  },
+  barY: {
+    class: [
+      // Size & Position
+      'w-[6px] top-0',
+
+      // Appearance
+      'bg-surface-100 rounded',
+
+      // Interactivity
+      'cursor-pointer',
+
+      // Visibility & Layering
+      'z-20',
+
+      // Transition
+      'transition duration-[250ms] ease-linear',
+
+      // Misc
+      'relative',
+    ],
+  },
+};

package/wangsvue/scrolltop/index.js

@@ -1,42 +1,45 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    root: function (_a) {
-        var props = _a.props;
-        return ({
-            class: [
-                // Flex & Alignment
-                'flex items-center justify-center',
-                // Positioning
-                {
-                    sticky: props.target === 'parent',
-                    fixed: props.target === 'window',
-                },
-                'bottom-[20px] right-[20px]',
-                'ml-auto',
-                // Shape & Size
-                {
-                    'rounded-md h-8 w-8': props.target === 'parent',
-                    'h-12 w-12 rounded-full shadow-md': props.target === 'window',
-                },
-                // Color
-                'text-white',
-                {
-                    'bg-primary-500 hover:bg-primary-600': props.target === 'parent',
-                    'bg-surface-500 hover:bg-surface-600': props.target === 'window',
-                },
-                // States
-                {
-                    'hover:bg-primary-600': props.target === 'parent',
-                    'hover:bg-surface-600': props.target === 'window',
-                },
-            ],
-        });
-    },
-    transition: {
-        enterFromClass: 'opacity-0',
-        enterActiveClass: 'transition-opacity duration-150',
-        leaveActiveClass: 'transition-opacity duration-150',
-        leaveToClass: 'opacity-0',
-    },
-};
+export default {
+  root: ({ props }) => ({
+    class: [
+      // Flex & Alignment
+      'flex items-center justify-center',
+
+      // Positioning
+      {
+        sticky: props.target === 'parent',
+        fixed: props.target === 'window',
+      },
+      'bottom-[20px] right-[20px]',
+      'ml-auto',
+
+      // Shape & Size
+      {
+        'rounded-md h-8 w-8': props.target === 'parent',
+        'h-12 w-12 rounded-full shadow-md': props.target === 'window',
+      },
+
+      // Color
+      'text-white',
+      {
+        'bg-primary-500 hover:bg-primary-600':
+          props.target === 'parent',
+        'bg-surface-500 hover:bg-surface-600':
+          props.target === 'window',
+      },
+
+      // States
+      {
+        'hover:bg-primary-600':
+          props.target === 'parent',
+        'hover:bg-surface-600':
+          props.target === 'window',
+      },
+    ],
+  }),
+  transition: {
+    enterFromClass: 'opacity-0',
+    enterActiveClass: 'transition-opacity duration-150',
+    leaveActiveClass: 'transition-opacity duration-150',
+    leaveToClass: 'opacity-0',
+  },
+};