@fewangsit/wangsvue-presets 1.0.80

package/wangsvue/calendar/index.js

@@ -0,0 +1,610 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var timepickerlabel = {
+    class: '[&_span]:w-[37px] [&_span]:h-[26px] [&_span]:flex [&_span]:justify-center [&_span]:items-center [&_span]:border [&_span]:border-general-200 [&_span]:rounded [&_span]:',
+};
+exports.default = {
+    root: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Display and Position
+                'inline-flex flex-auto justify-between items-center gap-[5px]',
+                'rounded',
+                // Spacing
+                'm-0 px-3 py-1',
+                // Border already handled by input group.
+                // Misc
+                {
+                    'select-none pointer-events-none cursor-default': props.disabled,
+                },
+            ],
+        });
+    },
+    input: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                'w-full peer',
+                // Font
+                'text-xs font-normal placeholder:font-normal leading-6',
+                // Colors
+                'text-grayscale-900',
+                'placeholder:text-general-200',
+                // Shape
+                'appearance-none',
+                // { 'rounded-md': !props.showIcon || props.iconDisplay == 'input' },
+                // {
+                //   'rounded-l-md  flex-1 pr-9 ':
+                //     props.showIcon && props.iconDisplay !== 'input',
+                // },
+                // {
+                //   'rounded-md flex-1 pr-9':
+                //     props.showIcon && props.iconDisplay === 'input',
+                // },
+                // Transitions
+                'transition-colors',
+                'duration-200',
+                // States
+                'outline-none focus:ring-primary-400',
+            ],
+        });
+    },
+    inputicon: {
+        class: ['text-grayscale-900 peer-disabled:bg-general-300'],
+    },
+    dropdownbutton: {
+        root: {
+            class: [
+                'relative text-sm',
+                // Alignments
+                'items-center inline-flex text-center align-bottom',
+                // Shape
+                'rounded-r-md',
+                // Size
+                'px-2.5 py-1.5 leading-none',
+                // Colors
+                'text-surface-600',
+                'bg-surface-100',
+                'ring-1 ring-inset ring-surface-300',
+                // States
+                'hover:bg-surface-200',
+                'focus:outline-none focus:outline-offset-0 focus:ring-1',
+                'focus:ring-primary-400',
+            ],
+        },
+    },
+    panel: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                'datepicker-panel',
+                // Display & Position
+                'inline-flex',
+                'flex-col justify-start items-center gap-2.5',
+                {
+                    'absolute': !props.inline,
+                    'inline-block': props.inline,
+                },
+                // Size
+                '!w-[272px] !min-w-[272px] h-max p-6 shadow-panel',
+                { 'min-w-[80vw] w-auto p-2 ': props.touchUI },
+                { 'p-2 min-w-full': props.inline },
+                // Shape
+                'rounded-[7px]',
+                // Colors
+                'bg-white',
+                //Misc
+                { 'overflow-x-auto': props.inline },
+            ],
+        });
+    },
+    datepickerMask: {
+        class: [
+            'fixed top-0 left-0 w-full h-full',
+            'flex items-center justify-center',
+            'bg-black bg-opacity-90',
+        ],
+    },
+    header: function (_a) {
+        var _b;
+        var props = _a.props, state = _a.state;
+        return ({
+            class: [
+                'min-h-[26.8px]',
+                {
+                    hidden: !((_b = props.dateFormat) === null || _b === void 0 ? void 0 : _b.toString().toLowerCase().includes('y')) &&
+                        state.currentView === 'month',
+                },
+                //Font
+                'text-xs font-normal',
+                // Flexbox and Alignment
+                'flex justify-between items-start gap-1',
+                // Spacing
+                'm-0 mb-2',
+                // {
+                //   'py-2 pl-2 pb-4': props.numberOfMonths <= 1,
+                //   'py-2 pb-4': props.numberOfMonths > 1,
+                // },
+                // Shape
+                'rounded-t-md',
+                // Colors
+                'text-grayscale-900',
+                'bg-white',
+            ],
+        });
+    },
+    previousbutton: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                'relative',
+                // Flexbox and Alignment
+                'inline-flex items-center justify-center',
+                'order-1',
+                // {
+                //   ' order-2': !(props.numberOfMonths > 1),
+                //   'order-1': props.numberOfMonths > 1,
+                // },
+                // Size
+                'p-1.5 m-0',
+                // Colors
+                'text-grayscale-900',
+                'border-0 ',
+                'bg-transparent',
+                // States
+                'hover:bg-general-50',
+                // Misc
+                'cursor-pointer overflow-hidden',
+            ],
+        });
+    },
+    title: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Text
+                'leading-6',
+                'my-0',
+                'order-2',
+                // {
+                //   'mr-auto': !(props.numberOfMonths > 1),
+                //   ' mx-auto': props.numberOfMonths > 1,
+                // },
+            ],
+        });
+    },
+    monthTitle: {
+        class: [
+            //Font
+            'text-xs font-normal',
+            // Colors
+            'text-grayscale-900',
+            'bg-white',
+            // Transitions
+            'transition duration-200',
+            // Spacing
+            'mr-1',
+            // States
+            'hover:text-primary-400',
+            // Misc
+            'cursor-pointer',
+        ],
+    },
+    yearTitle: function (_a) {
+        var _b;
+        var props = _a.props;
+        return ({
+            class: [
+                {
+                    hidden: !((_b = props.dateFormat) === null || _b === void 0 ? void 0 : _b.toString().toLowerCase().includes('y')),
+                },
+                //Font
+                'text-xs font-normal',
+                // Colors
+                'text-grayscale-900',
+                'bg-white',
+                // Transitions
+                'transition duration-200',
+                // Spacing
+                'm-0 mr-1',
+                // States
+                'hover:text-primary-600',
+                // Misc
+                'cursor-pointer',
+            ],
+        });
+    },
+    nextbutton: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                'relative',
+                // Flexbox and Alignment
+                'inline-flex items-center justify-center order-3',
+                // {
+                //   ' order-3': !(props.numberOfMonths > 1),
+                //   'order-1': props.numberOfMonths > 1,
+                // },
+                // Size
+                'p-1.5 m-0',
+                // Colors
+                'text-grayscale-900',
+                'border-0 ',
+                'bg-transparent',
+                // States
+                'hover:bg-general-50',
+                // Misc
+                'cursor-pointer overflow-hidden',
+            ],
+        });
+    },
+    table: {
+        class: [
+            // Size & Shape
+            'block w-[224px]',
+            '[&_tbody]:block [&_tbody]:w-[224px]',
+            // Spacing
+            'm-0',
+            '[&_th]:text-xs [&_td]:text-xs',
+            '[&_th]:font-normal [&_td]:font-normal',
+            '[&_th]:text-grayscale-900 [&_td]:text-grayscale-900',
+            // Hide the other months day
+            '[&_[data-p-other-month="true"]]:invisible',
+        ],
+    },
+    tableheadercell: {
+        class: [
+            // Spacing
+            'px-2 py-[5.4px]',
+        ],
+    },
+    tablebodyrow: {
+        class: [
+        // 'border-b border-surface-200 last:border-b-0',
+        ],
+    },
+    weekheader: {
+        class: [
+            'leading-6 text-sm font-normal',
+            'text-surface-600/70',
+            'opacity-40 cursor-default',
+            'mb-2',
+        ],
+    },
+    weeknumber: {
+        class: ['text-surface-600/70 font-normal', 'opacity-40 cursor-default'],
+    },
+    weekday: {
+        class: [
+        // Colors
+        // 'text-surface-500/60 font-normal',
+        ],
+    },
+    day: {
+        class: [
+            // Spacing
+            'p-0',
+        ],
+    },
+    weeklabelcontainer: function (_a) {
+        var context = _a.context;
+        return ({
+            class: [
+                // Flexbox and Alignment
+                'flex items-center justify-center',
+                'mx-auto',
+                // Shape & Size
+                'w-10 h-10',
+                '',
+                'border-transparent border',
+                // Colors
+                {
+                    'text-surface-600/70 bg-transparent': !context.selected && !context.disabled,
+                    'text-primary-400 ': context.selected && !context.disabled,
+                },
+                // States
+                'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50',
+                {
+                    'hover:bg-surface-100': !context.disabled,
+                },
+                {
+                    'opacity-40 cursor-default': context.disabled,
+                    'cursor-pointer': !context.disabled,
+                },
+            ],
+        });
+    },
+    daylabel: function (_a) {
+        var context = _a.context;
+        return ({
+            class: [
+                // Flexbox and Alignment
+                'flex items-center justify-center',
+                // 'mx-auto',
+                // Shape & Size
+                'w-8 h-8',
+                // Colors
+                {
+                    'bg-primary-400 text-white rounded-none': (context.selected && !context.disabled) || context.date.today,
+                },
+                {
+                    '!rounded-full': !context.selected,
+                },
+                // States
+                'focus:outline-none focus-visible:outline-none',
+                {
+                    'hover:bg-primary-400/90': context.selected || context.date.today,
+                    'hover:bg-primary-200': !context.selected,
+                },
+                {
+                    'opacity-40 cursor-default': context.disabled,
+                    'cursor-pointer': !context.disabled,
+                },
+            ],
+        });
+    },
+    monthpicker: {
+        class: [
+            // Layout
+            'w-full grid grid-cols-3 grid-rows-4 gap-y-4 gap-x-0',
+        ],
+    },
+    month: function (_a) {
+        var context = _a.context;
+        return ({
+            'class': [
+                // Flexbox and Alignment
+                'inline-flex items-center justify-center',
+                // Size
+                'w-full',
+                'px-2.5 py-1.5',
+                'text-xs leading-tight',
+                // Shape
+                '!rounded-[20px]',
+                // Colors
+                {
+                    'text-grayscale-900 bg-transparent': !context.selected && !context.disabled,
+                    'bg-primary-400 text-white': context.selected && !context.disabled,
+                },
+                // States
+                // 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-400',
+                'hover:bg-primary-50',
+                'hover:text-grayscale-900',
+                // Misc
+                'cursor-pointer',
+            ],
+            'data-month-in-future': parseInt(context === null || context === void 0 ? void 0 : context.monthIndex) > new Date().getMonth(),
+        });
+    },
+    yearpicker: {
+        class: [
+            // Layout
+            'w-full grid grid-cols-2 grid-rows-5 gap-y-1 gap-x-0',
+        ],
+    },
+    year: function (_a) {
+        var context = _a.context;
+        return ({
+            'class': [
+                // Flexbox and Alignment
+                'inline-flex items-center justify-center',
+                // Size
+                'w-full',
+                'px-2.5 py-1.5',
+                'text-xs leading-tight',
+                // Shape
+                '!rounded-[20px]',
+                // Colors
+                {
+                    'text-grayscale-900 bg-transparent': !context.selected && !context.disabled,
+                    'bg-primary-400 text-white': context.selected && !context.disabled,
+                },
+                // States
+                // 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-400',
+                'hover:text-grayscale-900',
+                'hover:bg-primary-50',
+                // Misc
+                'cursor-pointer',
+            ],
+            'data-year-in-future': parseInt(context === null || context === void 0 ? void 0 : context.year.value) > new Date().getFullYear(),
+        });
+    },
+    timepicker: {
+        class: [
+            // Flexbox
+            'flex',
+            'justify-center items-center',
+            'gap-2',
+            // Spacing
+            'p-1.5',
+        ],
+    },
+    separatorcontainer: {
+        class: [
+            // Flexbox and Alignment
+            'flex',
+            'items-center',
+            'flex-col',
+            // Spacing
+            // 'px-2',
+        ],
+    },
+    separator: {
+        class: [
+            // Text
+            'text-xs font-normal',
+        ],
+    },
+    hourpicker: {
+        class: [
+            // Flexbox and Alignment
+            'flex',
+            'items-center',
+            'flex-col',
+            'gap-3',
+            // Spacing
+            // 'px-2',
+            // Sizing
+            'text-xs',
+            // Misc
+            timepickerlabel.class,
+        ],
+    },
+    minutepicker: {
+        class: [
+            // Flexbox and Alignment
+            'flex',
+            'items-center',
+            'flex-col',
+            'gap-3',
+            // Spacing
+            // 'px-2',
+            // Sizing
+            'text-xs',
+            // Misc
+            timepickerlabel.class,
+        ],
+    },
+    secondPicker: {
+        class: [
+            // Flexbox and Alignment
+            'flex',
+            'items-center',
+            'flex-col',
+            'gap-3',
+            // Spacing
+            // 'px-2',
+            // Sizing
+            'text-xs',
+        ],
+    },
+    incrementbutton: {
+        class: [
+            'relative',
+            // Flexbox and Alignment
+            'inline-flex items-center justify-center',
+            // Size
+            'p-0.5 m-0',
+            '!h-6 !w-6',
+            '[&_i]:w-5',
+            '[&_i]:h-5',
+            '[&_i]:shrink-0',
+            '',
+            // Colors
+            'text-grayscale-900',
+            'border-0',
+            'bg-transparent',
+            // States
+            // 'hover:text-surface-700',
+            // Misc
+            'cursor-pointer overflow-hidden',
+        ],
+    },
+    decrementbutton: {
+        class: [
+            'relative',
+            // Flexbox and Alignment
+            'inline-flex items-center justify-center',
+            // Size
+            'p-0.5 m-0',
+            '!h-6 !w-6',
+            '[&_i]:w-5',
+            '[&_i]:h-5',
+            '[&_i]:shrink-0',
+            '',
+            // Colors
+            'text-grayscale-900',
+            'border-0',
+            'bg-transparent',
+            // States
+            // 'hover:text-surface-700',
+            // Misc
+            'cursor-pointer overflow-hidden',
+        ],
+    },
+    groupcontainer: {
+        class: [
+            // Flexbox
+            'flex w-full',
+        ],
+    },
+    group: {
+        class: [
+            // // Flexbox and Sizing
+            // 'flex-1',
+            'w-full',
+            // // Borders
+            // 'border-l',
+            // 'border-surface-200',
+            // // Spacing
+            // 'pr-0.5',
+            // 'pl-0.5',
+            // 'pt-0',
+            // 'pb-0',
+            // // Pseudo-Classes
+            // 'first:pl-0',
+            // 'first:border-l-0',
+        ],
+    },
+    buttonbar: {
+        class: [
+            // Flexbox
+            'flex justify-between items-center',
+            // Spacing
+            'pt-2.5 pb-1.5 px-0',
+            // Shape
+            'border-t border-surface-200',
+        ],
+    },
+    todaybutton: {
+        root: {
+            class: [
+                // Flexbox and Alignment
+                'inline-flex items-center justify-center',
+                // Spacing
+                'px-2.5 py-1.5 text-sm leading-none',
+                // Shape
+                '',
+                // Colors
+                'bg-transparent border-transparent',
+                'text-primary-400',
+                // Transitions
+                'transition-colors duration-200 ease-in-out',
+                // States
+                // 'focus:outline-none focus:outline-offset-0 focus:ring-2 ring-inset',
+                // 'focus:ring-primary-400',
+                // Misc
+                'cursor-pointer',
+            ],
+        },
+    },
+    clearbutton: {
+        root: {
+            class: [
+                // Flexbox and Alignment
+                'inline-flex items-center justify-center',
+                // Spacing
+                'px-2.5 py-1.5 text-sm leading-none',
+                // Shape
+                // Colors
+                'bg-transparent border-transparent',
+                'text-primary-400',
+                // Transitions
+                'transition-colors duration-200 ease-in-out',
+                // States
+                'focus:outline-none focus:outline-offset-0 focus:ring-2 ring-inset',
+                'focus:ring-primary-400',
+                'hover:bg-primary-300/20',
+                // Misc
+                'cursor-pointer',
+            ],
+        },
+    },
+    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/card/index.d.ts

@@ -0,0 +1,31 @@
+declare namespace _default {
+    namespace root {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace header {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    namespace body {
+        let _class_2: string;
+        export { _class_2 as class };
+    }
+    namespace title {
+        let _class_3: string;
+        export { _class_3 as class };
+    }
+    namespace subtitle {
+        let _class_4: string[];
+        export { _class_4 as class };
+    }
+    namespace content {
+        let _class_5: string;
+        export { _class_5 as class };
+    }
+    namespace footer {
+        let _class_6: string[];
+        export { _class_6 as class };
+    }
+}
+export default _default;

package/wangsvue/card/index.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: {
+        class: [
+            //Shape
+            'rounded-lg p-6',
+            'flex flex-col gap-y-3',
+            //Color
+            'bg-white',
+            'text-grayscale-900',
+        ],
+    },
+    header: {
+        class: [''],
+    },
+    body: {
+        class: 'flex flex-col gap-3',
+    },
+    title: {
+        class: 'text-2xl font-bold',
+    },
+    subtitle: {
+        class: ['text-sm font-normal'],
+    },
+    content: {
+        class: 'flex flex-col gap-3 text-xs text-grayscale-900',
+    },
+    footer: {
+        class: ['inline-flex gap-1 text-xs items-center'],
+    },
+};