@fewangsit/wangsvue-presets 1.0.80

package/wangsvue/buttonradio/index.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: {
+        'class': 'flex items-center w-max gap-1 cursor-pointer text-xs',
+        'data-wv-name': 'buttonradio',
+        'data-wv-section': 'root',
+    },
+    wrapper: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                'relative',
+                // Flexbox & Alignment
+                'flex items-center justify-center',
+                // Size
+                'w-4 h-4',
+                // Shape
+                'border-2',
+                'rounded-full',
+                // Colors
+                {
+                    'bg-white': props.value !== props.modelValue &&
+                        props.value !== undefined &&
+                        !props.disabled,
+                    'bg-general-50': props.disabled,
+                    'border-general-100': props.value !== props.modelValue &&
+                        props.value !== undefined &&
+                        !props.disabled,
+                    'border-primary-500': props.value == props.modelValue &&
+                        props.value !== undefined &&
+                        !props.disabled,
+                    'border-general-200': props.disabled,
+                },
+                {
+                    '!border-danger-500': props.invalid,
+                },
+                // Misc
+                'cursor-pointer',
+            ],
+        });
+    },
+    box: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Flexbox
+                'flex justify-center items-center',
+                // Size
+                'w-2 h-2',
+                'text-sm',
+                'font-medium',
+                // Shape
+                // 'border-2',
+                'rounded-full',
+                // Transition
+                'transition duration-200 ease-in-out',
+                // Colors
+                {
+                    'border-general-100': props.value !== props.modelValue && props.value !== undefined,
+                    'border-primary-500': props.value == props.modelValue &&
+                        props.value !== undefined &&
+                        !props.disabled,
+                    'bg-primary-500': props.value == props.modelValue &&
+                        props.value !== undefined &&
+                        !props.disabled,
+                    'bg-general-200': props.value == props.modelValue &&
+                        props.value !== undefined &&
+                        props.disabled,
+                },
+                // States
+                {
+                    'outline-none outline-offset-0': !props.disabled,
+                    'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-surface-0 peer-focus-visible:ring-primary-500': !props.disabled,
+                    // 'opacity-60 cursor-default': props.disabled,
+                },
+            ],
+        });
+    },
+    input: function (_a) {
+        var props = _a.props;
+        return ({
+            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-2 border-surface-300',
+                // Misc
+                'appearance-none',
+                { 'cursor-default': props.disabled, 'cursor-pointer': !props.disabled },
+            ],
+        });
+    },
+    icon: {
+        class: 'hidden',
+    },
+};

package/wangsvue/buttonsearch/index.d.ts

@@ -0,0 +1,65 @@
+declare namespace _default {
+    namespace buttontrigger {
+        function root({ context }: {
+            context: any;
+        }): {
+            class: (string | {
+                'w-max': boolean;
+            })[];
+            'data-wv-section': string;
+        };
+        namespace icon {
+            let _class: string;
+            export { _class as class };
+        }
+    }
+    namespace collapsebutton {
+        export function root_1({ context }: {
+            context: any;
+        }): {
+            class: (string | {
+                'w-max': boolean;
+            })[];
+            'data-wv-section': string;
+        };
+        export { root_1 as root };
+        export namespace icon_1 {
+            let _class_1: string;
+            export { _class_1 as class };
+        }
+        export { icon_1 as icon };
+    }
+    namespace resetbutton {
+        export function root_2({ query }: {
+            query: any;
+        }): {
+            class: (string | {
+                invisible: boolean;
+            })[];
+            'data-wv-section': string;
+        };
+        export { root_2 as root };
+        export namespace icon_2 {
+            let _class_2: string[];
+            export { _class_2 as class };
+        }
+        export { icon_2 as icon };
+    }
+    namespace hiddensubmit {
+        let _class_3: string;
+        export { _class_3 as class };
+    }
+    function form({ context }: {
+        context: any;
+    }): {
+        class: (string | {
+            show: any;
+        })[];
+        'data-wv-section': string;
+    };
+    namespace inputtext {
+        let _class_4: string;
+        export { _class_4 as class };
+    }
+}
+export default _default;

package/wangsvue/buttonsearch/index.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    buttontrigger: {
+        root: function (_a) {
+            var context = _a.context;
+            return ({
+                'class': [
+                    { 'w-max': !context.showSearchInput },
+                    'focus-within:ring-2 focus-within:ring-primary-400 focus-within:outline-none rounded-sm',
+                ],
+                'data-wv-section': 'buttontrigger',
+            });
+        },
+        icon: {
+            class: 'w-6 h-6 text-grayscale-900 shrink-0',
+        },
+    },
+    collapsebutton: {
+        root: function (_a) {
+            var context = _a.context;
+            return ({
+                'class': [
+                    { 'w-max': !context.showSearchInput },
+                    'focus-within:ring-2 focus-within:ring-primary-400 focus-within:outline-none rounded-sm',
+                ],
+                'data-wv-section': 'collapsebutton',
+            });
+        },
+        icon: {
+            class: 'w-6 h-6 text-grayscale-900 shrink-0',
+        },
+    },
+    resetbutton: {
+        root: function (_a) {
+            var query = _a.query;
+            return ({
+                'class': [
+                    { invisible: !query },
+                    'focus-within:ring-2 focus-within:ring-primary-400 focus-within:outline-none rounded-sm',
+                ],
+                'data-wv-section': 'resetbutton',
+            });
+        },
+        icon: { class: ['text-2xl shrink-0'] },
+    },
+    hiddensubmit: { class: 'hidden' },
+    form: function (_a) {
+        var context = _a.context;
+        return ({
+            'class': [
+                { show: context.showSearchInput },
+                'grid grid-cols-[max-content,auto,max-content] items-center gap-0.5 max-w-[224px] h-6',
+                'border-b border-primary-100',
+            ],
+            'data-wv-section': 'form',
+        });
+    },
+    inputtext: {
+        class: '!h-max',
+    },
+};

package/wangsvue/calendar/index.d.ts

@@ -0,0 +1,267 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'select-none pointer-events-none cursor-default': any;
+        })[];
+    };
+    function input({ props }: {
+        props: any;
+    }): {
+        class: string[];
+    };
+    namespace inputicon {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace dropdownbutton {
+        export namespace root_1 {
+            let _class_1: string[];
+            export { _class_1 as class };
+        }
+        export { root_1 as root };
+    }
+    function panel({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            absolute: boolean;
+            'inline-block': any;
+            'min-w-[80vw] w-auto p-2 '?: undefined;
+            'p-2 min-w-full'?: undefined;
+            'overflow-x-auto'?: undefined;
+        } | {
+            'min-w-[80vw] w-auto p-2 ': any;
+            absolute?: undefined;
+            'inline-block'?: undefined;
+            'p-2 min-w-full'?: undefined;
+            'overflow-x-auto'?: undefined;
+        } | {
+            'p-2 min-w-full': any;
+            absolute?: undefined;
+            'inline-block'?: undefined;
+            'min-w-[80vw] w-auto p-2 '?: undefined;
+            'overflow-x-auto'?: undefined;
+        } | {
+            'overflow-x-auto': any;
+            absolute?: undefined;
+            'inline-block'?: undefined;
+            'min-w-[80vw] w-auto p-2 '?: undefined;
+            'p-2 min-w-full'?: undefined;
+        })[];
+    };
+    namespace datepickerMask {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    function header({ props, state }: {
+        props: any;
+        state: any;
+    }): {
+        class: (string | {
+            hidden: boolean;
+        })[];
+    };
+    function previousbutton({ props }: {
+        props: any;
+    }): {
+        class: string[];
+    };
+    function title({ props }: {
+        props: any;
+    }): {
+        class: string[];
+    };
+    namespace monthTitle {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+    function yearTitle({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            hidden: boolean;
+        })[];
+    };
+    function nextbutton({ props }: {
+        props: any;
+    }): {
+        class: string[];
+    };
+    namespace table {
+        let _class_4: string[];
+        export { _class_4 as class };
+    }
+    namespace tableheadercell {
+        let _class_5: string[];
+        export { _class_5 as class };
+    }
+    namespace tablebodyrow {
+        let _class_6: any[];
+        export { _class_6 as class };
+    }
+    namespace weekheader {
+        let _class_7: string[];
+        export { _class_7 as class };
+    }
+    namespace weeknumber {
+        let _class_8: string[];
+        export { _class_8 as class };
+    }
+    namespace weekday {
+        let _class_9: any[];
+        export { _class_9 as class };
+    }
+    namespace day {
+        let _class_10: string[];
+        export { _class_10 as class };
+    }
+    function weeklabelcontainer({ context }: {
+        context: any;
+    }): {
+        class: (string | {
+            'text-surface-600/70 bg-transparent': boolean;
+            'text-primary-400 ': boolean;
+            'hover:bg-surface-100'?: undefined;
+            'opacity-40 cursor-default'?: undefined;
+            'cursor-pointer'?: undefined;
+        } | {
+            'hover:bg-surface-100': boolean;
+            'text-surface-600/70 bg-transparent'?: undefined;
+            'text-primary-400 '?: undefined;
+            'opacity-40 cursor-default'?: undefined;
+            'cursor-pointer'?: undefined;
+        } | {
+            'opacity-40 cursor-default': any;
+            'cursor-pointer': boolean;
+            'text-surface-600/70 bg-transparent'?: undefined;
+            'text-primary-400 '?: undefined;
+            'hover:bg-surface-100'?: undefined;
+        })[];
+    };
+    function daylabel({ context }: {
+        context: any;
+    }): {
+        class: (string | {
+            'bg-primary-400 text-white rounded-none': any;
+            '!rounded-full'?: undefined;
+            'hover:bg-primary-400/90'?: undefined;
+            'hover:bg-primary-200'?: undefined;
+            'opacity-40 cursor-default'?: undefined;
+            'cursor-pointer'?: undefined;
+        } | {
+            '!rounded-full': boolean;
+            'bg-primary-400 text-white rounded-none'?: undefined;
+            'hover:bg-primary-400/90'?: undefined;
+            'hover:bg-primary-200'?: undefined;
+            'opacity-40 cursor-default'?: undefined;
+            'cursor-pointer'?: undefined;
+        } | {
+            'hover:bg-primary-400/90': any;
+            'hover:bg-primary-200': boolean;
+            'bg-primary-400 text-white rounded-none'?: undefined;
+            '!rounded-full'?: undefined;
+            'opacity-40 cursor-default'?: undefined;
+            'cursor-pointer'?: undefined;
+        } | {
+            'opacity-40 cursor-default': any;
+            'cursor-pointer': boolean;
+            'bg-primary-400 text-white rounded-none'?: undefined;
+            '!rounded-full'?: undefined;
+            'hover:bg-primary-400/90'?: undefined;
+            'hover:bg-primary-200'?: undefined;
+        })[];
+    };
+    namespace monthpicker {
+        let _class_11: string[];
+        export { _class_11 as class };
+    }
+    function month({ context }: {
+        context: any;
+    }): {
+        class: (string | {
+            'text-grayscale-900 bg-transparent': boolean;
+            'bg-primary-400 text-white': boolean;
+        })[];
+        'data-month-in-future': boolean;
+    };
+    namespace yearpicker {
+        let _class_12: string[];
+        export { _class_12 as class };
+    }
+    function year({ context }: {
+        context: any;
+    }): {
+        class: (string | {
+            'text-grayscale-900 bg-transparent': boolean;
+            'bg-primary-400 text-white': boolean;
+        })[];
+        'data-year-in-future': boolean;
+    };
+    namespace timepicker {
+        let _class_13: string[];
+        export { _class_13 as class };
+    }
+    namespace separatorcontainer {
+        let _class_14: string[];
+        export { _class_14 as class };
+    }
+    namespace separator {
+        let _class_15: string[];
+        export { _class_15 as class };
+    }
+    namespace hourpicker {
+        let _class_16: string[];
+        export { _class_16 as class };
+    }
+    namespace minutepicker {
+        let _class_17: string[];
+        export { _class_17 as class };
+    }
+    namespace secondPicker {
+        let _class_18: string[];
+        export { _class_18 as class };
+    }
+    namespace incrementbutton {
+        let _class_19: string[];
+        export { _class_19 as class };
+    }
+    namespace decrementbutton {
+        let _class_20: string[];
+        export { _class_20 as class };
+    }
+    namespace groupcontainer {
+        let _class_21: string[];
+        export { _class_21 as class };
+    }
+    namespace group {
+        let _class_22: string[];
+        export { _class_22 as class };
+    }
+    namespace buttonbar {
+        let _class_23: string[];
+        export { _class_23 as class };
+    }
+    namespace todaybutton {
+        export namespace root_2 {
+            let _class_24: string[];
+            export { _class_24 as class };
+        }
+        export { root_2 as root };
+    }
+    namespace clearbutton {
+        export namespace root_3 {
+            let _class_25: string[];
+            export { _class_25 as class };
+        }
+        export { root_3 as root };
+    }
+    namespace transition {
+        let enterFromClass: string;
+        let enterActiveClass: string;
+        let leaveActiveClass: string;
+        let leaveToClass: string;
+    }
+}
+export default _default;