vueless 1.2.15-beta.9 → 1.3.1-beta.0

package/icons/internal/info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M450.37-277.37h65.26V-520h-65.26v242.63ZM480-590.41q15.55 0 26.07-10.23 10.52-10.24 10.52-25.36 0-16.24-10.52-26.92-10.51-10.67-26.05-10.67-15.81 0-26.21 10.67-10.4 10.68-10.4 26.8 0 15.27 10.52 25.49 10.52 10.22 26.07 10.22Zm.3 516.39q-84.2 0-158.04-31.88-73.84-31.88-129.16-87.2-55.32-55.32-87.2-129.2-31.88-73.88-31.88-158.17 0-84.28 31.88-158.2 31.88-73.91 87.16-128.74 55.28-54.84 129.18-86.82 73.9-31.99 158.21-31.99 84.3 0 158.25 31.97 73.94 31.97 128.75 86.77 54.82 54.8 86.79 128.88 31.98 74.08 31.98 158.33 0 84.24-31.99 158.07-31.98 73.84-86.82 128.95-54.83 55.1-128.87 87.17Q564.5-74.02 480.3-74.02Zm.2-68.13q140.54 0 238.95-98.75 98.4-98.76 98.4-239.6 0-140.54-98.22-238.95-98.21-98.4-239.75-98.4-140.16 0-238.95 98.22-98.78 98.21-98.78 239.75 0 140.16 98.75 238.95 98.76 98.78 239.6 98.78ZM480-480Z"/></svg>

package/index.d.ts

@@ -43,6 +43,7 @@ export {
   notify,
   notifySuccess,
   notifyWarning,
+  notifyInfo,
   notifyError,
   clearNotifications,
   setDelayedNotify,

package/index.ts

@@ -49,6 +49,7 @@ export {
   notify,
   notifySuccess,
   notifyWarning,
+  notifyInfo,
   notifyError,
   clearNotifications,
   setDelayedNotify,

package/locales/en.json

@@ -1 +1 @@
-{"USelect":{"listIsEmpty":"List is empty.","noDataToShow":"No data to show.","clear":"clear","addMore":"Add more..."},"USwitch":{"switch":"Switch","inactive":"Off","active":"On"},"UInputFile":{"sizeError":"File size is too big.","formatError":"Format is not supported.","noFile":"No file selected","uploadFile":"Choose file"},"UListbox":{"noDataToShow":"No data to show.","add":"Add","search":"Search..."},"UModalConfirm":{"confirm":"Confirm","cancel":"Cancel"},"UTable":{"noData":"There is no data in the table.","checkbox":"Checkbox"},"UCalendar":{"today":"Today","yesterday":"Yesterday","tomorrow":"Tomorrow","weekdays":{"shorthand":{"sunday":"Sun","monday":"Mon","tuesday":"Tue","wednesday":"Wed","thursday":"Thu","friday":"Fri","saturday":"Sat"},"longhand":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"},"userFormat":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"}},"months":{"shorthand":{"january":"Jan","february":"Feb","march":"Mar","april":"Apr","may":"May","june":"Jun","july":"Jul","august":"Aug","september":"Sep","october":"Oct","november":"Nov","december":"Dec"},"longhand":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"},"userFormat":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"}},"timeLabel":"Time","okLabel":"Ok","previousYear":"Previous Year","nextYear":"Next Year","previousMonth":"Previous Month","nextMonth":"Next Month"},"UDatePicker":{"today":"Today","yesterday":"Yesterday","tomorrow":"Tomorrow","weekdays":{"shorthand":{"sunday":"Sun","monday":"Mon","tuesday":"Tue","wednesday":"Wed","thursday":"Thu","friday":"Fri","saturday":"Sat"},"longhand":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"},"userFormat":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"}},"months":{"shorthand":{"january":"Jan","february":"Feb","march":"Mar","april":"Apr","may":"May","june":"Jun","july":"Jul","august":"Aug","september":"Sep","october":"Oct","november":"Nov","december":"Dec"},"longhand":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"},"userFormat":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"}},"timeLabel":"Time","okLabel":"Ok","previousYear":"Previous Year","nextYear":"Next Year","previousMonth":"Previous Month","nextMonth":"Next Month"},"UDatePickerRange":{"ownRange":"Own range","week":"Week","month":"Month","quarter":"Quarter","year":"Year","dateFormatWithDot":"The date should be in format 'dd.mm.yyyy'.","notCorrectMonthNumber":"Wrong month number.","notCorrectDayNumber":"Wrong day in month.","fromDateGraterThanSecond":"The 'from' date should be less than the 'to' date.","toDateSmallerThanFirst":"The 'to' date should be greater than the 'from' date.","today":"Today","yesterday":"Yesterday","tomorrow":"Tomorrow","weekdays":{"shorthand":{"sunday":"Sun","monday":"Mon","tuesday":"Tue","wednesday":"Wed","thursday":"Thu","friday":"Fri","saturday":"Sat"},"longhand":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"},"userFormat":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"}},"months":{"shorthand":{"january":"Jan","february":"Feb","march":"Mar","april":"Apr","may":"May","june":"Jun","july":"Jul","august":"Aug","september":"Sep","october":"Oct","november":"Nov","december":"Dec"},"longhand":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"},"userFormat":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"}}},"UDataList":{"emptyTitle":"","emptyDescription":"There is no data in the list."},"UNotify":{"success":{"default":"Operation successful."},"warning":{"default":"Operation warning."},"error":{"default":"Operation error."}}}
+{"USelect":{"listIsEmpty":"List is empty.","noDataToShow":"No data to show.","clear":"clear","addMore":"Add more..."},"USwitch":{"switch":"Switch","inactive":"Off","active":"On"},"UInputFile":{"sizeError":"File size is too big.","formatError":"Format is not supported.","noFile":"No file selected","uploadFile":"Choose file"},"UListbox":{"noDataToShow":"No data to show.","add":"Add","search":"Search..."},"UModalConfirm":{"confirm":"Confirm","cancel":"Cancel"},"UTable":{"noData":"There is no data in the table.","checkbox":"Checkbox"},"UCalendar":{"today":"Today","yesterday":"Yesterday","tomorrow":"Tomorrow","weekdays":{"shorthand":{"sunday":"Sun","monday":"Mon","tuesday":"Tue","wednesday":"Wed","thursday":"Thu","friday":"Fri","saturday":"Sat"},"longhand":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"},"userFormat":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"}},"months":{"shorthand":{"january":"Jan","february":"Feb","march":"Mar","april":"Apr","may":"May","june":"Jun","july":"Jul","august":"Aug","september":"Sep","october":"Oct","november":"Nov","december":"Dec"},"longhand":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"},"userFormat":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"}},"timeLabel":"Time","okLabel":"Ok","previousYear":"Previous Year","nextYear":"Next Year","previousMonth":"Previous Month","nextMonth":"Next Month"},"UDatePicker":{"today":"Today","yesterday":"Yesterday","tomorrow":"Tomorrow","weekdays":{"shorthand":{"sunday":"Sun","monday":"Mon","tuesday":"Tue","wednesday":"Wed","thursday":"Thu","friday":"Fri","saturday":"Sat"},"longhand":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"},"userFormat":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"}},"months":{"shorthand":{"january":"Jan","february":"Feb","march":"Mar","april":"Apr","may":"May","june":"Jun","july":"Jul","august":"Aug","september":"Sep","october":"Oct","november":"Nov","december":"Dec"},"longhand":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"},"userFormat":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"}},"timeLabel":"Time","okLabel":"Ok","previousYear":"Previous Year","nextYear":"Next Year","previousMonth":"Previous Month","nextMonth":"Next Month"},"UDatePickerRange":{"ownRange":"Own range","week":"Week","month":"Month","quarter":"Quarter","year":"Year","dateFormatWithDot":"The date should be in format 'dd.mm.yyyy'.","notCorrectMonthNumber":"Wrong month number.","notCorrectDayNumber":"Wrong day in month.","fromDateGraterThanSecond":"The 'from' date should be less than the 'to' date.","toDateSmallerThanFirst":"The 'to' date should be greater than the 'from' date.","today":"Today","yesterday":"Yesterday","tomorrow":"Tomorrow","weekdays":{"shorthand":{"sunday":"Sun","monday":"Mon","tuesday":"Tue","wednesday":"Wed","thursday":"Thu","friday":"Fri","saturday":"Sat"},"longhand":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"},"userFormat":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"}},"months":{"shorthand":{"january":"Jan","february":"Feb","march":"Mar","april":"Apr","may":"May","june":"Jun","july":"Jul","august":"Aug","september":"Sep","october":"Oct","november":"Nov","december":"Dec"},"longhand":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"},"userFormat":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"}}},"UDataList":{"emptyTitle":"","emptyDescription":"There is no data in the list."},"UNotify":{"success":{"default":"Operation successful."},"warning":{"default":"Operation warning."},"error":{"default":"Operation error."},"info":{"default":"Information."}}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.15-beta.9",
+  "version": "1.3.1-beta.0",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/ui.dropdown-badge/storybook/stories.ts

@@ -283,9 +283,9 @@ DefaultSlot.args = {
   round: true,
   toggleIcon: false,
   options: [
-    { label: "Change avatar", id: "avatar" },
-    { label: "Profile settings", id: "settings" },
-    { label: "Delete profile", id: "delete" },
+    { label: "Change avatar", value: "avatar" },
+    { label: "Profile settings", value: "settings" },
+    { label: "Delete profile", value: "delete" },
   ],
   slotTemplate: `
     <template #default>
@@ -345,7 +345,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -353,7 +353,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -361,7 +361,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -369,7 +369,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',
@@ -388,7 +388,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -396,7 +396,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -404,7 +404,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -412,7 +412,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',
@@ -442,7 +442,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -450,7 +450,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -458,7 +458,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -466,7 +466,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',

package/ui.dropdown-button/storybook/stories.ts

@@ -185,9 +185,9 @@ export const NoCloseOnSelect = SelectableTemplate.bind({});
 NoCloseOnSelect.args = {
   modelValue: "pending",
   options: [
-    { label: "Active", id: "active" },
-    { label: "Pending", id: "pending" },
-    { label: "Archived", id: "archived" },
+    { label: "Active", value: "active" },
+    { label: "Pending", value: "pending" },
+    { label: "Archived", value: "archived" },
   ],
   closeOnSelect: false,
 };
@@ -197,9 +197,9 @@ OptionSelection.args = {
   label: "Select status",
   modelValue: "active",
   options: [
-    { label: "Active", id: "active" },
-    { label: "Pending", id: "pending" },
-    { label: "Archived", id: "archived" },
+    { label: "Active", value: "active" },
+    { label: "Pending", value: "pending" },
+    { label: "Archived", value: "archived" },
   ],
 };
 
@@ -209,9 +209,9 @@ MultipleOptionSelection.args = {
   modelValue: ["active", "pending", "archived"],
   multiple: true,
   options: [
-    { label: "Active", id: "active" },
-    { label: "Pending", id: "pending" },
-    { label: "Archived", id: "archived" },
+    { label: "Active", value: "active" },
+    { label: "Pending", value: "pending" },
+    { label: "Archived", value: "archived" },
   ],
 };
 
@@ -303,9 +303,9 @@ DefaultSlot.args = {
   toggleIcon: false,
   square: true,
   options: [
-    { label: "Change avatar", id: "avatar" },
-    { label: "Profile settings", id: "settings" },
-    { label: "Delete profile", id: "delete" },
+    { label: "Change avatar", value: "avatar" },
+    { label: "Profile settings", value: "settings" },
+    { label: "Delete profile", value: "delete" },
   ],
   slotTemplate: `
     <template #default>
@@ -408,7 +408,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -416,7 +416,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -424,7 +424,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -432,7 +432,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',
@@ -462,7 +462,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -470,7 +470,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -478,7 +478,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -486,7 +486,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',

package/ui.dropdown-link/storybook/stories.ts

@@ -331,7 +331,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -339,7 +339,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -347,7 +347,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -355,7 +355,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',
@@ -374,7 +374,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -382,7 +382,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -390,7 +390,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -398,7 +398,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',
@@ -428,7 +428,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -436,7 +436,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -444,7 +444,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -452,7 +452,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',

package/ui.form-checkbox-group/storybook/stories.ts

@@ -33,9 +33,9 @@ export default {
   args: {
     label: "Select your preferred communication methods:",
     options: [
-      { label: "Email Notifications", id: "email" },
-      { label: "SMS Alerts", id: "sms" },
-      { label: "Push Notifications", id: "push" },
+      { label: "Email Notifications", value: "email" },
+      { label: "SMS Alerts", value: "sms" },
+      { label: "Push Notifications", value: "push" },
     ],
   },
   argTypes: {
@@ -121,7 +121,7 @@ Options.args = {
     { label: "String", value: "Subscribed" },
     { label: "Number", value: 42 },
     { label: "Boolean", value: true },
-    { label: "Object", value: { id: 101, status: "active" } },
+    { label: "Object", value: { value: 101, status: "active" } },
     { label: "Array", value: ["Admin", "Editor"] },
   ],
 };

package/ui.form-radio-group/storybook/stories.ts

@@ -29,9 +29,9 @@ export default {
   args: {
     label: "Select your preferred delivery option:",
     options: [
-      { id: "standard", label: "Standard Shipping (3-5 business days)" },
-      { id: "express", label: "Express Shipping (1-2 business days)" },
-      { id: "pickup", label: "In-Store Pickup (Available same day)" },
+      { value: "standard", label: "Standard Shipping (3-5 business days)" },
+      { value: "express", label: "Express Shipping (1-2 business days)" },
+      { value: "pickup", label: "In-Store Pickup (Available same day)" },
     ],
   },
   argTypes: {
@@ -103,7 +103,7 @@ Options.args = {
     { label: "String", value: "Subscribed" },
     { label: "Number", value: 42 },
     { label: "Boolean", value: true },
-    { label: "Object", value: { id: 101, status: "active" } },
+    { label: "Object", value: { value: 101, status: "active" } },
     { label: "Array", value: ["Admin", "Editor"] },
   ],
 };

package/ui.form-select/storybook/stories.ts

@@ -39,11 +39,11 @@ export default {
     label: "Choose a city",
     modelValue: null,
     options: [
-      { label: "New York", id: 1 },
-      { label: "Los Angeles", id: 2 },
-      { label: "Chicago", id: 3 },
-      { label: "Houston", id: 4 },
-      { label: "San Francisco", id: 5 },
+      { label: "New York", value: 1 },
+      { label: "Los Angeles", value: 2 },
+      { label: "Chicago", value: 3 },
+      { label: "Houston", value: 4 },
+      { label: "San Francisco", value: 5 },
     ],
   },
   argTypes: {
@@ -181,7 +181,7 @@ Sizes.args = { enum: "size", multiple: true, modelValue: [], label: "{enumValue}
 export const LargeItemList = DefaultTemplate.bind({});
 LargeItemList.args = {
   options: [...new Array(1000)].map((_, index) => {
-    return { id: index + 1, label: `value ${index + 1}`, badge: "badge" };
+    return { value: index + 1, label: `value ${index + 1}`, badge: "badge" };
   }),
 };
 
@@ -272,16 +272,16 @@ AddOption.parameters = {
 export const OptionSettings = DefaultTemplate.bind({});
 OptionSettings.args = {
   options: [
-    { label: "1. New York", id: "1" },
-    { label: "2. Los Angeles", id: "2", isHidden: true },
+    { label: "1. New York", value: "1" },
+    { label: "2. Los Angeles", value: "2", isHvalueden: true },
     {
       label: "3. Chicago",
-      id: "3",
+      value: "3",
       onClick: (option) =>
         alert("onClick function for the third option: " + JSON.stringify(option)),
     },
-    { label: "4. Houston", id: "4" },
-    { label: "5. San Francisco", id: "5" },
+    { label: "4. Houston", value: "4" },
+    { label: "5. San Francisco", value: "5" },
   ],
 };
 OptionSettings.parameters = {
@@ -298,17 +298,17 @@ export const IconProps: StoryFn<USelectArgs> = (args) => ({
   components: { USelect, URow },
   setup() {
     const levelOptions = [
-      { label: "Awesome", id: "1" },
-      { label: "Good", id: "2" },
-      { label: "Could be better", id: "3" },
-      { label: "Terrible", id: "4" },
+      { label: "Awesome", value: "1" },
+      { label: "Good", value: "2" },
+      { label: "Could be better", value: "3" },
+      { label: "Terrible", value: "4" },
     ];
 
     const roleOptions = [
-      { label: "Admin", id: "1" },
-      { label: "CEO", id: "2" },
-      { label: "Manager", id: "3" },
-      { label: "Guest", id: "4" },
+      { label: "Admin", value: "1" },
+      { label: "CEO", value: "2" },
+      { label: "Manager", value: "3" },
+      { label: "Guest", value: "4" },
     ];
 
     return { args, levelOptions, roleOptions };
@@ -342,10 +342,10 @@ export const Slots: StoryFn<USelectArgs> = (args) => ({
         v-model="leftSlotModel"
         label="Select Payment Method"
         :options="[
-          { label: 'Visa', id: 'visa', icon: 'credit_card', details: '•••• 4242' },
-          { label: 'PayPal', id: 'paypal', icon: 'payments', details: 'user@example.com' },
-          { label: 'Bank Transfer', id: 'bank', icon: 'account_balance', details: 'Acct **** 1234' },
-          { label: 'Apple Pay', id: 'apple', icon: 'phone_iphone', details: 'iPhone 15' },
+          { label: 'Visa', value: 'visa', icon: 'credit_card', details: '•••• 4242' },
+          { label: 'PayPal', value: 'paypal', icon: 'payments', details: 'user@example.com' },
+          { label: 'Bank Transfer', value: 'bank', icon: 'account_balance', details: 'Acct **** 1234' },
+          { label: 'Apple Pay', value: 'apple', icon: 'phone_iphone', details: 'iPhone 15' },
         ]"
       >
         <template #left="{ options }">
@@ -362,10 +362,10 @@ export const Slots: StoryFn<USelectArgs> = (args) => ({
         v-model="rightSlotModel"
         label="Select Payment Method"
         :options="[
-          { label: 'Visa', id: 'visa', icon: 'credit_card', details: '•••• 4242' },
-          { label: 'PayPal', id: 'paypal', icon: 'payments', details: 'user@example.com' },
-          { label: 'Bank Transfer', id: 'bank', icon: 'account_balance', details: 'Acct **** 1234' },
-          { label: 'Apple Pay', id: 'apple', icon: 'phone_iphone', details: 'iPhone 15' },
+          { label: 'Visa', value: 'visa', icon: 'credit_card', details: '•••• 4242' },
+          { label: 'PayPal', value: 'paypal', icon: 'payments', details: 'user@example.com' },
+          { label: 'Bank Transfer', value: 'bank', icon: 'account_balance', details: 'Acct **** 1234' },
+          { label: 'Apple Pay', value: 'apple', icon: 'phone_iphone', details: 'iPhone 15' },
         ]"
       >
         <template #right="{ options }">
@@ -398,9 +398,9 @@ export const ToggleSlots: StoryFn<USelectArgs> = (args) => ({
         v-model="beforeToggleModel"
         label="Before Toggle Slot"
         :options="[
-          { label: 'John Doe', id: '1' },
-          { label: 'Jane Smith', id: '2' },
-          { label: 'Mike Johnson', id: '3' },
+          { label: 'John Doe', value: '1' },
+          { label: 'Jane Smith', value: '2' },
+          { label: 'Mike Johnson', value: '3' },
         ]"
       >
         <template #before-toggle>
@@ -416,9 +416,9 @@ export const ToggleSlots: StoryFn<USelectArgs> = (args) => ({
         v-model="toggleModel"
         label="Toggle Slot"
         :options="[
-          { label: 'High', id: 'high' },
-          { label: 'Medium', id: 'medium' },
-          { label: 'Low', id: 'low' }
+          { label: 'High', value: 'high' },
+          { label: 'Medium', value: 'medium' },
+          { label: 'Low', value: 'low' }
         ]"
       >
         <template #toggle="{ opened }">
@@ -435,9 +435,9 @@ export const ToggleSlots: StoryFn<USelectArgs> = (args) => ({
         v-model="afterToggleModel"
         label="After Toggle Slot"
         :options="[
-          { label: 'In Progress', id: 'in_progress' },
-          { label: 'Done', id: 'done' },
-          { label: 'Blocked', id: 'blocked' }
+          { label: 'In Progress', value: 'in_progress' },
+          { label: 'Done', value: 'done' },
+          { label: 'Blocked', value: 'blocked' }
         ]"
       >
         <template #after-toggle>
@@ -470,10 +470,10 @@ export const SelectedOptionsSlots: StoryFn<USelectArgs> = (args) => ({
         v-model="args.selectedOption"
         label="Selected option slot"
         :options="[
-          { label: 'Paris', id: '1', icon: 'flight' },
-          { label: 'Venice', id: '2', icon: 'sailing' },
-          { label: 'Rome', id: '3', icon: 'directions_car' },
-          { label: 'Milan', id: '4', icon: 'directions_bike' },
+          { label: 'Paris', value: '1', icon: 'flight' },
+          { label: 'Venice', value: '2', icon: 'sailing' },
+          { label: 'Rome', value: '3', icon: 'directions_car' },
+          { label: 'Milan', value: '4', icon: 'directions_bike' },
         ]"
       >
         <template #selected-option="{ option }">
@@ -492,10 +492,10 @@ export const SelectedOptionsSlots: StoryFn<USelectArgs> = (args) => ({
         v-model="args.selectedOptions"
         label="Selected options slot"
         :options="[
-          { label: 'Paris', id: '1', icon: 'flight' },
-          { label: 'Venice', id: '2', icon: 'sailing' },
-          { label: 'Rome', id: '3', icon: 'directions_car' },
-          { label: 'Milan', id: '4', icon: 'directions_bike' },
+          { label: 'Paris', value: '1', icon: 'flight' },
+          { label: 'Venice', value: '2', icon: 'sailing' },
+          { label: 'Rome', value: '3', icon: 'directions_car' },
+          { label: 'Milan', value: '4', icon: 'directions_bike' },
         ]"
         multiple
       >
@@ -568,7 +568,7 @@ export const OptionSlots: StoryFn<USelectArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -576,7 +576,7 @@ export const OptionSlots: StoryFn<USelectArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -584,7 +584,7 @@ export const OptionSlots: StoryFn<USelectArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -592,7 +592,7 @@ export const OptionSlots: StoryFn<USelectArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',
@@ -611,7 +611,7 @@ export const OptionSlots: StoryFn<USelectArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -619,7 +619,7 @@ export const OptionSlots: StoryFn<USelectArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -627,7 +627,7 @@ export const OptionSlots: StoryFn<USelectArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -635,7 +635,7 @@ export const OptionSlots: StoryFn<USelectArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',
@@ -665,7 +665,7 @@ export const OptionSlots: StoryFn<USelectArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -673,7 +673,7 @@ export const OptionSlots: StoryFn<USelectArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -681,7 +681,7 @@ export const OptionSlots: StoryFn<USelectArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -689,7 +689,7 @@ export const OptionSlots: StoryFn<USelectArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',

package/ui.text-notify/UNotify.vue

@@ -132,6 +132,10 @@ function getBodyAttrs(type: Notification["type"]) {
   if (type === NotificationType.Error) {
     return bodyErrorAttrs.value;
   }
+
+  if (type === NotificationType.Info) {
+    return bodyInfoAttrs.value;
+  }
 }
 
 defineExpose({
@@ -153,12 +157,14 @@ const {
   bodySuccessAttrs,
   bodyWarningAttrs,
   bodyErrorAttrs,
+  bodyInfoAttrs,
   contentAttrs,
   labelAttrs,
   descriptionAttrs,
   successIconAttrs,
   warningIconAttrs,
   errorIconAttrs,
+  infoIconAttrs,
   closeIconAttrs,
 } = useUI<Config>(defaultConfig);
 </script>
@@ -201,6 +207,14 @@ const {
         v-bind="errorIconAttrs"
       />
 
+      <UIcon
+        v-else-if="notification.type === NotificationType.Info"
+        :data-test="getDataTest('type-info')"
+        size="md"
+        :name="config.defaults.infoIcon"
+        v-bind="infoIconAttrs"
+      />
+
       <div v-bind="contentAttrs">
         <span v-bind="labelAttrs" v-text="notification.label" />
         <span

package/ui.text-notify/config.ts

@@ -14,6 +14,7 @@ export default /*tw*/ {
   bodySuccess: "{>body} bg-radial-[circle_at_0%_50%] from-success/25 from-2.17% to-transparent",
   bodyWarning: "{>body} bg-radial-[circle_at_0%_50%] from-warning/25 from-2.17% to-transparent",
   bodyError: "{>body} bg-radial-[circle_at_0%_50%] from-error/25 from-2.17% to-transparent",
+  bodyInfo: "{>body} bg-radial-[circle_at_0%_50%] from-info/25 from-2.17% to-transparent",
   content: "w-full flex flex-col max-w-full text-medium text-inverted",
   label: "mb-0.5 font-medium",
   description: "break-words font-normal",
@@ -21,6 +22,7 @@ export default /*tw*/ {
   successIcon: "{UIcon} {>statusIcon} text-success",
   warningIcon: "{UIcon} {>statusIcon} text-warning",
   errorIcon: "{UIcon} {>statusIcon} text-error",
+  infoIcon: "{UIcon} {>statusIcon} text-info",
   closeIcon: "{UIcon} !text-inverted opacity-75",
   positionClasses: {
     page: "UNotifyPage",
@@ -36,6 +38,9 @@ export default /*tw*/ {
     error: {
       default: "Operation error.",
     },
+    info: {
+      default: "Information.",
+    },
   },
   defaults: {
     xPosition: "center",
@@ -44,6 +49,7 @@ export default /*tw*/ {
     successIcon: "check_circle",
     warningIcon: "warning",
     errorIcon: "error",
+    infoIcon: "info",
     closeIcon: "close",
   },
 };

package/ui.text-notify/constants.ts

@@ -9,6 +9,7 @@ export enum NotificationType {
   Success = "success",
   Warning = "warning",
   Error = "error",
+  Info = "info",
 }
 
 export enum NotificationPosition {

package/ui.text-notify/storybook/docs.mdx

@@ -17,13 +17,14 @@ import defaultConfig from "../config?raw"
 
 ## Triggering notification
 You can trigger notification using `notify` method.
-Use `notifySuccess`, `notifyWarning`, `notifyError` shortcut methods to trigger notification of a specific type.
+Use `notifySuccess`, `notifyWarning`, `notifyInfo`, `notifyError` shortcut methods to trigger notification of a specific type.
 
 <Source code={`
 import {
     notify,
     notifySuccess,
     notifyWarning,
+    notifyInfo,
     notifyError,
 } from "vueless";
 
@@ -37,6 +38,7 @@ notify({
 
 notifySuccess({ description: "The file successfully downloaded." });
 notifyWarning({ description: "The file has been downloaded, but some data is missing." });
+notifyInfo({ description: "Starting download..." });
 notifyError({ description: "The file can't be downloaded, please check the fields and try again." });
 `} language="jsx" dark />
 

package/ui.text-notify/storybook/stories.ts

@@ -10,6 +10,7 @@ import {
   notifySuccess,
   notifyWarning,
   notifyError,
+  notifyInfo,
   clearNotifications,
   setDelayedNotify,
   getDelayedNotify,
@@ -64,7 +65,7 @@ const DefaultTemplate: StoryFn<UNotifyArgs> = (args: UNotifyArgs) => ({
 
 const TypesTemplate: StoryFn<UNotifyArgs> = (args: UNotifyArgs) => ({
   components: { UNotify, UButton, UCol },
-  setup: () => ({ args, notify, notifyWarning, notifyError }),
+  setup: () => ({ args, notify, notifyWarning, notifyError, notifyInfo }),
   template: `
     <UNotify class="m-4" notify-id="type" />
 
@@ -96,6 +97,15 @@ const TypesTemplate: StoryFn<UNotifyArgs> = (args: UNotifyArgs) => ({
           notifyId: 'type'
         })"
       />
+      <UButton
+        label="Info"
+        color="info"
+        @click="notifyInfo({
+          label: 'Information',
+          description: 'Downloading file...',
+          notifyId: 'type'
+        })"
+      />
     </UCol>
   `,
 });
@@ -175,7 +185,7 @@ Types.parameters = {
     description: {
       story: `
 Control the predefined notification type using the \`type\` parameter in the \`notify\` function
-<b>OR</b> using \`notifySuccess\`, \`notifyWarning\`, \`notifyError\` shortcut methods
+<b>OR</b> using \`notifySuccess\`, \`notifyWarning\`, \`notifyError\`, \`notifyInfo\` shortcut methods
 to trigger notification of a specific type.
       `,
     },

package/ui.text-notify/tests/UNotify.test.ts

@@ -262,6 +262,26 @@ describe("UNotify.vue", () => {
 
       expect(errorIcon).toBeDefined();
     });
+
+    // Info notification
+    it("renders info notification with correct icon", async () => {
+      const component = mountWithLocale();
+
+      dispatchNotifyEvent("notifyStart", {
+        ...mockNotification,
+        type: NotificationType.Info,
+      });
+      await component.vm.$nextTick();
+
+      const icons = component.findAllComponents(UIcon);
+
+      expect(icons.length).toBeGreaterThan(0);
+
+      // Find the info icon by its name prop
+      const infoIcon = icons.find((icon) => icon.props("name") === "info");
+
+      expect(infoIcon).toBeDefined();
+    });
   });
 
   // Exposed refs tests

package/ui.text-notify/utilNotify.ts

@@ -133,6 +133,23 @@ export function notifyError({
   });
 }
 
+export function notifyInfo({
+  label,
+  description,
+  duration,
+  ignoreDuplicates,
+  notifyId,
+}: Omit<NotifyConfig, "type"> = {}): void {
+  notify({
+    label,
+    description,
+    ignoreDuplicates,
+    type: NotificationType.Info,
+    duration: duration || globalNotifyDuration?.medium || NotificationDuration.Medium,
+    notifyId,
+  });
+}
+
 export function clearNotifications(notifyId?: string): void {
   window.dispatchEvent(new CustomEvent("notifyClearAll", { detail: { notifyId } }));
 }