@fewangsit/wangsvue-presets 1.0.80

package/wangsvue/message/index.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Spacing and Shape
+                'my-2 mx-0',
+                'rounded-md',
+                'ring-1 ring-inset ring-surface-200',
+                // Colors
+                'bg-surface-0',
+                {
+                    'text-blue-500': props.severity == 'info',
+                    'text-green-500': props.severity == 'success',
+                    'text-orange-500': props.severity == 'warn',
+                    'text-red-500': props.severity == 'error',
+                },
+            ],
+        });
+    },
+    wrapper: {
+        class: [
+            // Flexbox
+            'flex items-center',
+            // Spacing
+            'p-4',
+        ],
+    },
+    icon: {
+        class: [
+            // Sizing and Spacing
+            'w-5 h-5',
+            'mr-3 shrink-0',
+        ],
+    },
+    text: {
+        class: [
+            // Font and Text
+            'text-sm leading-none',
+            'font-medium',
+        ],
+    },
+    button: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Flexbox
+                'flex items-center justify-center',
+                // Size
+                'w-6 h-6',
+                // Spacing and Misc
+                'ml-auto relative',
+                // Shape
+                'rounded-full',
+                // Colors
+                'bg-transparent',
+                'text-surface-700/80',
+                // Transitions
+                'transition duration-200 ease-in-out',
+                // States
+                'hover:bg-surface-100',
+                'outline-none focus:ring-1 focus:ring-inset',
+                'focus:ring-primary-500',
+                // Misc
+                'overflow-hidden',
+            ],
+        });
+    },
+    closeicon: {
+        class: [
+            // Sizing and Spacing
+            'w-3 h-3',
+            'shrink-0',
+        ],
+    },
+    transition: {
+        enterFromClass: 'opacity-0',
+        enterActiveClass: 'transition-opacity duration-300',
+        leaveFromClass: 'max-h-40',
+        leaveActiveClass: 'overflow-hidden transition-all duration-300 ease-in',
+        leaveToClass: 'max-h-0 opacity-0 !m-0',
+    },
+};

package/wangsvue/multiselect/index.d.ts

@@ -0,0 +1,243 @@
+declare namespace _default {
+    export function root({ props, state }: {
+        props: any;
+        state: any;
+    }): {
+        class: (string | {
+            'opacity-60': any;
+            'pointer-events-none': any;
+        })[];
+    };
+    export namespace labelContainer {
+        let _class: string;
+        export { _class as class };
+    }
+    export function label({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            '!leading-5': boolean;
+            'text-general-200'?: undefined;
+            'text-grayscale-900'?: undefined;
+        } | {
+            'text-general-200': boolean;
+            'text-grayscale-900': any;
+            '!leading-5'?: undefined;
+        })[];
+    };
+    export namespace token {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    export namespace removeTokenIcon {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    export namespace trigger {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+    export namespace panel {
+        let _class_4: string[];
+        export { _class_4 as class };
+    }
+    export namespace header {
+        let _class_5: string[];
+        export { _class_5 as class };
+    }
+    export namespace headerCheckboxContainer {
+        let _class_6: string[];
+        export { _class_6 as class };
+    }
+    export let headerCheckbox: {
+        root: {
+            class: string[];
+        };
+        box: ({ props, context }: {
+            props: any;
+            context: any;
+        }) => {
+            class: (string | {
+                'border-general-300': any;
+                'border-grayscale-900': boolean;
+                'bg-white': boolean;
+                'bg-general-50': any;
+                'bg-grayscale-900': boolean;
+                'bg-general-300': any;
+                'ring-8 ring-primary-400/[12%]'?: undefined;
+                'peer-focus-visible:ring-8 peer-focus-visible:ring-offset-0 peer-focus-visible:ring-primary-400/[8%]'?: undefined;
+                'peer-active:ring-8 peer-active:ring-offset-0 peer-active:ring-primary-400/[12%]'?: undefined;
+                'cursor-default bg-general-50 border-general-200'?: undefined;
+                'bg-general-200 border-general-200'?: undefined;
+                '[&_i]:bg-transparent'?: undefined;
+                '[&_i]:text-white'?: undefined;
+                '[&_i]:text-transparent'?: undefined;
+            } | {
+                'ring-8 ring-primary-400/[12%]': any;
+                'border-general-300'?: undefined;
+                'border-grayscale-900'?: undefined;
+                'bg-white'?: undefined;
+                'bg-general-50'?: undefined;
+                'bg-grayscale-900'?: undefined;
+                'bg-general-300'?: undefined;
+                'peer-focus-visible:ring-8 peer-focus-visible:ring-offset-0 peer-focus-visible:ring-primary-400/[8%]'?: undefined;
+                'peer-active:ring-8 peer-active:ring-offset-0 peer-active:ring-primary-400/[12%]'?: undefined;
+                'cursor-default bg-general-50 border-general-200'?: undefined;
+                'bg-general-200 border-general-200'?: undefined;
+                '[&_i]:bg-transparent'?: undefined;
+                '[&_i]:text-white'?: undefined;
+                '[&_i]:text-transparent'?: undefined;
+            } | {
+                'peer-focus-visible:ring-8 peer-focus-visible:ring-offset-0 peer-focus-visible:ring-primary-400/[8%]': boolean;
+                'peer-active:ring-8 peer-active:ring-offset-0 peer-active:ring-primary-400/[12%]': boolean;
+                'cursor-default bg-general-50 border-general-200': boolean;
+                'bg-general-200 border-general-200': any;
+                'border-general-300'?: undefined;
+                'border-grayscale-900'?: undefined;
+                'bg-white'?: undefined;
+                'bg-general-50'?: undefined;
+                'bg-grayscale-900'?: undefined;
+                'bg-general-300'?: undefined;
+                'ring-8 ring-primary-400/[12%]'?: undefined;
+                '[&_i]:bg-transparent'?: undefined;
+                '[&_i]:text-white'?: undefined;
+                '[&_i]:text-transparent'?: undefined;
+            } | {
+                '[&_i]:bg-transparent': boolean;
+                '[&_i]:text-white': any;
+                '[&_i]:text-transparent': boolean;
+                'border-general-300'?: undefined;
+                'border-grayscale-900'?: undefined;
+                'bg-white'?: undefined;
+                'bg-general-50'?: undefined;
+                'bg-grayscale-900'?: undefined;
+                'bg-general-300'?: undefined;
+                'ring-8 ring-primary-400/[12%]'?: undefined;
+                'peer-focus-visible:ring-8 peer-focus-visible:ring-offset-0 peer-focus-visible:ring-primary-400/[8%]'?: undefined;
+                'peer-active:ring-8 peer-active:ring-offset-0 peer-active:ring-primary-400/[12%]'?: undefined;
+                'cursor-default bg-general-50 border-general-200'?: undefined;
+                'bg-general-200 border-general-200'?: undefined;
+            })[];
+        };
+        input: {
+            class: string[];
+        };
+        icon: {
+            class: string[];
+        };
+    };
+    export { presetCheckbox as itemCheckbox };
+    export namespace closeButton {
+        let _class_7: string[];
+        export { _class_7 as class };
+    }
+    export namespace closeButtonIcon {
+        let _class_8: string[];
+        export { _class_8 as class };
+    }
+    export namespace wrapper {
+        let _class_9: string[];
+        export { _class_9 as class };
+    }
+    export namespace list {
+        let _class_10: string;
+        export { _class_10 as class };
+    }
+    export function item({ context }: {
+        context: any;
+    }): {
+        class: (string | {
+            '!font-medium': any;
+            'text-surface-600'?: undefined;
+            'bg-primary-50 text-surface-700'?: undefined;
+            'bg-primary-50 text-primary-500'?: undefined;
+            'text-surface-700'?: undefined;
+            'pointer-events-none cursor-default'?: undefined;
+            'cursor-pointer'?: undefined;
+        } | {
+            'text-surface-600': any;
+            '!font-medium'?: undefined;
+            'bg-primary-50 text-surface-700'?: undefined;
+            'bg-primary-50 text-primary-500'?: undefined;
+            'text-surface-700'?: undefined;
+            'pointer-events-none cursor-default'?: undefined;
+            'cursor-pointer'?: undefined;
+        } | {
+            'bg-primary-50 text-surface-700': boolean;
+            '!font-medium'?: undefined;
+            'text-surface-600'?: undefined;
+            'bg-primary-50 text-primary-500'?: undefined;
+            'text-surface-700'?: undefined;
+            'pointer-events-none cursor-default'?: undefined;
+            'cursor-pointer'?: undefined;
+        } | {
+            'bg-primary-50 text-primary-500': any;
+            '!font-medium'?: undefined;
+            'text-surface-600'?: undefined;
+            'bg-primary-50 text-surface-700'?: undefined;
+            'text-surface-700'?: undefined;
+            'pointer-events-none cursor-default'?: undefined;
+            'cursor-pointer'?: undefined;
+        } | {
+            'text-surface-700': any;
+            '!font-medium'?: undefined;
+            'text-surface-600'?: undefined;
+            'bg-primary-50 text-surface-700'?: undefined;
+            'bg-primary-50 text-primary-500'?: undefined;
+            'pointer-events-none cursor-default'?: undefined;
+            'cursor-pointer'?: undefined;
+        } | {
+            'pointer-events-none cursor-default': any;
+            '!font-medium'?: undefined;
+            'text-surface-600'?: undefined;
+            'bg-primary-50 text-surface-700'?: undefined;
+            'bg-primary-50 text-primary-500'?: undefined;
+            'text-surface-700'?: undefined;
+            'cursor-pointer'?: undefined;
+        } | {
+            'cursor-pointer': boolean;
+            '!font-medium'?: undefined;
+            'text-surface-600'?: undefined;
+            'bg-primary-50 text-surface-700'?: undefined;
+            'bg-primary-50 text-primary-500'?: undefined;
+            'text-surface-700'?: undefined;
+            'pointer-events-none cursor-default'?: undefined;
+        })[];
+    };
+    export namespace option {
+        let _class_11: string;
+        export { _class_11 as class };
+    }
+    export namespace itemgroup {
+        let _class_12: string[];
+        export { _class_12 as class };
+    }
+    export namespace filtercontainer {
+        let _class_13: string[];
+        export { _class_13 as class };
+    }
+    export namespace filterinput {
+        let _class_14: string[];
+        export { _class_14 as class };
+    }
+    export namespace filtericon {
+        let _class_15: string[];
+        export { _class_15 as class };
+    }
+    export namespace clearicon {
+        let _class_16: string[];
+        export { _class_16 as class };
+    }
+    export namespace emptymessage {
+        let _class_17: string[];
+        export { _class_17 as class };
+    }
+    export namespace transition {
+        let enterFromClass: string;
+        let enterActiveClass: string;
+        let leaveActiveClass: string;
+        let leaveToClass: string;
+    }
+}
+export default _default;
+import presetCheckbox from '../checkbox/index.js';

package/wangsvue/multiselect/index.js

@@ -0,0 +1,328 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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("../checkbox/index.js");
+exports.default = {
+    root: function (_a) {
+        var props = _a.props, state = _a.state;
+        return ({
+            class: [
+                // Display and Position
+                'inline-flex',
+                'relative',
+                // Shape
+                'w-full',
+                // Misc
+                'cursor-default',
+                'select-none',
+                { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled },
+            ],
+        });
+    },
+    labelContainer: {
+        class: 'overflow-hidden flex flex-auto items-center cursor-pointer py-[3px] px-3 pr-0',
+    },
+    label: function (_a) {
+        var _b, _c;
+        var props = _a.props;
+        return ({
+            class: [
+                'flex gap-1',
+                'h-max',
+                //Font
+                'text-xs font-normal',
+                {
+                    '!leading-5': props.modelValue == null,
+                },
+                //Shape
+                'rounded-none',
+                // Color
+                {
+                    'text-general-200': !((_b = props.modelValue) === null || _b === void 0 ? void 0 : _b.length),
+                    'text-grayscale-900': (_c = props.modelValue) === null || _c === void 0 ? void 0 : _c.length,
+                },
+                // Transitions
+                'transition duration-200',
+                // Misc
+                'overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis',
+            ],
+        });
+    },
+    token: {
+        class: [
+            // Flexbox
+            'inline-flex items-center gap-1',
+            // Spacing
+            'py-1 px-2',
+            // Shape
+            'rounded-[50px]',
+            'text-xs',
+            'font-normal',
+            'leading-[12px]',
+            'tracking-[0.03em]',
+            'items-center',
+            'text-grayscale-900',
+            'bg-grayscale-500',
+        ],
+    },
+    removeTokenIcon: {
+        class: [
+            // Shape
+            'rounded-md leading-6',
+            // Spacing
+            'ml-2',
+            // Size
+            'w-4 h-4',
+            // Transition
+            'transition duration-200 ease-in-out',
+            // Misc
+            'cursor-pointer',
+        ],
+    },
+    trigger: {
+        class: [
+            //Font
+            // 'sm:text-sm',
+            // Spacing
+            'mr-1',
+            // Flexbox
+            'flex items-center justify-center',
+            'shrink-0',
+            // Color and Background
+            'bg-transparent',
+            'text-surface-500',
+            // Size
+            'w-6',
+            // Shape
+            'rounded-tr-md',
+            'rounded-br-md',
+        ],
+    },
+    panel: {
+        class: [
+            // Position
+            'absolute top-0 left-0',
+            'mt-2',
+            'max-w-[30vw]',
+            // Shape
+            'border-0',
+            'rounded-lg',
+            'shadow-panel',
+            // Color
+            'bg-surface-0',
+            'text-surface-800',
+        ],
+    },
+    header: {
+        class: [
+            'flex items-center self-stretch justify-between gap-2',
+            // Spacing
+            'py-3 px-4',
+            'm-0',
+            //Shape
+            'border-[0.5px] border-b-0',
+            'rounded-tl-md',
+            'rounded-tr-md',
+            // Color
+            'text-surface-700',
+            'bg-primary-400',
+            'border-grayscale-900',
+        ],
+    },
+    headerCheckboxContainer: {
+        class: [
+            'relative',
+            // Alignment
+            'inline-flex',
+            'align-bottom',
+            // Size
+            'w-4',
+            'h-4',
+            // Spacing
+            'mr-2',
+            // Misc
+            'cursor-default',
+            'select-none',
+        ],
+    },
+    headerCheckbox: __assign(__assign({}, index_js_1.default), { root: {
+            class: __spreadArray(__spreadArray([
+                '!mx-auto'
+            ], index_js_1.default.root.class, true), [
+                '[&:not(:has(svg))_[data-pc-section=box]]:!bg-primary-400',
+                '[&:not(:has(svg))_[data-pc-section=box]]:!border-white',
+            ], false),
+        } }),
+    itemCheckbox: index_js_1.default,
+    closeButton: {
+        class: ['hidden'],
+    },
+    closeButtonIcon: {
+        class: [
+            // Display
+            'inline-block',
+            // Size
+            'w-3',
+            'h-3',
+        ],
+    },
+    wrapper: {
+        class: [
+            // Sizing
+            'max-h-[15rem]',
+            // Shape
+            'border-[0.5px]',
+            // Color
+            'bg-white',
+            'border-grayscale-900',
+            // Misc
+            'overflow-auto',
+            'rounded-br-lg',
+            'rounded-bl-lg',
+        ],
+    },
+    list: {
+        class: 'list-none m-0',
+    },
+    item: function (_a) {
+        var context = _a.context;
+        return ({
+            class: [
+                // Font
+                'text-xs font-normal',
+                // Flexbox
+                'flex items-center gap-2',
+                // Position
+                'relative',
+                // Shape
+                'border-0',
+                'rounded-none',
+                // Spacing
+                'm-0',
+                'py-2 px-4',
+                // Color
+                { '!font-medium': context.selected },
+                {
+                    'text-surface-700': !context.focused && !context.selected && !context.disabled,
+                },
+                {
+                    'text-surface-600': !context.focused && !context.selected && context.disabled,
+                },
+                {
+                    'bg-primary-50 text-surface-700': context.focused && !context.selected,
+                },
+                {
+                    'bg-primary-50 text-primary-500': context.focused && context.selected,
+                },
+                {
+                    'text-surface-700': !context.focused && context.selected,
+                },
+                //States
+                'hover:bg-primary-bg-weak hover:text-primary',
+                'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500',
+                // Misc
+                { 'pointer-events-none cursor-default': context.disabled },
+                { 'cursor-pointer': !context.disabled },
+                'overflow-hidden',
+                'whitespace-nowrap',
+            ],
+        });
+    },
+    option: {
+        class: 'overflow-hidden text-ellipsis w-max',
+    },
+    itemgroup: {
+        class: [
+            //Font
+            'font-bold',
+            'sm:text-sm',
+            // Spacing
+            'm-0',
+            'py-2 px-4',
+            // Color
+            'text-surface-800',
+            'bg-surface-0',
+            // Misc
+            'cursor-auto',
+        ],
+    },
+    filtercontainer: {
+        class: [
+            'flex flex-row-reverse items-center relative w-full gap-2',
+            // Font
+            'text-[0.7rem]',
+            'leading-4',
+            // Sizing
+            'w-full',
+            //Color
+            'text-grayscale-900',
+            'bg-primary-400',
+            // Shape
+            'border-b border-primary-100',
+        ],
+    },
+    filterinput: {
+        class: [
+            'w-full',
+            'bg-primary-400',
+            'text-white',
+            'placeholder:text-primary-100',
+            // Misc
+            'appearance-none',
+            // State
+            'focus-visible:outline-none',
+        ],
+    },
+    filtericon: {
+        class: ['absolute', 'top-1/2 right-3', '-mt-2'],
+    },
+    clearicon: {
+        class: [
+            // Color
+            'text-surface-500',
+            // Position
+            'absolute',
+            'top-1/2',
+            'right-12',
+            // Spacing
+            '-mt-2',
+        ],
+    },
+    emptymessage: {
+        class: [
+            // Font
+            'leading-none',
+            'text-xs',
+            // Spacing
+            'py-2 px-4',
+            // Color
+            'text-grayscale-800',
+            'bg-transparent',
+        ],
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0',
+    },
+};