@fewangsit/wangsvue-presets 1.0.98 → 1.0.99-alpha.0

package/globalsettings/style.css

@@ -1,5 +1,18 @@
 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
 
+.icon{
+  display: flex;
+  height: 1em;
+  width: 1em;
+  background-color: currentColor;
+  -webkit-mask-image: var(--svg);
+  mask-image: var(--svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+
 .ic-add {
   /* ri-add-line */
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z'/%3E%3C/svg%3E");
@@ -883,53 +896,6 @@
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15.199 9.944a2.6 2.6 0 0 1-.79-1.55l-.403-3.083l-2.731 1.486a2.6 2.6 0 0 1-1.719.272L6.5 6.5l.57 3.056a2.6 2.6 0 0 1-.273 1.72l-1.486 2.73l3.083.403a2.6 2.6 0 0 1 1.55.79l2.138 2.257l1.336-2.807a2.6 2.6 0 0 1 1.23-1.231l2.808-1.336zm.025 5.564l-2.213 4.65a.6.6 0 0 1-.977.155l-3.542-3.739a.6.6 0 0 0-.358-.182l-5.106-.668a.6.6 0 0 1-.45-.881l2.462-4.524a.6.6 0 0 0 .063-.396L4.16 4.86a.6.6 0 0 1 .7-.7l5.062.943a.6.6 0 0 0 .397-.063l4.523-2.46a.6.6 0 0 1 .882.448l.668 5.107a.6.6 0 0 0 .182.357l3.739 3.542a.6.6 0 0 1-.155.977l-4.65 2.213a.6.6 0 0 0-.284.284m.797 1.927l1.414-1.414l4.243 4.242l-1.415 1.415z'/%3E%3C/svg%3E");
 }
 
-.container{
-  width: 100%;
-}
-
-@media (min-width: 640px){
-  .container{
-    max-width: 640px;
-  }
-}
-
-@media (min-width: 768px){
-  .container{
-    max-width: 768px;
-  }
-}
-
-@media (min-width: 1024px){
-  .container{
-    max-width: 1024px;
-  }
-}
-
-@media (min-width: 1280px){
-  .container{
-    max-width: 1280px;
-  }
-}
-
-@media (min-width: 1536px){
-  .container{
-    max-width: 1536px;
-  }
-}
-
-.icon{
-  display: flex;
-  height: 1em;
-  width: 1em;
-  background-color: currentColor;
-  -webkit-mask-image: var(--svg);
-  mask-image: var(--svg);
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  -webkit-mask-size: 100% 100%;
-  mask-size: 100% 100%;
-}
-
 .\!pointer-events-none{
   pointer-events: none !important;
 }
@@ -1171,6 +1137,10 @@
   margin: 0px;
 }
 
+.m-\[3px\]{
+  margin: 3px;
+}
+
 .\!mx-auto{
   margin-left: auto !important;
   margin-right: auto !important;
@@ -1415,6 +1385,10 @@
   display: inline;
 }
 
+.\!flex{
+  display: flex !important;
+}
+
 .flex{
   display: flex;
 }
@@ -1568,6 +1542,10 @@
   height: 21px;
 }
 
+.h-\[22px\]{
+  height: 22px;
+}
+
 .h-\[26px\]{
   height: 26px;
 }
@@ -1814,6 +1792,10 @@
   width: 18px;
 }
 
+.w-\[1px\]{
+  width: 1px;
+}
+
 .w-\[200px\]{
   width: 200px;
 }
@@ -1822,6 +1804,10 @@
   width: 224px;
 }
 
+.w-\[22px\]{
+  width: 22px;
+}
+
 .w-\[272px\]{
   width: 272px;
 }
@@ -2561,6 +2547,12 @@
   scroll-behavior: smooth;
 }
 
+.truncate{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .overflow-ellipsis{
   text-overflow: ellipsis;
 }
@@ -5670,6 +5662,14 @@ div{
   background-color: rgb(235 234 240 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-primary-50\/30:hover{
+  background-color: rgb(235 234 240 / 0.3);
+}
+
+.hover\:bg-primary-50\/50:hover{
+  background-color: rgb(235 234 240 / 0.5);
+}
+
 .hover\:bg-primary-50\/80:hover{
   background-color: rgb(235 234 240 / 0.8);
 }
@@ -5836,6 +5836,11 @@ div{
   --tw-ring-color: rgb(234 88 12 / var(--tw-ring-opacity));
 }
 
+.hover\:ring-primary-500:hover{
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(32 30 41 / var(--tw-ring-opacity));
+}
+
 .hover\:ring-primary-600:hover{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(16 15 21 / var(--tw-ring-opacity));
@@ -5860,6 +5865,14 @@ div{
   background-color: rgb(235 234 240 / var(--tw-bg-opacity));
 }
 
+.focus\:bg-primary-50\/30:focus{
+  background-color: rgb(235 234 240 / 0.3);
+}
+
+.focus\:bg-primary-50\/50:focus{
+  background-color: rgb(235 234 240 / 0.5);
+}
+
 .focus\:bg-primary-600:focus{
   --tw-bg-opacity: 1;
   background-color: rgb(16 15 21 / var(--tw-bg-opacity));
@@ -6416,6 +6429,36 @@ div{
   }
 }
 
+.dark\:bg-white:where(.dark, .dark *){
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.dark\:text-general-800:where(.dark, .dark *){
+  --tw-text-opacity: 1;
+  color: rgb(32 30 41 / var(--tw-text-opacity));
+}
+
+.dark\:ring-danger-500:where(.dark, .dark *){
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(255 0 34 / var(--tw-ring-opacity));
+}
+
+.dark\:ring-general-200:where(.dark, .dark *){
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(181 179 199 / var(--tw-ring-opacity));
+}
+
+.dark\:hover\:ring-primary-400:hover:where(.dark, .dark *){
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(108 104 141 / var(--tw-ring-opacity));
+}
+
+.dark\:focus\:ring-primary-400:focus:where(.dark, .dark *){
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(108 104 141 / var(--tw-ring-opacity));
+}
+
 .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar{
   display: none;
 }

package/globalsettings/tabmenu/index.d.ts

@@ -1,105 +1,2 @@
-declare namespace _default {
-    namespace root {
-        let _class: string;
-        export { _class as class };
-        export let style: string;
-    }
-    namespace menu {
-        let _class_1: string[];
-        export { _class_1 as class };
-    }
-    namespace menuitem {
-        let _class_2: string;
-        export { _class_2 as class };
-    }
-    function action({ context, state }: {
-        context: any;
-        state: any;
-    }): {
-        class: (string | {
-            'rounded-xl py-1 px-3': boolean;
-            'p-2 pb-1.5 pt-0.5 !h-6': boolean;
-            'ml-1': boolean;
-            'border-b-2'?: undefined;
-            'border-primary-500'?: undefined;
-            'border-grayscale-400'?: undefined;
-            'text-grayscale-600'?: undefined;
-            'text-primary-500'?: undefined;
-            'bg-primary-500 text-white'?: undefined;
-            'bg-grayscale-200 text-grayscale-800'?: undefined;
-            'bg-transparent '?: undefined;
-            'focus-visible:border-primary-200 focus-visible:text-primary-400'?: undefined;
-            'pointer-events-none'?: undefined;
-            'opacity-60'?: undefined;
-        } | {
-            'border-b-2': boolean;
-            'rounded-xl py-1 px-3'?: undefined;
-            'p-2 pb-1.5 pt-0.5 !h-6'?: undefined;
-            'ml-1'?: undefined;
-            'border-primary-500'?: undefined;
-            'border-grayscale-400'?: undefined;
-            'text-grayscale-600'?: undefined;
-            'text-primary-500'?: undefined;
-            'bg-primary-500 text-white'?: undefined;
-            'bg-grayscale-200 text-grayscale-800'?: undefined;
-            'bg-transparent '?: undefined;
-            'focus-visible:border-primary-200 focus-visible:text-primary-400'?: undefined;
-            'pointer-events-none'?: undefined;
-            'opacity-60'?: undefined;
-        } | {
-            'border-primary-500': any;
-            'border-grayscale-400': boolean;
-            'text-grayscale-600': boolean;
-            'text-primary-500': any;
-            'bg-primary-500 text-white': any;
-            'bg-grayscale-200 text-grayscale-800': boolean;
-            'bg-transparent ': boolean;
-            'rounded-xl py-1 px-3'?: undefined;
-            'p-2 pb-1.5 pt-0.5 !h-6'?: undefined;
-            'ml-1'?: undefined;
-            'border-b-2'?: undefined;
-            'focus-visible:border-primary-200 focus-visible:text-primary-400'?: undefined;
-            'pointer-events-none'?: undefined;
-            'opacity-60'?: undefined;
-        } | {
-            'focus-visible:border-primary-200 focus-visible:text-primary-400': boolean;
-            'rounded-xl py-1 px-3'?: undefined;
-            'p-2 pb-1.5 pt-0.5 !h-6'?: undefined;
-            'ml-1'?: undefined;
-            'border-b-2'?: undefined;
-            'border-primary-500'?: undefined;
-            'border-grayscale-400'?: undefined;
-            'text-grayscale-600'?: undefined;
-            'text-primary-500'?: undefined;
-            'bg-primary-500 text-white'?: undefined;
-            'bg-grayscale-200 text-grayscale-800'?: undefined;
-            'bg-transparent '?: undefined;
-            'pointer-events-none'?: undefined;
-            'opacity-60'?: undefined;
-        } | {
-            'pointer-events-none': any;
-            'opacity-60': any;
-            'rounded-xl py-1 px-3'?: undefined;
-            'p-2 pb-1.5 pt-0.5 !h-6'?: undefined;
-            'ml-1'?: undefined;
-            'border-b-2'?: undefined;
-            'border-primary-500'?: undefined;
-            'border-grayscale-400'?: undefined;
-            'text-grayscale-600'?: undefined;
-            'text-primary-500'?: undefined;
-            'bg-primary-500 text-white'?: undefined;
-            'bg-grayscale-200 text-grayscale-800'?: undefined;
-            'bg-transparent '?: undefined;
-            'focus-visible:border-primary-200 focus-visible:text-primary-400'?: undefined;
-        })[];
-    };
-    namespace icon {
-        let _class_3: string;
-        export { _class_3 as class };
-    }
-    namespace inkbar {
-        let _class_4: string;
-        export { _class_4 as class };
-    }
-}
+declare const _default: import("@wangs-ui/core/dist/types/themes/preset-definitions").ToRawPreset<import("@wangs-ui/core/dist/types/components/tabmenu/tabmenu.type").TabMenuPreset, import("@wangs-ui/core/dist/types/components/tabmenu/tabmenu.type").TabMenuPresetMethodOptions> | import("@wangs-ui/core/dist/types/themes/preset-definitions").ToRawPreset<import("@wangs-ui/core/dist/types/components/inputotp/inputotp.type").InputOtpPreset, import("@wangs-ui/core/dist/types/components/inputotp/inputotp.type").InputOtpPresetMethodOptions>;
 export default _default;

package/globalsettings/tabmenu/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
+var core_1 = require("@wangs-ui/core");
+exports.default = (0, core_1.definePreset)('WANGS-TABMENU', {
     root: {
         class: 'overflow-x-auto',
         style: 'scrollbar-width: none',
@@ -21,7 +22,7 @@ exports.default = {
     },
     action: function (_a) {
         var _b, _c;
-        var context = _a.context, state = _a.state;
+        var props = _a.props, context = _a.context;
         return ({
             class: [
                 'relative',
@@ -32,28 +33,28 @@ exports.default = {
                 'flex items-center',
                 // Spacing
                 {
-                    'rounded-xl py-1 px-3': context.type === 'pill',
-                    'p-2 pb-1.5 pt-0.5 !h-6': context.type !== 'pill',
-                    'ml-1': context.type === 'pill' && context.index !== 0,
+                    'rounded-xl py-1 px-3': props.type === 'pill',
+                    'p-2 pb-1.5 pt-0.5 !h-6': props.type !== 'pill',
+                    'ml-1': props.type === 'pill' && context.index !== 0,
                 },
                 // Shape
                 {
-                    'border-b-2': context.type !== 'pill',
+                    'border-b-2': props.type !== 'pill',
                 },
                 // Colors and Conditions
                 {
-                    'border-primary-500': state.active,
-                    'border-grayscale-400': !state.active,
-                    'text-grayscale-600': !state.active,
-                    'text-primary-500': state.active,
-                    'bg-primary-500 text-white': context.type === 'pill' && state.active,
-                    'bg-grayscale-200 text-grayscale-800': context.type === 'pill' && !state.active,
-                    'bg-transparent ': context.type !== 'pill' && !state.active,
+                    'border-primary-500': context.active,
+                    'border-grayscale-400': !context.active,
+                    'text-grayscale-600': !context.active,
+                    'text-primary-500': context.active,
+                    'bg-primary-500 text-white': props.type === 'pill' && context.active,
+                    'bg-grayscale-200 text-grayscale-800': props.type === 'pill' && !context.active,
+                    'bg-transparent ': props.type !== 'pill' && !context.active,
                 },
                 // States
                 'focus-visible:outline-none focus-visible:outline-offset-0',
                 {
-                    'focus-visible:border-primary-200 focus-visible:text-primary-400': !state.active,
+                    'focus-visible:border-primary-200 focus-visible:text-primary-400': !context.active,
                 },
                 // Disabled States
                 {
@@ -74,7 +75,13 @@ exports.default = {
     icon: {
         class: 'mr-2',
     },
-    inkbar: {
-        class: 'grow border-b-2 border-primary-100',
+    inkbar: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                'grow border-b-2 border-primary-100',
+                { hidden: props.type === 'pill' || props.useTrailingLine === false },
+            ],
+        });
     },
-};
+});

package/globalsettings/timeline/index.d.ts

@@ -38,6 +38,28 @@ declare namespace _default {
         })[];
         'data-wv-section': string;
     };
+    function markerDot(item: any): {
+        class: (string | {
+            '!flex': any;
+        })[];
+        'data-wv-section': string;
+    };
+    namespace contentHeader {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    namespace contentDetailKey {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    namespace contentDetailValue {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+    namespace contentDate {
+        let _class_4: string[];
+        export { _class_4 as class };
+    }
     function connector({ props }: {
         props: any;
     }): {

package/globalsettings/timeline/index.js

@@ -68,6 +68,25 @@ exports.default = {
         ],
         'data-wv-section': 'markerArrow',
     }); },
+    markerDot: function (item) { return ({
+        'class': [
+            'hidden w-[6px] h-[6px] m-[3px] rounded-full bg-black',
+            { '!flex': !item.detail || isEmptyObject(item.detail) },
+        ],
+        'data-wv-section': 'markerDot',
+    }); },
+    contentHeader: {
+        class: ['leading-5 cursor-pointer truncate !text-xs !font-bold'],
+    },
+    contentDetailKey: {
+        class: ['text-general-400 whitespace-nowrap'],
+    },
+    contentDetailValue: {
+        class: ['text-xs text-general-800'],
+    },
+    contentDate: {
+        class: ['text-xs font-medium'],
+    },
     connector: function (_a) {
         var props = _a.props;
         return ({

package/package.json

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

package/supplyasset/fieldwrapper/index.d.ts

@@ -4,10 +4,13 @@ declare namespace _default {
         'data-wv-name': string;
         'data-wv-section': string;
     };
-    function label({ props }: {
+    function label({ props, slots }: {
         props: any;
+        slots: any;
     }): {
-        class: any[][];
+        class: (any[] | {
+            'w-full': any;
+        })[];
         'data-wv-section': string;
     };
     namespace info {

package/supplyasset/fieldwrapper/index.js

@@ -9,13 +9,16 @@ exports.default = {
         'data-wv-section': 'root',
     },
     label: function (_a) {
-        var props = _a.props;
+        var props = _a.props, slots = _a.slots;
         return ({
             'class': [
                 [
                     'text-general-900 text-xs flex gap-[2px] font-medium tracking-[0.02em]',
                     props.labelClass,
                 ],
+                {
+                    'w-full': slots['label-addon']
+                }
             ],
             'data-wv-section': 'fieldlabel',
         });

package/supplyasset/index.d.ts

@@ -96,7 +96,7 @@ import buttonsplit from './buttonsplit/index.js';
 import buttonfilter from './buttonfilter/index.js';
 import paginator from './paginator/index.js';
 import datatable from './datatable/index.js';
-import customcolumn from './customColumn/index.js';
+import customcolumn from './customcolumn/index.js';
 import tree from './tree/index.js';
 import timeline from './timeline/index.js';
 import changelog from './changelog/index.js';
@@ -105,7 +105,7 @@ import card from './card/index.js';
 import menu from './menu/index.js';
 import steps from './steps/index.js';
 import breadcrumb from './breadcrumb/index.js';
-import tabmenu from './tabmenu/index.js';
+import tabmenu from './tabmenu';
 import dialog from './dialog/index.js';
 import dialogconfirm from './dialogconfirm/index.js';
 import dialogform from './dialogform/index.js';

package/supplyasset/index.js

@@ -14,7 +14,7 @@ var index_js_10 = require("./carousel/index.js");
 var index_js_11 = require("./changelog/index.js");
 var index_js_12 = require("./checkbox/index.js");
 var index_js_13 = require("./codesnippet/index.js");
-var index_js_14 = require("./customColumn/index.js");
+var index_js_14 = require("./customcolumn/index.js");
 var index_js_15 = require("./datatable/index.js");
 var index_js_16 = require("./dialog/index.js");
 var index_js_17 = require("./dialogconfirm/index.js");
@@ -39,19 +39,19 @@ var index_js_33 = require("./password/index.js");
 var index_js_34 = require("./buttonradio/index.js");
 var index_js_35 = require("./ripple/index.js");
 var index_js_36 = require("./steps/index.js");
-var index_js_37 = require("./tabmenu/index.js");
-var index_js_38 = require("./textarea/index.js");
-var index_js_39 = require("./timeline/index.js");
-var index_js_40 = require("./toast/index.js");
-var index_js_41 = require("./togglebutton/index.js");
-var index_js_42 = require("./tooltip/index.js");
-var index_js_43 = require("./tree/index.js");
-var index_js_44 = require("./treeselect/index.js");
-var index_js_45 = require("./tristatecheckbox/index.js");
-var index_js_46 = require("./validatormessage/index.js");
+var tabmenu_1 = require("./tabmenu");
+var index_js_37 = require("./textarea/index.js");
+var index_js_38 = require("./timeline/index.js");
+var index_js_39 = require("./toast/index.js");
+var index_js_40 = require("./togglebutton/index.js");
+var index_js_41 = require("./tooltip/index.js");
+var index_js_42 = require("./tree/index.js");
+var index_js_43 = require("./treeselect/index.js");
+var index_js_44 = require("./tristatecheckbox/index.js");
+var index_js_45 = require("./validatormessage/index.js");
 var index_3 = require("./buttonbulkaction/index");
-var index_js_47 = require("./badgegroup/index.js");
-var index_js_48 = require("./breadcrumb/index.js");
+var index_js_46 = require("./badgegroup/index.js");
+var index_js_47 = require("./breadcrumb/index.js");
 var inputcurrency_1 = require("./inputcurrency");
 var fileupload_1 = require("./fileupload");
 var fieldwrapper_1 = require("./fieldwrapper");
@@ -63,7 +63,7 @@ var progressbar_1 = require("./progressbar");
 var directives = {
     badge: index_js_3.default,
     ripple: index_js_35.default,
-    tooltip: index_js_42.default,
+    tooltip: index_js_41.default,
 };
 var supplyasset = {
     global: global_js_1.default,
@@ -81,15 +81,15 @@ var supplyasset = {
     checkbox: index_js_12.default,
     buttonradio: index_js_34.default,
     multiselect: index_js_30.default,
-    togglebutton: index_js_41.default,
+    togglebutton: index_js_40.default,
     toggleswitch: toggleswitch_1.default,
     inputgroup: index_js_23.default,
     inputgroupaddon: index_js_24.default,
-    treeselect: index_js_44.default,
-    tristatecheckbox: index_js_45.default,
-    textarea: index_js_38.default,
+    treeselect: index_js_43.default,
+    tristatecheckbox: index_js_44.default,
+    textarea: index_js_37.default,
     password: index_js_33.default,
-    validatormessage: index_js_46.default,
+    validatormessage: index_js_45.default,
     fileupload: fileupload_1.default,
     fieldwrapper: fieldwrapper_1.default,
     // Buttons
@@ -103,8 +103,8 @@ var supplyasset = {
     paginator: index_js_32.default,
     datatable: index_js_15.default,
     customcolumn: index_js_14.default,
-    tree: index_js_43.default,
-    timeline: index_js_39.default,
+    tree: index_js_42.default,
+    timeline: index_js_38.default,
     changelog: index_js_11.default,
     // Panels
     accordion: index_js_1.default,
@@ -112,8 +112,8 @@ var supplyasset = {
     // Menu
     menu: index_js_28.default,
     steps: index_js_36.default,
-    breadcrumb: index_js_48.default,
-    tabmenu: index_js_37.default,
+    breadcrumb: index_js_47.default,
+    tabmenu: tabmenu_1.default,
     // Overlays
     dialog: index_js_16.default,
     dialogconfirm: index_js_17.default,
@@ -122,12 +122,12 @@ var supplyasset = {
     // Messages
     message: index_js_29.default,
     inlinemessage: index_js_21.default,
-    toast: index_js_40.default,
+    toast: index_js_39.default,
     // Media
     carousel: index_js_10.default,
     // Misc
     badge: index_js_2.default,
-    badgegroup: index_js_47.default,
+    badgegroup: index_js_46.default,
     image: index_js_20.default,
     loading: loading_1.default,
     codesnippet: index_js_13.default,