vueless 1.3.0 → 1.3.1-beta.1

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.3.0",
+  "version": "1.3.1-beta.1",
   "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.container-drawer/UDrawer.vue

@@ -314,9 +314,9 @@ const {
                 <!-- @slot Use it to add something before the header title. -->
                 <slot name="before-title" />
                 <!--
-                @slot Use it to add something to the left side of the header.
-                @binding {string} title
-              -->
+                  @slot Use it to add something to the left side of the header.
+                  @binding {string} title
+                -->
                 <slot name="title" :title="title">
                   <div v-bind="titleFallbackAttrs">
                     <UHeader :label="title" size="sm" v-bind="titleAttrs" />

package/ui.container-modal/UModal.vue

@@ -268,10 +268,10 @@ const {
             </div>
 
             <!--
-                @slot Use it to add something instead of the close button.
-                @binding {string} icon-name
-                @binding {function} close
-              -->
+              @slot Use it to add something instead of the close button.
+              @binding {string} icon-name
+              @binding {function} close
+            -->
             <slot name="actions" :icon-name="config.defaults.closeIcon" :close="closeModal">
               <UButton
                 v-if="closeOnCross"

package/ui.form-input/UInput.vue

@@ -176,7 +176,9 @@ function onKeydown(event: KeyboardEvent) {
   emit("keydown", event);
 }
 
-function onSlotClick() {
+function onSlotClick(event: MouseEvent) {
+  if (event.target !== event.currentTarget) return;
+
   inputRef.value?.focus();
 }
 

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

@@ -193,9 +193,9 @@ export const Slots: StoryFn<UInputArgs> = (args) => ({
   components: { UInput, URow, UDropdownButton, UText, UChip },
   setup() {
     const countryCodes = [
-      { label: "+33", id: "+33" },
-      { label: "+44", id: "+44" },
-      { label: "+49", id: "+49" },
+      { label: "+33", value: "+33" },
+      { label: "+44", value: "+44" },
+      { label: "+49", value: "+49" },
     ];
 
     const countryCode = ref("+33");

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 } }));
 }