@fewangsit/wangsvue-presets 1.0.88 → 1.0.89-alpha.1

package/wangsvue/calendar/index.js

@@ -1,9 +1,7 @@
 "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 = {
+var isFirefoxBased = navigator.userAgent.includes('Firefox');
+var preset = {
     root: function (_a) {
         var props = _a.props;
         return ({
@@ -25,23 +23,17 @@ exports.default = {
         var props = _a.props;
         return ({
             class: [
-                'w-full peer',
+                'w-full h-full peer',
                 // Font
-                'text-xs font-normal placeholder:font-normal leading-6',
+                'text-xs font-normal placeholder:font-normal',
                 // Colors
-                'text-grayscale-900',
+                {
+                    'text-grayscale-900': !props.disabled,
+                    'text-general-200': props.disabled,
+                },
                 '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',
@@ -51,7 +43,7 @@ exports.default = {
         });
     },
     inputicon: {
-        class: ['text-grayscale-900 peer-disabled:bg-general-300'],
+        class: ['w-4 h-4 text-grayscale-900 peer-disabled:text-general-300'],
     },
     dropdownbutton: {
         root: {
@@ -74,31 +66,20 @@ exports.default = {
             ],
         },
     },
-    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 },
-            ],
-        });
-    },
+    panel: function () { return ({
+        class: [
+            'datepicker-panel',
+            // Display & Position
+            'flex flex-col justify-start items-center',
+            // Size
+            'h-max p-6 gap-2.5',
+            'bg-white w-[272px] !min-w-[272px]',
+            // Shape
+            'rounded-lg',
+            // Colors
+            'bg-white shadow-panel',
+        ],
+    }); },
     datepickerMask: {
         class: [
             'fixed top-0 left-0 w-full h-full',
@@ -111,7 +92,7 @@ exports.default = {
         var props = _a.props, state = _a.state;
         return ({
             class: [
-                'min-h-[26.8px]',
+                'h-6 w-full',
                 {
                     hidden: !((_b = props.dateFormat) === null || _b === void 0 ? void 0 : _b.toString().toLowerCase().includes('y')) &&
                         state.currentView === 'month',
@@ -119,13 +100,7 @@ exports.default = {
                 //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,
-                // },
+                'flex justify-between items-center gap-1',
                 // Shape
                 'rounded-t-md',
                 // Colors
@@ -134,46 +109,44 @@ exports.default = {
             ],
         });
     },
-    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,
-                // },
-            ],
-        });
-    },
+    previousbutton: function () { 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 () { return ({
+        class: [
+            // Text
+            'leading-6',
+            'my-0',
+            'order-2',
+            /*
+             * {
+             *   'mr-auto': !(props.numberOfMonths > 1),
+             *   ' mx-auto': props.numberOfMonths > 1,
+             * },
+             */
+        ],
+    }); },
     monthTitle: {
         class: [
             //Font
@@ -215,30 +188,30 @@ exports.default = {
             ],
         });
     },
-    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',
-            ],
-        });
-    },
+    nextbutton: function () { 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',
+        ],
+    }); },
+    // Unused
     table: {
         class: [
             // Size & Shape
@@ -253,17 +226,20 @@ exports.default = {
             '[&_[data-p-other-month="true"]]:invisible',
         ],
     },
+    // Unused
     tableheadercell: {
         class: [
             // Spacing
             'px-2 py-[5.4px]',
         ],
     },
+    // Unused
     tablebodyrow: {
         class: [
         // 'border-b border-surface-200 last:border-b-0',
         ],
     },
+    // Unused
     weekheader: {
         class: [
             'leading-6 text-sm font-normal',
@@ -277,8 +253,10 @@ exports.default = {
     },
     weekday: {
         class: [
-        // Colors
-        // 'text-surface-500/60 font-normal',
+        /*
+         * Colors
+         * 'text-surface-500/60 font-normal',
+         */
         ],
     },
     day: {
@@ -324,9 +302,13 @@ exports.default = {
                 // 'mx-auto',
                 // Shape & Size
                 'w-8 h-8',
+                { hidden: context.date.otherMonth },
                 // Colors
                 {
-                    'bg-primary-400 text-white rounded-none': (context.selected && !context.disabled) || context.date.today,
+                    'bg-primary-100': context.date.today && !context.selected,
+                    'bg-primary-400 text-white rounded-none': context.selected && !context.disabled,
+                    'rounded-l-full !bg-primary-1000': context.firstSelected,
+                    'rounded-r-full !bg-primary-1000': context.lastSelected,
                 },
                 {
                     '!rounded-full': !context.selected,
@@ -334,8 +316,10 @@ exports.default = {
                 // States
                 'focus:outline-none focus-visible:outline-none',
                 {
-                    'hover:bg-primary-400/90': context.selected || context.date.today,
-                    'hover:bg-primary-200': !context.selected,
+                    'hover:bg-primary-400/90': context.selected,
+                    'hover:!bg-primary-1000/90': context.lastSelected || context.firstSelected,
+                    'hover:bg-primary-50': !context.selected && !context.date.today,
+                    'hover:bg-primary-100/90': context.date.today,
                 },
                 {
                     'opacity-40 cursor-default': context.disabled,
@@ -347,13 +331,13 @@ exports.default = {
     monthpicker: {
         class: [
             // Layout
-            'w-full grid grid-cols-3 grid-rows-4 gap-y-4 gap-x-0',
+            'w-full grid grid-cols-2 grid-rows-5 gap-y-1 gap-x-0 mt-1',
         ],
     },
     month: function (_a) {
         var context = _a.context;
         return ({
-            'class': [
+            class: [
                 // Flexbox and Alignment
                 'inline-flex items-center justify-center',
                 // Size
@@ -366,27 +350,31 @@ exports.default = {
                 {
                     'text-grayscale-900 bg-transparent': !context.selected && !context.disabled,
                     'bg-primary-400 text-white': context.selected && !context.disabled,
+                    'cursor-default text-general-200': context.disabled,
+                },
+                /*
+                 * States
+                 * 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-400',
+                 */
+                {
+                    'hover:bg-primary-50': !context.selected && !context.disabled,
+                    'hover:bg-primary-400/90': 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',
+            'w-full grid grid-cols-2 grid-rows-5 gap-y-1 gap-x-0 mt-1',
         ],
     },
     year: function (_a) {
         var context = _a.context;
         return ({
-            'class': [
+            class: [
                 // Flexbox and Alignment
                 'inline-flex items-center justify-center',
                 // Size
@@ -399,15 +387,19 @@ exports.default = {
                 {
                     'text-grayscale-900 bg-transparent': !context.selected && !context.disabled,
                     'bg-primary-400 text-white': context.selected && !context.disabled,
+                    'cursor-default text-general-200': context.disabled,
+                },
+                /*
+                 * States
+                 * 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-400',
+                 */
+                {
+                    'hover:bg-primary-50': !context.selected && !context.disabled,
+                    'hover:bg-primary-400/90': 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: {
@@ -426,8 +418,10 @@ exports.default = {
             'flex',
             'items-center',
             'flex-col',
-            // Spacing
-            // 'px-2',
+            /*
+             * Spacing
+             * 'px-2',
+             */
         ],
     },
     separator: {
@@ -443,12 +437,12 @@ exports.default = {
             'items-center',
             'flex-col',
             'gap-3',
-            // Spacing
-            // 'px-2',
+            /*
+             * Spacing
+             * 'px-2',
+             */
             // Sizing
             'text-xs',
-            // Misc
-            timepickerlabel.class,
         ],
     },
     minutepicker: {
@@ -458,12 +452,12 @@ exports.default = {
             'items-center',
             'flex-col',
             'gap-3',
-            // Spacing
-            // 'px-2',
+            /*
+             * Spacing
+             * 'px-2',
+             */
             // Sizing
             'text-xs',
-            // Misc
-            timepickerlabel.class,
         ],
     },
     secondPicker: {
@@ -473,12 +467,23 @@ exports.default = {
             'items-center',
             'flex-col',
             'gap-3',
-            // Spacing
-            // 'px-2',
+            /*
+             * Spacing
+             * 'px-2',
+             */
             // Sizing
             'text-xs',
         ],
     },
+    timepickerlabel: {
+        class: [
+            'w-[39px] h-[26px] flex justify-center items-center ring-general-200 rounded',
+            {
+                'ring-1': isFirefoxBased,
+                'ring-[0.5px]': !isFirefoxBased,
+            },
+        ],
+    },
     incrementbutton: {
         class: [
             'relative',
@@ -487,20 +492,24 @@ exports.default = {
             // 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',
+            /*
+             * States
+             * 'hover:text-surface-700',
+             */
             // Misc
             'cursor-pointer overflow-hidden',
         ],
     },
+    incrementicon: {
+        class: ['w-5 h-5 shrink-0'],
+    },
+    decrementicon: {
+        class: ['w-5 h-5 shrink-0'],
+    },
     decrementbutton: {
         class: [
             'relative',
@@ -509,43 +518,30 @@ exports.default = {
             // 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',
+            /*
+             * States
+             * 'hover:text-surface-700',
+             */
             // Misc
             'cursor-pointer overflow-hidden',
         ],
     },
+    // TODO: Removed this after new calendar released
     groupcontainer: {
         class: [
             // Flexbox
             'flex w-full',
         ],
     },
+    container: {
+        class: ['text-grayscale-900 text-xs flex flex-col gap-1 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',
-        ],
+        class: [],
     },
     buttonbar: {
         class: [
@@ -571,9 +567,11 @@ exports.default = {
                 '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',
+                /*
+                 * States
+                 * 'focus:outline-none focus:outline-offset-0 focus:ring-2 ring-inset',
+                 * 'focus:ring-primary-400',
+                 */
                 // Misc
                 'cursor-pointer',
             ],
@@ -608,3 +606,4 @@ exports.default = {
         leaveToClass: 'opacity-0',
     },
 };
+exports.default = preset;

package/wangsvue/index.d.ts

@@ -101,16 +101,16 @@ declare namespace directives {
     export { tooltip };
 }
 import form from './form/index';
-import filtercontainer from './filtercontainer';
+import filtercontainer from './filtercontainer/index.js';
 import autocomplete from './autocomplete/index.js';
 import dropdown from './dropdown/index.js';
 import inputnumber from './inputnumber/index.js';
 import inputphonenumber from './inputphonenumber/index.js';
-import inputcurrency from './inputcurrency';
+import inputcurrency from './inputcurrency/index.js';
 import inputotp from './inputotp/index.js';
 import inputtext from './inputtext/index.js';
 import inputbadge from './inputbadge/index.js';
-import calendar from './calendar/index.js';
+import calendar from './calendar/index';
 import checkbox from './checkbox/index.js';
 import buttonradio from './buttonradio/index.js';
 import selectbutton from './selectbutton/index.js';
@@ -119,7 +119,7 @@ import chips from './chips/index.js';
 import rating from './rating/index.js';
 import multiselect from './multiselect/index.js';
 import togglebutton from './togglebutton/index.js';
-import toggleswitch from './toggleswitch';
+import toggleswitch from './toggleswitch/index.js';
 import cascadeselect from './cascadeselect/index.js';
 import listbox from './listbox/index.js';
 import colorpicker from './colorpicker/index.js';
@@ -132,7 +132,7 @@ import tristatecheckbox from './tristatecheckbox/index.js';
 import textarea from './textarea/index.js';
 import password from './password/index.js';
 import validatormessage from './validatormessage/index.js';
-import fileupload from './fileupload';
+import fileupload from './fileupload/index.js';
 import fieldwrapper from './fieldwrapper/index.js';
 import button from './button/index.js';
 import buttondownload from './buttondownload/index.js';
@@ -142,7 +142,7 @@ import buttonfilter from './buttonfilter/index.js';
 import splitbutton from './splitbutton/index.js';
 import paginator from './paginator/index.js';
 import datatable from './datatable/index.js';
-import customcolumn from './customcolumn';
+import customcolumn from './customcolumn/index.js';
 import tree from './tree/index.js';
 import dataview from './dataview/index.js';
 import dataviewlayoutoptions from './dataviewlayoutoptions/index.js';
@@ -190,7 +190,7 @@ import skeleton from './skeleton/index.js';
 import scrolltop from './scrolltop/index.js';
 import terminal from './terminal/index.js';
 import image from './image/index.js';
-import workcalendar from './workcalendar';
+import workcalendar from './workcalendar/index.js';
 import badgedirective from './badgedirective/index.js';
 import ripple from './ripple/index.js';
 import tooltip from './tooltip/index.js';