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

package/wangsvue/inputgroup/index.js

@@ -1,37 +1,40 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-/**
- * To set different ring width for Firefox Browser
- * Also for InputGroupAddon
- */
-var isFirefoxBased = navigator.userAgent.includes('Firefox');
-exports.default = {
-    root: function (_a) {
-        var props = _a.props;
-        return ({
-            'class': [
-                {
-                    '!ring-danger-500 [&_.inputgroupaddon]:ring-danger-500': props.invalid && props.ring !== 'none',
-                    '[&_.inputgroupaddon]:ring-general-400': !props.invalid && props.ring !== 'none',
-                    '!bg-general-50 ': props.disabled,
-                },
-                {
-                    '[&:has(:focus)]:!ring-primary-400 [&:has(:focus)_.inputgroupaddon]:!ring-primary-400': props.ring !== 'none',
-                },
-                {
-                    'ring-[1px] [&_.inputgroupaddon]:ring-[1px]': isFirefoxBased && props.ring !== 'none',
-                    'ring-[0.5px] [&_.inputgroupaddon]:ring-[0.5px]': !isFirefoxBased && props.ring !== 'none',
-                },
-                '[&_.inputgroupaddon[data-addon-variant=plain]]:!ring-[0px]',
-                '[&:has(input)]:cursor-text',
-                'h-[30px]',
-                'flex items-stretch',
-                'w-full',
-                'ring-inset ring-general-400 rounded',
-                'bg-white',
-                props.class,
-            ],
-            'data-wv-section': 'inputgroup',
-        });
-    },
-};
+/**
+ * To set different ring width for Firefox Browser
+ * Also for InputGroupAddon
+ */
+const isFirefoxBased = navigator.userAgent.includes('Firefox');
+
+export default {
+  root: ({ props }) => ({
+    'class': [
+      {
+        '!ring-danger-500 [&_.inputgroupaddon]:ring-danger-500':
+          props.invalid && props.ring !== 'none',
+        '[&_.inputgroupaddon]:ring-general-400':
+          !props.invalid && props.ring !== 'none',
+        '!bg-general-50 ': props.disabled,
+      },
+      {
+        '[&:has(:focus)]:!ring-primary-400 [&:has(:focus)_.inputgroupaddon]:!ring-primary-400':
+          props.ring !== 'none',
+      },
+      {
+        'ring-[1px] [&_.inputgroupaddon]:ring-[1px]':
+          isFirefoxBased && props.ring !== 'none',
+        'ring-[0.5px] [&_.inputgroupaddon]:ring-[0.5px]':
+          !isFirefoxBased && props.ring !== 'none',
+      },
+
+      '[&_.inputgroupaddon[data-addon-variant=plain]]:!ring-[0px]',
+
+      '[&:has(input)]:cursor-text',
+      'h-[30px]',
+      'flex items-stretch',
+      'w-full',
+      'ring-inset ring-general-400 rounded',
+      'bg-white',
+      props.class,
+    ],
+    'data-wv-section': 'inputgroup',
+  }),
+};

package/wangsvue/inputgroupaddon/index.js

@@ -1,34 +1,34 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    root: function (_a) {
-        var props = _a.props;
-        return ({
-            'class': [
-                'inputgroupaddon', // Removing this class will causes bug style.
-                // Flex
-                'inline-flex items-center justify-center',
-                // Shape
-                'first:rounded-tl first:rounded-bl',
-                'last:rounded-tr last:rounded-br',
-                'ring-inset',
-                // 'border-y',
-                // 'border-l',
-                // Space
-                'px-3 gap-3',
-                // Size
-                'w-max',
-                // Font
-                'text-general-800',
-                'text-xs font-medium leading-none tracking-tight',
-                // Color
-                { 'bg-general-50': props.addonVariant !== 'plain' },
-                {
-                    '!text-general-200': props.disabled,
-                    '!px-2': props.showButtons,
-                },
-            ],
-            'data-addon-variant': props.addonVariant, // Used in inputgroup to set styling
-        });
-    },
-};
+export default {
+  root: ({ props }) => ({
+    'class': [
+      'inputgroupaddon', // Removing this class will causes bug style.
+      // Flex
+      'inline-flex items-center justify-center',
+
+      // Shape
+      'first:rounded-tl first:rounded-bl',
+      'last:rounded-tr last:rounded-br',
+      'ring-inset',
+      // 'border-y',
+      // 'border-l',
+
+      // Space
+      'px-3 gap-3',
+
+      // Size
+      'w-max',
+
+      // Font
+      'text-general-800',
+      'text-xs font-medium leading-none tracking-tight',
+
+      // Color
+      { 'bg-general-50': props.addonVariant !== 'plain' },
+      {
+        '!text-general-200': props.disabled,
+        '!px-2': props.showButtons,
+      },
+    ],
+    'data-addon-variant': props.addonVariant, // Used in inputgroup to set styling
+  }),
+};

package/wangsvue/inputmask/index.js

@@ -1,29 +1,30 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    root: function (_a) {
-        var context = _a.context;
-        return ({
-            class: [
-                // Font
-                'font-sans leading-6',
-                // Spacing
-                'm-0 py-1.5 px-3 sm:text-sm',
-                // Colors
-                'text-surface-900',
-                'placeholder:text-surface-400',
-                'bg-surface-0',
-                'ring-1 ring-inset ring-surface-300',
-                'shadow-sm',
-                // Shape
-                'rounded-md',
-                'appearance-none',
-                // Interactions
-                {
-                    'outline-none focus:ring-primary-500': !context.disabled,
-                    'opacity-60 select-none pointer-events-none cursor-default': context.disabled,
-                },
-            ],
-        });
-    },
-};
+export default {
+  root: ({ context }) => ({
+    class: [
+      // Font
+      'font-sans leading-6',
+
+      // Spacing
+      'm-0 py-1.5 px-3 sm:text-sm',
+
+      // Colors
+      'text-surface-900',
+      'placeholder:text-surface-400',
+      'bg-surface-0',
+      'ring-1 ring-inset ring-surface-300',
+      'shadow-sm',
+
+      // Shape
+      'rounded-md',
+      'appearance-none',
+
+      // Interactions
+      {
+        'outline-none focus:ring-primary-500':
+          !context.disabled,
+        'opacity-60 select-none pointer-events-none cursor-default':
+          context.disabled,
+      },
+    ],
+  }),
+};

package/wangsvue/inputnumber/index.js

@@ -1,58 +1,50 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    root: function (_a) {
-        var props = _a.props, parent = _a.parent;
-        return ({
-            class: [
-                // Layout
-                'flex items-center self-stretch shrink-0 grow',
-                //Size
-                'h-full',
-                // Spacing
-                'py-1 px-3',
-                // Border
-                'rounded',
-                'appearance-none',
-            ],
-        });
-    },
-    input: {
-        root: function (_a) {
-            var parent = _a.parent;
-            return ({
-                class: [
-                    'border-0 h-full w-full outline-none',
-                    'bg-inherit',
-                    'text-xs font-normal',
-                    'placeholder:text-general-200',
-                ],
-            });
-        },
-    },
-    buttongroup: {
-        class: ['flex'],
-    },
-    incrementbutton: {
-        root: function (_a) {
-            var parent = _a.parent;
-            return ({
-                class: [],
-            });
-        },
-        label: {
-            class: 'h-0 w-0',
-        },
-    },
-    decrementbutton: {
-        root: function (_a) {
-            var parent = _a.parent;
-            return ({
-                class: [],
-            });
-        },
-        label: {
-            class: 'h-0 w-0',
-        },
-    },
-};
+export default {
+  root: ({ props, parent }) => ({
+    class: [
+      // Layout
+      'flex items-center self-stretch shrink-0 grow',
+
+      //Size
+      'h-full',
+
+      // Spacing
+      'py-1 px-3',
+
+      // Border
+      'rounded',
+
+      'appearance-none',
+    ],
+  }),
+  input: {
+    root: ({ parent }) => ({
+      class: [
+        'border-0 h-full w-full outline-none',
+        'bg-inherit',
+        'text-xs font-normal',
+        'placeholder:text-general-200',
+      ],
+    }),
+  },
+
+  buttongroup: {
+    class: ['flex'],
+  },
+
+  incrementbutton: {
+    root: ({ parent }) => ({
+      class: [],
+    }),
+    label: {
+      class: 'h-0 w-0',
+    },
+  },
+  decrementbutton: {
+    root: ({ parent }) => ({
+      class: [],
+    }),
+    label: {
+      class: 'h-0 w-0',
+    },
+  },
+};

package/wangsvue/inputotp/index.js

@@ -1,63 +1,70 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    root: {
-        class: [
-            // Alignment
-            'flex items-center',
-            'gap-[6px]',
-        ],
-    },
-    input: {
-        root: function (_a) {
-            var _b;
-            var props = _a.props, context = _a.context, parent = _a.parent;
-            return ({
-                class: [
-                    // Font
-                    'leading-none font-medium',
-                    // Flex & Alignment
-                    { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
-                    'text-center',
-                    // Spacing
-                    'm-0',
-                    {
-                        'p-3': props.size == null,
-                    },
-                    // Size
-                    'w-[42px] h-[42px] text-base',
-                    // Shape
-                    { 'rounded-md': parent.instance.$name !== 'InputGroup' },
-                    {
-                        'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup',
-                    },
-                    {
-                        'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup',
-                    },
-                    {
-                        'first:ml-0 ml-[-1px]': parent.instance.$name == 'InputGroup' && !props.showButtons,
-                    },
-                    // Colors
-                    'text-general-800',
-                    'placeholder:text-surface-400',
-                    'bg-white',
-                    'border',
-                    { 'border-general-200': !props.invalid },
-                    // Invalid State
-                    { 'border-danger-500': props.invalid },
-                    // States
-                    {
-                        // 'hover:border-primary-500': !context.disabled && !props.invalid,
-                        'focus:outline-none focus:outline-offset-0': !context.disabled,
-                        'opacity-60 select-none pointer-events-none cursor-default': context.disabled,
-                    },
-                    // Filled State *for FloatLabel
-                    { filled: ((_b = parent.instance) === null || _b === void 0 ? void 0 : _b.$name) == 'FloatLabel' && context.filled },
-                    // Misc
-                    'appearance-none',
-                    'transition-colors duration-200',
-                ],
-            });
-        },
-    },
-};
+export default {
+  root: {
+    class: [
+      // Alignment
+      'flex items-center',
+      'gap-[6px]',
+    ],
+  },
+  input: {
+    root: ({ props, context, parent }) => ({
+      class: [
+        // Font
+        'leading-none font-medium',
+
+        // Flex & Alignment
+        { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
+        'text-center',
+
+        // Spacing
+        'm-0',
+        {
+          'p-3': props.size == null,
+        },
+
+        // Size
+        'w-[42px] h-[42px] text-base',
+
+        // Shape
+        { 'rounded-md': parent.instance.$name !== 'InputGroup' },
+        {
+          'first:rounded-l-md rounded-none last:rounded-r-md':
+            parent.instance.$name == 'InputGroup',
+        },
+        {
+          'border-0 border-y border-l last:border-r':
+            parent.instance.$name == 'InputGroup',
+        },
+        {
+          'first:ml-0 ml-[-1px]':
+            parent.instance.$name == 'InputGroup' && !props.showButtons,
+        },
+
+        // Colors
+        'text-general-800',
+        'placeholder:text-surface-400',
+        'bg-white',
+        'border',
+        { 'border-general-200': !props.invalid },
+
+        // Invalid State
+        { 'border-danger-500': props.invalid },
+
+        // States
+        {
+          // 'hover:border-primary-500': !context.disabled && !props.invalid,
+          'focus:outline-none focus:outline-offset-0': !context.disabled,
+          'opacity-60 select-none pointer-events-none cursor-default':
+            context.disabled,
+        },
+
+        // Filled State *for FloatLabel
+        { filled: parent.instance?.$name == 'FloatLabel' && context.filled },
+
+        // Misc
+        'appearance-none',
+        'transition-colors duration-200',
+      ],
+    }),
+  },
+};

package/wangsvue/inputphonenumber/index.js

@@ -1,34 +1,19 @@
-"use strict";
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.commonClasses = void 0;
-var commonClasses = function (_a) {
-    var isFirefoxBased = _a.isFirefoxBased, invalidInput = _a.invalidInput;
-    return [
-        { 'ring-[1px]': isFirefoxBased, 'ring-[0.5px]': !isFirefoxBased },
-        { '!ring-danger-500': invalidInput },
-        'ring-inset',
-        'ring-general-400',
-        '[&:has(:focus)]:bg-none',
-        '[&:has(:focus)]:ring-primary-400',
-        'bg-white',
-        'z-[0] [&:has(:focus)]:z-[12]',
-    ];
-};
-exports.commonClasses = commonClasses;
-exports.default = {
-    dialcode: function (ctx) { return ({
-        class: __spreadArray(__spreadArray([], (0, exports.commonClasses)(ctx), true), ['rounded-l rounded-r-none'], false),
-    }); },
-    inputnumber: function (ctx) { return ({
-        class: __spreadArray(__spreadArray([], (0, exports.commonClasses)(ctx), true), ['rounded-r rounded-l-none -ml-[1px]'], false),
-    }); },
-};
+export const commonClasses = ({ isFirefoxBased, invalidInput }) => [
+  { 'ring-[1px]': isFirefoxBased, 'ring-[0.5px]': !isFirefoxBased },
+  { '!ring-danger-500': invalidInput },
+  'ring-inset',
+  'ring-general-400',
+  '[&:has(:focus)]:bg-none',
+  '[&:has(:focus)]:ring-primary-400',
+  'bg-white',
+  'z-[0] [&:has(:focus)]:z-[12]',
+];
+
+export default {
+  dialcode: (ctx) => ({
+    class: [...commonClasses(ctx), 'rounded-l rounded-r-none'],
+  }),
+  inputnumber: (ctx) => ({
+    class: [...commonClasses(ctx), 'rounded-r rounded-l-none -ml-[1px]'],
+  }),
+};