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

package/wangsvue/dialog/index.js

@@ -1,220 +1,249 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    root: function (_a) {
-        var state = _a.state;
-        return ({
-            class: [
-                // Shape
-                // 'rounded-lg',
-                // 'shadow-xl',
-                // 'border-0',
-                'rounded-[0.4375em]',
-                'shadow-panel',
-                // Layout
-                'flex flex-col',
-                // Spacing
-                'p-6',
-                'gap-3',
-                // Background
-                'bg-white',
-                // Size
-                'max-h-[90vh]',
-                { 'sm:max-w-[90vw]': !state.maximized },
-                'm-0',
-                // Transitions
-                'transform',
-                'scale-100',
-                // Maximized State
-                {
-                    'transition-none': state.maximized,
-                    'transform-none': state.maximized,
-                    '!w-screen': state.maximized,
-                    '!h-screen': state.maximized,
-                    '!max-h-full': state.maximized,
-                    '!top-0': state.maximized,
-                    '!left-0': state.maximized,
-                },
-            ],
-        });
-    },
-    header: {
-        class: [
-            // Flexbox and Alignment
-            'flex items-center gap-2',
-            'shrink-0',
-            // Shape
-            'rounded-tl-lg',
-            'rounded-tr-lg',
-            // Colors
-            'text-general-800',
-        ],
-    },
-    title: {
-        class: [
-            'text-general-800 text-sm font-bold leading-[19.12px] tracking-[0.24px]',
-        ],
-    },
-    icons: {
-        class: ['flex items-center ml-auto'],
-    },
-    closeButton: {
-        class: [
-            'relative',
-            // Flexbox and Alignment
-            'flex items-center justify-center',
-            // Size and Spacing
-            'w-6 h-6 !p-0.5',
-            // Shape
-            'border-0',
-            'rounded-full',
-            // Colors
-            'text-general-200',
-            'bg-transparent',
-            // Transitions
-            'transition duration-200 ease-in-out',
-            // States
-            'hover:bg-general-50 hover:text-general-300',
-            // Misc
-            'overflow-hidden',
-        ],
-    },
-    maximizablebutton: {
-        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',
-        ],
-    },
-    closeButtonIcon: {
-        class: [
-            // Display
-            'inline-block',
-            // Color
-            'text-general-200',
-            // Size
-            'w-3.5',
-            'h-3.5',
-        ],
-    },
-    maximizableicon: {
-        class: [
-            // Display
-            'inline-block',
-            // Size
-            'w-3',
-            'h-3',
-        ],
-    },
-    content: function (_a) {
-        var state = _a.state, instance = _a.instance;
-        return ({
-            class: [
-                // Font
-                '!text-general-800 text-xs font-normal',
-                'pr-1.5 -mr-1.5 pl-1.5 -ml-1.5 pt-1.5 -mt-1.5 !pb-1.5 -mb-1.5',
-                // Layout
-                'flex flex-col gap-3',
-                // Shape
-                // Colors
-                'text-surface-600',
-                // Misc
-                'overflow-y-auto scrollbar-w-none',
-                {
-                    grow: state === null || state === void 0 ? void 0 : state.maximized,
-                },
-            ],
-        });
-    },
-    footer: {
-        class: [
-            // Flexbox and Alignment
-            'flex items-center justify-end',
-            'shrink-0',
-            'text-right',
-            'gap-1 mt-2',
-            // Shape
-            'border-t-0',
-            'rounded-b-lg',
-            // Colors
-            'bg-inherit',
-            'text-surface-700/80',
-        ],
-    },
-    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-dialog-mask': 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: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active',
-                enterActiveClass: 'transition-all duration-200 ease-out',
-                leaveActiveClass: 'transition-all duration-200 ease-out',
-                leaveToClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active',
-            }
-            : props.position === 'bottom'
-                ? {
-                    enterFromClass: 'opacity-0 scale-75 translate-y-full mask-active',
-                    enterActiveClass: 'transition-all duration-200 ease-out',
-                    leaveActiveClass: 'transition-all duration-200 ease-out',
-                    leaveToClass: 'opacity-0 scale-75 translate-x-0 translate-y-full translate-z-0 mask-active',
-                }
-                : props.position === 'left' ||
-                    props.position === 'topleft' ||
-                    props.position === 'bottomleft'
-                    ? {
-                        enterFromClass: 'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0 mask-active',
-                        enterActiveClass: 'transition-all duration-200 ease-out',
-                        leaveActiveClass: 'transition-all duration-200 ease-out',
-                        leaveToClass: 'opacity-0 scale-75  -translate-x-full translate-y-0 translate-z-0 mask-active',
-                    }
-                    : props.position === 'right' ||
-                        props.position === 'topright' ||
-                        props.position === 'bottomright'
-                        ? {
-                            enterFromClass: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active',
-                            enterActiveClass: 'transition-all duration-200 ease-out',
-                            leaveActiveClass: 'transition-all duration-200 ease-out',
-                            leaveToClass: 'opacity-0 scale-75 opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active',
-                        }
-                        : {
-                            enterFromClass: 'opacity-0 scale-75 mask-active',
-                            enterActiveClass: 'transition-all duration-200 ease-out',
-                            leaveActiveClass: 'transition-all duration-200 ease-out',
-                            leaveToClass: 'opacity-0 scale-75 mask-active',
-                        };
-    },
-};
+export default {
+  root: ({ state }) => ({
+    class: [
+      // Shape
+      // 'rounded-lg',
+      // 'shadow-xl',
+      // 'border-0',
+      'rounded-[0.4375em]',
+      'shadow-panel',
+
+      // Layout
+      'flex flex-col',
+
+      // Spacing
+      'p-6',
+      'gap-3',
+
+      // Background
+      'bg-white',
+
+      // Size
+      'max-h-[90vh]',
+      { 'sm:max-w-[90vw]': !state.maximized },
+      'm-0',
+
+      // Transitions
+      'transform',
+      'scale-100',
+
+      // Maximized State
+      {
+        'transition-none': state.maximized,
+        'transform-none': state.maximized,
+        '!w-screen': state.maximized,
+        '!h-screen': state.maximized,
+        '!max-h-full': state.maximized,
+        '!top-0': state.maximized,
+        '!left-0': state.maximized,
+      },
+    ],
+  }),
+  header: {
+    class: [
+      // Flexbox and Alignment
+      'flex items-center gap-2',
+      'shrink-0',
+
+      // Shape
+      'rounded-tl-lg',
+      'rounded-tr-lg',
+
+      // Colors
+      'text-general-800',
+    ],
+  },
+  title: {
+    class: [
+      'text-general-800 text-sm font-bold leading-[19.12px] tracking-[0.24px]',
+    ],
+  },
+  icons: {
+    class: ['flex items-center ml-auto'],
+  },
+  closeButton: {
+    class: [
+      'relative',
+
+      // Flexbox and Alignment
+      'flex items-center justify-center',
+
+      // Size and Spacing
+      'w-6 h-6 !p-0.5',
+
+      // Shape
+      'border-0',
+      'rounded-full',
+
+      // Colors
+      'text-general-200',
+      'bg-transparent',
+
+      // Transitions
+      'transition duration-200 ease-in-out',
+
+      // States
+      'hover:bg-general-50 hover:text-general-300',
+
+      // Misc
+      'overflow-hidden',
+    ],
+  },
+  maximizablebutton: {
+    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',
+    ],
+  },
+  closeButtonIcon: {
+    class: [
+      // Display
+      'inline-block',
+
+      // Color
+      'text-general-200',
+
+      // Size
+      'w-3.5',
+      'h-3.5',
+    ],
+  },
+  maximizableicon: {
+    class: [
+      // Display
+      'inline-block',
+
+      // Size
+      'w-3',
+      'h-3',
+    ],
+  },
+  content: ({ state, instance }) => ({
+    class: [
+      // Font
+      '!text-general-800 text-xs font-normal',
+
+      'pr-1.5 -mr-1.5 pl-1.5 -ml-1.5 pt-1.5 -mt-1.5 !pb-1.5 -mb-1.5',
+
+      // Layout
+      'flex flex-col gap-3',
+
+      // Shape
+
+      // Colors
+      'text-surface-600',
+
+      // Misc
+      'overflow-y-auto scrollbar-w-none',
+
+      {
+        grow: state?.maximized,
+      },
+    ],
+  }),
+  footer: {
+    class: [
+      // Flexbox and Alignment
+      'flex items-center justify-end',
+      'shrink-0',
+      'text-right',
+      'gap-1 mt-2',
+
+      // Shape
+      'border-t-0',
+      'rounded-b-lg',
+
+      // Colors
+      'bg-inherit',
+      'text-surface-700/80',
+    ],
+  },
+  mask: ({ props }) => ({
+    class: [
+      // Transitions
+      'transition',
+      'duration-300',
+      { 'p-5': !props.position == 'full' },
+
+      // Background and Effects
+      {
+        'has-[.mask-active]:bg-transparent bg-dialog-mask': props.modal,
+        'has-[.mask-active]:backdrop-blur-none backdrop-blur-sm': props.modal,
+      },
+    ],
+  }),
+  transition: ({ props }) => {
+    return props.position === 'top'
+      ? {
+          enterFromClass:
+            'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active',
+          enterActiveClass: 'transition-all duration-200 ease-out',
+          leaveActiveClass: 'transition-all duration-200 ease-out',
+          leaveToClass:
+            'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active',
+        }
+      : props.position === 'bottom'
+        ? {
+            enterFromClass: 'opacity-0 scale-75 translate-y-full mask-active',
+            enterActiveClass: 'transition-all duration-200 ease-out',
+            leaveActiveClass: 'transition-all duration-200 ease-out',
+            leaveToClass:
+              'opacity-0 scale-75 translate-x-0 translate-y-full translate-z-0 mask-active',
+          }
+        : props.position === 'left' ||
+            props.position === 'topleft' ||
+            props.position === 'bottomleft'
+          ? {
+              enterFromClass:
+                'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0 mask-active',
+              enterActiveClass: 'transition-all duration-200 ease-out',
+              leaveActiveClass: 'transition-all duration-200 ease-out',
+              leaveToClass:
+                'opacity-0 scale-75  -translate-x-full translate-y-0 translate-z-0 mask-active',
+            }
+          : props.position === 'right' ||
+              props.position === 'topright' ||
+              props.position === 'bottomright'
+            ? {
+                enterFromClass:
+                  'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active',
+                enterActiveClass: 'transition-all duration-200 ease-out',
+                leaveActiveClass: 'transition-all duration-200 ease-out',
+                leaveToClass:
+                  'opacity-0 scale-75 opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active',
+              }
+            : {
+                enterFromClass: 'opacity-0 scale-75 mask-active',
+                enterActiveClass: 'transition-all duration-200 ease-out',
+                leaveActiveClass: 'transition-all duration-200 ease-out',
+                leaveToClass: 'opacity-0 scale-75 mask-active',
+              };
+  },
+};

package/wangsvue/dialogconfirm/index.js

@@ -1,45 +1,42 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    root: {
-        'class': ['!w-[clamp(360px,75vw,400px)]'],
-        'data-wv-name': function (attrsDataName) { return attrsDataName !== null && attrsDataName !== void 0 ? attrsDataName : 'root'; },
-        'data-wv-section': function (attrsDataSection) {
-            return attrsDataSection !== null && attrsDataSection !== void 0 ? attrsDataSection : 'dialogconfirm';
-        },
-    },
-    header: {
-        'data-wv-section': 'dialog-confirm-header',
-    },
-    headericon: { 'class': 'text-2xl', 'data-wv-section': 'headericon' },
-    headertitle: function (severity) { return ({
-        'class': [
-            'text-base leading-none font-semibold',
-            {
-                'text-success-700': severity === 'success',
-                'text-danger-700': severity === 'danger',
-            },
-        ],
-        'data-wv-section': 'dialog-confirm-title',
-    }); },
-    content: {
-        'class': '[&_ul]:list-inside [&_ul]:list-disc [&_ul_li]:pl-[6px]',
-        'data-wv-section': 'dialog-confirm-content',
-    },
-    list: {
-        'data-wv-section': 'dialog-confirm-list',
-    },
-    bodymessage: {
-        'data-wv-section': 'confirm-message',
-    },
-    cancelbutton: {
-        'data-wv-section': 'cancel-button',
-    },
-    confirmbutton: {
-        'data-wv-section': 'confirm-button',
-    },
-    footer: {
-        'class': 'flex items-end justify-end gap-1 !mt-0',
-        'data-wv-section': 'dialog-confirm-footer',
-    },
-};
+export default {
+  root: {
+    'class': ['!w-[clamp(360px,75vw,400px)]'],
+    'data-wv-name': (attrsDataName) => attrsDataName ?? 'root',
+    'data-wv-section': (attrsDataSection) =>
+      attrsDataSection ?? 'dialogconfirm',
+  },
+  header: {
+    'data-wv-section': 'dialog-confirm-header',
+  },
+  headericon: { 'class': 'text-2xl', 'data-wv-section': 'headericon' },
+  headertitle: (severity) => ({
+    'class': [
+      'text-base leading-none font-semibold',
+      {
+        'text-success-700': severity === 'success',
+        'text-danger-700': severity === 'danger',
+      },
+    ],
+    'data-wv-section': 'dialog-confirm-title',
+  }),
+  content: {
+    'class': '[&_ul]:list-inside [&_ul]:list-disc [&_ul_li]:pl-[6px]',
+    'data-wv-section': 'dialog-confirm-content',
+  },
+  list: {
+    'data-wv-section': 'dialog-confirm-list',
+  },
+  bodymessage: {
+    'data-wv-section': 'confirm-message',
+  },
+  cancelbutton: {
+    'data-wv-section': 'cancel-button',
+  },
+  confirmbutton: {
+    'data-wv-section': 'confirm-button',
+  },
+  footer: {
+    'class': 'flex items-end justify-end gap-1 !mt-0',
+    'data-wv-section': 'dialog-confirm-footer',
+  },
+};