@fewangsit/wangsvue-presets 1.0.80

package/wangsvue/tieredmenu/index.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: {
+        class: [
+            // Shape
+            'rounded-md',
+            // Size
+            'min-w-[12rem]',
+            'p-1.5',
+            // Colors
+            'bg-surface-0',
+            'ring-1 ring-surface-200',
+        ],
+    },
+    menu: {
+        class: [
+            // Spacings and Shape
+            'list-none',
+            'm-0',
+            'p-0',
+            'outline-none',
+        ],
+    },
+    menuitem: {
+        class: ['relative first:mt-0 mt-1'],
+    },
+    content: function (_a) {
+        var context = _a.context;
+        return ({
+            class: [
+                //Shape
+                'rounded-md',
+                //  Colors
+                {
+                    'text-surface-500/70': !context.focused && !context.active,
+                    'text-surface-500/70 bg-surface-200': context.focused && !context.active,
+                    'text-surface-900/80 bg-surface-50': context.focused && context.active,
+                    'text-surface-900/80 bg-surface-50': !context.focused && context.active,
+                },
+                // Hover States
+                {
+                    'hover:bg-surface-50': !context.active,
+                    'hover:bg-surface-100 text-surface-900/80': context.active,
+                },
+                // Transitions
+                'transition-shadow',
+                'duration-200',
+            ],
+        });
+    },
+    action: {
+        class: [
+            'relative',
+            // Font
+            'font-semibold',
+            // Flexbox
+            'flex',
+            'items-center',
+            // Spacing
+            'py-2',
+            'px-3',
+            // Misc
+            'no-underline',
+            'overflow-hidden',
+            'cursor-pointer',
+            'select-none',
+        ],
+    },
+    icon: {
+        class: [
+            // Spacing
+            'mr-2',
+            'leading-6',
+            'text-sm',
+        ],
+    },
+    label: {
+        class: ['leading-none', 'text-sm'],
+    },
+    submenuicon: {
+        class: [
+            // Position
+            'ml-auto',
+        ],
+    },
+    submenu: {
+        class: [
+            // Size
+            'w-full sm:w-48',
+            // Spacing
+            'p-1.5',
+            'm-0 mx-1.5',
+            'list-none',
+            // Shape
+            'shadow-none sm:shadow-md',
+            'border-0',
+            // Position
+            'static sm:absolute',
+            'z-10',
+            // Color
+            'bg-surface-0',
+        ],
+    },
+    separator: {
+        class: 'border-t border-surface-200 my-1',
+    },
+};

package/wangsvue/timeline/index.d.ts

@@ -0,0 +1,53 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: string[];
+    };
+    function event({ props, context }: {
+        props: any;
+        context: any;
+    }): {
+        class: string[];
+    };
+    function opposite({ props, context }: {
+        props: any;
+        context: any;
+    }): {
+        class: string;
+    };
+    function separator({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'flex-col': boolean;
+            'flex-row': boolean;
+        })[];
+    };
+    namespace marker {
+        let _class: string[];
+        export { _class as class };
+    }
+    function markerArrow(item: any): {
+        class: (string | {
+            '!visible': boolean;
+            'rotate-180'?: undefined;
+        } | {
+            'rotate-180': any;
+            '!visible'?: undefined;
+        })[];
+        'data-wv-section': string;
+    };
+    function connector({ props }: {
+        props: any;
+    }): {
+        class: string[];
+    };
+    function content({ props, context }: {
+        props: any;
+        context: any;
+    }): {
+        class: string[];
+    };
+}
+export default _default;

package/wangsvue/timeline/index.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var isEmptyObject = function (obj) {
+    if (!obj)
+        return true;
+    var keys = Object.keys(obj);
+    if (!keys.length)
+        return true; // Empty at the top level
+    return keys.every(function (key) {
+        var value = obj[key];
+        if (typeof value === 'object') {
+            if (Array.isArray(value)) {
+                return (!value.length ||
+                    value.every(function (val) {
+                        return typeof val === 'object' ? isEmptyObject(val) : val == null;
+                    }));
+            }
+            return isEmptyObject(value);
+        }
+        return value == null;
+    });
+};
+exports.default = {
+    root: function (_a) {
+        var props = _a.props;
+        return ({
+            class: ['flex flex-col grow', 'text-xs font-normal text-grayscale-900'],
+        });
+    },
+    event: function (_a) {
+        var props = _a.props, context = _a.context;
+        return ({
+            class: ['grid grid-cols-[max-content,1fr] gap-x-[10px] gap-y-1'],
+        });
+    },
+    opposite: function (_a) {
+        var props = _a.props, context = _a.context;
+        return ({
+            class: 'hidden',
+        });
+    },
+    separator: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                'flex items-center flex-initial',
+                {
+                    'flex-col': props.layout === 'vertical',
+                    'flex-row': props.layout === 'horizontal',
+                },
+            ],
+        });
+    },
+    marker: {
+        class: [
+            'w-max',
+            'rounded-full',
+            'bg-transparent',
+            'ring-2 ring-inset ring-primary-400 p-0.5',
+            'flex items-center justify-center',
+        ],
+    },
+    markerArrow: function (item) { return ({
+        'class': [
+            'w-4 h-4 invisible transition-transform duration-200 ease-in-out text-grayscale-900',
+            { '!visible': item.detail && !isEmptyObject(item.detail) },
+            { 'rotate-180': item.showDetail },
+        ],
+        'data-wv-section': 'markerArrow',
+    }); },
+    connector: function (_a) {
+        var props = _a.props;
+        return ({
+            class: ['w-[2px] grow bg-grayscale-900'],
+        });
+    },
+    content: function (_a) {
+        var props = _a.props, context = _a.context;
+        return ({
+            class: ['grid grid-rows-[max-content,auto] pb-2.5 gap-1'],
+        });
+    },
+};

package/wangsvue/toast/index.d.ts

@@ -0,0 +1,61 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            '-translate-x-2/4': boolean;
+        })[];
+        style: string;
+    };
+    function container({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'border-success-600 text-white bg-success-500': boolean;
+            'border-danger text-white bg-danger-500': boolean;
+            'border-primary-500 text-primary-500 bg-primary-50': boolean;
+        })[];
+        'data-wv-severity': any;
+    };
+    namespace content {
+        let _class: string;
+        export { _class as class };
+    }
+    namespace icon {
+        let _class_1: string;
+        export { _class_1 as class };
+    }
+    namespace text {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    namespace summary {
+        let _class_3: string;
+        export { _class_3 as class };
+    }
+    namespace detail {
+        let _class_4: string;
+        export { _class_4 as class };
+    }
+    function closebutton({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'text-white': boolean;
+            'text-danger': boolean;
+            'text-primary-500': boolean;
+        })[];
+    };
+    namespace closeicon {
+        let _class_5: string[];
+        export { _class_5 as class };
+    }
+    namespace transition {
+        let enterFromClass: string;
+        let enterActiveClass: string;
+        let leaveFromClass: string;
+        let leaveActiveClass: string;
+        let leaveToClass: string;
+    }
+}
+export default _default;

package/wangsvue/toast/index.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                //Size and Shape
+                'w-full max-w-[496px]',
+                // Positioning
+                {
+                    '-translate-x-2/4': props.position == 'top-center' || props.position == 'bottom-center',
+                },
+            ],
+            style: "z-index: ".concat(props.baseZIndex),
+        });
+    },
+    container: function (_a) {
+        var props = _a.props;
+        return ({
+            'class': [
+                'border-0 mt-6',
+                'rounded-[7px] w-full',
+                'shadow-lg',
+                // Colors
+                {
+                    'border-success-600 text-white bg-success-500': props.message.severity === 'success',
+                    'border-danger text-white bg-danger-500': props.message.severity === 'error',
+                    'border-primary-500 text-primary-500 bg-primary-50': props.message.severity === 'info',
+                },
+            ],
+            'data-wv-severity': props.message.severity,
+        });
+    },
+    content: {
+        class: 'flex items-center py-3 px-3 text-inherit gap-2',
+    },
+    icon: {
+        class: 'hidden',
+    },
+    text: {
+        class: [
+            // Font and Text
+            'text-xs leading-4 font-normal tracking-[0.02em] text-inherit',
+            'flex-1',
+        ],
+    },
+    summary: {
+        class: 'font-medium block',
+    },
+    detail: {
+        class: 'text-inherit',
+    },
+    closebutton: 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-white': props.message.severity === 'success',
+                    'text-danger': props.message.severity === 'error',
+                    'text-primary-500': props.message.severity === 'info',
+                },
+                // Transitions
+                'transition duration-200 ease-in-out',
+                // States
+                // Misc
+                'overflow-hidden',
+            ],
+        });
+    },
+    closeicon: {
+        class: [
+            // Sizing and Spacing
+            'w-3 h-3',
+            'shrink-0',
+        ],
+    },
+    transition: {
+        enterFromClass: 'opacity-0 translate-y-2/4',
+        enterActiveClass: 'transition-[transform,opacity] duration-300',
+        leaveFromClass: 'max-h-[1000px]',
+        leaveActiveClass: '!transition-[max-height_.45s_cubic-bezier(0,1,0,1),opacity_.3s,margin-bottom_.3s] overflow-hidden',
+        leaveToClass: 'max-h-0 opacity-0 mb-0',
+    },
+};

package/wangsvue/togglebutton/index.d.ts

@@ -0,0 +1,42 @@
+declare namespace _default {
+    namespace root {
+        let _class: string[];
+        export { _class as class };
+    }
+    function box({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'bg-surface-0 ': boolean;
+            'bg-surface-100': any;
+            'peer-focus-visible:ring-2 peer-focus-visible:ring-inset peer-focus-visible:ring-primary-500'?: undefined;
+            'cursor-pointer'?: undefined;
+            'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+        } | {
+            'peer-focus-visible:ring-2 peer-focus-visible:ring-inset peer-focus-visible:ring-primary-500': boolean;
+            'bg-surface-0 '?: undefined;
+            'bg-surface-100'?: undefined;
+            'cursor-pointer'?: undefined;
+            'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+        } | {
+            'cursor-pointer': boolean;
+            'opacity-60 select-none pointer-events-none cursor-default': any;
+            'bg-surface-0 '?: undefined;
+            'bg-surface-100'?: undefined;
+            'peer-focus-visible:ring-2 peer-focus-visible:ring-inset peer-focus-visible:ring-primary-500'?: undefined;
+        })[];
+    };
+    namespace label {
+        let _class_1: string;
+        export { _class_1 as class };
+    }
+    namespace input {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    namespace icon {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+}
+export default _default;

package/wangsvue/togglebutton/index.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: {
+        class: [
+            'relative',
+            // Alignment
+            'inline-flex',
+            'align-bottom',
+            // Misc
+            'cursor-pointer',
+            'select-none',
+        ],
+    },
+    box: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Alignments
+                'items-center inline-flex flex-1 text-center align-bottom justify-center',
+                // Sizes & Spacing
+                'px-2.5 py-1.5',
+                'text-sm',
+                // Shapes
+                'rounded-md shadow-sm',
+                // Colors
+                'text-surface-700/80',
+                'ring-1 ring-surface-200',
+                {
+                    'bg-surface-0 ': !props.modelValue,
+                    'bg-surface-100': props.modelValue,
+                },
+                // States
+                'peer-hover:bg-surface-200',
+                {
+                    'peer-focus-visible:ring-2 peer-focus-visible:ring-inset peer-focus-visible:ring-primary-500': !props.disabled,
+                },
+                // Transitions
+                'transition-all duration-200',
+                // Misc
+                {
+                    'cursor-pointer': !props.disabled,
+                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled,
+                },
+            ],
+        });
+    },
+    label: {
+        class: 'font-semibold text-center w-full',
+    },
+    input: {
+        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 border-surface-200',
+            // Misc
+            'appareance-none',
+            'cursor-pointer',
+        ],
+    },
+    icon: {
+        class: [' mr-2', 'text-surface-700/80'],
+    },
+};

package/wangsvue/toolbar/index.d.ts

@@ -0,0 +1,19 @@
+declare namespace _default {
+    namespace root {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace start {
+        let _class_1: string;
+        export { _class_1 as class };
+    }
+    namespace center {
+        let _class_2: string;
+        export { _class_2 as class };
+    }
+    namespace end {
+        let _class_3: string;
+        export { _class_3 as class };
+    }
+}
+export default _default;

package/wangsvue/toolbar/index.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: {
+        class: [
+            // Flex & Alignment
+            'flex items-center justify-between flex-wrap',
+            'gap-6',
+            // Spacing
+            'px-6 py-2',
+            'min-h-[4rem]',
+            // Shape
+            'rounded-md',
+            'shadow-md',
+            // Color
+            'bg-surface-0',
+            'ring-1 ring-surface-100',
+        ],
+    },
+    start: {
+        class: 'flex items-center',
+    },
+    center: {
+        class: 'flex items-center',
+    },
+    end: {
+        class: 'flex items-center',
+    },
+};

package/wangsvue/tooltip/index.d.ts

@@ -0,0 +1,22 @@
+declare namespace _default {
+    function root({ context, props }: {
+        context: any;
+        props: any;
+    }): {
+        class: (string | {
+            'pb-1': any;
+            'pt-1': any;
+            'pl-1': any;
+            'pr-1': any;
+        })[];
+    };
+    namespace arrow {
+        let _class: string;
+        export { _class as class };
+    }
+    namespace text {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+}
+export default _default;

package/wangsvue/tooltip/index.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: function (_a) {
+        var context = _a.context, props = _a.props;
+        return ({
+            class: [
+                // Position
+                'absolute',
+                {
+                    // Add space 4px at the bottom
+                    'pb-1': context === null || context === void 0 ? void 0 : context.top,
+                    'pt-1': context === null || context === void 0 ? void 0 : context.bottom,
+                    'pl-1': context === null || context === void 0 ? void 0 : context.right,
+                    'pr-1': context === null || context === void 0 ? void 0 : context.left,
+                },
+                '!transition',
+            ],
+        });
+    },
+    arrow: {
+        class: 'hidden',
+    },
+    text: {
+        class: [
+            // Shape
+            'rounded-[10px]',
+            // Background
+            'bg-white',
+            // Spacing
+            'px-3 py-1',
+            // Typography
+            'text-xs font-normal leading-4 text-left',
+            // Color
+            'text-grayscale-900',
+            // Misc
+            'shadow-[0px_4px_4px_0px_#00000040]',
+            'whitespace-pre-line',
+            'break-words',
+        ],
+    },
+};