@fewangsit/wangsvue-presets 1.0.80

package/wangsvue/dropdown/index.d.ts

@@ -0,0 +1,136 @@
+declare namespace _default {
+    function root({ props, state }: {
+        props: any;
+        state: any;
+    }): {
+        class: (string | {
+            'opacity-60': any;
+            'pointer-events-none': any;
+        })[];
+    };
+    function input({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            '!text-general-200': boolean;
+            'text-grayscale-900': boolean;
+            'pr-7'?: undefined;
+        } | {
+            'pr-7': any;
+            '!text-general-200'?: undefined;
+            'text-grayscale-900'?: undefined;
+        })[];
+    };
+    namespace trigger {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace panel {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    function wrapper({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'rounded-lg': boolean;
+            'rounded-br-lg rounded-bl-lg': any;
+        })[];
+    };
+    namespace list {
+        let _class_2: string;
+        export { _class_2 as class };
+    }
+    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;
+        })[];
+    };
+    namespace itemgroup {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+    namespace emptymessage {
+        let _class_4: string[];
+        export { _class_4 as class };
+    }
+    let header: {
+        class: string[];
+    };
+    let filtercontainer: {
+        class: string[];
+    };
+    let filterinput: {
+        class: string[];
+    };
+    let filtericon: {
+        class: string[];
+    };
+    namespace clearicon {
+        let _class_5: string[];
+        export { _class_5 as class };
+    }
+    namespace transition {
+        let enterFromClass: string;
+        let enterActiveClass: string;
+        let leaveActiveClass: string;
+        let leaveToClass: string;
+    }
+}
+export default _default;

package/wangsvue/dropdown/index.js

@@ -0,0 +1,207 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var index_js_1 = require("../multiselect/index.js");
+exports.default = {
+    root: function (_a) {
+        var props = _a.props, state = _a.state;
+        return ({
+            class: [
+                // Display and Position
+                'inline-flex items-center',
+                'relative',
+                // Shape
+                'w-full',
+                'rounded-md',
+                // Misc
+                'cursor-default',
+                'select-none',
+                { 'opacity-60': props.disabled, 'pointer-events-none': props.disabled },
+            ],
+        });
+    },
+    input: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                //Font
+                'text-xs  font-normal',
+                {
+                    '!text-general-200': props.modelValue == null,
+                    'text-grayscale-900': props.modelValue != null,
+                },
+                // Display
+                'block',
+                'flex-auto',
+                // Color and Background
+                'bg-transparent',
+                'border-0',
+                'placeholder:text-general-200',
+                // Sizing and Spacing
+                'h-max',
+                'py-[5px] px-3 pr-0',
+                { 'pr-7': props.showClear },
+                //Shape
+                'rounded-none',
+                // Transitions
+                'transition',
+                'duration-200',
+                // States
+                'focus:outline-none focus:shadow-none',
+                // Misc
+                'relative',
+                'cursor-pointer',
+                'overflow-hidden overflow-ellipsis',
+                'whitespace-nowrap',
+                'appearance-none',
+            ],
+        });
+    },
+    trigger: {
+        class: [
+            //Font
+            // 'sm:text-sm',
+            // Spacing
+            'mr-1',
+            // Flexbox
+            'flex items-center justify-center',
+            'shrink-0',
+            // Color and Background
+            'bg-transparent',
+            'text-general-200',
+            // Size
+            'w-6 h-full',
+            // Shape
+            'rounded-tr-md',
+            'rounded-br-md',
+        ],
+    },
+    panel: {
+        class: [
+            // Position
+            'absolute top-0 left-0 !z-[9999]',
+            'mt-2',
+            'max-w-[30vw]',
+            // Shape
+            'border-0',
+            'rounded-lg',
+            'shadow-panel',
+            // Color
+            'bg-surface-0',
+            'text-surface-800',
+        ],
+    },
+    wrapper: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Sizing
+                'max-h-[15rem]',
+                // Shape
+                'border-[0.5px]',
+                // Color
+                'bg-white',
+                'border-grayscale-900',
+                // Misc
+                'overflow-auto',
+                {
+                    'rounded-lg': !props.filter,
+                    'rounded-br-lg rounded-bl-lg': props.filter,
+                },
+            ],
+        });
+    },
+    list: {
+        class: 'list-none m-0',
+    },
+    item: function (_a) {
+        var context = _a.context;
+        return ({
+            class: [
+                // Font
+                'text-xs font-normal',
+                'w-full overflow-hidden text-ellipsis',
+                // 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-1 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',
+            ],
+        });
+    },
+    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',
+        ],
+    },
+    emptymessage: {
+        class: [
+            // Font
+            'leading-none text-xs',
+            // Spacing
+            'py-2 px-4',
+            // Color
+            'text-surface-800',
+            'bg-transparent',
+        ],
+    },
+    header: index_js_1.default === null || index_js_1.default === void 0 ? void 0 : index_js_1.default.header,
+    filtercontainer: index_js_1.default === null || index_js_1.default === void 0 ? void 0 : index_js_1.default.filtercontainer,
+    filterinput: index_js_1.default === null || index_js_1.default === void 0 ? void 0 : index_js_1.default.filterinput,
+    filtericon: index_js_1.default === null || index_js_1.default === void 0 ? void 0 : index_js_1.default.filtericon,
+    clearicon: {
+        class: [
+            // Color
+            'text-general-200',
+            // Position
+            'absolute',
+            'top-1/2',
+            'right-12',
+            // Spacing
+            '-mt-2',
+        ],
+    },
+    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',
+    },
+};

package/wangsvue/fieldset/index.d.ts

@@ -0,0 +1,94 @@
+declare namespace _default {
+    namespace root {
+        let _class: string[];
+        export { _class as class };
+    }
+    function legend({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'p-0': any;
+            'px-3 py-1.5': boolean;
+            ''?: undefined;
+            'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-primary-600 ring-inset'?: undefined;
+        } | {
+            '': any;
+            'p-0'?: undefined;
+            'px-3 py-1.5'?: undefined;
+            'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-primary-600 ring-inset'?: undefined;
+        } | {
+            'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-primary-600 ring-inset': any;
+            'p-0'?: undefined;
+            'px-3 py-1.5'?: undefined;
+            ''?: undefined;
+        })[];
+    };
+    function toggler({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'px-3 py-1.5': any;
+            'rounded-md'?: undefined;
+            'text-surface-700 hover:text-surface-900 hover:text-surface-900'?: undefined;
+            'hover:text-surface-900'?: undefined;
+            'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-600'?: undefined;
+            'transition-none cursor-pointer overflow-hidden select-none'?: undefined;
+        } | {
+            'rounded-md': any;
+            'px-3 py-1.5'?: undefined;
+            'text-surface-700 hover:text-surface-900 hover:text-surface-900'?: undefined;
+            'hover:text-surface-900'?: undefined;
+            'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-600'?: undefined;
+            'transition-none cursor-pointer overflow-hidden select-none'?: undefined;
+        } | {
+            'text-surface-700 hover:text-surface-900 hover:text-surface-900': any;
+            'px-3 py-1.5'?: undefined;
+            'rounded-md'?: undefined;
+            'hover:text-surface-900'?: undefined;
+            'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-600'?: undefined;
+            'transition-none cursor-pointer overflow-hidden select-none'?: undefined;
+        } | {
+            'hover:text-surface-900': any;
+            'px-3 py-1.5'?: undefined;
+            'rounded-md'?: undefined;
+            'text-surface-700 hover:text-surface-900 hover:text-surface-900'?: undefined;
+            'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-600'?: undefined;
+            'transition-none cursor-pointer overflow-hidden select-none'?: undefined;
+        } | {
+            'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-600': any;
+            'px-3 py-1.5'?: undefined;
+            'rounded-md'?: undefined;
+            'text-surface-700 hover:text-surface-900 hover:text-surface-900'?: undefined;
+            'hover:text-surface-900'?: undefined;
+            'transition-none cursor-pointer overflow-hidden select-none'?: undefined;
+        } | {
+            'transition-none cursor-pointer overflow-hidden select-none': any;
+            'px-3 py-1.5'?: undefined;
+            'rounded-md'?: undefined;
+            'text-surface-700 hover:text-surface-900 hover:text-surface-900'?: undefined;
+            'hover:text-surface-900'?: undefined;
+            'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-600'?: undefined;
+        })[];
+    };
+    namespace togglerIcon {
+        let _class_1: string;
+        export { _class_1 as class };
+    }
+    namespace legendTitle {
+        let _class_2: string;
+        export { _class_2 as class };
+    }
+    namespace content {
+        let _class_3: string;
+        export { _class_3 as class };
+    }
+    namespace transition {
+        let enterFromClass: string;
+        let enterActiveClass: string;
+        let enterToClass: string;
+        let leaveFromClass: string;
+        let leaveActiveClass: string;
+        let leaveToClass: string;
+    }
+}
+export default _default;

package/wangsvue/fieldset/index.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: {
+        class: [
+            'block',
+            // Spacing
+            'px-5 md:px-6 py-5',
+            // Shape
+            'rounded-md rounded-lg',
+            // Color
+            'bg-surface-0',
+            'text-surface-700/80',
+            'ring-1 ring-inset ring-surface-300',
+        ],
+    },
+    legend: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Font
+                'font-medium',
+                'leading-none',
+                //Spacing
+                { 'p-0': props.toggleable, 'px-3 py-1.5': !props.toggleable },
+                // Shape
+                'rounded-md',
+                // Color
+                'text-surface-700/80',
+                'bg-surface-0',
+                // Transition
+                'transition-none',
+                // States
+                { '': props.toggleable },
+                {
+                    'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-primary-600 ring-inset': props.toggleable,
+                },
+            ],
+        });
+    },
+    toggler: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Alignments
+                'flex items-center justify-center',
+                'relative',
+                //Spacing
+                { 'px-3 py-1.5': props.toggleable },
+                // Shape
+                { 'rounded-md': props.toggleable },
+                // Color
+                {
+                    'text-surface-700 hover:text-surface-900 hover:text-surface-900': props.toggleable,
+                },
+                // States
+                {
+                    'hover:text-surface-900': props.toggleable,
+                },
+                {
+                    'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-600': props.toggleable,
+                },
+                // Misc
+                {
+                    'transition-none cursor-pointer overflow-hidden select-none': props.toggleable,
+                },
+            ],
+        });
+    },
+    togglerIcon: {
+        class: 'mr-2 inline-block',
+    },
+    legendTitle: {
+        class: 'flex items-center justify-center leading-none',
+    },
+    content: {
+        class: 'p-0',
+    },
+    transition: {
+        enterFromClass: 'max-h-0',
+        enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+        enterToClass: 'max-h-[1000px]',
+        leaveFromClass: 'max-h-[1000px]',
+        leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+        leaveToClass: 'max-h-0',
+    },
+};

package/wangsvue/fileupload/index.d.ts

@@ -0,0 +1,29 @@
+declare namespace _default {
+    let root: {
+        'data-wv-name': string;
+        'data-wv-section': string;
+    };
+    let wrapper: {
+        class: string[];
+        'data-wv-section': string;
+    };
+    function input({ state }: {
+        state: any;
+    }): {
+        class: {
+            '': boolean;
+        }[];
+    };
+    function buttonupload({ props }: {
+        props: any;
+    }): {
+        class: {
+            'mb-[21px]': any;
+        }[];
+    };
+    namespace requirements {
+        let _class: string;
+        export { _class as class };
+    }
+}
+export default _default;

package/wangsvue/fileupload/index.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: {
+        'data-wv-name': 'fileupload',
+        'data-wv-section': 'root',
+    },
+    wrapper: {
+        'class': ['w-full'],
+        'data-wv-section': 'wrapper',
+    },
+    input: function (_a) {
+        var state = _a.state;
+        return ({
+            class: [
+                {
+                    '': state.fileName != null,
+                },
+            ],
+        });
+    },
+    buttonupload: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [{ 'mb-[21px]': props.fileExtensions || props.fileRequirements }],
+        });
+    },
+    requirements: {
+        class: 'flex justify-start',
+    },
+};

package/wangsvue/form/index.d.ts

@@ -0,0 +1,40 @@
+declare const _default: {
+    root: () => {
+        class: string[];
+        'data-wv-section': string;
+    };
+    fields: {
+        class: string[];
+    };
+    'fields-wrapper': {
+        class: string[];
+        'data-wv-section': string;
+    };
+    footer: {
+        class: string[];
+    };
+    'action-buttons': {
+        class: string[];
+        'data-wv-section': string;
+    };
+    'button-wrapper': {
+        class: string[];
+        'data-wv-section': string;
+    };
+    'cancel-button': {
+        'data-wv-section': string;
+    };
+    'clear-button': {
+        'data-wv-section': string;
+    };
+    'submit-button': {
+        'data-wv-section': string;
+    };
+    staycheckbox: {
+        class: string[];
+    };
+    'validator-message': {
+        class: string[];
+    };
+};
+export default _default;

package/wangsvue/form/index.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    // :class="['ts-form', { 'sticky-buttons': props.stickyButtons }]"
+    'root': function () { return ({
+        'class': [
+            'flex flex-col gap-3 text-general-900 text-[0.75rem] font-medium leading-[16.8px]',
+        ],
+        'data-wv-section': 'root',
+    }); },
+    'fields': {
+        class: ['grid gap-y-3 gap-x-6'],
+    },
+    'fields-wrapper': {
+        'class': ['grid gap-y-3 gap-x-6'],
+        'data-wv-section': 'fields',
+    },
+    'footer': {
+        class: ['flex flex-col self-end gap-3'],
+    },
+    'action-buttons': {
+        'class': ['relative flex flex-col items-end justify-end gap-1'],
+        'data-wv-section': 'action-buttons',
+    },
+    'button-wrapper': {
+        'class': ['flex items-end justify-end gap-1'],
+        'data-wv-section': 'button-wrapper',
+    },
+    'cancel-button': {
+        'data-wv-section': 'cancel-button',
+    },
+    'clear-button': {
+        'data-wv-section': 'clear-button',
+    },
+    'submit-button': {
+        'data-wv-section': 'submit-button',
+    },
+    'staycheckbox': {
+        class: ['cursor-pointer flex gap-2 w-max ml-auto items-center justify-end'],
+    },
+    'validator-message': {
+        class: ['static w-max transform-none'],
+    },
+};

package/wangsvue/global.d.ts

@@ -0,0 +1,8 @@
+export const ringClass: (string | {
+    'ring-1 p-[1px]': boolean;
+    'ring-[0.5px] p-[0.5px]': boolean;
+})[];
+declare namespace _default {
+    let css: string;
+}
+export default _default;