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

package/wangsvue/dialogform/index.js

@@ -1,68 +1,67 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    root: {
-        'class': ['max-w-[90vw]'],
-        'style': function (computedWidth) { return "width: ".concat(computedWidth); },
-        'data-wv-section': 'dialog-form',
-    },
-    header: {
-        'class': 'flex items-center gap-2',
-        'data-wv-section': 'dialog-form-header',
-    },
-    headericon: { 'class': 'text-2xl', 'data-wv-section': 'headericon' },
-    headertitle: {
-        'class': 'mr-auto text-grayscale-900 text-center text-[0.9rem] leading-[1.125rem] !font-semibold tracking-[0.28px]',
-        'data-wv-section': 'dialog-form-title',
-    },
-    expandasidebutton: {
-        'class': ['!px-1.5 !py-1 -mr-1.5 !text-xs'],
-        'data-wv-section': 'expand-aside-button',
-    },
-    closedialog: {
-        'class': '!p-0.5 !text-general-200',
-        'data-wv-section': 'closebutton',
-    },
-    container: function (expanded) { return ({
-        'class': [
-            'flex overflow-y-auto overflow-x-hidden scrollbar-w-none',
-            { 'gap-6': expanded },
-        ],
-        'data-wv-section': 'dialog-form-container',
-    }); },
-    mainsection: {
-        'class': ['flex flex-col gap-3 w-full'],
-        'data-wv-section': 'dialog-form-main',
-    },
-    asidesection: function (expanded, asideRightWidth) { return ({
-        'class': [
-            'flex flex-col gap-3 shrink-0',
-            { 'opacity-0': !expanded },
-            { 'opacity-100': expanded },
-        ],
-        'style': "width: ".concat(expanded ? asideRightWidth - 24 : 0, "px"),
-        'data-wv-section': 'dialog-form-aside',
-    }); },
-    form: {
-        'class': 'overflow-y-auto',
-        'style': 'scrollbar-width: none !important',
-        'data-wv-section': 'form',
-    },
-    footer: {
-        'class': 'flex flex-col gap-3 items-end justify-center',
-        'data-wv-section': 'dialog-form-footer',
-    },
-    footerbutton: {
-        'class': 'flex gap-1 items-center justify-end',
-        'data-wv-section': 'footer-button',
-    },
-    cancelbtn: {
-        'data-wv-section': 'cancel-btn',
-    },
-    clearfield: {
-        'data-wv-section': 'clear-field',
-    },
-    savesubmitbutton: {
-        'data-wv-section': 'save-submit-button',
-    },
-};
+export default {
+  root: {
+    'class': ['max-w-[90vw]'],
+    'style': (computedWidth) => `width: ${computedWidth}`,
+    'data-wv-section': 'dialog-form',
+  },
+  header: {
+    'class': 'flex items-center gap-2',
+    'data-wv-section': 'dialog-form-header',
+  },
+  headericon: { 'class': 'text-2xl', 'data-wv-section': 'headericon' },
+  headertitle: {
+    'class':
+      'mr-auto text-grayscale-900 text-center text-[0.9rem] leading-[1.125rem] !font-semibold tracking-[0.28px]',
+    'data-wv-section': 'dialog-form-title',
+  },
+  expandasidebutton: {
+    'class': ['!px-1.5 !py-1 -mr-1.5 !text-xs'],
+    'data-wv-section': 'expand-aside-button',
+  },
+  closedialog: {
+    'class': '!p-0.5 !text-general-200',
+    'data-wv-section': 'closebutton',
+  },
+  container: (expanded) => ({
+    'class': [
+      'flex overflow-y-auto overflow-x-hidden scrollbar-w-none',
+      { 'gap-6': expanded },
+    ],
+    'data-wv-section': 'dialog-form-container',
+  }),
+  mainsection: {
+    'class': ['flex flex-col gap-3 w-full'],
+    'data-wv-section': 'dialog-form-main',
+  },
+  asidesection: (expanded, asideRightWidth) => ({
+    'class': [
+      'flex flex-col gap-3 shrink-0',
+      { 'opacity-0': !expanded },
+      { 'opacity-100': expanded },
+    ],
+    'style': `width: ${expanded ? asideRightWidth - 24 : 0}px`,
+    'data-wv-section': 'dialog-form-aside',
+  }),
+  form: {
+    'class': 'overflow-y-auto',
+    'style': 'scrollbar-width: none !important',
+    'data-wv-section': 'form',
+  },
+  footer: {
+    'class': 'flex flex-col gap-3 items-end justify-center',
+    'data-wv-section': 'dialog-form-footer',
+  },
+  footerbutton: {
+    'class': 'flex gap-1 items-center justify-end',
+    'data-wv-section': 'footer-button',
+  },
+  cancelbtn: {
+    'data-wv-section': 'cancel-btn',
+  },
+  clearfield: {
+    'data-wv-section': 'clear-field',
+  },
+  savesubmitbutton: {
+    'data-wv-section': 'save-submit-button',
+  },
+};

package/wangsvue/divider/index.js

@@ -1,64 +1,72 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    root: function (_a) {
-        var props = _a.props;
-        return ({
-            class: [
-                // Flex and Position
-                'flex relative',
-                { 'justify-center': props.layout == 'vertical' },
-                { 'items-center': props.layout == 'vertical' },
-                {
-                    'justify-start': (props === null || props === void 0 ? void 0 : props.align) == 'left' && props.layout == 'horizontal',
-                    'justify-center': (props === null || props === void 0 ? void 0 : props.align) == 'center' && props.layout == 'horizontal',
-                    'justify-end': (props === null || props === void 0 ? void 0 : props.align) == 'right' && props.layout == 'horizontal',
-                    'items-center': (props === null || props === void 0 ? void 0 : props.align) == 'top' && props.layout == 'vertical',
-                    'items-start': (props === null || props === void 0 ? void 0 : props.align) == 'center' && props.layout == 'vertical',
-                    'items-end': (props === null || props === void 0 ? void 0 : props.align) == 'bottom' && props.layout == 'vertical',
-                },
-                // Spacing
-                {
-                    'my-5 mx-0 py-0 px-5': props.layout == 'horizontal',
-                    'mx-4 md:mx-5 py-5': props.layout == 'vertical',
-                },
-                // Size
-                {
-                    'w-full': props.layout == 'horizontal',
-                    'min-h-full': props.layout == 'vertical',
-                },
-                // Before: Line
-                'before:block',
-                // Position
-                {
-                    'before:absolute before:left-0 before:top-1/2': props.layout == 'horizontal',
-                    'before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2': props.layout == 'vertical',
-                },
-                // Size
-                {
-                    'before:w-full': props.layout == 'horizontal',
-                    'before:min-h-full': props.layout == 'vertical',
-                },
-                // Shape
-                {
-                    'before:border-solid': props.type == 'solid',
-                    'before:border-dotted': props.type == 'dotted',
-                    'before:border-dashed': props.type == 'dashed',
-                },
-                // Color
-                {
-                    'before:border-t before:border-surface-200': props.layout == 'horizontal',
-                    'before:border-l before:border-surface-200': props.layout == 'vertical',
-                },
-            ],
-        });
-    },
-    content: {
-        class: [
-            // Space and Position
-            'p-2 z-10',
-            // Color
-            'bg-surface-0',
-        ],
-    },
-};
+export default {
+  root: ({ props }) => ({
+    class: [
+      // Flex and Position
+      'flex relative',
+      { 'justify-center': props.layout == 'vertical' },
+      { 'items-center': props.layout == 'vertical' },
+      {
+        'justify-start': props?.align == 'left' && props.layout == 'horizontal',
+        'justify-center':
+          props?.align == 'center' && props.layout == 'horizontal',
+        'justify-end': props?.align == 'right' && props.layout == 'horizontal',
+        'items-center': props?.align == 'top' && props.layout == 'vertical',
+        'items-start': props?.align == 'center' && props.layout == 'vertical',
+        'items-end': props?.align == 'bottom' && props.layout == 'vertical',
+      },
+
+      // Spacing
+      {
+        'my-5 mx-0 py-0 px-5': props.layout == 'horizontal',
+        'mx-4 md:mx-5 py-5': props.layout == 'vertical',
+      },
+
+      // Size
+      {
+        'w-full': props.layout == 'horizontal',
+        'min-h-full': props.layout == 'vertical',
+      },
+
+      // Before: Line
+      'before:block',
+
+      // Position
+      {
+        'before:absolute before:left-0 before:top-1/2':
+          props.layout == 'horizontal',
+        'before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2':
+          props.layout == 'vertical',
+      },
+
+      // Size
+      {
+        'before:w-full': props.layout == 'horizontal',
+        'before:min-h-full': props.layout == 'vertical',
+      },
+
+      // Shape
+      {
+        'before:border-solid': props.type == 'solid',
+        'before:border-dotted': props.type == 'dotted',
+        'before:border-dashed': props.type == 'dashed',
+      },
+
+      // Color
+      {
+        'before:border-t before:border-surface-200':
+          props.layout == 'horizontal',
+        'before:border-l before:border-surface-200':
+          props.layout == 'vertical',
+      },
+    ],
+  }),
+  content: {
+    class: [
+      // Space and Position
+      'p-2 z-10',
+
+      // Color
+      'bg-surface-0',
+    ],
+  },
+};

package/wangsvue/dock/index.js

@@ -1,92 +1,97 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    root: function (_a) {
-        var props = _a.props;
-        return ({
-            class: [
-                // Positioning
-                'absolute z-1',
-                {
-                    'left-0 bottom-0 w-full': props.position == 'bottom',
-                    'left-0 top-0 w-full': props.position == 'top',
-                    'left-0 top-0 h-full': props.position == 'left',
-                    'right-0 top-0 h-full': props.position == 'right',
-                },
-                // Flexbox & Alignment
-                'flex justify-center items-center',
-                // Interactivity
-                'pointer-events-none',
-            ],
-        });
-    },
-    container: {
-        class: [
-            // Flexbox
-            'flex',
-            // Shape & Border
-            'rounded-md',
-            // Color
-            'bg-surface-0/10 border border-surface-0/20',
-            'backdrop-blur-sm',
-            // Spacing
-            'p-2',
-            // Misc
-            'pointer-events-auto',
-        ],
-    },
-    menu: function (_a) {
-        var props = _a.props;
-        return ({
-            class: [
-                // Flexbox & Alignment
-                'flex items-center justify-center',
-                {
-                    'flex-col': props.position == 'left' || props.position == 'right',
-                },
-                // List Style
-                'm-0 p-0 list-none',
-                // Shape
-                'outline-none',
-            ],
-        });
-    },
-    menuitem: function (_a) {
-        var props = _a.props, context = _a.context, instance = _a.instance;
-        return ({
-            class: [
-                // Spacing & Shape
-                'p-2 rounded-md',
-                // Conditional Scaling
-                {
-                    'hover:scale-150': instance.currentIndex === context.index,
-                    'scale-125': instance.currentIndex - 1 === context.index ||
-                        instance.currentIndex + 1 === context.index,
-                    'scale-110': instance.currentIndex - 2 === context.index ||
-                        instance.currentIndex + 2 === context.index,
-                },
-                // Positioning & Hover States
-                {
-                    'origin-bottom hover:mx-6': props.position == 'bottom',
-                    'origin-top hover:mx-6': props.position == 'top',
-                    'origin-left hover:my-6': props.position == 'left',
-                    'origin-right hover:my-6': props.position == 'right',
-                },
-                // Transitions & Transform
-                'transition-all duration-200 ease-cubic-bezier-will-change-transform transform',
-            ],
-        });
-    },
-    action: {
-        class: [
-            // Flexbox & Alignment
-            'flex flex-col items-center justify-center',
-            // Position
-            'relative',
-            // Size
-            'w-16 h-16',
-            // Misc
-            'cursor-default overflow-hidden',
-        ],
-    },
-};
+export default {
+  root: ({ props }) => ({
+    class: [
+      // Positioning
+      'absolute z-1',
+      {
+        'left-0 bottom-0 w-full': props.position == 'bottom',
+        'left-0 top-0 w-full': props.position == 'top',
+        'left-0 top-0 h-full': props.position == 'left',
+        'right-0 top-0 h-full': props.position == 'right',
+      },
+
+      // Flexbox & Alignment
+      'flex justify-center items-center',
+
+      // Interactivity
+      'pointer-events-none',
+    ],
+  }),
+  container: {
+    class: [
+      // Flexbox
+      'flex',
+
+      // Shape & Border
+      'rounded-md',
+
+      // Color
+      'bg-surface-0/10 border border-surface-0/20',
+      'backdrop-blur-sm',
+
+      // Spacing
+      'p-2',
+
+      // Misc
+      'pointer-events-auto',
+    ],
+  },
+  menu: ({ props }) => ({
+    class: [
+      // Flexbox & Alignment
+      'flex items-center justify-center',
+      {
+        'flex-col': props.position == 'left' || props.position == 'right',
+      },
+
+      // List Style
+      'm-0 p-0 list-none',
+
+      // Shape
+      'outline-none',
+    ],
+  }),
+  menuitem: ({ props, context, instance }) => ({
+    class: [
+      // Spacing & Shape
+      'p-2 rounded-md',
+
+      // Conditional Scaling
+      {
+        'hover:scale-150': instance.currentIndex === context.index,
+        'scale-125':
+          instance.currentIndex - 1 === context.index ||
+          instance.currentIndex + 1 === context.index,
+        'scale-110':
+          instance.currentIndex - 2 === context.index ||
+          instance.currentIndex + 2 === context.index,
+      },
+
+      // Positioning & Hover States
+      {
+        'origin-bottom hover:mx-6': props.position == 'bottom',
+        'origin-top hover:mx-6': props.position == 'top',
+        'origin-left hover:my-6': props.position == 'left',
+        'origin-right hover:my-6': props.position == 'right',
+      },
+
+      // Transitions & Transform
+      'transition-all duration-200 ease-cubic-bezier-will-change-transform transform',
+    ],
+  }),
+  action: {
+    class: [
+      // Flexbox & Alignment
+      'flex flex-col items-center justify-center',
+
+      // Position
+      'relative',
+
+      // Size
+      'w-16 h-16',
+
+      // Misc
+      'cursor-default overflow-hidden',
+    ],
+  },
+};