vueless 0.0.568 → 0.0.569

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.568",
+  "version": "0.0.569",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.form-calendar/UCalendar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="TModelValue extends DateValue">
-import { computed, ref, watch, useTemplateRef } from "vue";
+import { computed, ref, watch, useTemplateRef, onMounted } from "vue";
 import { merge } from "lodash-es";
 
 import UButton from "../ui.button/UButton.vue";
@@ -195,7 +195,7 @@ const userFormatLocale = computed(() => {
 
   // formatted locale
   return {
-    ...currentLocale,
+    ...currentLocale.value,
     months: {
       shorthand: getSortedLocale(months.shorthand, LocaleType.Month),
       longhand: getSortedLocale(monthsLonghand, LocaleType.Month),
@@ -333,31 +333,19 @@ watch(
   },
 );
 
-let isInit = false;
-
-const unwatchInit = watch(
-  () => selectedDate.value,
-  () => {
-    if (isInit) unwatchInit();
-
-    if (selectedDate.value && isTimepickerEnabled.value && isInputRefs.value && props.timepicker) {
-      hoursRef.value!.value = String(selectedDate.value.getHours()).padStart(2, "0");
-      minutesRef.value!.value = String(selectedDate.value.getMinutes()).padStart(2, "0");
-      secondsRef.value!.value = String(selectedDate.value.getSeconds()).padStart(2, "0");
+onMounted(() => {
+  if (selectedDate.value && isTimepickerEnabled.value && isInputRefs.value && props.timepicker) {
+    hoursRef.value!.value = String(selectedDate.value.getHours()).padStart(2, "0");
+    minutesRef.value!.value = String(selectedDate.value.getMinutes()).padStart(2, "0");
+    secondsRef.value!.value = String(selectedDate.value.getSeconds()).padStart(2, "0");
 
-      emit("userDateChange", userFormattedDate.value);
-
-      isInit = true;
-    }
-
-    if (selectedDate.value) {
-      emit("userDateChange", userFormattedDate.value);
+    emit("userDateChange", userFormattedDate.value);
+  }
 
-      isInit = true;
-    }
-  },
-  { deep: true, immediate: true },
-);
+  if (selectedDate.value) {
+    emit("userDateChange", userFormattedDate.value);
+  }
+});
 
 function getCurrentValueType(value: DateValue): DateValue {
   if (props.range && value === null) {
@@ -543,6 +531,7 @@ function enterKeyHandler() {
     activeMonth.value = null;
 
     emit("input", localValue.value);
+    emit("submit");
   }
 
   if (isCurrentView.value.month) currentView.value = View.Day;

package/ui.form-calendar/config.ts

@@ -70,6 +70,9 @@ export default /*tw*/ {
   timepickerInputSeconds: "{>timepickerInput} rounded-r-dynamic",
   timepickerSubmitButton: "{UButton} py-2 border-0",
   i18n: {
+    today: "Today,",
+    yesterday: "Yesterday,",
+    tomorrow: "Tomorrow,",
     weekdays: {
       shorthand: {
         sunday: "Sun",

package/ui.form-calendar/constants.ts

@@ -4,8 +4,6 @@
  */
 export const UCalendar = "UCalendar";
 
-export const STANDARD_USER_FORMAT = "j F, Y";
-
 export const YEARS_PER_VIEW = 12;
 export const MONTHS_PER_VIEW = 12;
 export const START_WEEK = 1;

package/ui.form-calendar/useAttrs.ts

@@ -1,6 +1,6 @@
 import useUI from "../composables/useUI.ts";
 
-import defaultConfig from "./config.js";
+import defaultConfig from "./config.ts";
 
 import type { UseAttrs } from "../types.ts";
 import type { UCalendarProps, Config } from "./types.ts";

package/ui.form-calendar/utilCalendar.ts

@@ -49,7 +49,7 @@ export function isNumeric(char: string | number) {
   return /^\d+$/.test(String(char));
 }
 
-export function parseDate<TLocale>(
+export function parseDate<TLocale extends DateLocale>(
   date: Date | string | null,
   format: string = "Y-m-d H:i:S",
   locale: TLocale,
@@ -96,7 +96,7 @@ export function parseDate<TLocale>(
   return parsedDate;
 }
 
-export function parseStringDate<TLocale>(
+export function parseStringDate<TLocale extends DateLocale>(
   dateString: string,
   format = "Y-m-d H:i:S",
   locale: TLocale,
@@ -108,6 +108,14 @@ export function parseStringDate<TLocale>(
   } else {
     let parsedDate = new Date(new Date().getFullYear(), 0, 1, 0, 0, 0, 0);
 
+    const isRelativeDay = [locale.tomorrow, locale.today, locale.tomorrow].some((word) => {
+      return dateString.toLowerCase().includes(word.toLowerCase());
+    });
+
+    if (!isRelativeDay) {
+      format = format.replaceAll("r", "").trim();
+    }
+
     let matched;
     const operations: Operation[] = [];
 
@@ -130,20 +138,19 @@ export function parseStringDate<TLocale>(
       } else if (!isBackSlash) {
         regexStr += ".";
       }
+    }
 
-      operations.forEach((op) => {
-        const { fn } = op;
-        const { val } = op;
+    operations.forEach((operation) => {
+      const { fn, val } = operation;
 
-        parsedDate = (fn(parsedDate, String(val), locale as DateLocale) || parsedDate) as Date;
-      });
-    }
+      parsedDate = (fn(parsedDate, String(val), locale as DateLocale) || parsedDate) as Date;
+    });
 
     return matched ? parsedDate : undefined;
   }
 }
 
-export function dateIsOutOfRange<TLocale>(
+export function dateIsOutOfRange<TLocale extends DateLocale>(
   date: Date,
   min: Date | string | undefined,
   max: Date | string | undefined,

package/ui.form-calendar/utilFormatting.ts

@@ -1,3 +1,5 @@
+import { addDays, isSameDay } from "./utilDate";
+
 export interface DateLocale {
   weekdays: {
     shorthand: string[];
@@ -9,6 +11,9 @@ export interface DateLocale {
     longhand: string[];
     userFormat?: unknown;
   };
+  today: string;
+  tomorrow: string;
+  yesterday: string;
 }
 
 const pad = (number: number, length = 2) => `000${number}`.slice(length * -1);
@@ -21,27 +26,41 @@ export const monthToStr = (monthNumber: number, shorthand: boolean, locale: Date
 
 export const revFormat = {
   D: doNothing,
-  F(dateObj: Date, monthName: string, locale: DateLocale) {
-    dateObj.setMonth(locale.months.longhand.indexOf(monthName));
+
+  F: (dateObj: Date, monthName: string, locale: DateLocale) => {
+    const monthIndex = locale.months.longhand.findIndex((longMonth) => {
+      return longMonth.toLowerCase().trim() === monthName.toLowerCase().trim();
+    });
+
+    dateObj.setMonth(monthIndex);
   },
+
   G: (dateObj: Date, hour: number | string) => {
     dateObj.setHours(parseFloat(String(hour)));
   },
+
   H: (dateObj: Date, hour: number | string) => {
     dateObj.setHours(parseFloat(String(hour)));
   },
+
   J: (dateObj: Date, day: number | string) => {
     dateObj.setDate(parseFloat(String(day)));
   },
-  M(dateObj: Date, shortMonth: string, locale: DateLocale) {
-    dateObj.setMonth(locale.months.shorthand.indexOf(shortMonth));
+
+  M: (dateObj: Date, monthName: string, locale: DateLocale) => {
+    const monthIndex = locale.months.shorthand.findIndex((shortMonth) => {
+      return shortMonth.toLowerCase().trim() === monthName.toLowerCase().trim();
+    });
+
+    dateObj.setMonth(monthIndex);
   },
   S: (dateObj: Date, seconds: number | string) => {
     dateObj.setSeconds(parseFloat(String(seconds)));
   },
+
   U: (_: unknown, unixSeconds: string | number) => new Date(parseFloat(String(unixSeconds)) * 1000),
 
-  W(dateObj: Date, weekNum: number | string) {
+  W: (dateObj: Date, weekNum: number | string) => {
     const weekNumber = parseInt(String(weekNum), 10);
     const date = new Date(dateObj.getFullYear(), 0, 2 + (weekNumber - 1) * 7, 0, 0, 0, 0);
 
@@ -49,6 +68,7 @@ export const revFormat = {
 
     return date;
   },
+
   Y: (dateObj: Date, year: number | string) => {
     dateObj.setFullYear(parseFloat(String(year)));
   },
@@ -57,31 +77,42 @@ export const revFormat = {
   d: (dateObj: Date, day: number | string) => {
     dateObj.setDate(parseFloat(String(day)));
   },
+
   h: (dateObj: Date, hour: number | string) => {
     dateObj.setHours(parseFloat(String(hour)));
   },
+
   i: (dateObj: Date, minutes: number | string) => {
     dateObj.setMinutes(parseFloat(String(minutes)));
   },
+
   j: (dateObj: Date, day: number | string) => {
     dateObj.setDate(parseFloat(String(day)));
   },
+
   l: doNothing,
+
   m: (dateObj: Date, month: number | string) => {
     dateObj.setMonth(parseFloat(String(month)) - 1);
   },
+
   n: (dateObj: Date, month: number | string) => {
     dateObj.setMonth(parseFloat(String(month)) - 1);
   },
+
   s: (dateObj: Date, seconds: number | string) => {
     dateObj.setSeconds(parseFloat(String(seconds)));
   },
+
   u: (_: unknown, unixMillSeconds: number | string) =>
     new Date(parseFloat(String(unixMillSeconds))),
   w: doNothing,
+
   y: (dateObj: Date, year: number | string) => {
     dateObj.setFullYear(2000 + parseFloat(String(year)));
   },
+
+  r: doNothing,
 };
 
 export const formats = {
@@ -89,17 +120,17 @@ export const formats = {
   Z: (date: Date) => date.toISOString(),
 
   // weekday name, short, e.g. Thu
-  D(date: Date, locale: DateLocale) {
+  D: (date: Date, locale: DateLocale) => {
     return locale.weekdays.shorthand[formats.w(date)];
   },
 
   // full month name e.g. January
-  F(date: Date, locale: DateLocale) {
+  F: (date: Date, locale: DateLocale) => {
     return monthToStr(formats.n(date) - 1, false, locale);
   },
 
   // padded hour 1-12
-  G(date: Date) {
+  G: (date: Date) => {
     return pad(formats.h(date));
   },
 
@@ -107,7 +138,7 @@ export const formats = {
   H: (date: Date) => pad(date.getHours()),
 
   // shorthand month e.g. Jan, Sep, Oct, etc
-  M(date: Date, locale: DateLocale) {
+  M: (date: Date, locale: DateLocale) => {
     return monthToStr(date.getMonth(), true, locale);
   },
 
@@ -117,7 +148,7 @@ export const formats = {
   // unix timestamp
   U: (date: Date) => date.getTime() / 1000,
 
-  W(date: Date) {
+  W: (date: Date) => {
     // return options.getWeek(date);
     const localDate = new Date(date.getTime());
 
@@ -154,7 +185,7 @@ export const formats = {
   j: (date: Date) => date.getDate(),
 
   // weekday name, full, e.g. Thursday
-  l(date: Date, locale: DateLocale) {
+  l: (date: Date, locale: DateLocale) => {
     return locale.weekdays.longhand[date.getDay()];
   },
 
@@ -175,4 +206,25 @@ export const formats = {
 
   // last two digits of year e.g. 16 for 2016
   y: (date: Date) => String(date.getFullYear()).substring(2),
+
+  r: (date: Date, locale: DateLocale) => {
+    const today = new Date();
+    const isToday = isSameDay(today, date);
+    const isYesterday = isSameDay(addDays(today, -1), date);
+    const isTomorrow = isSameDay(addDays(today, 1), date);
+
+    if (isToday) {
+      return `${locale.today}`;
+    }
+
+    if (isYesterday) {
+      return `${locale.yesterday}`;
+    }
+
+    if (isTomorrow) {
+      return `${locale.tomorrow}`;
+    }
+
+    return "";
+  },
 };

package/ui.form-date-picker/UDatePicker.vue

@@ -5,22 +5,25 @@ import { merge } from "lodash-es";
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UInput from "../ui.form-input/UInput.vue";
 import UCalendar from "../ui.form-calendar/UCalendar.vue";
-import { View, STANDARD_USER_FORMAT } from "../ui.form-calendar/constants.js";
+import { View, LocaleType, ARROW_KEYS, TOKEN_REG_EXP } from "../ui.form-calendar/constants.ts";
 
 import { getDefault } from "../utils/ui.ts";
 
-import { addDays, isSameDay } from "../ui.form-calendar/utilDate.js";
-import { parseDate } from "../ui.form-calendar/utilCalendar.ts";
+import { getSortedLocale } from "../ui.form-calendar/utilDate.ts";
+import { formatDate, parseDate } from "../ui.form-calendar/utilCalendar.ts";
 
 import useAttrs from "./useAttrs.js";
 import { useLocale } from "../composables/useLocale.ts";
 import { useAutoPosition } from "../composables/useAutoPosition.ts";
 
-import defaultConfig from "./config.js";
-import { UDatePicker } from "./constants.js";
+import defaultConfig from "./config.ts";
+import { UDatePicker } from "./constants.ts";
+
+import { vClickOutside } from "../directives";
 
 import type { UDatePickerProps } from "./types.ts";
 import type { ComponentExposed } from "../types.ts";
+import type { DateLocale } from "../ui.form-calendar/utilFormatting.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -65,6 +68,7 @@ const userFormatDate = ref("");
 const formattedDate = ref("");
 const customView = ref(View.Day);
 
+const datepickerInputRef = useTemplateRef<typeof UInput>("input");
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 const calendarRef = useTemplateRef<ComponentExposed<typeof UCalendar>>("calendar");
 
@@ -84,6 +88,25 @@ const localValue = computed({
 
 const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
+const clickOutsideOptions = computed(() => ({ ignore: [datepickerInputRef.value?.inputRef] }));
+
+const locale = computed(() => {
+  const { months, weekdays } = currentLocale.value;
+
+  // formatted locale
+  return {
+    ...currentLocale.value,
+    months: {
+      shorthand: getSortedLocale(months.shorthand, LocaleType.Month),
+      longhand: getSortedLocale(months.longhand, LocaleType.Month),
+    },
+    weekdays: {
+      shorthand: getSortedLocale(weekdays.shorthand, LocaleType.Day),
+      longhand: getSortedLocale(weekdays.longhand, LocaleType.Day),
+    },
+  } as DateLocale;
+});
+
 const elementId = props.id || useId();
 
 const { config, datepickerInputAttrs, datepickerInputActiveAttrs, calendarAttrs, wrapperAttrs } =
@@ -98,8 +121,6 @@ function activate() {
   nextTick(() => {
     adjustPositionY();
     adjustPositionX();
-
-    calendarRef.value?.wrapperRef?.focus();
   });
 }
 
@@ -110,53 +131,93 @@ function deactivate() {
 }
 
 function onUserFormatDateChange(value: string) {
-  userFormatDate.value = formatUserDate(value) || "";
+  userFormatDate.value = value.trim();
 }
 
 function onSubmit() {
   deactivate();
 }
 
-function onBlur(event: FocusEvent) {
-  const { relatedTarget } = event;
-
-  if (!calendarRef?.value?.wrapperRef?.contains(relatedTarget as HTMLElement)) deactivate();
+function onInput() {
+  nextTick(() => {
+    deactivate();
+    emit("input", localValue.value);
+  });
 }
 
-function formatUserDate(data: string) {
-  if (props.userDateFormat !== STANDARD_USER_FORMAT || props.timepicker) return data;
-
-  let prefix = "";
-  const formattedDate = data.charAt(0).toUpperCase() + data.toLowerCase().slice(1);
-  const formattedDateWithoutDay = formattedDate.split(",").slice(1).join("").trim();
-
-  const today = new Date();
-
-  const parsedLocalDate = parseDate(localValue.value, props.dateFormat, currentLocale.value);
-  const isToday = parsedLocalDate && isSameDay(today, parsedLocalDate);
-  const isYesterday = parsedLocalDate && isSameDay(addDays(today, -1), parsedLocalDate);
-  const isTomorrow = parsedLocalDate && isSameDay(addDays(today, 1), parsedLocalDate);
-
-  if (isToday) {
-    prefix = currentLocale.value.today;
+function onTextInput() {
+  if (datepickerInputRef.value?.inputRef) {
+    datepickerInputRef.value.inputRef.value = userFormatDate.value;
   }
+}
 
-  if (isYesterday) {
-    prefix = currentLocale.value.yesterday;
+function onPaste(event: ClipboardEvent) {
+  try {
+    const pasteContent = event.clipboardData ? event.clipboardData.getData("text/plain") : "";
+    const userFormat = props.timepicker ? props.userDateTimeFormat : props.userDateFormat;
+    const relativeTokensAmount = Number(userFormat.match(/(?<!\\)r/g)?.length);
+
+    // Amount of tokens used in format string without decimeters.
+    const tokensAmount = userFormat
+      .split("")
+      .filter((char) => Object.keys(TOKEN_REG_EXP).includes(char)).length;
+
+    // Amount of substring that satisfies format tokens.
+    let pastedTokensAmount = pasteContent
+      .replace(/[^a-zA-Z0-9]/g, " ")
+      .replace(/\s+/g, " ")
+      .trim()
+      .split(" ").length;
+
+    const isPastedRelativeDay = [
+      locale.value.tomorrow,
+      locale.value.today,
+      locale.value.tomorrow,
+    ].some((word) => {
+      return pasteContent.includes(word);
+    });
+
+    if (isPastedRelativeDay) {
+      pastedTokensAmount -= relativeTokensAmount;
+    }
+
+    if (pastedTokensAmount !== tokensAmount) return;
+
+    const parsedDate = parseDate(pasteContent, userFormat, locale.value);
+
+    if (parsedDate) {
+      localValue.value = (
+        props.dateFormat ? formatDate(parsedDate, props.dateFormat, locale.value) : parsedDate
+      ) as TModelValue;
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.log(error);
   }
+}
 
-  if (isTomorrow) {
-    prefix = currentLocale.value.tomorrow;
+function onCopy(event: ClipboardEvent) {
+  const target = event.target as HTMLInputElement;
+
+  const cursorStart = target.selectionStart || 0;
+  const cursorEnd = target.selectionEnd || 0;
+
+  try {
+    if (cursorStart !== cursorEnd) {
+      navigator.clipboard.writeText(target.value.substring(cursorStart, cursorEnd));
+    } else {
+      navigator.clipboard.writeText(target.value);
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
   }
-
-  return prefix ? `${prefix}, ${formattedDateWithoutDay}` : formattedDate;
 }
 
-function onInput() {
-  nextTick(() => {
-    calendarRef.value?.wrapperRef?.blur();
-    emit("input", localValue.value);
-  });
+function onTextInputKeyDown(event: KeyboardEvent) {
+  if (ARROW_KEYS.includes(event.code)) {
+    calendarRef.value?.wrapperRef?.focus();
+  }
 }
 
 defineExpose({
@@ -184,20 +245,25 @@ defineExpose({
   <div v-bind="wrapperAttrs" ref="wrapper">
     <UInput
       :id="elementId"
-      :key="String(isShownCalendar)"
-      v-model="userFormatDate"
+      :key="String(localValue)"
+      ref="input"
+      :model-value="userFormatDate"
       :label-align="labelAlign"
       :label="label"
       :placeholder="placeholder"
       :error="error"
       :description="description"
-      readonly
       :disabled="disabled"
       :size="size"
       :left-icon="leftIcon"
       :right-icon="rightIcon"
       v-bind="isShownCalendar ? datepickerInputActiveAttrs : datepickerInputAttrs"
+      @input="onTextInput"
       @focus="activate"
+      @paste="onPaste"
+      @copy="onCopy"
+      @keydown.esc="deactivate"
+      @keydown="onTextInputKeyDown"
     >
       <template #left>
         <!-- @slot Use it add something before the date. -->
@@ -236,6 +302,7 @@ defineExpose({
         ref="calendar"
         v-model="localValue"
         v-model:view="customView"
+        v-click-outside="[deactivate, clickOutsideOptions]"
         :tabindex="-1"
         :timepicker="timepicker"
         :date-format="dateFormat"
@@ -248,7 +315,6 @@ defineExpose({
         @keydown.esc="deactivate"
         @user-date-change="onUserFormatDateChange"
         @input="onInput"
-        @blur="onBlur"
         @submit="onSubmit"
       />
     </Transition>

package/ui.form-date-picker/config.ts

@@ -37,9 +37,9 @@ export default /*tw*/ {
     leaveToClass: "opacity-0 scale-95",
   },
   i18n: {
-    today: "Today",
-    yesterday: "Yesterday",
-    tomorrow: "Tomorrow",
+    today: "Today,",
+    yesterday: "Yesterday,",
+    tomorrow: "Tomorrow,",
     weekdays: {
       shorthand: {
         sunday: "Sun",
@@ -117,8 +117,8 @@ export default /*tw*/ {
     okLabel: "Ok",
   },
   defaults: {
-    userDateFormat: "j F, Y",
-    userDateTimeFormat: "j F, Y - H:i:S",
+    userDateFormat: "r j F, Y",
+    userDateTimeFormat: "r j F, Y - H:i:S",
     size: "md",
     openDirectionX: "auto",
     openDirectionY: "auto",

package/ui.form-date-picker-range/useAttrs.ts

@@ -3,7 +3,7 @@ import { merge } from "lodash-es";
 
 import useUI from "../composables/useUI.ts";
 
-import defaultConfig from "./config.js";
+import defaultConfig from "./config.ts";
 import { Direction } from "../composables/useAutoPosition.ts";
 
 import type { Ref } from "vue";

package/ui.form-date-picker-range/useLocale.ts

@@ -4,7 +4,7 @@ import { useLocale as useGlobalLocale } from "../composables/useLocale.ts";
 
 import { getSortedLocale } from "../ui.form-calendar/utilDate.ts";
 import { LocaleType } from "../ui.form-calendar/constants.ts";
-import { UDatePickerRange } from "./constants.js";
+import { UDatePickerRange } from "./constants.ts";
 
 import defaultConfig from "./config.ts";
 

package/ui.form-input/UInput.vue

@@ -56,6 +56,8 @@
         @change="onChange"
         @mousedown="onMousedown"
         @click="onClick"
+        @paste="onPaste"
+        @copy="onCopy"
       />
 
       <label v-if="isTypePassword" v-bind="rightIconWrapperAttrs" :for="elementId">
@@ -158,6 +160,16 @@ const emit = defineEmits([
    */
   "blur",
 
+  /**
+   * Triggers when content pasted to the input.
+   */
+  "paste",
+
+  /**
+   * Triggers when content copied from the input.
+   */
+  "copy",
+
   /**
    * Triggers when the input value is changes.
    * @property {string} modelValue
@@ -424,6 +436,14 @@ function onMousedown(event) {
   emit("mousedown", event);
 }
 
+function onPaste(event) {
+  emit("paste", event);
+}
+
+function onCopy(event) {
+  emit("copy", event);
+}
+
 function onClickShowPassword() {
   isShownPassword.value = !isShownPassword.value;
 }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.568",
+  "version": "0.0.569",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -3058,7 +3058,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "j F, Y"
+              "default": "r j F, Y"
             },
             {
               "name": "userDateTimeFormat",
@@ -3068,7 +3068,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "j F, Y - H:i:S"
+              "default": "r j F, Y - H:i:S"
             },
             {
               "name": "minDate",
@@ -5988,6 +5988,14 @@
               "name": "blur",
               "description": "Triggers when the input loses focus."
             },
+            {
+              "name": "paste",
+              "description": "Triggers when content pasted to the input."
+            },
+            {
+              "name": "copy",
+              "description": "Triggers when content copied from the input."
+            },
             {
               "name": "input",
               "description": "Triggers when the input value is changes.",