vueless 0.0.139 → 0.0.141

package/index.js

@@ -20,7 +20,7 @@ export {
   notifySuccess,
   notifyWarning,
   notifyError,
-  clearAllNotifications,
+  clearNotifications,
   setDelayedNotify,
   getDelayedNotify,
 } from "./ui.text-notify/services";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.139",
+  "version": "0.0.141",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -37,7 +37,7 @@
     "@release-it/bumper": "^6.0.1",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vueless/plugin-vite": "^0.0.25",
+    "@vueless/plugin-vite": "^0.0.27",
     "@vueless/storybook": "^0.0.27",
     "@vueless/web-types": "^0.0.8",
     "autoprefixer": "^10.4.19",

package/ui.button/index.vue

@@ -45,14 +45,6 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UButton).default.variant,
   },
 
-  /**
-   * Fill the background for thirdary variant.
-   */
-  filled: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UButton).default.filled,
-  },
-
   /**
    * Button color.
    * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
@@ -79,6 +71,22 @@ const props = defineProps({
     default: "",
   },
 
+  /**
+   * Allows changing button html tag.
+   */
+  tag: {
+    type: String,
+    default: UIService.get(defaultConfig, UButton).default.tag,
+  },
+
+  /**
+   * Fill the background for thirdary variant.
+   */
+  filled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UButton).default.filled,
+  },
+
   /**
    * Disable the button.
    */
@@ -136,11 +144,6 @@ const props = defineProps({
     default: () => ({}),
   },
 
-  tag: {
-    type: String,
-    default: UIService.get(defaultConfig, UButton).default.tag,
-  },
-
   /**
    * Data-cy attribute for automated testing.
    */

package/ui.text-notify/Docs.mdx

@@ -15,70 +15,74 @@ import defaultConfig from "./configs/default.config?raw"
 ## **Default config**
 <Source code={getSource(defaultConfig)} language="jsx" dark />
 
-## Trigger notifications
-You can trigger notification using *notify* method. Use *notifySuccess, notifyWarning, notifyError* methods to trigger notification of specific type.
+## Triggering notification
+You can trigger notification using `notify` method.
+Use `notifySuccess`, `notifyWarning`, `notifyError` shortcut methods to trigger notification of a specific type.
 
 <Source code={`
 import {
-    notify,
-    notifySuccess,
-    notifyWarning,
-    notifyError,
+  notify,
+  notifySuccess,
+  notifyWarning,
+  notifyError,
 } from "vueless";
 
 notify({
-    type: "success" // success, warning, error
-    title: "" // Some label
-    text: "" // Some text content
-    duration: 1000 // Duration in milliseconds
-    delayDuplicates: false // Delay notifications with same text
+  type: "success", // @values: success, warning, error
+  label: "Hurray!",
+  description: "The file successfully downloaded.",
+  duration: 1000, // in milliseconds
+  ignoreDuplicates: false // ignore notifications with the same 'description'
 });
 
-const durationInMilliseconds = 1000;
-
-notifySuccess("Some success text", durationInMilliseconds);
-notifyWarning("Some warning text", durationInMilliseconds);
-notifyError("Some error text", durationInMilliseconds);
+notifySuccess({ description: "The file successfully downloaded." });
+notifyWarning({ description: "The file have been downloaded, but some data is missing." });
+notifyError({ description: "The file can't be downloaded, please check the fields and try again." });
 `} language="jsx" dark />
 
-## Clear active notifications
-Use *clearAllNotifications* method to clear all active notifications.
+## Clear notifications
+Use `clearNotifications` method to clear active notifications.
 
 <Source code={`
-import { clearAllNotifications, notifySuccess } from "vueless";
+import { clearNotifications, notifySuccess } from "vueless";
 
-const durationInMilliseconds = 1000;
-notifySuccess("Some success text", durationInMilliseconds);
+notifySuccess({ description: "The file successfully downloaded." });
 
-clearAllNotifications();
+// and somewhere below
+clearNotifications();
 `} language="jsx" dark />
 
 ## Trigger notifications
-You can create delayed notification which you can trigger any time later.
+You can create a delayed notification which you can trigger any time later.
 
 <Source code={`
 import { setDelayedNotify, getDelayedNotify } from "vueless";
 
 setDelayedNotify({
-    type: "success" // success, warning, error
-    title: "" // Some label
-    text: "" // Some text content
-    duration: 1000 // Duration in milliseconds
-    delayDuplicates: false // Delay notifications with same text
+  type: "success", // @values: success, warning, error
+  label: "Hurray!",
+  description: "The file successfully downloaded.",
+  duration: 1000, // in milliseconds
+  ignoreDuplicates: false // ignore notifications with the same 'description'
 });
 
-setTimeout(getDelayedNotify, 10_000);
+// and somewhere below
+getDelayedNotify();
 `} language="jsx" dark />
 
-## Place notification relatively to navigation elements
-Provide *positionClasses* key for UNotify config to take navigation elements offset into account. 
-By default, it will be looking for UNotifyPage and UNotifyAside classes.
+## Align notification relatively to the layout
+Use `positionClasses` in UNotify config to align a notification component related to layout.
+* `page` – align UNotify inside an element with provided class (UNotifyPage is a default class name).
+* `aside` – add shift for aside width (UNotifyAside is a default class name).
 
 <Source code={`
-const notifyConfig = {
+{
+  ...
+  UNotify: {
     positionClasses: {
-        page: "UNotifyPage",
-        aside: "UNotifyAside",
+      page: "UNotifyPage",
+      aside: "UNotifyAside",
     },
+  }
 }
 `} language="jsx" dark />

package/ui.text-notify/configs/default.config.js

@@ -1,15 +1,22 @@
 export default /*tw*/ {
+  transitionGroup: {
+    moveClass: "transition-all duration-500",
+    enterActiveClass: "transition-all duration-500",
+    leaveActiveClass: "transition-all duration-500 absolute",
+    enterFromClass: "opacity-0",
+    leaveToClass: "opacity-0",
+  },
   wrapper: "absolute overflow-visible md:w-[22rem]",
   body: `
-    mb-3 flex w-fit items-center justify-center gap-3 rounded-2xl bg-gray-900/90 
+    mb-3 flex w-full items-center justify-center gap-3 rounded-2xl bg-gray-900/90
     p-4 shadow-[0_4px_16px_rgba(17,24,39,0.5)] backdrop-blur-md md:shadow-[0_0px_12px_rgba(0,0,0,0.25)]
   `,
   bodySuccess: "bg-[radial-gradient(100.16%_500.78%_at_0%_50%,rgba(74,222,128,0.1)_2.17%,transparent)]",
   bodyWarning: "bg-[radial-gradient(100.16%_500.78%_at_0%_50%,rgba(251,146,60,0.2)_2.17%,transparent)]",
   bodyError: "bg-[radial-gradient(100.16%_500.78%_at_0%_50%,rgba(251,113,133,0.2)_2.17%,transparent)]",
-  content: "w-full flex flex-col max-w-full px-3 text-sm text-gray-200",
-  label: "mb-1 font-medium",
-  description: "break-words font-normal leading-5",
+  content: "w-full flex flex-col max-w-full text-sm text-gray-200",
+  label: "mb-0.5 font-medium",
+  description: "break-words font-normal",
   successIcon: "",
   successIconName: "check_circle",
   warningIcon: "",
@@ -18,13 +25,6 @@ export default /*tw*/ {
   errorIconName: "error",
   closeIcon: "",
   closeIconName: "close",
-  transitionGroup: {
-    moveClass: "transition-all duration-500",
-    enterActiveClass: "transition-all duration-500",
-    leaveActiveClass: "transition-all duration-500 absolute",
-    enterFromClass: "opacity-0",
-    leaveToClass: "opacity-0",
-  },
   duration: {
     short: 4000,
     medium: 8000,
@@ -48,6 +48,5 @@ export default /*tw*/ {
   defaultVariants: {
     xPosition: "center",
     yPosition: "top",
-    vHtml: false,
   },
 };

package/ui.text-notify/constants/index.js

@@ -4,6 +4,8 @@
  */
 export const UNotify = "UNotify";
 
+export const LOCAL_STORAGE_ID = "vueless:notify";
+
 export const NOTIFY_TYPE = {
   success: "success",
   warning: "warning",
@@ -17,3 +19,11 @@ export const POSITION = {
   bottom: "bottom",
   center: "center",
 };
+
+export const DURATION = {
+  short: 4000,
+  medium: 8000,
+  long: 12000,
+};
+
+export const DELAY_BETWEEN_CLONES = 1000;

package/ui.text-notify/index.stories.js

@@ -2,6 +2,7 @@ import { notify } from "./services";
 
 import UNotify from "../ui.text-notify";
 import UButton from "../ui.button";
+import UGroup from "../ui.container-group";
 
 import { getArgTypes } from "../service.storybook";
 
@@ -12,14 +13,16 @@ export default {
   id: "4035",
   title: "Text & Content / Notify",
   component: UNotify,
-  args: {
-    type: "success",
-    label: "",
-    text: "",
-  },
   argTypes: {
     ...getArgTypes(UNotify.name),
   },
+  parameters: {
+    docs: {
+      story: {
+        height: "280px",
+      },
+    },
+  },
 };
 
 const DefaultTemplate = (args) => ({
@@ -28,45 +31,59 @@ const DefaultTemplate = (args) => ({
     return { args };
   },
   template: `
-    <div>
-      <UNotify v-bind="args" />
-
-      <UButton label="show notify" @click="onClick"/>
-    </div>
+    <UNotify class="m-4" v-bind="args" />
+    <UButton label="Show notify" @click="onClick"/>
  `,
-
   methods: {
     onClick() {
-      const settings = {
+      notify({
         type: "success",
-        label: "Some label",
-      };
-
-      notify(settings);
+        label: "Hurray!",
+        description: "The file successfully downloaded.",
+      });
     },
   },
 });
 
 const TypesTemplate = (args) => ({
-  components: { UNotify, UButton },
+  components: { UNotify, UButton, UGroup },
   setup() {
     return { args };
   },
   template: `
-    <div class="flex gap-4">
-      <UNotify />
+    <UNotify class="m-4" />
 
-      <UButton label="Success" @click="onClick('success')"/>
-      <UButton label="Warning" @click="onClick('warning')"/>
-      <UButton label="Error" @click="onClick('error')"/>
-    </div>
+    <UGroup>
+      <UButton label="Success" color="green" @click="onClick('success')"/>
+      <UButton label="Warning" color="orange" @click="onClick('warning')"/>
+      <UButton label="Error" color="red" @click="onClick('error')"/>
+    </UGroup>
  `,
-
   methods: {
     onClick(type) {
-      const settings = { type };
+      if (type === "success") {
+        notify({
+          type,
+          label: "Hurray!",
+          description: "The file successfully downloaded.",
+        });
+      }
+
+      if (type === "warning") {
+        notify({
+          type,
+          label: "Be aware!",
+          description: "The file have been downloaded, but some data is missing.",
+        });
+      }
 
-      notify(settings);
+      if (type === "error") {
+        notify({
+          type,
+          label: "Ooops!",
+          description: "The file can't be downloaded, please check the fields and try again.",
+        });
+      }
     },
   },
 });

package/ui.text-notify/index.vue

@@ -45,13 +45,20 @@
       />
 
       <div v-bind="contentAttrs">
-        <template v-if="vHtml">
+        <template v-if="html">
           <span v-bind="labelAttrs" v-html="notification.label" />
-          <span v-bind="descriptionAttrs" v-html="getText(notification.text, notification.type)" />
+          <span
+            v-bind="descriptionAttrs"
+            v-html="getText(notification.description, notification.type)"
+          />
         </template>
+
         <template v-else>
           <span v-bind="labelAttrs" v-text="notification.label" />
-          <span v-bind="descriptionAttrs" v-text="getText(notification.text, notification.type)" />
+          <span
+            v-bind="descriptionAttrs"
+            v-text="getText(notification.description, notification.type)"
+          />
         </template>
       </div>
 
@@ -106,11 +113,11 @@ const props = defineProps({
   },
 
   /**
-   * Use v-html to render notification label and description content.
+   * Use html to render you own content.
    */
-  vHtml: {
+  html: {
     type: Boolean,
-    default: UIService.get(defaultConfig, UNotify).default.vHtml,
+    default: UIService.get(defaultConfig, UNotify).default.html,
   },
 
   /**

package/ui.text-notify/services/index.js

@@ -1,89 +1,86 @@
 import { globalComponentConfig, getRandomId } from "../../service.ui";
+import { DELAY_BETWEEN_CLONES, DURATION, LOCAL_STORAGE_ID, NOTIFY_TYPE } from "../constants";
 
-import { NOTIFY_TYPE } from "../constants";
-
-const delayBetweenClones = 1000;
+const globalNotifyDuration = globalComponentConfig.UNotify?.duration;
+const notifyClearAllEvent = new Event("notifyClearAll");
 
 let lastMessageTime = undefined;
 let lastMessage = undefined;
 
-const defaultDuration = {
-  short: 4000,
-  medium: 8000,
-  long: 12000,
-};
+export function notify({ type, label, description, duration, ignoreDuplicates } = {}) {
+  const notifyDuration = duration || globalNotifyDuration?.short || DURATION.short;
 
-const notifyClearAllEvent = new Event("notifyClearAll");
+  const isSameMessage =
+    lastMessage === description && new Date() - lastMessageTime < DELAY_BETWEEN_CLONES;
 
-export function notify(settings) {
-  const { type, label, text, duration, delayDuplicates } = settings;
-  const currentNotifyDuration =
-    duration || globalComponentConfig.UNotify?.duration?.short || defaultDuration.short;
-  const isSameMessage = lastMessage === text && new Date() - lastMessageTime < delayBetweenClones;
-
-  if ((isSameMessage || !text) && delayDuplicates) {
+  if ((isSameMessage || !description) && ignoreDuplicates) {
     return;
   }
 
   lastMessageTime = new Date();
-  lastMessage = text;
+  lastMessage = description;
 
-  const detail = {
+  const eventDetail = {
     type,
     id: getRandomId(),
     label: label || "",
-    text: text || "",
-    duration: currentNotifyDuration,
+    description: description || "",
+    duration: notifyDuration,
   };
 
-  const notifyStart = new CustomEvent("notifyStart", { detail });
-  const notifyEnd = new CustomEvent("notifyEnd", { detail });
+  const notifyStart = new CustomEvent("notifyStart", { detail: eventDetail });
+  const notifyEnd = new CustomEvent("notifyEnd", { detail: eventDetail });
 
   window.dispatchEvent(notifyStart);
 
-  setTimeout(() => window.dispatchEvent(notifyEnd), currentNotifyDuration);
+  setTimeout(() => window.dispatchEvent(notifyEnd), notifyDuration);
 }
 
-export function notifySuccess(text, duration = globalComponentConfig.UNotify?.duration?.short) {
+export function notifySuccess({ label, description, duration, ignoreDuplicates } = {}) {
   notify({
+    label,
+    description,
+    ignoreDuplicates,
     type: NOTIFY_TYPE.success,
-    text,
-    duration,
+    duration: duration || globalNotifyDuration?.short || DURATION.short,
   });
 }
 
-export function notifyWarning(text, duration = globalComponentConfig.UNotify?.duration?.medium) {
+export function notifyWarning({ label, description, duration, ignoreDuplicates } = {}) {
   notify({
+    label,
+    description,
+    ignoreDuplicates,
     type: NOTIFY_TYPE.warning,
-    text,
-    duration,
+    duration: duration || globalNotifyDuration?.medium || DURATION.medium,
   });
 }
 
-export function notifyError(text, duration = globalComponentConfig.UNotify?.duration?.long) {
+export function notifyError({ label, description, duration, ignoreDuplicates } = {}) {
   notify({
+    label,
+    description,
+    ignoreDuplicates,
     type: NOTIFY_TYPE.error,
-    text,
-    duration,
+    duration: duration || globalNotifyDuration?.long || DURATION.long,
   });
 }
 
-export function clearAllNotifications() {
+export function clearNotifications() {
   window.dispatchEvent(notifyClearAllEvent);
 }
 
 export function setDelayedNotify(settings) {
-  localStorage.setItem("notify", JSON.stringify(settings));
+  localStorage.setItem(LOCAL_STORAGE_ID, JSON.stringify(settings));
 }
 
 export function getDelayedNotify() {
-  const notifyData = JSON.parse(localStorage.getItem("notify"));
+  const notifyData = JSON.parse(localStorage.getItem(LOCAL_STORAGE_ID));
 
-  clearAllNotifications();
+  clearNotifications();
 
   if (notifyData) {
     notify(notifyData);
-
-    localStorage.removeItem("notify");
+    localStorage.removeItem(LOCAL_STORAGE_ID);
   }
 }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.139",
+  "version": "0.0.141",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -553,15 +553,6 @@
               },
               "default": "primary"
             },
-            {
-              "name": "filled",
-              "description": "Fill the background for thirdary variant.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
             {
               "name": "color",
               "description": "Button color.",
@@ -589,6 +580,24 @@
               },
               "default": "\"\""
             },
+            {
+              "name": "tag",
+              "description": "Allows changing button html tag.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "button"
+            },
+            {
+              "name": "filled",
+              "description": "Fill the background for thirdary variant.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "disabled",
               "description": "Disable the button.",
@@ -652,14 +661,6 @@
               },
               "default": "{}"
             },
-            {
-              "name": "tag",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "button"
-            },
             {
               "name": "dataCy",
               "description": "Data-cy attribute for automated testing.",
@@ -5119,13 +5120,13 @@
               "default": "top"
             },
             {
-              "name": "vHtml",
-              "description": "Use v-html to render notification label and description content.",
+              "name": "html",
+              "description": "Use html to render you own content.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
-              "default": "false"
+              "default": "UIService.get(defaultConfig, UNotify).default.html"
             },
             {
               "name": "config",