vueless 0.0.140 → 0.0.142

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.140",
+  "version": "0.0.142",
   "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/composables/attrs.composable.js

@@ -28,7 +28,7 @@ export function useAttrs(props) {
         variant: props.variant,
         pill: props.pill,
         block: props.block,
-        square: props.square,
+        square: props.loading || props.square,
         filled: props.filled,
         loading: props.loading,
         disabled: props.disabled,
@@ -37,12 +37,22 @@ export function useAttrs(props) {
     ),
   );
 
-  const textClasses = computed(() => setColor(cvaText({ color: props.color }), props.color));
+  const textClasses = computed(() =>
+    setColor(
+      cvaText({
+        color: props.color,
+      }),
+      props.color,
+    ),
+  );
+
   const buttonAttrs = getAttrs("button", { classes: buttonClasses });
+  const loaderAttrs = getAttrs("loader");
   const textAttrs = getAttrs("text", { classes: textClasses });
 
   return {
-    textAttrs,
     buttonAttrs,
+    loaderAttrs,
+    textAttrs,
   };
 }

package/ui.button/configs/default.config.js

@@ -44,7 +44,7 @@ export default /*tw*/ {
         `,
       },
       loading: {
-        true: "pointer-events-none",
+        true: "pointer-events-none gap-0",
       },
       pill: {
         true: "rounded-full",

package/ui.button/index.vue

@@ -8,22 +8,28 @@
     v-bind="buttonAttrs"
     @click="onClick"
   >
-    <!-- @slot Use it to add something before text. -->
-    <slot v-if="!loading" name="left" />
-
-    <!-- @slot Use it to add something instead of text. -->
-    <slot v-if="!loading" />
-
-    <div v-if="label" v-bind="textAttrs" tabindex="-1" v-text="label" />
-    <ULoader v-if="loading" :size="size" color="white" />
-
-    <!-- @slot Use it to add something after text. -->
-    <slot v-if="!loading" name="right" />
+    <template v-if="loading">
+      <!-- Label is needed to prevent changing button height -->
+      <div v-bind="textAttrs" tabindex="-1" class="invisible w-0" v-text="label" />
+      <ULoader :size="loaderSize" :color="loaderColor" v-bind="loaderAttrs" />
+    </template>
+
+    <template v-else>
+      <!-- @slot Use it to add something before text. -->
+      <slot name="left" />
+
+      <!-- @slot Use it to add something instead of text. -->
+      <slot />
+      <div v-if="label" v-bind="textAttrs" tabindex="-1" v-text="label" />
+
+      <!-- @slot Use it to add something after text. -->
+      <slot name="right" />
+    </template>
   </component>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
 import UIService, { getRandomId } from "../service.ui";
 import ULoader from "../ui.loader";
@@ -155,12 +161,29 @@ const props = defineProps({
 
 const emit = defineEmits(["click"]);
 
-const { textAttrs, buttonAttrs } = useAttrs(props);
+const { buttonAttrs, loaderAttrs, textAttrs } = useAttrs(props);
 
 const buttonRef = ref(null);
 
 defineExpose({ buttonRef });
 
+const loaderSize = computed(() => {
+  const sizes = {
+    "2xs": "sm",
+    xs: "sm",
+    sm: "md",
+    md: "md",
+    lg: "lg",
+    xl: "lg",
+  };
+
+  return sizes[props.size];
+});
+
+const loaderColor = computed(() => {
+  return props.variant === "primary" ? "white" : props.color;
+});
+
 function onClick(event) {
   if (props.disabled) return;
 

package/ui.loader/configs/default.config.js

@@ -1,16 +1,16 @@
 export default /*tw*/ {
   loader: {
-    base: "relative mx-1 flex h-4 items-center",
+    base: "relative flex items-center",
     variants: {
       size: {
-        sm: "w-9",
-        md: "w-[3.625rem]",
-        lg: "w-20",
+        sm: "h-1.5 w-9",
+        md: "h-2.5 w-[3.625rem]",
+        lg: "h-4 w-20",
       },
     },
   },
   ellipse: {
-    base: `absolute rounded-full bg-{color}-500 ease-[cubic-bezier(0,1,1,0)]`,
+    base: "absolute rounded-full bg-{color}-600 ease-[cubic-bezier(0,1,1,0)]",
     variants: {
       color: {
         white: "bg-white",
@@ -18,30 +18,32 @@ export default /*tw*/ {
       },
       size: {
         sm: `
-            h-1.5 w-1.5
-            [&:nth-child(1)]:left-1
-            [&:nth-child(4)]:left-7
-          `,
+          h-1.5 w-1.5
+          [&:nth-child(1)]:left-1
+          [&:nth-child(2)]:left-1
+          [&:nth-child(3)]:left-4
+          [&:nth-child(4)]:left-7
+        `,
         md: `
-            h-2.5 w-2.5
-            [&:nth-child(1)]:left-1.5
-            [&:nth-child(2)]:left-1.5
-            [&:nth-child(3)]:left-6
-            [&:nth-child(4)]:left-[2.625rem]
-          `,
+          h-2.5 w-2.5
+          [&:nth-child(1)]:left-1.5
+          [&:nth-child(2)]:left-1.5
+          [&:nth-child(3)]:left-6
+          [&:nth-child(4)]:left-[2.625rem]
+        `,
         lg: `
-            h-4 w-4
-            [&:nth-child(1)]:left-2
-            [&:nth-child(2)]:left-2
-            [&:nth-child(3)]:left-8
-            [&:nth-child(4)]:left-14
-          `,
+          h-4 w-4
+          [&:nth-child(1)]:left-2
+          [&:nth-child(2)]:left-2
+          [&:nth-child(3)]:left-8
+          [&:nth-child(4)]:left-14
+        `,
       },
     },
   },
   defaultVariants: {
-    size: "md",
     color: "brand",
+    size: "md",
   },
-  safelist: (colors) => [{ pattern: `bg-(${colors})-500` }],
+  safelist: (colors) => [{ pattern: `bg-(${colors})-600` }],
 };

package/ui.loader/index.stories.js

@@ -34,14 +34,14 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <div class="flex gap-4 flex-wrap">
+    <URow class="flex-wrap">
       <ULoader
         v-for="(color, index) in colors"
         :color="color"
         v-bind="args"
         :key="index"
       />
-    </div>
+    </URow>
   `,
 });
 
@@ -57,25 +57,19 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
     <URow>
       <ULoader
         v-for="(size, index) in sizes"
-        :size="size"
-        :label="getText(size)"
-        v-bind="args"
         :key="index"
+        v-bind="args"
+        :size="size"
       />
     </URow>
   `,
-  methods: {
-    getText(value) {
-      return `Tag ${value}`;
-    },
-  },
 });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Colors = ColorsTemplate.bind({});
-Colors.args = {};
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
 
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = {};
+export const colors = ColorsTemplate.bind({});
+colors.args = {};

package/ui.loader/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div v-bind="loaderAttrs">
-    <div v-for="ellipse in ellipsesAmount" :key="ellipse" v-bind="ellipseAttrs(ellipseClasses)" />
+    <div v-for="ellipse in ELLIPSES_AMOUNT" :key="ellipse" v-bind="ellipseAttrs(ellipseClasses)" />
   </div>
 </template>
 
 <script setup>
-import { computed, ref } from "vue";
+import { computed } from "vue";
 import UIService from "../service.ui";
 
 import { ULoader } from "./constants";
@@ -17,7 +17,7 @@ defineOptions({ name: "ULoader", inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * The size of the button.
+   * Loader size.
    * @values sm, md, lg
    */
   size: {
@@ -35,7 +35,7 @@ const props = defineProps({
   },
 });
 
-const ellipsesAmount = ref(4);
+const ELLIPSES_AMOUNT = 4;
 
 const { loaderAttrs, ellipseAttrs } = useAttrs(props);
 

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.140",
+  "version": "0.0.142",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -4480,7 +4480,7 @@
           "attributes": [
             {
               "name": "size",
-              "description": "The size of the button.",
+              "description": "Loader size.",
               "value": {
                 "kind": "expression",
                 "type": "'sm' | 'md' | 'lg'"
@@ -5120,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",