vueless 0.0.168 → 0.0.170

package/directive.clickOutside/index.js

@@ -1,14 +1,22 @@
 import { unref } from "vue";
 
 function clickOutside(target, handler, options) {
-  const { capture = true } = options;
+  const { capture = true, ignore = [] } = options;
 
   let shouldListen = true;
 
+  const ignoreList = unref(ignore).map((item) => unref(item));
   const el = unref(target);
 
   function onClick(event) {
-    if (!el || el === event.target || event.composedPath().includes(el)) return;
+    if (
+      !el ||
+      el === event.target ||
+      event.composedPath().includes(el) ||
+      ignoreList.includes(event.target)
+    ) {
+      return;
+    }
 
     if (!shouldListen) {
       shouldListen = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.168",
+  "version": "0.0.170",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.form-calendar/components/DayView.vue

@@ -21,6 +21,7 @@
 <script setup>
 import { computed } from "vue";
 
+import { cx } from "../../service.ui";
 import { formatDate, dateIsOutOfRange } from "../services/calendar.service";
 import {
   isToday,
@@ -210,33 +211,40 @@ function getDay(date, dayNumber) {
 }
 
 function getDayClasses(day) {
+  const isDayInRange =
+    props.range &&
+    localSelectedDate.value &&
+    props.selectedDateTo &&
+    !dateIsOutOfRange(
+      day,
+      props.selectedDate,
+      props.selectedDateTo,
+      props.locale,
+      props.dateFormat,
+    );
+
   const isNotSelectedDate =
     (!isSelectedDay(day) && !isSelectedToDay(day)) || props.selectedDate === null;
 
   if (isToday(day) && isNotSelectedDate) {
-    return [currentDayAttrs.value.class];
+    return cx([isDayInRange && inRangeDayAttrs.value.class, currentDayAttrs.value.class]);
   }
 
   if (props.range && isSelectedDay(day)) {
-    return [
-      inRangeFirstDayAttrs.value.class,
+    return cx([
       isAnotherMothDay(day, activeMonthDate.value) && anotherMonthDayAttrs.value.class,
-    ];
+      inRangeFirstDayAttrs.value.class,
+    ]);
   }
 
   if (props.range && isSelectedToDay(day)) {
-    return [
-      inRangeLastDayAttrs.value.class,
+    return cx([
       isAnotherMothDay(day, activeMonthDate.value) && anotherMonthDayAttrs.value.class,
-    ];
+      inRangeLastDayAttrs.value.class,
+    ]);
   }
 
-  if (
-    props.range &&
-    localSelectedDate.value &&
-    props.selectedDateTo &&
-    !dateIsOutOfRange(day, props.selectedDate, props.selectedDateTo, props.locale, props.dateFormat)
-  ) {
+  if (isDayInRange) {
     return [inRangeDayAttrs.value.class];
   }
 

package/ui.form-calendar/index.stories.js

@@ -64,7 +64,7 @@ Timepicker.args = { value: new Date(2024, 2, 14, 12, 24, 14), timepicker: true }
 
 export const MinMax = DefaultTemplate.bind({});
 MinMax.args = {
-  minDate: "2022-02-22",
+  minDate: new Date(2022, 2, 22),
   maxDate: new Date(2022, 2, 26),
   value: new Date(2022, 2, 24),
 };

package/ui.form-calendar/index.vue

@@ -579,17 +579,23 @@ function onInputDate(newDate) {
     const isFullReset =
       localValue.value.to || !localValue.value.from || date <= localValue.value.from;
 
-    localValue.value = isFullReset
+    const updatedValue = isFullReset
       ? { from: date, to: null }
       : { from: localValue.value.from, to: date };
+
+    localValue.value = updatedValue;
+
+    emit("input", updatedValue);
   } else {
     localValue.value = date;
-  }
 
-  activeDate.value = null;
-  activeMonth.value = null;
+    emit("input", localValue.value);
+  }
 
-  emit("input", localValue.value);
+  if (!props.range) {
+    activeDate.value = null;
+    activeMonth.value = null;
+  }
 
   wrapperRef.value.focus();
 }

package/ui.form-date-picker-range/configs/default.config.js

@@ -102,7 +102,6 @@ export default /*tw*/ {
       },
     },
     day: "font-medium w-full h-10 text-sm mb-0.5",
-    currentDay: "text-white bg-brand-900 hover:bg-brand-900 hover:text-white",
     weekDay: "text-sm size-10",
     month: "font-medium",
     selectedMonth: "bg-zinc-100 text-brand-900 hover:text-white",
@@ -119,6 +118,8 @@ export default /*tw*/ {
     dateFormatWithDot: "Date should be in format 'dd.mm.yyyy'.",
     notCorrectMonthNumber: "Wrong month number.",
     notCorrectDayNumber: "Wrong day in month.",
+    fromDateGraterThanSecond: "The first date should be less than the second.",
+    toDateSmallerThanFirst: "The second date should be greater than the first.",
     weekdays: {
       shorthand: {
         sunday: "Sun",

package/ui.form-date-picker-range/index.vue

@@ -29,6 +29,7 @@
 
     <div v-if="isVariant.button" v-bind="buttonWrapperAttrs">
       <UButton
+        ref="buttonPrevRef"
         square
         :size="size"
         :disabled="disabled"
@@ -40,6 +41,7 @@
 
       <UButton
         :id="id"
+        ref="buttonRef"
         :size="size"
         :disabled="disabled"
         :label="userFormatDate"
@@ -48,6 +50,7 @@
       />
 
       <UButton
+        ref="buttonNextRef"
         square
         :size="size"
         :disabled="disabled"
@@ -62,11 +65,10 @@
       <div
         v-if="isShownMenu"
         ref="menuRef"
+        v-click-outside="[deactivate, clickOutsideOptions]"
         tabindex="-1"
         v-bind="menuAttrs"
-        @blur="onBlur"
         @keydown.esc="deactivate"
-        @mouseleave="onMouseoutMenu"
       >
         <div v-bind="periodsRowAttrs">
           <div
@@ -146,28 +148,26 @@
           <UInput
             ref="rangeInputStartRef"
             v-model="rangeStart"
-            :error="inputRangeStartError"
+            :error="inputRangeFromError"
             size="sm"
             v-bind="rangeInputAttrs"
             :name="rangeInputName"
             @input="onInputRangeInput($event, INPUT_RANGE_TYPE.start)"
-            @blur="onBlurRangeInput"
           />
 
           <UInput
             ref="rangeInputEndRef"
             v-model="rangeEnd"
-            :error="inputRangeEndError"
+            :error="inputRangeToError"
             size="sm"
             v-bind="rangeInputAttrs"
             :name="rangeInputName"
             @input="onInputRangeInput($event, INPUT_RANGE_TYPE.end)"
-            @blur="onBlurRangeInput"
           />
         </div>
 
         <div v-bind="inputRangeErrorAttrs">
-          {{ inputRangeEndError || inputRangeStartError }}
+          {{ inputRangeToError || inputRangeFromError }}
         </div>
 
         <UCalendar
@@ -179,6 +179,7 @@
           :date-format="dateFormat"
           range
           @mouseenter="onMouseoverCalendar"
+          @input="onInputCalendar"
         />
       </div>
     </Transition>
@@ -195,6 +196,8 @@ import UButton from "../ui.button";
 import UCalendar from "../ui.form-calendar";
 import { LOCALE_TYPE } from "../ui.form-calendar/constants";
 
+import vClickOutside from "../directive.clickOutside";
+
 import UIService, { getRandomId } from "../service.ui";
 
 import {
@@ -227,7 +230,11 @@ import {
   getMonthsDateList,
 } from "./services/dateRange.service";
 
-import { wrongDateFormat, wrongMonthNumber, wrongDayNumber } from "./services/validation.service";
+import {
+  isWrongDateFormat,
+  isWrongMonthNumber,
+  isWrongDayNumber,
+} from "./services/validation.service";
 import useAttrs from "./composables/attrs.composable";
 import { useLocale } from "../composable.locale";
 import useBreakpoint from "../composable.breakpoint";
@@ -395,6 +402,8 @@ const props = defineProps({
   },
 });
 
+const inputRangeFormat = "d.m.Y";
+
 const emit = defineEmits(["update:modelValue"]);
 
 const isShownMenu = ref(false);
@@ -402,6 +411,9 @@ const wrapperRef = ref(null);
 const menuRef = ref(null);
 const rangeInputStartRef = ref(null);
 const rangeInputEndRef = ref(null);
+const buttonRef = ref(null);
+const buttonPrevRef = ref(null);
+const buttonNextRef = ref(null);
 
 const { isTop, isRight, adjustPositionY, adjustPositionX } = useAdjustElementPosition(
   wrapperRef,
@@ -444,6 +456,10 @@ const i18nGlobal = tm(UDatePickerRange);
 
 const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
+const clickOutsideOptions = computed(() => ({
+  ignore: [buttonRef.value.buttonRef, buttonPrevRef.value.buttonRef, buttonNextRef.value.buttonRef],
+}));
+
 const locale = computed(() => {
   const { months, weekdays } = currentLocale.value;
 
@@ -470,9 +486,9 @@ const activeDate = ref(
 const period = ref(PERIOD.ownRange);
 const rangeStart = ref("");
 const rangeEnd = ref("");
-const inputRangeStartError = ref("");
-const inputRangeEndError = ref("");
-const isHoverEvent = ref(false);
+const inputRangeFromError = ref("");
+const inputRangeToError = ref("");
+const calendarInnerValue = ref({ from: "", to: "" });
 const periodDateList = ref(null);
 
 const { isMobileBreakpoint } = useBreakpoint();
@@ -611,9 +627,19 @@ const userFormatDate = computed(() => {
       startYear = "";
     }
 
-    const fromTitle = isSameMonth(from, to)
-      ? from.getDate()
-      : `${from.getDate()} ${startMonthName} ${startYear}`;
+    const isDatesToSameMonth = isSameMonth(from, to);
+    const isDatesToSameYear = from.getFullYear() === to.getFullYear();
+
+    let fromTitle = `${from.getDate()} ${startMonthName} ${startYear}`;
+
+    if (isDatesToSameMonth && isDatesToSameYear) {
+      fromTitle = from.getDate();
+    }
+
+    if (!isDatesToSameMonth && isDatesToSameYear) {
+      fromTitle = `${from.getDate()} ${startMonthName}`;
+    }
+
     const toTitle = to ? `${to.getDate()} ${endMonthName} ${endYear}` : "";
 
     title = `${fromTitle} – ${toTitle}`;
@@ -680,13 +706,15 @@ watch(
     const parsedDateTo = parseDate(props.modelValue.to, props.dateFormat, locale.value);
 
     rangeStart.value = props.modelValue.from
-      ? formatDate(parsedDateFrom, "d.m.Y", locale.value)
+      ? formatDate(parsedDateFrom, inputRangeFormat, locale.value)
       : "";
 
-    rangeEnd.value = props.modelValue.to ? formatDate(parsedDateTo, "d.m.Y", locale.value) : "";
+    rangeEnd.value = props.modelValue.to
+      ? formatDate(parsedDateTo, inputRangeFormat, locale.value)
+      : "";
 
-    inputRangeStartError.value = "";
-    inputRangeEndError.value = "";
+    inputRangeFromError.value = "";
+    inputRangeToError.value = "";
   },
   { deep: true, immediate: true },
 );
@@ -820,72 +848,75 @@ function activate() {
 
 function deactivate() {
   isShownMenu.value = false;
-
-  isHoverEvent.value = false;
 }
 
-function onBlur(event) {
-  const { relatedTarget } = event;
+function isGraterThanTo(value) {
+  if (!value) return false;
 
-  if (!menuRef.value?.contains(relatedTarget)) {
-    deactivate();
-  }
-}
+  const parsedValue = parseDate(value, inputRangeFormat, locale.value);
+  const parsedTo = parseDate(localValue.value.to, props.dateFormat, locale.value);
 
-function onBlurRangeInput(event) {
-  const { relatedTarget } = event;
-  const isRangeInputFocus = relatedTarget?.name === rangeInputName.value;
+  return parsedValue > parsedTo;
+}
 
-  if (!isRangeInputFocus) {
-    menuRef.value.focus();
-  }
+function isSmallerThanFrom(value) {
+  if (!value) return false;
 
-  if (!menuRef.value?.contains(relatedTarget) && !isHoverEvent.value) {
-    deactivate();
-  }
+  const parsedValue = parseDate(value, inputRangeFormat, locale.value);
+  const parsedFrom = parseDate(localValue.value.from, props.dateFormat, locale.value);
 
-  isHoverEvent.value = false;
+  return parsedValue < parsedFrom;
 }
 
 function onInputRangeInput(value, type) {
-  const isInvalidDateFormat = !wrongDateFormat(value);
-  const isInvalidMonthNumber = !wrongMonthNumber(value);
-  const isInvalidDayNumber = !wrongDayNumber(value);
+  const isInvalidDateFormat = isWrongDateFormat(value);
 
   let error = "";
 
   if (isInvalidDateFormat && value) {
     error = locale.value.dateFormatWithDot;
-  } else if (isInvalidMonthNumber && value) {
+  } else if (isWrongMonthNumber(value) && value) {
     error = locale.value.notCorrectMonthNumber;
-  } else if (isInvalidDayNumber && value) {
+  } else if (isWrongDayNumber(value) && value) {
     error = locale.value.notCorrectDayNumber;
+  } else if (isGraterThanTo(value) && type === INPUT_RANGE_TYPE.start) {
+    error = locale.value.fromDateGraterThanSecond;
+  } else if (isSmallerThanFrom(value) && type === INPUT_RANGE_TYPE.end) {
+    error = locale.value.toDateSmallerThanFirst;
   }
 
   if (type === INPUT_RANGE_TYPE.start) {
-    inputRangeStartError.value = error;
+    inputRangeFromError.value = error;
   }
 
   if (type === INPUT_RANGE_TYPE.end) {
-    inputRangeEndError.value = error;
+    inputRangeToError.value = error;
   }
 
-  const parsedValue = parseDate(value || new Date(), props.dateFormat, locale.value);
-  const isOutOfRange = dateIsOutOfRange(
-    parsedValue,
-    props.minDate,
-    props.maxDate,
-    locale.value,
-    props.dateFormat,
-  );
-  const isToLessThanFrom = parsedValue <= localValue.value.from;
+  if (!isInvalidDateFormat) {
+    const parsedValue = parseDate(value || new Date(), inputRangeFormat, locale.value);
 
-  if (type === INPUT_RANGE_TYPE.start && !error && !isOutOfRange) {
-    localValue.value.from = value ? parsedValue : "";
-  }
+    const isOutOfRange = dateIsOutOfRange(
+      parsedValue,
+      props.minDate,
+      props.maxDate,
+      locale.value,
+      props.dateFormat,
+    );
+
+    if (type === INPUT_RANGE_TYPE.start && !error && !isOutOfRange) {
+      localValue.value = {
+        from: value ? parsedValue : "",
+        to: localValue.value.to,
+      };
+    }
 
-  if (type === INPUT_RANGE_TYPE.end && !error && !isOutOfRange && !isToLessThanFrom) {
-    localValue.value.to = value ? parsedValue : "";
+    if (type === INPUT_RANGE_TYPE.end && !error && !isOutOfRange) {
+      localValue.value = {
+        from: localValue.value.from,
+        to: value ? parsedValue : "",
+      };
+    }
   }
 }
 
@@ -1009,26 +1040,25 @@ function onMouseoverCalendar() {
 
   if (isRangeInputFocus || !rangeInputStartRef.value || !rangeInputEndRef.value) return;
 
-  if ((rangeStart.value && rangeEnd.value && !inputRangeEndError.value) || !rangeStart.value) {
+  const hasValues =
+    calendarInnerValue.value.from && calendarInnerValue.value.to && !inputRangeToError.value;
+  const hasOnlyFromValue =
+    calendarInnerValue.value.from && !calendarInnerValue.value.to && !inputRangeFromError.value;
+
+  if (hasValues || !rangeStart.value) {
     rangeInputStartRef.value.input.focus();
 
     return;
   }
 
-  if (rangeStart.value && !rangeEnd.value && !inputRangeStartError.value) {
+  if (hasOnlyFromValue) {
     rangeInputEndRef.value.input.focus();
 
     return;
   }
 }
 
-function onMouseoutMenu() {
-  const isRangeInputFocus = document.activeElement.name === rangeInputName.value;
-
-  if (isRangeInputFocus) {
-    isHoverEvent.value = true;
-
-    document.activeElement.blur();
-  }
+function onInputCalendar(value) {
+  calendarInnerValue.value = value;
 }
 </script>

package/ui.form-date-picker-range/services/validation.service.js

@@ -1,22 +1,22 @@
 import { getDaysInMonth } from "../../ui.form-calendar/services/date.service";
 
-const DATE_WITH_DOT_FORMAT_REG_EXP = /^\d{2}([./-])\d{2}\1\d{4}$/;
+const datePattern = /^\d{1,2}\.\d{1,2}\.\d{4}$/;
 
-export function wrongDateFormat(value) {
-  return !!value.match(DATE_WITH_DOT_FORMAT_REG_EXP);
+export function isWrongDateFormat(value) {
+  return !datePattern.test(value);
 }
 
-export function wrongMonthNumber(value) {
+export function isWrongMonthNumber(value) {
   const splitDate = value.split(".");
   const month = splitDate[1];
 
-  return Number(month) >= 1 && Number(month) <= 12;
+  return !(Number(month) >= 1 && Number(month) <= 12);
 }
 
-export function wrongDayNumber(value) {
+export function isWrongDayNumber(value) {
   const [day, month, year] = value.split(".");
 
   const daysInMonth = getDaysInMonth(new Date(year, month - 1));
 
-  return Number(day) >= 1 && Number(day) <= Number(daysInMonth);
+  return !(Number(day) >= 1 && Number(day) <= Number(daysInMonth));
 }

package/ui.text-alert/composables/attrs.composable.js

@@ -28,6 +28,7 @@ export function useAttrs(props) {
       cvaWrapper({
         color: getColor(props.color),
         bordered: props.bordered,
+        variant: props.variant,
       }),
       props.color,
     ),
@@ -37,6 +38,9 @@ export function useAttrs(props) {
 
   const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
   const bodyAttrs = getAttrs("body", { classes: bodyClasses });
+  const titleAttrs = getAttrs("title");
+  const descriptionAttrs = getAttrs("description");
+
   const buttonAttrs = getAttrs("button", { isComponent: true });
   const iconAttrs = getAttrs("icon", { isComponent: true });
 
@@ -47,5 +51,7 @@ export function useAttrs(props) {
     buttonAttrs,
     iconAttrs,
     hasSlotContent,
+    titleAttrs,
+    descriptionAttrs,
   };
 }

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

@@ -1,19 +1,21 @@
 export default /*tw*/ {
   wrapper: {
-    base: "p-4 space-x-4 flex justify-between items-start rounded-lg bg-{color}-50 text-{color}-700",
+    base: "p-4 flex flex-col rounded-lg",
     variants: {
-      color: {
-        grayscale: "bg-gray-100 text-gray-900",
-      },
-      bordered: {
-        true: "border border-{color}-100",
+      variant: {
+        primary: `bg-{color}-500 text-white`,
+        secondary: `bg-transparent border border-{color}-500`,
+        thirdary: `bg-{color}-50 text-{color}-700`,
       },
     },
-    compoundVariants: [{ color: "grayscale", bordered: true, class: "border-gray-200" }],
+    compoundVariants: [
+      { color: "grayscale", bordered: true, class: "border-gray-200" },
+      { variant: "thirdary", bordered: true, class: "border border-{color}-100" },
+    ],
   },
   body: {
     base: `
-      space-y-4 font-normal leading-normal
+      flex gap-2 items-baseline font-normal
       [&_b]:font-bold [&_i]:italic [&_p]:font-normal
       [&_a:not([class])]:underline [&_a:not([class])]:underline-offset-4
       [&_a:not([class]):hover]:no-underline [&_a:not([class])]:font-bold
@@ -32,20 +34,25 @@ export default /*tw*/ {
       },
     },
   },
+  title: "font-bold text-lg leading-tight",
+  description: "text-sm",
   button: "",
   icon: "",
   iconName: "close",
   defaultVariants: {
-    color: "grayscale",
+    variant: "thirdary",
+    color: "brand",
     size: "md",
     timeout: 0,
     html: undefined,
     bordered: false,
-    closeIcon: false,
+    closable: false,
   },
   safelist: (colors) => [
     { pattern: `bg-(${colors})-50` },
+    { pattern: `bg-(${colors})-500` },
     { pattern: `text-(${colors})-700` },
     { pattern: `border-(${colors})-100` },
+    { pattern: `border-(${colors})-500` },
   ],
 };

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

@@ -2,6 +2,8 @@ import { getArgTypes, getSlotNames } from "../service.storybook";
 
 import UAlert from "../ui.text-alert";
 import URow from "../ui.container-row";
+import UGroup from "../ui.container-group";
+import UIcon from "../ui.image-icon";
 
 /**
  * The `UAlert` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.text-alert)
@@ -12,7 +14,7 @@ export default {
   component: UAlert,
   args: {
     text: "UHint",
-    slotTemplate: `
+    slotDefaultTemplate: `
       <template #default>
         <p>
           <b>Lorem ipsum dolor sit amet,</b>
@@ -30,19 +32,42 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UAlert },
+  components: { UAlert, UIcon },
   setup() {
     const slots = getSlotNames(UAlert.name);
 
     return { args, slots };
   },
   template: `
-    <UAlert v-bind="args">
-      ${args.slotTemplate || ""}
+    <UAlert v-bind="args" v-model="args.value">
+    ${args.slotDefaultTemplate}
+    ${args.slotTemplate || ""}
     </UAlert>
   `,
 });
 
+const VariantsTemplate = (args, { argTypes } = {}) => ({
+  components: { UAlert, UGroup },
+  setup() {
+    return {
+      args,
+      variants: argTypes.variant.options,
+    };
+  },
+  template: `
+    <UGroup>
+      <UAlert
+        v-for="(variant, index) in variants"
+        v-bind="args"
+        :variant="variant"
+        :key="index"
+        :title="variant"
+        color="gray"
+      />
+    </UGroup>
+  `,
+});
+
 const ColorsTemplate = (args, { argTypes } = {}) => ({
   components: { UAlert, URow },
   setup() {
@@ -57,10 +82,9 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
         v-for="(color, index) in colors"
         v-bind="args"
         :color="color"
+        :title="color"
         :key="index"
-      >
-        ${args.slotTemplate}
-      </UAlert>
+      />
     </URow>
   `,
 });
@@ -81,48 +105,60 @@ const SizeTemplate = (args, { argTypes } = {}) => ({
         :size="size"
         :key="index"
       >
-        ${args.slotTemplate}
+        text
       </UAlert>
     </URow>
   `,
 });
 
+const HTMLTemplate = (args) => ({
+  components: { UAlert },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UAlert :html="args.html"  />
+  `,
+});
+
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const variants = VariantsTemplate.bind({});
+variants.args = {};
+
 export const colors = ColorsTemplate.bind({});
-colors.args = {
-  closeIcon: true,
-  slotTemplate: `
-     <template #default>
-       text
-     </template>
-  `,
-};
+colors.args = {};
 
-export const size = SizeTemplate.bind({});
-size.args = {
-  closeIcon: true,
-  slotTemplate: `
-     <template #default>
-       text
-     </template>
+export const sizes = SizeTemplate.bind({});
+sizes.args = {};
+
+export const HTML = HTMLTemplate.bind({});
+HTML.args = {
+  html: `
+    <p>
+      <b>Lorem ipsum dolor sit amet,</b>
+      <u>consectetur adipiscing elit,</u>
+      <em>sed do eiusmod tempor incididunt
+      ut labore et dolore magna aliqua.</em>
+      <a href="https://uk.wikipedia.org/wiki/Lorem_ipsum" target="_blank">Wikipedia</a>
+    </p>
   `,
 };
 
-export const closeIcon = DefaultTemplate.bind({});
-closeIcon.args = {
-  closeIcon: true,
-  slotTemplate: `
-     <template #default>
-       some text
-     </template>
+export const closable = DefaultTemplate.bind({});
+closable.args = {
+  closable: true,
+  slotDefaultTemplate: `
+    <template #default>
+      some text
+    </template>
   `,
 };
 
 export const paragraphs = DefaultTemplate.bind({});
 paragraphs.args = {
-  slotTemplate: `
+  slotDefaultTemplate: `
     <template #default>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit,
@@ -141,8 +177,7 @@ paragraphs.args = {
 
 export const list = DefaultTemplate.bind({});
 list.args = {
-  slotTemplate: `
-    <template #default>
+  slotDefaultTemplate: `
       <URow>
         <ul>
           <li> Lorem ipsum dolor </li>
@@ -156,6 +191,65 @@ list.args = {
           <li> Lorem ipsum dolor </li>
         </ol>
       </URow>
-    </template>
     `,
 };
+
+export const slotTitleAndDescription = DefaultTemplate.bind({});
+slotTitleAndDescription.args = {
+  slotTemplate: `
+    <template #title>
+      <div>Alert Title</div>
+    </template>
+    <template #description>
+      <div>This is a custom description for the alert.</div>
+    </template>
+  `,
+};
+
+export const slotAlertLeft = DefaultTemplate.bind({});
+slotAlertLeft.args = {
+  slotTemplate: `
+    <template #left>
+      <UIcon
+        name="star"
+        color="gray"
+      />
+    </template>
+  `,
+};
+
+export const slotAlertRight = DefaultTemplate.bind({});
+slotAlertRight.args = {
+  slotTemplate: `
+    <template #right>
+        <UIcon
+        name="star"
+        color="gray"
+      />
+    </template>
+  `,
+};
+
+export const slotAlertTop = DefaultTemplate.bind({});
+slotAlertTop.args = {
+  slotTemplate: `
+    <template #top>
+      <UIcon
+        name="star"
+        color="gray"
+      />
+    </template>
+  `,
+};
+
+export const slotAlertBottom = DefaultTemplate.bind({});
+slotAlertBottom.args = {
+  slotTemplate: `
+    <template #bottom>
+      <UIcon
+        name="star"
+        color="gray"
+      />
+    </template>
+  `,
+};

package/ui.text-alert/index.vue

@@ -1,30 +1,51 @@
 <template>
   <div v-if="isShownAlert" :data-cy="dataCy" v-bind="wrapperAttrs">
+    <!-- @slot Use it to add something above text. -->
+    <slot name="top" />
+
+    <!-- Use it to add something instead of the title. -->
+    <slot name="title" :title="title">
+      <div v-bind="titleAttrs" v-text="title" />
+    </slot>
+
+    <!-- @slot Use it to add something instead of the description. -->
+    <slot name="description" :description="description">
+      <div v-bind="descriptionAttrs" v-text="description" />
+    </slot>
+
     <div v-bind="bodyAttrs">
-      <!-- @slot Use it to add something inside. -->
+      <!-- @slot Use it to add something before text. -->
+      <slot name="left" />
+
+      <!-- @slot Default slot. -->
       <slot />
+      <div v-if="!hasSlotContent($slots.default)" v-bind="bodyAttrs" v-html="html" />
 
-      <div v-if="!hasSlotContent($slots['default'])" v-html="html" />
+      <UButton
+        v-if="closable"
+        size="sm"
+        variant="thirdary"
+        :color="color"
+        square
+        v-bind="buttonAttrs"
+        @click="onClickClose"
+      >
+        <UIcon
+          internal
+          size="xs"
+          :color="color"
+          :name="config.iconName"
+          :data-cy="`${dataCy}-button`"
+          v-bind="iconAttrs"
+        />
+      </UButton>
+
+      <!-- @slot Use it to add something after text. -->
+      <slot name="right" />
     </div>
 
-    <UButton
-      v-if="closeIcon"
-      size="sm"
-      variant="thirdary"
-      :color="color"
-      square
-      v-bind="buttonAttrs"
-    >
-      <UIcon
-        internal
-        size="xs"
-        :color="color"
-        :name="config.iconName"
-        :data-cy="`${dataCy}-button`"
-        v-bind="iconAttrs"
-        @click="onHidden"
-      />
-    </UButton>
+    <!-- @slot Use it to add something under text. -->
+    <slot name="bottom" />
   </div>
 </template>
 
@@ -43,6 +64,15 @@ import { useAttrs } from "./composables/attrs.composable";
 defineOptions({ name: "UAlert" });
 
 const props = defineProps({
+  /**
+   * Alert variant.
+   * @values primary, secondary, thirdary
+   */
+  variant: {
+    type: String,
+    default: UIService.get(defaultConfig, UAlert).default.variant,
+  },
+
   /**
    * HTML or plain text.
    */
@@ -87,9 +117,9 @@ const props = defineProps({
   /**
    * Show close button.
    */
-  closeIcon: {
+  closable: {
     type: Boolean,
-    default: UIService.get(defaultConfig, UAlert).default.closeIcon,
+    default: UIService.get(defaultConfig, UAlert).default.closable,
   },
 
   /**
@@ -107,21 +137,46 @@ const props = defineProps({
     type: String,
     default: "",
   },
+
+  /**
+   * Alert title.
+   */
+  title: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Alert description.
+   */
+  description: {
+    type: String,
+    default: "",
+  },
 });
 
 const emit = defineEmits(["hidden"]);
 
 const isShownAlert = ref(true);
 
-const { config, wrapperAttrs, bodyAttrs, iconAttrs, buttonAttrs, hasSlotContent } = useAttrs(props);
+const {
+  config,
+  wrapperAttrs,
+  bodyAttrs,
+  titleAttrs,
+  descriptionAttrs,
+  iconAttrs,
+  buttonAttrs,
+  hasSlotContent,
+} = useAttrs(props);
 
 onMounted(() => {
   if (props.timeout > 0) {
-    setTimeout(() => onHidden(), props.timeout);
+    setTimeout(() => onClickClose(), props.timeout);
   }
 });
 
-function onHidden() {
+function onClickClose() {
   isShownAlert.value = false;
   emit("hidden");
 }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.168",
+  "version": "0.0.170",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -254,6 +254,15 @@
           "name": "UAlert",
           "description": "",
           "attributes": [
+            {
+              "name": "variant",
+              "description": "Alert variant.",
+              "value": {
+                "kind": "expression",
+                "type": "'primary' | 'secondary' | 'thirdary'"
+              },
+              "default": "thirdary"
+            },
             {
               "name": "html",
               "description": "HTML or plain text.",
@@ -278,7 +287,7 @@
                 "kind": "expression",
                 "type": "'brand' | 'grayscale' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white'"
               },
-              "default": "grayscale"
+              "default": "brand"
             },
             {
               "name": "bordered",
@@ -299,7 +308,7 @@
               "default": "0"
             },
             {
-              "name": "closeIcon",
+              "name": "closable",
               "description": "Show close button.",
               "value": {
                 "kind": "expression",
@@ -324,6 +333,24 @@
                 "type": "string"
               },
               "default": "\"\""
+            },
+            {
+              "name": "title",
+              "description": "Alert title.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
+            {
+              "name": "description",
+              "description": "Alert description.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
             }
           ],
           "events": [
@@ -332,9 +359,32 @@
             }
           ],
           "slots": [
+            {
+              "name": "top",
+              "description": "Use it to add something above text."
+            },
+            {
+              "name": "title"
+            },
+            {
+              "name": "description",
+              "description": "Use it to add something instead of the description."
+            },
+            {
+              "name": "left",
+              "description": "Use it to add something before text."
+            },
             {
               "name": "default",
-              "description": "Use it to add something inside."
+              "description": "Default slot."
+            },
+            {
+              "name": "right",
+              "description": "Use it to add something after text."
+            },
+            {
+              "name": "bottom",
+              "description": "Use it to add something under text."
             }
           ],
           "source": {