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

package/wangsvue/togglebutton/index.js

@@ -1,77 +1,87 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    root: {
-        class: [
-            'relative',
-            // Alignment
-            'inline-flex',
-            'align-bottom',
-            // Misc
-            'cursor-pointer',
-            'select-none',
-        ],
-    },
-    box: function (_a) {
-        var props = _a.props;
-        return ({
-            class: [
-                // Alignments
-                'items-center inline-flex flex-1 text-center align-bottom justify-center',
-                // Sizes & Spacing
-                'px-2.5 py-1.5',
-                'text-sm',
-                // Shapes
-                'rounded-md shadow-sm',
-                // Colors
-                'text-surface-700/80',
-                'ring-1 ring-surface-200',
-                {
-                    'bg-surface-0 ': !props.modelValue,
-                    'bg-surface-100': props.modelValue,
-                },
-                // States
-                'peer-hover:bg-surface-200',
-                {
-                    'peer-focus-visible:ring-2 peer-focus-visible:ring-inset peer-focus-visible:ring-primary-500': !props.disabled,
-                },
-                // Transitions
-                'transition-all duration-200',
-                // Misc
-                {
-                    'cursor-pointer': !props.disabled,
-                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled,
-                },
-            ],
-        });
-    },
-    label: {
-        class: 'font-semibold text-center w-full',
-    },
-    input: {
-        class: [
-            'peer',
-            // Size
-            'w-full ',
-            'h-full',
-            // Position
-            'absolute',
-            'top-0 left-0',
-            'z-10',
-            // Spacing
-            'p-0',
-            'm-0',
-            // Shape
-            'opacity-0',
-            'rounded-md',
-            'outline-none',
-            'border border-surface-200',
-            // Misc
-            'appareance-none',
-            'cursor-pointer',
-        ],
-    },
-    icon: {
-        class: [' mr-2', 'text-surface-700/80'],
-    },
-};
+export default {
+  root: {
+    class: [
+      'relative',
+
+      // Alignment
+      'inline-flex',
+      'align-bottom',
+
+      // Misc
+      'cursor-pointer',
+      'select-none',
+    ],
+  },
+  box: ({ props }) => ({
+    class: [
+      // Alignments
+      'items-center inline-flex flex-1 text-center align-bottom justify-center',
+
+      // Sizes & Spacing
+      'px-2.5 py-1.5',
+      'text-sm',
+
+      // Shapes
+      'rounded-md shadow-sm',
+
+      // Colors
+      'text-surface-700/80',
+      'ring-1 ring-surface-200',
+      {
+        'bg-surface-0 ': !props.modelValue,
+        'bg-surface-100': props.modelValue,
+      },
+
+      // States
+      'peer-hover:bg-surface-200',
+      {
+        'peer-focus-visible:ring-2 peer-focus-visible:ring-inset peer-focus-visible:ring-primary-500':
+          !props.disabled,
+      },
+
+      // Transitions
+      'transition-all duration-200',
+
+      // Misc
+      {
+        'cursor-pointer': !props.disabled,
+        'opacity-60 select-none pointer-events-none cursor-default':
+          props.disabled,
+      },
+    ],
+  }),
+  label: {
+    class: 'font-semibold text-center w-full',
+  },
+  input: {
+    class: [
+      'peer',
+
+      // Size
+      'w-full ',
+      'h-full',
+
+      // Position
+      'absolute',
+      'top-0 left-0',
+      'z-10',
+
+      // Spacing
+      'p-0',
+      'm-0',
+
+      // Shape
+      'opacity-0',
+      'rounded-md',
+      'outline-none',
+      'border border-surface-200',
+
+      // Misc
+      'appareance-none',
+      'cursor-pointer',
+    ],
+  },
+  icon: {
+    class: [' mr-2', 'text-surface-700/80'],
+  },
+};

package/wangsvue/toolbar/index.js

@@ -1,29 +1,30 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    root: {
-        class: [
-            // Flex & Alignment
-            'flex items-center justify-between flex-wrap',
-            'gap-6',
-            // Spacing
-            'px-6 py-2',
-            'min-h-[4rem]',
-            // Shape
-            'rounded-md',
-            'shadow-md',
-            // Color
-            'bg-surface-0',
-            'ring-1 ring-surface-100',
-        ],
-    },
-    start: {
-        class: 'flex items-center',
-    },
-    center: {
-        class: 'flex items-center',
-    },
-    end: {
-        class: 'flex items-center',
-    },
-};
+export default {
+  root: {
+    class: [
+      // Flex & Alignment
+      'flex items-center justify-between flex-wrap',
+      'gap-6',
+
+      // Spacing
+      'px-6 py-2',
+      'min-h-[4rem]',
+
+      // Shape
+      'rounded-md',
+      'shadow-md',
+
+      // Color
+      'bg-surface-0',
+      'ring-1 ring-surface-100',
+    ],
+  },
+  start: {
+    class: 'flex items-center',
+  },
+  center: {
+    class: 'flex items-center',
+  },
+  end: {
+    class: 'flex items-center',
+  },
+};

package/wangsvue/tooltip/index.js

@@ -1,42 +1,44 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    root: function (_a) {
-        var context = _a.context, props = _a.props;
-        return ({
-            class: [
-                // Position
-                'absolute',
-                {
-                    // Add space 4px at the bottom
-                    'pb-1': context === null || context === void 0 ? void 0 : context.top,
-                    'pt-1': context === null || context === void 0 ? void 0 : context.bottom,
-                    'pl-1': context === null || context === void 0 ? void 0 : context.right,
-                    'pr-1': context === null || context === void 0 ? void 0 : context.left,
-                },
-                '!transition',
-            ],
-        });
-    },
-    arrow: {
-        class: 'hidden',
-    },
-    text: {
-        class: [
-            // Shape
-            'rounded-[10px]',
-            // Background
-            'bg-white',
-            // Spacing
-            'px-3 py-1',
-            // Typography
-            'text-xs font-normal leading-4 text-left',
-            // Color
-            'text-grayscale-900',
-            // Misc
-            'shadow-[0px_4px_4px_0px_#00000040]',
-            'whitespace-pre-line',
-            'break-words',
-        ],
-    },
-};
+export default {
+  root: ({ context, props }) => ({
+    class: [
+      // Position
+      'absolute',
+
+      {
+        // Add space 4px at the bottom
+        'pb-1': context?.top,
+        'pt-1': context?.bottom,
+        'pl-1': context?.right,
+        'pr-1': context?.left,
+      },
+
+      '!transition',
+    ],
+  }),
+  arrow: {
+    class: 'hidden',
+  },
+  text: {
+    class: [
+      // Shape
+      'rounded-[10px]',
+
+      // Background
+      'bg-white',
+
+      // Spacing
+      'px-3 py-1',
+
+      // Typography
+      'text-xs font-normal leading-4 text-left',
+
+      // Color
+      'text-grayscale-900',
+
+      // Misc
+      'shadow-[0px_4px_4px_0px_#00000040]',
+      'whitespace-pre-line',
+      'break-words',
+    ],
+  },
+};