@fewangsit/wangsvue-presets 1.0.85-alpha.6 → 1.0.86

package/fixedasset/multiselect/index.js

@@ -20,8 +20,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var index_js_1 = require("../badge/index.js");
-var index_js_2 = require("../checkbox/index.js");
+var index_js_1 = require("../checkbox/index.js");
 exports.default = {
     root: function (_a) {
         var props = _a.props, state = _a.state;
@@ -40,7 +39,7 @@ exports.default = {
         });
     },
     labelContainer: {
-        class: 'overflow-hidden flex flex-auto items-center cursor-pointer py-[3px] h-[26px] px-3 pr-0',
+        class: 'overflow-hidden flex flex-auto items-center cursor-pointer py-[3px] px-3 pr-0',
     },
     label: function (_a) {
         var _b, _c;
@@ -51,6 +50,9 @@ exports.default = {
                 'h-max',
                 //Font
                 'text-xs font-normal',
+                {
+                    '!leading-5': props.modelValue == null,
+                },
                 //Shape
                 'rounded-none',
                 // Color
@@ -61,31 +63,40 @@ exports.default = {
                 // Transitions
                 'transition duration-200',
                 // Misc
-                'overflow-hidden overflow-x-auto scrollbar-w-none whitespace-nowrap cursor-pointer overflow-ellipsis',
+                'overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis',
             ],
         });
     },
-    token: index_js_1.default.root({ props: { severity: 'dark' } }),
-    tokenLabel: index_js_1.default.input({ props: {}, context: {} }),
-    removeTokenIcon: index_js_1.default.removebutton({
-        props: { badgeSeverity: 'dark' },
-    }),
-    loadingplaceholder: {
-        class: 'text-general-200 font-light',
-    },
-    loadingicon: {
-        class: 'text-xs animate-spin duration-200 !text-general-500',
-        icon: 'spinner',
+    token: {
+        class: [
+            // Flexbox
+            'inline-flex items-center gap-1',
+            // Spacing
+            'py-1 px-2',
+            // Shape
+            'rounded-[50px]',
+            'text-xs',
+            'font-normal',
+            'leading-[12px]',
+            'tracking-[0.03em]',
+            'items-center',
+            'text-grayscale-900',
+            'bg-grayscale-500',
+        ],
     },
-    dropdownicon: function (_a) {
-        var state = _a.state;
-        return ({
-            class: [
-                'w-full h-full transition-transform !text-general-500',
-                { 'rotate-180': state.isShowOverlay },
-            ],
-            icon: 'arrow-drop-down',
-        });
+    removeTokenIcon: {
+        class: [
+            // Shape
+            'rounded-md leading-6',
+            // Spacing
+            'ml-2',
+            // Size
+            'w-4 h-4',
+            // Transition
+            'transition duration-200 ease-in-out',
+            // Misc
+            'cursor-pointer',
+        ],
     },
     trigger: {
         class: [
@@ -113,10 +124,12 @@ exports.default = {
             'mt-2',
             'max-w-[30vw]',
             // Shape
+            'border-0',
             'rounded-lg',
             'shadow-panel',
             // Color
-            'bg-grayscale-100',
+            'bg-surface-0',
+            'text-surface-800',
         ],
     },
     header: {
@@ -126,8 +139,13 @@ exports.default = {
             'py-3 px-4',
             'm-0',
             //Shape
-            'rounded-tl-lg',
-            'rounded-tr-lg',
+            'border-[0.5px] border-b-0',
+            'rounded-tl-md',
+            'rounded-tr-md',
+            // Color
+            'text-surface-700',
+            'bg-primary-400',
+            'border-grayscale-900',
         ],
     },
     headerCheckboxContainer: {
@@ -146,10 +164,10 @@ exports.default = {
             'select-none',
         ],
     },
-    headerCheckbox: __assign(__assign({}, index_js_2.default), { root: {
-            class: __spreadArray(['!mx-auto'], index_js_2.default.root.class, true),
+    headerCheckbox: __assign(__assign({}, index_js_1.default), { root: {
+            class: __spreadArray(['!mx-auto'], index_js_1.default.root.class, true),
         } }),
-    itemCheckbox: index_js_2.default,
+    itemCheckbox: index_js_1.default,
     closeButton: {
         class: ['hidden'],
     },
@@ -167,8 +185,10 @@ exports.default = {
             // Sizing
             'max-h-[15rem]',
             // Shape
+            'border-[0.5px]',
             // Color
             'bg-white',
+            'border-grayscale-900',
             // Misc
             'overflow-auto',
             'rounded-br-lg',
@@ -183,7 +203,7 @@ exports.default = {
         return ({
             class: [
                 // Font
-                'text-xs font-medium tracking-[0.02em]',
+                'text-xs font-normal',
                 // Flexbox
                 'flex items-center gap-2',
                 // Position
@@ -193,22 +213,26 @@ exports.default = {
                 'rounded-none',
                 // Spacing
                 'm-0',
-                'py-1.5 px-4',
+                'py-2 px-4',
                 // Color
+                { '!font-medium': context.selected },
                 {
-                    'text-general-800': !context.focused && !context.selected && !context.disabled,
+                    'text-surface-700': !context.focused && !context.selected && !context.disabled,
                 },
                 {
-                    'text-general-400': !context.focused && !context.selected && context.disabled,
+                    'text-surface-600': !context.focused && !context.selected && context.disabled,
                 },
-                { 'bg-primary-50': context.focused },
                 {
-                    'text-primary-500': context.focused || context.selected,
+                    'bg-primary-50 text-surface-700': context.focused && !context.selected,
                 },
                 {
-                    'text-general-900': !context.focused && context.selected,
+                    'bg-primary-50 text-primary-500': context.focused && context.selected,
+                },
+                {
+                    'text-surface-700': !context.focused && context.selected,
                 },
                 //States
+                'hover:bg-primary-bg-weak hover:text-primary',
                 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500',
                 // Misc
                 { 'pointer-events-none cursor-default': context.disabled },
@@ -238,28 +262,25 @@ exports.default = {
     },
     filtercontainer: {
         class: [
-            'flex items-center relative w-full gap-2',
+            'flex flex-row-reverse items-center relative w-full gap-2',
             // Font
             'text-[0.7rem]',
             'leading-4',
             // Sizing
-            'w-full py-2 px-3',
+            'w-full',
             //Color
-            'text-general-100',
-            'bg-white',
+            'text-grayscale-900',
+            'bg-primary-400',
             // Shape
-            'ring-inset ring-1 ring-general-500',
-            'rounded-[6px]',
+            'border-b border-primary-100',
         ],
     },
     filterinput: {
         class: [
             'w-full',
-            'text-general-800',
-            'text-xs tracking-[0.02em]',
-            'font-medium',
-            'placeholder:text-general-200',
-            'placeholder:font-light',
+            'bg-primary-400',
+            'text-white',
+            'placeholder:text-primary-100',
             // Misc
             'appearance-none',
             // State
@@ -267,8 +288,7 @@ exports.default = {
         ],
     },
     filtericon: {
-        class: ['text-base text-general-400'],
-        icon: 'search',
+        class: ['absolute', 'top-1/2 right-3', '-mt-2'],
     },
     clearicon: {
         class: [

package/fixedasset/style.css

@@ -964,10 +964,6 @@
   left: 0px;
 }
 
-.left-0\.5{
-  left: 0.125rem;
-}
-
 .left-2{
   left: 0.5rem;
 }
@@ -1477,10 +1473,6 @@
   height: 21px;
 }
 
-.h-\[26px\]{
-  height: 26px;
-}
-
 .h-\[2rem\]{
   height: 2rem;
 }
@@ -1789,10 +1781,6 @@
   min-width: 0px;
 }
 
-.min-w-4{
-  min-width: 1rem;
-}
-
 .min-w-52{
   min-width: 13rem;
 }
@@ -1993,6 +1981,11 @@
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.translate-x-3\.5{
+  --tw-translate-x: 0.875rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .translate-x-full{
   --tw-translate-x: 100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2008,11 +2001,6 @@
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.translate-y-1\/2{
-  --tw-translate-y: 50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .translate-y-2\/4{
   --tw-translate-y: 50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2489,10 +2477,6 @@
   border-radius: 60px;
 }
 
-.rounded-\[6px\]{
-  border-radius: 6px;
-}
-
 .rounded-\[7px\]{
   border-radius: 7px;
 }
@@ -2742,6 +2726,11 @@
   border-style: none;
 }
 
+.\!border-danger-500{
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(255 0 34 / var(--tw-border-opacity)) !important;
+}
+
 .\!border-general-100{
   --tw-border-opacity: 1 !important;
   border-color: rgb(218 217 227 / var(--tw-border-opacity)) !important;
@@ -2826,11 +2815,6 @@
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
-.\!bg-danger-500{
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(255 0 34 / var(--tw-bg-opacity)) !important;
-}
-
 .\!bg-general-100{
   --tw-bg-opacity: 1 !important;
   background-color: rgb(218 217 227 / var(--tw-bg-opacity)) !important;
@@ -2871,11 +2855,6 @@
   background-color: rgb(0 99 247 / var(--tw-bg-opacity)) !important;
 }
 
-.\!bg-success-500{
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(0 164 85 / var(--tw-bg-opacity)) !important;
-}
-
 .\!bg-transparent{
   background-color: transparent !important;
 }
@@ -2962,11 +2941,6 @@
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
 }
 
-.bg-grayscale-100{
-  --tw-bg-opacity: 1;
-  background-color: rgb(242 242 242 / var(--tw-bg-opacity));
-}
-
 .bg-grayscale-200{
   --tw-bg-opacity: 1;
   background-color: rgb(229 230 230 / var(--tw-bg-opacity));
@@ -3149,10 +3123,6 @@
   --tw-bg-opacity: 0.9;
 }
 
-.bg-none{
-  background-image: none;
-}
-
 .fill-none{
   fill: none;
 }
@@ -3583,15 +3553,6 @@
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
-.\!text-\[10px\]{
-  font-size: 10px !important;
-}
-
-.\!text-base{
-  font-size: 1rem !important;
-  line-height: 1.5rem !important;
-}
-
 .\!text-xs{
   font-size: 0.75rem !important;
   line-height: 1rem !important;
@@ -3723,6 +3684,10 @@
   line-height: 1.125rem;
 }
 
+.leading-\[12px\]{
+  line-height: 12px;
+}
+
 .leading-\[133\.333\%\]{
   line-height: 133.333%;
 }
@@ -3739,10 +3704,6 @@
   line-height: 19.12px;
 }
 
-.leading-\[22px\]{
-  line-height: 22px;
-}
-
 .leading-\[2rem\]{
   line-height: 2rem;
 }
@@ -3767,6 +3728,10 @@
   letter-spacing: 0.02em;
 }
 
+.tracking-\[0\.03em\]{
+  letter-spacing: 0.03em;
+}
+
 .tracking-\[0\.2488px\]{
   letter-spacing: 0.2488px;
 }
@@ -4204,10 +4169,6 @@
   --tw-ring-color: rgb(0 99 247 / var(--tw-ring-opacity)) !important;
 }
 
-.\!ring-transparent{
-  --tw-ring-color: transparent !important;
-}
-
 .ring-blue-400\/50{
   --tw-ring-color: rgb(96 165 250 / 0.5);
 }
@@ -4227,21 +4188,11 @@
   --tw-ring-color: rgb(255 0 34 / var(--tw-ring-opacity));
 }
 
-.ring-general-100{
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(218 217 227 / var(--tw-ring-opacity));
-}
-
 .ring-general-200{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(181 179 199 / var(--tw-ring-opacity));
 }
 
-.ring-general-300{
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(144 140 171 / var(--tw-ring-opacity));
-}
-
 .ring-general-400{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(108 104 141 / var(--tw-ring-opacity));
@@ -4292,11 +4243,6 @@
   --tw-ring-color: rgb(204 224 255 / var(--tw-ring-opacity));
 }
 
-.ring-primary-200{
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(148 191 255 / var(--tw-ring-opacity));
-}
-
 .ring-primary-400{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(46 130 255 / var(--tw-ring-opacity));
@@ -4519,7 +4465,6 @@
 
 * {
   font-family: 'Manrope', sans-serif;
-  scrollbar-width: thin;
 }
 
 .font-manrope {
@@ -4579,8 +4524,7 @@ h6,
   scrollbar-width: none;
 }
 
-.scrollbar-w-thin,
-.p-virtualscroller {
+.scrollbar-w-thin {
   scrollbar-width: thin;
 }
 
@@ -4669,11 +4613,6 @@ h6,
   left: 0px;
 }
 
-.before\:left-0\.5::before{
-  content: var(--tw-content);
-  left: 0.125rem;
-}
-
 .before\:left-1\/2::before{
   content: var(--tw-content);
   left: 50%;
@@ -4694,6 +4633,21 @@ h6,
   z-index: 50;
 }
 
+.before\:-mt-\[6px\]::before{
+  content: var(--tw-content);
+  margin-top: -6px;
+}
+
+.before\:ml-0::before{
+  content: var(--tw-content);
+  margin-left: 0px;
+}
+
+.before\:ml-0\.5::before{
+  content: var(--tw-content);
+  margin-left: 0.125rem;
+}
+
 .before\:ml-4::before{
   content: var(--tw-content);
   margin-left: 1rem;
@@ -4745,15 +4699,15 @@ h6,
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.before\:-translate-y-1\/2::before{
+.before\:translate-x-3::before{
   content: var(--tw-content);
-  --tw-translate-y: -50%;
+  --tw-translate-x: 0.75rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.before\:translate-x-\[calc\(18px\)\]::before{
+.before\:translate-x-3\.5::before{
   content: var(--tw-content);
-  --tw-translate-x: calc(18px);
+  --tw-translate-x: 0.875rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
@@ -4824,18 +4778,6 @@ h6,
   border-color: transparent;
 }
 
-.before\:\!bg-white::before{
-  content: var(--tw-content);
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
-}
-
-.before\:bg-general-100::before{
-  content: var(--tw-content);
-  --tw-bg-opacity: 1;
-  background-color: rgb(218 217 227 / var(--tw-bg-opacity));
-}
-
 .before\:bg-general-50::before{
   content: var(--tw-content);
   --tw-bg-opacity: 1;
@@ -4865,6 +4807,13 @@ h6,
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.before\:shadow::before{
+  content: var(--tw-content);
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .before\:shadow-xl::before{
   content: var(--tw-content);
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
@@ -5416,10 +5365,6 @@ h6,
   background-color: rgb(0 80 199 / var(--tw-bg-opacity));
 }
 
-.focus\:bg-none:focus{
-  background-image: none;
-}
-
 .focus\:px-2:focus{
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -5685,22 +5630,6 @@ h6,
   background-color: rgb(255 222 102 / var(--tw-bg-opacity)) !important;
 }
 
-.peer:focus-visible ~ .peer-focus-visible\:\!outline{
-  outline-style: solid !important;
-}
-
-.peer:focus-visible ~ .peer-focus-visible\:\!outline-offset-0{
-  outline-offset: 0px !important;
-}
-
-.peer:focus-visible ~ .peer-focus-visible\:\!outline-primary-400\/\[5\%\]{
-  outline-color: rgb(46 130 255 / 5%) !important;
-}
-
-.peer:focus-visible ~ .peer-focus-visible\:\!outline-primary-500\/\[5\%\]{
-  outline-color: rgb(0 99 247 / 5%) !important;
-}
-
 .peer:focus-visible ~ .peer-focus-visible\:ring-2{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -5938,12 +5867,6 @@ h6,
   background-image: none;
 }
 
-.\[\&\:has\(\:focus\)\]\:ring-1:has(:focus){
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
 .\[\&\:has\(\:focus\)\]\:\!ring-primary-400:has(:focus){
   --tw-ring-opacity: 1 !important;
   --tw-ring-color: rgb(46 130 255 / var(--tw-ring-opacity)) !important;
@@ -5959,11 +5882,6 @@ h6,
   --tw-ring-color: rgb(46 130 255 / var(--tw-ring-opacity));
 }
 
-.\[\&\:has\(\:focus\)\]\:ring-primary-500:has(:focus){
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(0 99 247 / var(--tw-ring-opacity));
-}
-
 .\[\&\:has\(\:focus\)_\.inputgroupaddon\]\:\!ring-primary-400:has(:focus) .inputgroupaddon{
   --tw-ring-opacity: 1 !important;
   --tw-ring-color: rgb(46 130 255 / var(--tw-ring-opacity)) !important;

package/fixedasset/textarea/index.js

@@ -16,8 +16,7 @@ exports.default = {
         return ({
             'class': __spreadArray(__spreadArray([
                 // Font
-                'font-medium text-xs tracking-[0.02em]',
-                'placeholder:text-general-200 placeholder:!font-light',
+                'font-normal placeholder:text-general-200 placeholder:!font-normal text-xs',
                 'w-full',
                 {
                     'resize-none': props.autoResize,
@@ -36,7 +35,7 @@ exports.default = {
                 },
                 // // States
                 {
-                    'bg-white text-general-800': !context.disabled,
+                    'bg-transparent text-general-800': !context.disabled,
                     'bg-general-50 text-general-200': context.disabled,
                 },
                 'focus-visible:outline-none',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fewangsit/wangsvue-presets",
-  "version": "1.0.85-alpha.6",
+  "version": "1.0.86",
   "author": "Wangsit FE Developer",
   "description": "Wangsit VueJS Component Library Presets",
   "main": "index.js",