@fewangsit/wangsvue-presets 1.0.80

package/wangsvue/inputbadge/index.d.ts

@@ -0,0 +1,57 @@
+declare namespace _default {
+    function root({ context }: {
+        context: any;
+    }): {
+        class: (string | {
+            'ring-[1px]': boolean;
+            'ring-[0.5px]': boolean;
+            '!ring-danger-500 !dark:ring-danger-500'?: undefined;
+            '!ring-general-200 !dark:ring-general-200'?: undefined;
+            'pointer-events-none'?: undefined;
+        } | {
+            '!ring-danger-500 !dark:ring-danger-500': any;
+            'ring-[1px]'?: undefined;
+            'ring-[0.5px]'?: undefined;
+            '!ring-general-200 !dark:ring-general-200'?: undefined;
+            'pointer-events-none'?: undefined;
+        } | {
+            '!ring-general-200 !dark:ring-general-200': boolean;
+            'ring-[1px]'?: undefined;
+            'ring-[0.5px]'?: undefined;
+            '!ring-danger-500 !dark:ring-danger-500'?: undefined;
+            'pointer-events-none'?: undefined;
+        } | {
+            'pointer-events-none': any;
+            'ring-[1px]'?: undefined;
+            'ring-[0.5px]'?: undefined;
+            '!ring-danger-500 !dark:ring-danger-500'?: undefined;
+            '!ring-general-200 !dark:ring-general-200'?: undefined;
+        })[];
+    };
+    function input({ context, parent, props }: {
+        context: any;
+        parent: any;
+        props: any;
+    }): {
+        class: (string | {
+            'max-h-[43px]': any;
+            'outline-none'?: undefined;
+            '!text-general-200 select-none pointer-events-none cursor-default'?: undefined;
+        } | {
+            'outline-none': boolean;
+            '!text-general-200 select-none pointer-events-none cursor-default': any;
+            'max-h-[43px]'?: undefined;
+        } | {
+            'placeholder:text-transparent': any;
+        })[];
+    };
+    namespace erroricon {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace erroroverlaypanel {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+}
+export default _default;

package/wangsvue/inputbadge/index.js

@@ -0,0 +1,57 @@
+"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 });
+var index_js_1 = require("../inputtext/index.js");
+/**
+ * To set different ring width for Firefox Browser
+ * Also for InputGroupAddon
+ */
+var isFirefoxBased = navigator.userAgent.includes('Firefox');
+exports.default = {
+    root: function (_a) {
+        var context = _a.context;
+        return ({
+            class: [
+                'flex flex-wrap gap-x-0.5 gap-y-[5px] items-center',
+                'min-h-[26px] h-fit w-full',
+                'ring-inset rounded px-[12px] py-[2px]',
+                {
+                    'ring-[1px]': isFirefoxBased,
+                    'ring-[0.5px]': !isFirefoxBased,
+                },
+                { '!ring-danger-500 !dark:ring-danger-500': context.invalidInput },
+                { '!ring-general-200 !dark:ring-general-200': !context.invalidInput },
+                { 'pointer-events-none': context.disabled },
+            ],
+        });
+    },
+    input: function (_a) {
+        var _b;
+        var context = _a.context, parent = _a.parent, props = _a.props;
+        return ({
+            class: __spreadArray(__spreadArray([], index_js_1.default.root({
+                props: props,
+                context: context,
+                parent: parent,
+            }).class, true), [
+                'outline-none !w-full !bg-transparent !p-0 !shadow-none h-max !leading-4 min-w-[70px]',
+                { 'placeholder:text-transparent': (_b = context.value) === null || _b === void 0 ? void 0 : _b.length },
+                'focus:placeholder:text-general-200',
+            ], false),
+        });
+    },
+    erroricon: {
+        class: ['mr-1 text-warning-600 text-base'],
+    },
+    erroroverlaypanel: {
+        class: ['px-3 py-1 text-[12px] text-general-800'],
+    },
+};

package/wangsvue/inputcurrency/index.d.ts

@@ -0,0 +1,27 @@
+declare namespace _default {
+    function currency(ctx: any): {
+        class: (string | {
+            'ring-[1px]': any;
+            'ring-[0.5px]': boolean;
+            '!ring-danger-500'?: undefined;
+        } | {
+            '!ring-danger-500': any;
+            'ring-[1px]'?: undefined;
+            'ring-[0.5px]'?: undefined;
+        })[];
+        'data-wv-section': string;
+    };
+    function value(ctx: any): {
+        class: (string | {
+            'ring-[1px]': any;
+            'ring-[0.5px]': boolean;
+            '!ring-danger-500'?: undefined;
+        } | {
+            '!ring-danger-500': any;
+            'ring-[1px]'?: undefined;
+            'ring-[0.5px]'?: undefined;
+        })[];
+        'data-wv-section': string;
+    };
+}
+export default _default;

package/wangsvue/inputcurrency/index.js

@@ -0,0 +1,22 @@
+"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 });
+var inputphonenumber_1 = require("../inputphonenumber");
+exports.default = {
+    currency: function (ctx) { return ({
+        'class': __spreadArray(__spreadArray([], (0, inputphonenumber_1.commonClasses)(ctx), true), ['rounded-l rounded-r-none h-[30px]'], false),
+        'data-wv-section': 'currency',
+    }); },
+    value: function (ctx) { return ({
+        'class': __spreadArray(__spreadArray([], (0, inputphonenumber_1.commonClasses)(ctx), true), ['rounded-r rounded-l-none -ml-[1px]'], false),
+        'data-wv-section': 'value',
+    }); },
+};

package/wangsvue/inputgroup/index.d.ts

@@ -0,0 +1,9 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: any[];
+        'data-wv-section': string;
+    };
+}
+export default _default;

package/wangsvue/inputgroup/index.js

@@ -0,0 +1,37 @@
+"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',
+        });
+    },
+};

package/wangsvue/inputgroupaddon/index.d.ts

@@ -0,0 +1,17 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'bg-general-50': boolean;
+            '!text-general-200'?: undefined;
+            '!px-2'?: undefined;
+        } | {
+            '!text-general-200': any;
+            '!px-2': any;
+            'bg-general-50'?: undefined;
+        })[];
+        'data-addon-variant': any;
+    };
+}
+export default _default;

package/wangsvue/inputgroupaddon/index.js

@@ -0,0 +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
+        });
+    },
+};

package/wangsvue/inputmask/index.d.ts

@@ -0,0 +1,11 @@
+declare namespace _default {
+    function root({ context }: {
+        context: any;
+    }): {
+        class: (string | {
+            'outline-none focus:ring-primary-500': boolean;
+            'opacity-60 select-none pointer-events-none cursor-default': any;
+        })[];
+    };
+}
+export default _default;

package/wangsvue/inputmask/index.js

@@ -0,0 +1,29 @@
+"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,
+                },
+            ],
+        });
+    },
+};

package/wangsvue/inputnumber/index.d.ts

@@ -0,0 +1,46 @@
+declare namespace _default {
+    function root({ props, parent }: {
+        props: any;
+        parent: any;
+    }): {
+        class: string[];
+    };
+    namespace input {
+        export function root_1({ parent }: {
+            parent: any;
+        }): {
+            class: string[];
+        };
+        export { root_1 as root };
+    }
+    namespace buttongroup {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace incrementbutton {
+        export function root_2({ parent }: {
+            parent: any;
+        }): {
+            class: any[];
+        };
+        export { root_2 as root };
+        export namespace label {
+            let _class_1: string;
+            export { _class_1 as class };
+        }
+    }
+    namespace decrementbutton {
+        export function root_3({ parent }: {
+            parent: any;
+        }): {
+            class: any[];
+        };
+        export { root_3 as root };
+        export namespace label_1 {
+            let _class_2: string;
+            export { _class_2 as class };
+        }
+        export { label_1 as label };
+    }
+}
+export default _default;

package/wangsvue/inputnumber/index.js

@@ -0,0 +1,58 @@
+"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',
+        },
+    },
+};

package/wangsvue/inputotp/index.d.ts

@@ -0,0 +1,137 @@
+declare namespace _default {
+    namespace root {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace input {
+        export function root_1({ props, context, parent }: {
+            props: any;
+            context: any;
+            parent: any;
+        }): {
+            class: (string | {
+                'flex-1 w-[1%]': boolean;
+                'p-3'?: undefined;
+                'rounded-md'?: undefined;
+                'first:rounded-l-md rounded-none last:rounded-r-md'?: undefined;
+                'border-0 border-y border-l last:border-r'?: undefined;
+                'first:ml-0 ml-[-1px]'?: undefined;
+                'border-general-200'?: undefined;
+                'border-danger-500'?: undefined;
+                'focus:outline-none focus:outline-offset-0'?: undefined;
+                'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+                filled?: undefined;
+            } | {
+                'p-3': boolean;
+                'flex-1 w-[1%]'?: undefined;
+                'rounded-md'?: undefined;
+                'first:rounded-l-md rounded-none last:rounded-r-md'?: undefined;
+                'border-0 border-y border-l last:border-r'?: undefined;
+                'first:ml-0 ml-[-1px]'?: undefined;
+                'border-general-200'?: undefined;
+                'border-danger-500'?: undefined;
+                'focus:outline-none focus:outline-offset-0'?: undefined;
+                'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+                filled?: undefined;
+            } | {
+                'rounded-md': boolean;
+                'flex-1 w-[1%]'?: undefined;
+                'p-3'?: undefined;
+                'first:rounded-l-md rounded-none last:rounded-r-md'?: undefined;
+                'border-0 border-y border-l last:border-r'?: undefined;
+                'first:ml-0 ml-[-1px]'?: undefined;
+                'border-general-200'?: undefined;
+                'border-danger-500'?: undefined;
+                'focus:outline-none focus:outline-offset-0'?: undefined;
+                'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+                filled?: undefined;
+            } | {
+                'first:rounded-l-md rounded-none last:rounded-r-md': boolean;
+                'flex-1 w-[1%]'?: undefined;
+                'p-3'?: undefined;
+                'rounded-md'?: undefined;
+                'border-0 border-y border-l last:border-r'?: undefined;
+                'first:ml-0 ml-[-1px]'?: undefined;
+                'border-general-200'?: undefined;
+                'border-danger-500'?: undefined;
+                'focus:outline-none focus:outline-offset-0'?: undefined;
+                'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+                filled?: undefined;
+            } | {
+                'border-0 border-y border-l last:border-r': boolean;
+                'flex-1 w-[1%]'?: undefined;
+                'p-3'?: undefined;
+                'rounded-md'?: undefined;
+                'first:rounded-l-md rounded-none last:rounded-r-md'?: undefined;
+                'first:ml-0 ml-[-1px]'?: undefined;
+                'border-general-200'?: undefined;
+                'border-danger-500'?: undefined;
+                'focus:outline-none focus:outline-offset-0'?: undefined;
+                'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+                filled?: undefined;
+            } | {
+                'first:ml-0 ml-[-1px]': boolean;
+                'flex-1 w-[1%]'?: undefined;
+                'p-3'?: undefined;
+                'rounded-md'?: undefined;
+                'first:rounded-l-md rounded-none last:rounded-r-md'?: undefined;
+                'border-0 border-y border-l last:border-r'?: undefined;
+                'border-general-200'?: undefined;
+                'border-danger-500'?: undefined;
+                'focus:outline-none focus:outline-offset-0'?: undefined;
+                'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+                filled?: undefined;
+            } | {
+                'border-general-200': boolean;
+                'flex-1 w-[1%]'?: undefined;
+                'p-3'?: undefined;
+                'rounded-md'?: undefined;
+                'first:rounded-l-md rounded-none last:rounded-r-md'?: undefined;
+                'border-0 border-y border-l last:border-r'?: undefined;
+                'first:ml-0 ml-[-1px]'?: undefined;
+                'border-danger-500'?: undefined;
+                'focus:outline-none focus:outline-offset-0'?: undefined;
+                'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+                filled?: undefined;
+            } | {
+                'border-danger-500': any;
+                'flex-1 w-[1%]'?: undefined;
+                'p-3'?: undefined;
+                'rounded-md'?: undefined;
+                'first:rounded-l-md rounded-none last:rounded-r-md'?: undefined;
+                'border-0 border-y border-l last:border-r'?: undefined;
+                'first:ml-0 ml-[-1px]'?: undefined;
+                'border-general-200'?: undefined;
+                'focus:outline-none focus:outline-offset-0'?: undefined;
+                'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+                filled?: undefined;
+            } | {
+                'focus:outline-none focus:outline-offset-0': boolean;
+                'opacity-60 select-none pointer-events-none cursor-default': any;
+                'flex-1 w-[1%]'?: undefined;
+                'p-3'?: undefined;
+                'rounded-md'?: undefined;
+                'first:rounded-l-md rounded-none last:rounded-r-md'?: undefined;
+                'border-0 border-y border-l last:border-r'?: undefined;
+                'first:ml-0 ml-[-1px]'?: undefined;
+                'border-general-200'?: undefined;
+                'border-danger-500'?: undefined;
+                filled?: undefined;
+            } | {
+                filled: any;
+                'flex-1 w-[1%]'?: undefined;
+                'p-3'?: undefined;
+                'rounded-md'?: undefined;
+                'first:rounded-l-md rounded-none last:rounded-r-md'?: undefined;
+                'border-0 border-y border-l last:border-r'?: undefined;
+                'first:ml-0 ml-[-1px]'?: undefined;
+                'border-general-200'?: undefined;
+                'border-danger-500'?: undefined;
+                'focus:outline-none focus:outline-offset-0'?: undefined;
+                'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+            })[];
+        };
+        export { root_1 as root };
+    }
+}
+export default _default;

package/wangsvue/inputotp/index.js

@@ -0,0 +1,63 @@
+"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',
+                ],
+            });
+        },
+    },
+};

package/wangsvue/inputphonenumber/index.d.ts

@@ -0,0 +1,37 @@
+export function commonClasses({ isFirefoxBased, invalidInput }: {
+    isFirefoxBased: any;
+    invalidInput: any;
+}): (string | {
+    'ring-[1px]': any;
+    'ring-[0.5px]': boolean;
+    '!ring-danger-500'?: undefined;
+} | {
+    '!ring-danger-500': any;
+    'ring-[1px]'?: undefined;
+    'ring-[0.5px]'?: undefined;
+})[];
+declare namespace _default {
+    function dialcode(ctx: any): {
+        class: (string | {
+            'ring-[1px]': any;
+            'ring-[0.5px]': boolean;
+            '!ring-danger-500'?: undefined;
+        } | {
+            '!ring-danger-500': any;
+            'ring-[1px]'?: undefined;
+            'ring-[0.5px]'?: undefined;
+        })[];
+    };
+    function inputnumber(ctx: any): {
+        class: (string | {
+            'ring-[1px]': any;
+            'ring-[0.5px]': boolean;
+            '!ring-danger-500'?: undefined;
+        } | {
+            '!ring-danger-500': any;
+            'ring-[1px]'?: undefined;
+            'ring-[0.5px]'?: undefined;
+        })[];
+    };
+}
+export default _default;