@fewangsit/wangsvue-presets 1.0.80

package/wangsvue/dialogconfirm/index.d.ts

@@ -0,0 +1,42 @@
+declare namespace _default {
+    let root: {
+        class: string[];
+        'data-wv-name': (attrsDataName: any) => any;
+        'data-wv-section': (attrsDataSection: any) => any;
+    };
+    let header: {
+        'data-wv-section': string;
+    };
+    let headericon: {
+        class: string;
+        'data-wv-section': string;
+    };
+    function headertitle(severity: any): {
+        class: (string | {
+            'text-success-700': boolean;
+            'text-danger-700': boolean;
+        })[];
+        'data-wv-section': string;
+    };
+    let content: {
+        class: string;
+        'data-wv-section': string;
+    };
+    let list: {
+        'data-wv-section': string;
+    };
+    let bodymessage: {
+        'data-wv-section': string;
+    };
+    let cancelbutton: {
+        'data-wv-section': string;
+    };
+    let confirmbutton: {
+        'data-wv-section': string;
+    };
+    let footer: {
+        class: string;
+        'data-wv-section': string;
+    };
+}
+export default _default;

package/wangsvue/dialogconfirm/index.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: {
+        'class': ['!w-[clamp(360px,75vw,400px)]'],
+        'data-wv-name': function (attrsDataName) { return attrsDataName !== null && attrsDataName !== void 0 ? attrsDataName : 'root'; },
+        'data-wv-section': function (attrsDataSection) {
+            return attrsDataSection !== null && attrsDataSection !== void 0 ? attrsDataSection : 'dialogconfirm';
+        },
+    },
+    header: {
+        'data-wv-section': 'dialog-confirm-header',
+    },
+    headericon: { 'class': 'text-2xl', 'data-wv-section': 'headericon' },
+    headertitle: function (severity) { return ({
+        'class': [
+            'text-base leading-none font-semibold',
+            {
+                'text-success-700': severity === 'success',
+                'text-danger-700': severity === 'danger',
+            },
+        ],
+        'data-wv-section': 'dialog-confirm-title',
+    }); },
+    content: {
+        'class': '[&_ul]:list-inside [&_ul]:list-disc [&_ul_li]:pl-[6px]',
+        'data-wv-section': 'dialog-confirm-content',
+    },
+    list: {
+        'data-wv-section': 'dialog-confirm-list',
+    },
+    bodymessage: {
+        'data-wv-section': 'confirm-message',
+    },
+    cancelbutton: {
+        'data-wv-section': 'cancel-button',
+    },
+    confirmbutton: {
+        'data-wv-section': 'confirm-button',
+    },
+    footer: {
+        'class': 'flex items-end justify-end gap-1 !mt-0',
+        'data-wv-section': 'dialog-confirm-footer',
+    },
+};

package/wangsvue/dialogform/index.d.ts

@@ -0,0 +1,71 @@
+declare namespace _default {
+    let root: {
+        class: string[];
+        style: (computedWidth: any) => string;
+        'data-wv-section': string;
+    };
+    let header: {
+        class: string;
+        'data-wv-section': string;
+    };
+    let headericon: {
+        class: string;
+        'data-wv-section': string;
+    };
+    let headertitle: {
+        class: string;
+        'data-wv-section': string;
+    };
+    let expandasidebutton: {
+        class: string[];
+        'data-wv-section': string;
+    };
+    let closedialog: {
+        class: string;
+        'data-wv-section': string;
+    };
+    function container(expanded: any): {
+        class: (string | {
+            'gap-6': any;
+        })[];
+        'data-wv-section': string;
+    };
+    let mainsection: {
+        class: string[];
+        'data-wv-section': string;
+    };
+    function asidesection(expanded: any, asideRightWidth: any): {
+        class: (string | {
+            'opacity-0': boolean;
+            'opacity-100'?: undefined;
+        } | {
+            'opacity-100': any;
+            'opacity-0'?: undefined;
+        })[];
+        style: string;
+        'data-wv-section': string;
+    };
+    let form: {
+        class: string;
+        style: string;
+        'data-wv-section': string;
+    };
+    let footer: {
+        class: string;
+        'data-wv-section': string;
+    };
+    let footerbutton: {
+        class: string;
+        'data-wv-section': string;
+    };
+    let cancelbtn: {
+        'data-wv-section': string;
+    };
+    let clearfield: {
+        'data-wv-section': string;
+    };
+    let savesubmitbutton: {
+        'data-wv-section': string;
+    };
+}
+export default _default;

package/wangsvue/dialogform/index.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: {
+        'class': ['max-w-[90vw]'],
+        'style': function (computedWidth) { return "width: ".concat(computedWidth); },
+        'data-wv-section': 'dialog-form',
+    },
+    header: {
+        'class': 'flex items-center gap-2',
+        'data-wv-section': 'dialog-form-header',
+    },
+    headericon: { 'class': 'text-2xl', 'data-wv-section': 'headericon' },
+    headertitle: {
+        'class': 'mr-auto text-grayscale-900 text-center text-[0.9rem] leading-[1.125rem] !font-semibold tracking-[0.28px]',
+        'data-wv-section': 'dialog-form-title',
+    },
+    expandasidebutton: {
+        'class': ['!px-1.5 !py-1 -mr-1.5 !text-xs'],
+        'data-wv-section': 'expand-aside-button',
+    },
+    closedialog: {
+        'class': '!p-0.5 !text-general-200',
+        'data-wv-section': 'closebutton',
+    },
+    container: function (expanded) { return ({
+        'class': [
+            'flex overflow-y-auto overflow-x-hidden scrollbar-w-none',
+            { 'gap-6': expanded },
+        ],
+        'data-wv-section': 'dialog-form-container',
+    }); },
+    mainsection: {
+        'class': ['flex flex-col gap-3 w-full'],
+        'data-wv-section': 'dialog-form-main',
+    },
+    asidesection: function (expanded, asideRightWidth) { return ({
+        'class': [
+            'flex flex-col gap-3 shrink-0',
+            { 'opacity-0': !expanded },
+            { 'opacity-100': expanded },
+        ],
+        'style': "width: ".concat(expanded ? asideRightWidth - 24 : 0, "px"),
+        'data-wv-section': 'dialog-form-aside',
+    }); },
+    form: {
+        'class': 'overflow-y-auto',
+        'style': 'scrollbar-width: none !important',
+        'data-wv-section': 'form',
+    },
+    footer: {
+        'class': 'flex flex-col gap-3 items-end justify-center',
+        'data-wv-section': 'dialog-form-footer',
+    },
+    footerbutton: {
+        'class': 'flex gap-1 items-center justify-end',
+        'data-wv-section': 'footer-button',
+    },
+    cancelbtn: {
+        'data-wv-section': 'cancel-btn',
+    },
+    clearfield: {
+        'data-wv-section': 'clear-field',
+    },
+    savesubmitbutton: {
+        'data-wv-section': 'save-submit-button',
+    },
+};

package/wangsvue/divider/index.d.ts

@@ -0,0 +1,192 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'justify-center': boolean;
+            'items-center'?: undefined;
+            'justify-start'?: undefined;
+            'justify-end'?: undefined;
+            'items-start'?: undefined;
+            'items-end'?: undefined;
+            'my-5 mx-0 py-0 px-5'?: undefined;
+            'mx-4 md:mx-5 py-5'?: undefined;
+            'w-full'?: undefined;
+            'min-h-full'?: undefined;
+            'before:absolute before:left-0 before:top-1/2'?: undefined;
+            'before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2'?: undefined;
+            'before:w-full'?: undefined;
+            'before:min-h-full'?: undefined;
+            'before:border-solid'?: undefined;
+            'before:border-dotted'?: undefined;
+            'before:border-dashed'?: undefined;
+            'before:border-t before:border-surface-200'?: undefined;
+            'before:border-l before:border-surface-200'?: undefined;
+        } | {
+            'items-center': boolean;
+            'justify-center'?: undefined;
+            'justify-start'?: undefined;
+            'justify-end'?: undefined;
+            'items-start'?: undefined;
+            'items-end'?: undefined;
+            'my-5 mx-0 py-0 px-5'?: undefined;
+            'mx-4 md:mx-5 py-5'?: undefined;
+            'w-full'?: undefined;
+            'min-h-full'?: undefined;
+            'before:absolute before:left-0 before:top-1/2'?: undefined;
+            'before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2'?: undefined;
+            'before:w-full'?: undefined;
+            'before:min-h-full'?: undefined;
+            'before:border-solid'?: undefined;
+            'before:border-dotted'?: undefined;
+            'before:border-dashed'?: undefined;
+            'before:border-t before:border-surface-200'?: undefined;
+            'before:border-l before:border-surface-200'?: undefined;
+        } | {
+            'justify-start': boolean;
+            'justify-center': boolean;
+            'justify-end': boolean;
+            'items-center': boolean;
+            'items-start': boolean;
+            'items-end': boolean;
+            'my-5 mx-0 py-0 px-5'?: undefined;
+            'mx-4 md:mx-5 py-5'?: undefined;
+            'w-full'?: undefined;
+            'min-h-full'?: undefined;
+            'before:absolute before:left-0 before:top-1/2'?: undefined;
+            'before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2'?: undefined;
+            'before:w-full'?: undefined;
+            'before:min-h-full'?: undefined;
+            'before:border-solid'?: undefined;
+            'before:border-dotted'?: undefined;
+            'before:border-dashed'?: undefined;
+            'before:border-t before:border-surface-200'?: undefined;
+            'before:border-l before:border-surface-200'?: undefined;
+        } | {
+            'my-5 mx-0 py-0 px-5': boolean;
+            'mx-4 md:mx-5 py-5': boolean;
+            'justify-center'?: undefined;
+            'items-center'?: undefined;
+            'justify-start'?: undefined;
+            'justify-end'?: undefined;
+            'items-start'?: undefined;
+            'items-end'?: undefined;
+            'w-full'?: undefined;
+            'min-h-full'?: undefined;
+            'before:absolute before:left-0 before:top-1/2'?: undefined;
+            'before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2'?: undefined;
+            'before:w-full'?: undefined;
+            'before:min-h-full'?: undefined;
+            'before:border-solid'?: undefined;
+            'before:border-dotted'?: undefined;
+            'before:border-dashed'?: undefined;
+            'before:border-t before:border-surface-200'?: undefined;
+            'before:border-l before:border-surface-200'?: undefined;
+        } | {
+            'w-full': boolean;
+            'min-h-full': boolean;
+            'justify-center'?: undefined;
+            'items-center'?: undefined;
+            'justify-start'?: undefined;
+            'justify-end'?: undefined;
+            'items-start'?: undefined;
+            'items-end'?: undefined;
+            'my-5 mx-0 py-0 px-5'?: undefined;
+            'mx-4 md:mx-5 py-5'?: undefined;
+            'before:absolute before:left-0 before:top-1/2'?: undefined;
+            'before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2'?: undefined;
+            'before:w-full'?: undefined;
+            'before:min-h-full'?: undefined;
+            'before:border-solid'?: undefined;
+            'before:border-dotted'?: undefined;
+            'before:border-dashed'?: undefined;
+            'before:border-t before:border-surface-200'?: undefined;
+            'before:border-l before:border-surface-200'?: undefined;
+        } | {
+            'before:absolute before:left-0 before:top-1/2': boolean;
+            'before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2': boolean;
+            'justify-center'?: undefined;
+            'items-center'?: undefined;
+            'justify-start'?: undefined;
+            'justify-end'?: undefined;
+            'items-start'?: undefined;
+            'items-end'?: undefined;
+            'my-5 mx-0 py-0 px-5'?: undefined;
+            'mx-4 md:mx-5 py-5'?: undefined;
+            'w-full'?: undefined;
+            'min-h-full'?: undefined;
+            'before:w-full'?: undefined;
+            'before:min-h-full'?: undefined;
+            'before:border-solid'?: undefined;
+            'before:border-dotted'?: undefined;
+            'before:border-dashed'?: undefined;
+            'before:border-t before:border-surface-200'?: undefined;
+            'before:border-l before:border-surface-200'?: undefined;
+        } | {
+            'before:w-full': boolean;
+            'before:min-h-full': boolean;
+            'justify-center'?: undefined;
+            'items-center'?: undefined;
+            'justify-start'?: undefined;
+            'justify-end'?: undefined;
+            'items-start'?: undefined;
+            'items-end'?: undefined;
+            'my-5 mx-0 py-0 px-5'?: undefined;
+            'mx-4 md:mx-5 py-5'?: undefined;
+            'w-full'?: undefined;
+            'min-h-full'?: undefined;
+            'before:absolute before:left-0 before:top-1/2'?: undefined;
+            'before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2'?: undefined;
+            'before:border-solid'?: undefined;
+            'before:border-dotted'?: undefined;
+            'before:border-dashed'?: undefined;
+            'before:border-t before:border-surface-200'?: undefined;
+            'before:border-l before:border-surface-200'?: undefined;
+        } | {
+            'before:border-solid': boolean;
+            'before:border-dotted': boolean;
+            'before:border-dashed': boolean;
+            'justify-center'?: undefined;
+            'items-center'?: undefined;
+            'justify-start'?: undefined;
+            'justify-end'?: undefined;
+            'items-start'?: undefined;
+            'items-end'?: undefined;
+            'my-5 mx-0 py-0 px-5'?: undefined;
+            'mx-4 md:mx-5 py-5'?: undefined;
+            'w-full'?: undefined;
+            'min-h-full'?: undefined;
+            'before:absolute before:left-0 before:top-1/2'?: undefined;
+            'before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2'?: undefined;
+            'before:w-full'?: undefined;
+            'before:min-h-full'?: undefined;
+            'before:border-t before:border-surface-200'?: undefined;
+            'before:border-l before:border-surface-200'?: undefined;
+        } | {
+            'before:border-t before:border-surface-200': boolean;
+            'before:border-l before:border-surface-200': boolean;
+            'justify-center'?: undefined;
+            'items-center'?: undefined;
+            'justify-start'?: undefined;
+            'justify-end'?: undefined;
+            'items-start'?: undefined;
+            'items-end'?: undefined;
+            'my-5 mx-0 py-0 px-5'?: undefined;
+            'mx-4 md:mx-5 py-5'?: undefined;
+            'w-full'?: undefined;
+            'min-h-full'?: undefined;
+            'before:absolute before:left-0 before:top-1/2'?: undefined;
+            'before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2'?: undefined;
+            'before:w-full'?: undefined;
+            'before:min-h-full'?: undefined;
+            'before:border-solid'?: undefined;
+            'before:border-dotted'?: undefined;
+            'before:border-dashed'?: undefined;
+        })[];
+    };
+    namespace content {
+        let _class: string[];
+        export { _class as class };
+    }
+}
+export default _default;

package/wangsvue/divider/index.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Flex and Position
+                'flex relative',
+                { 'justify-center': props.layout == 'vertical' },
+                { 'items-center': props.layout == 'vertical' },
+                {
+                    'justify-start': (props === null || props === void 0 ? void 0 : props.align) == 'left' && props.layout == 'horizontal',
+                    'justify-center': (props === null || props === void 0 ? void 0 : props.align) == 'center' && props.layout == 'horizontal',
+                    'justify-end': (props === null || props === void 0 ? void 0 : props.align) == 'right' && props.layout == 'horizontal',
+                    'items-center': (props === null || props === void 0 ? void 0 : props.align) == 'top' && props.layout == 'vertical',
+                    'items-start': (props === null || props === void 0 ? void 0 : props.align) == 'center' && props.layout == 'vertical',
+                    'items-end': (props === null || props === void 0 ? void 0 : props.align) == 'bottom' && props.layout == 'vertical',
+                },
+                // Spacing
+                {
+                    'my-5 mx-0 py-0 px-5': props.layout == 'horizontal',
+                    'mx-4 md:mx-5 py-5': props.layout == 'vertical',
+                },
+                // Size
+                {
+                    'w-full': props.layout == 'horizontal',
+                    'min-h-full': props.layout == 'vertical',
+                },
+                // Before: Line
+                'before:block',
+                // Position
+                {
+                    'before:absolute before:left-0 before:top-1/2': props.layout == 'horizontal',
+                    'before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2': props.layout == 'vertical',
+                },
+                // Size
+                {
+                    'before:w-full': props.layout == 'horizontal',
+                    'before:min-h-full': props.layout == 'vertical',
+                },
+                // Shape
+                {
+                    'before:border-solid': props.type == 'solid',
+                    'before:border-dotted': props.type == 'dotted',
+                    'before:border-dashed': props.type == 'dashed',
+                },
+                // Color
+                {
+                    'before:border-t before:border-surface-200': props.layout == 'horizontal',
+                    'before:border-l before:border-surface-200': props.layout == 'vertical',
+                },
+            ],
+        });
+    },
+    content: {
+        class: [
+            // Space and Position
+            'p-2 z-10',
+            // Color
+            'bg-surface-0',
+        ],
+    },
+};

package/wangsvue/dock/index.d.ts

@@ -0,0 +1,51 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'left-0 bottom-0 w-full': boolean;
+            'left-0 top-0 w-full': boolean;
+            'left-0 top-0 h-full': boolean;
+            'right-0 top-0 h-full': boolean;
+        })[];
+    };
+    namespace container {
+        let _class: string[];
+        export { _class as class };
+    }
+    function menu({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'flex-col': boolean;
+        })[];
+    };
+    function menuitem({ props, context, instance }: {
+        props: any;
+        context: any;
+        instance: any;
+    }): {
+        class: (string | {
+            'hover:scale-150': boolean;
+            'scale-125': boolean;
+            'scale-110': boolean;
+            'origin-bottom hover:mx-6'?: undefined;
+            'origin-top hover:mx-6'?: undefined;
+            'origin-left hover:my-6'?: undefined;
+            'origin-right hover:my-6'?: undefined;
+        } | {
+            'origin-bottom hover:mx-6': boolean;
+            'origin-top hover:mx-6': boolean;
+            'origin-left hover:my-6': boolean;
+            'origin-right hover:my-6': boolean;
+            'hover:scale-150'?: undefined;
+            'scale-125'?: undefined;
+            'scale-110'?: undefined;
+        })[];
+    };
+    namespace action {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+}
+export default _default;

package/wangsvue/dock/index.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Positioning
+                'absolute z-1',
+                {
+                    'left-0 bottom-0 w-full': props.position == 'bottom',
+                    'left-0 top-0 w-full': props.position == 'top',
+                    'left-0 top-0 h-full': props.position == 'left',
+                    'right-0 top-0 h-full': props.position == 'right',
+                },
+                // Flexbox & Alignment
+                'flex justify-center items-center',
+                // Interactivity
+                'pointer-events-none',
+            ],
+        });
+    },
+    container: {
+        class: [
+            // Flexbox
+            'flex',
+            // Shape & Border
+            'rounded-md',
+            // Color
+            'bg-surface-0/10 border border-surface-0/20',
+            'backdrop-blur-sm',
+            // Spacing
+            'p-2',
+            // Misc
+            'pointer-events-auto',
+        ],
+    },
+    menu: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Flexbox & Alignment
+                'flex items-center justify-center',
+                {
+                    'flex-col': props.position == 'left' || props.position == 'right',
+                },
+                // List Style
+                'm-0 p-0 list-none',
+                // Shape
+                'outline-none',
+            ],
+        });
+    },
+    menuitem: function (_a) {
+        var props = _a.props, context = _a.context, instance = _a.instance;
+        return ({
+            class: [
+                // Spacing & Shape
+                'p-2 rounded-md',
+                // Conditional Scaling
+                {
+                    'hover:scale-150': instance.currentIndex === context.index,
+                    'scale-125': instance.currentIndex - 1 === context.index ||
+                        instance.currentIndex + 1 === context.index,
+                    'scale-110': instance.currentIndex - 2 === context.index ||
+                        instance.currentIndex + 2 === context.index,
+                },
+                // Positioning & Hover States
+                {
+                    'origin-bottom hover:mx-6': props.position == 'bottom',
+                    'origin-top hover:mx-6': props.position == 'top',
+                    'origin-left hover:my-6': props.position == 'left',
+                    'origin-right hover:my-6': props.position == 'right',
+                },
+                // Transitions & Transform
+                'transition-all duration-200 ease-cubic-bezier-will-change-transform transform',
+            ],
+        });
+    },
+    action: {
+        class: [
+            // Flexbox & Alignment
+            'flex flex-col items-center justify-center',
+            // Position
+            'relative',
+            // Size
+            'w-16 h-16',
+            // Misc
+            'cursor-default overflow-hidden',
+        ],
+    },
+};