@central-design-system/components 4.0.0-alpha.4 → 4.0.0-alpha.5

package/dist/es/src/composables/useTransition/useTransition.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTransition.js","sources":["../../../../../src/composables/useTransition/useTransition.ts"],"sourcesContent":["import { propsFactory, type TagProps } from '@cds/core';\nimport { clamp, isObject, onlyDefinedProps, PREFERS_REDUCED_MOTION } from '@cds/utils';\nimport {\n  type Component,\n  computed,\n  type FunctionalComponent,\n  h,\n  type HTMLAttributes,\n  type MaybeRefOrGetter,\n  mergeProps,\n  type Prop,\n  type Ref,\n  shallowRef,\n  toValue,\n  Transition,\n  TransitionGroup,\n  type TransitionProps,\n  unref,\n  watch\n} from 'vue';\n\nexport const standardEasing = 'cubic-bezier(0.4, 0, 0.2, 1)';\nexport const deceleratedEasing = 'cubic-bezier(0.0, 0, 0.2, 1)'; // Entering\nexport const acceleratedEasing = 'cubic-bezier(0.4, 0, 1, 1)'; // Leaving\n\nexport type EasingFunction = (n: number) => number;\n\nexport const easingPatterns = {\n  linear: (t: number) => t,\n  easeInQuad: (t: number) => t ** 2,\n  easeOutQuad: (t: number) => t * (2 - t),\n  easeInOutQuad: (t: number) => (t < 0.5 ? 2 * t ** 2 : -1 + (4 - 2 * t) * t),\n  easeInCubic: (t: number) => t ** 3,\n  easeOutCubic: (t: number) => (--t) ** 3 + 1,\n  easeInOutCubic: (t: number) => (t < 0.5 ? 4 * t ** 3 : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1),\n  easeInQuart: (t: number) => t ** 4,\n  easeOutQuart: (t: number) => 1 - (--t) ** 4,\n  easeInOutQuart: (t: number) => (t < 0.5 ? 8 * t ** 4 : 1 - 8 * (--t) ** 4),\n  easeInQuint: (t: number) => t ** 5,\n  easeOutQuint: (t: number) => 1 + (--t) ** 5,\n  easeInOutQuint: (t: number) => (t < 0.5 ? 16 * t ** 5 : 1 + 16 * (--t) ** 5),\n  instant: (_t: number) => 1\n} as const;\n\nexport type EasingOptions = {\n  duration?: number;\n  transition?: EasingFunction;\n};\n\ntype InternalEasingOptions = {\n  duration: number;\n  transition: EasingFunction;\n};\n\n/**\n * Utility function for defining transition-related properties in a component.\n *\n * @param {Object} options - The set of properties and default values to define transition behavior for a component.\n *\n * @property {null|string|boolean|TransitionProps & { component?: Component }} transition\n * - Specifies the transition type or configuration for a component.\n * - Defaults to `'fade-transition'`.\n * - Validates that the value is not `true`.\n *\n * @returns {Object} A configured property object for handling transitions in the associated component.\n */\nexport const defineTransitionProps = propsFactory(\n  {\n    /** Анимация перехода */\n    transition: {\n      type: null,\n      default: 'fade-transition',\n      validator: (val) => val !== true\n    } as Prop<null | string | boolean | (TransitionProps & { component?: Component })>\n  },\n  'transition'\n);\n\ninterface MaybeTransitionProps extends TransitionProps, TagProps, HTMLAttributes {\n  transition?: null | string | boolean | (TransitionProps & { component?: any });\n  disabled?: boolean;\n  group?: boolean;\n  target?: HTMLElement | [x: number, y: number];\n}\n\n/**\n * A functional component that conditionally renders an animated transition or group transition\n * based on the provided properties. If transitions are disabled or undefined, it falls back to\n * rendering without animations.\n *\n * @typedef MaybeTransitionProps\n * @property {string|Object} [transition] - Specifies the transition animation name or an object defining custom transition properties.\n * @property {boolean} [disabled] - If true, disables transitions entirely.\n * @property {boolean} [group] - Determines if the transition should be handled as a group (uses `TransitionGroup` instead of `Transition`).\n * @property {Object} [props] - Additional properties to be passed to the component.\n *\n * @component\n * @param {MaybeTransitionProps & Object} props - Properties that define the behavior and configuration of the transition.\n * @param {Object} context.slots - Slots that define the content to be rendered inside the transition.\n * @returns {VNode} Rendered virtual DOM node with or without transitions applied.\n */\nexport const MaybeTransition: FunctionalComponent<MaybeTransitionProps> = (props, { slots }) => {\n  const { transition, disabled, group, ...rest } = props;\n\n  const { component = group ? TransitionGroup : Transition, ...customProps } = isObject(transition) ? transition : {};\n\n  let transitionProps;\n  if (isObject(transition)) {\n    transitionProps = mergeProps(customProps, onlyDefinedProps({ disabled, group }), rest);\n  } else {\n    transitionProps = mergeProps({ name: disabled || !transition ? '' : transition }, rest);\n  }\n\n  return h(component as Component, transitionProps, slots);\n};\n\n/**\n * Creates a reactive transition between a source value and a target value using specified easing options.\n * This utility is useful for smooth animations or transitions of numeric values.\n *\n * @param {MaybeRefOrGetter<number>} source - The source numeric value to transition from. Can be a ref, reactive getter, or plain value.\n * @param {MaybeRefOrGetter<EasingOptions>} options - The easing options that specify the duration and easing pattern for the transition. Can be a ref, reactive getter, or plain object.\n * @return {ComputedRef<number>} A readonly computed ref representing the current interpolated value during the transition.\n */\nexport function useTransition(source: MaybeRefOrGetter<number>, options: MaybeRefOrGetter<EasingOptions>) {\n  const defaultTransition: InternalEasingOptions = {\n    duration: 300,\n    transition: easingPatterns.easeInOutCubic\n  };\n\n  let raf = -1;\n  const outputRef = shallowRef(toValue(source));\n\n  watch(\n    () => toValue(source),\n    async (to) => {\n      cancelAnimationFrame(raf);\n      const easing = { ...defaultTransition, ...toValue(options) };\n      await executeTransition(outputRef, outputRef.value, to, easing);\n    }\n  );\n\n  function executeTransition(out: Ref<number>, from: number, to: number, options: InternalEasingOptions) {\n    const startTime = performance.now();\n    const ease = PREFERS_REDUCED_MOTION()\n      ? easingPatterns.instant\n      : (options.transition ?? easingPatterns.easeInOutCubic);\n\n    return new Promise<void>((resolve) => {\n      raf = requestAnimationFrame(function step(currentTime: number) {\n        const timeElapsed = currentTime - startTime;\n        const progress = timeElapsed / options.duration;\n        out.value = from + (to - from) * ease(clamp(progress, 0, 1));\n\n        if (progress < 1) {\n          raf = requestAnimationFrame(step);\n        } else {\n          out.value = to;\n          resolve();\n        }\n      });\n    });\n  }\n\n  return computed(() => unref(outputRef));\n}\n"],"names":[],"mappings":";;;AAqBO,MAAM,iBAAiB;AACvB,MAAM,oBAAoB;AAC1B,MAAM,oBAAoB;AAI1B,MAAM,iBAAiB;AAAA,EAC5B,QAAQ,CAAC,MAAc;AAAA,EACvB,YAAY,CAAC,MAAc,KAAK;AAAA,EAChC,aAAa,CAAC,MAAc,KAAK,IAAI;AAAA,EACrC,eAAe,CAAC,MAAe,IAAI,MAAM,IAAI,KAAK,IAAI,MAAM,IAAI,IAAI,KAAK;AAAA,EACzE,aAAa,CAAC,MAAc,KAAK;AAAA,EACjC,cAAc,CAAC,MAAe,EAAE,KAAM,IAAI;AAAA,EAC1C,gBAAgB,CAAC,MAAe,IAAI,MAAM,IAAI,KAAK,KAAK,IAAI,MAAM,IAAI,IAAI,MAAM,IAAI,IAAI,KAAK;AAAA,EAC7F,aAAa,CAAC,MAAc,KAAK;AAAA,EACjC,cAAc,CAAC,MAAc,IAAK,EAAE,KAAM;AAAA,EAC1C,gBAAgB,CAAC,MAAe,IAAI,MAAM,IAAI,KAAK,IAAI,IAAI,IAAK,EAAE,KAAM;AAAA,EACxE,aAAa,CAAC,MAAc,KAAK;AAAA,EACjC,cAAc,CAAC,MAAc,IAAK,EAAE,KAAM;AAAA,EAC1C,gBAAgB,CAAC,MAAe,IAAI,MAAM,KAAK,KAAK,IAAI,IAAI,KAAM,EAAE,KAAM;AAAA,EAC1E,SAAS,CAAC,OAAe;AAC3B;AAwBO,MAAM,wBAAwB;AAAA,EACnC;AAAA;AAAA,IAEE,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,QAAQ,QAAQ;AAAA,IAAA;AAAA,EAC9B;AAAA,EAEF;AACF;AAyBO,MAAM,kBAA6D,CAAC,OAAO,EAAE,YAAY;AAC9F,QAAM,EAAE,YAAY,UAAU,OAAO,GAAG,SAAS;AAEjD,QAAM,EAAE,YAAY,QAAQ,kBAAkB,YAAY,GAAG,YAAA,IAAgB,SAAS,UAAU,IAAI,aAAa,CAAA;AAEjH,MAAI;AACJ,MAAI,SAAS,UAAU,GAAG;AACxB,sBAAkB,WAAW,aAAa,iBAAiB,EAAE,UAAU,MAAA,CAAO,GAAG,IAAI;AAAA,EACvF,OAAO;AACL,sBAAkB,WAAW,EAAE,MAAM,YAAY,CAAC,aAAa,KAAK,WAAA,GAAc,IAAI;AAAA,EACxF;AAEA,SAAO,EAAE,WAAwB,iBAAiB,KAAK;AACzD;"}
+{"version":3,"file":"useTransition.js","sources":["../../../../../src/composables/useTransition/useTransition.ts"],"sourcesContent":["import { propsFactory, type TagProps } from '@cds/core';\nimport { clamp, isObject, onlyDefinedProps, PREFERS_REDUCED_MOTION } from '@cds/utils';\nimport {\n  type Component,\n  computed,\n  type FunctionalComponent,\n  h,\n  type HTMLAttributes,\n  type MaybeRefOrGetter,\n  mergeProps,\n  type Prop,\n  type Ref,\n  shallowRef,\n  toValue,\n  Transition,\n  TransitionGroup,\n  type TransitionProps,\n  unref,\n  watch\n} from 'vue';\n\nexport const standardEasing = 'cubic-bezier(0.4, 0, 0.2, 1)';\nexport const deceleratedEasing = 'cubic-bezier(0.0, 0, 0.2, 1)'; // Entering\nexport const acceleratedEasing = 'cubic-bezier(0.4, 0, 1, 1)'; // Leaving\n\nexport type EasingFunction = (n: number) => number;\n\nexport const easingPatterns = {\n  linear: (t: number) => t,\n  easeInQuad: (t: number) => t ** 2,\n  easeOutQuad: (t: number) => t * (2 - t),\n  easeInOutQuad: (t: number) => (t < 0.5 ? 2 * t ** 2 : -1 + (4 - 2 * t) * t),\n  easeInCubic: (t: number) => t ** 3,\n  easeOutCubic: (t: number) => (--t) ** 3 + 1,\n  easeInOutCubic: (t: number) => (t < 0.5 ? 4 * t ** 3 : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1),\n  easeInQuart: (t: number) => t ** 4,\n  easeOutQuart: (t: number) => 1 - (--t) ** 4,\n  easeInOutQuart: (t: number) => (t < 0.5 ? 8 * t ** 4 : 1 - 8 * (--t) ** 4),\n  easeInQuint: (t: number) => t ** 5,\n  easeOutQuint: (t: number) => 1 + (--t) ** 5,\n  easeInOutQuint: (t: number) => (t < 0.5 ? 16 * t ** 5 : 1 + 16 * (--t) ** 5),\n  instant: (_t: number) => 1\n} as const;\n\nexport type EasingOptions = {\n  duration?: number;\n  transition?: EasingFunction;\n};\n\ntype InternalEasingOptions = {\n  duration: number;\n  transition: EasingFunction;\n};\n\n/**\n * Utility function for defining transition-related properties in a component.\n *\n * @param {Object} options - The set of properties and default values to define transition behavior for a component.\n *\n * @property {null|string|boolean|TransitionProps & { component?: Component }} transition\n * - Specifies the transition type or configuration for a component.\n * - Defaults to `'fade-transition'`.\n * - Validates that the value is not `true`.\n *\n * @returns {Object} A configured property object for handling transitions in the associated component.\n */\nexport const defineTransitionProps = propsFactory(\n  {\n    /**\n     * Анимация перехода\n     * @en Transition animation\n     */\n    transition: {\n      type: null,\n      default: 'fade-transition',\n      validator: (val) => val !== true\n    } as Prop<null | string | boolean | (TransitionProps & { component?: Component })>\n  },\n  'transition'\n);\n\ninterface MaybeTransitionProps extends TransitionProps, TagProps, HTMLAttributes {\n  transition?: null | string | boolean | (TransitionProps & { component?: any });\n  disabled?: boolean;\n  group?: boolean;\n  target?: HTMLElement | [x: number, y: number];\n}\n\n/**\n * A functional component that conditionally renders an animated transition or group transition\n * based on the provided properties. If transitions are disabled or undefined, it falls back to\n * rendering without animations.\n *\n * @typedef MaybeTransitionProps\n * @property {string|Object} [transition] - Specifies the transition animation name or an object defining custom transition properties.\n * @property {boolean} [disabled] - If true, disables transitions entirely.\n * @property {boolean} [group] - Determines if the transition should be handled as a group (uses `TransitionGroup` instead of `Transition`).\n * @property {Object} [props] - Additional properties to be passed to the component.\n *\n * @component\n * @param {MaybeTransitionProps & Object} props - Properties that define the behavior and configuration of the transition.\n * @param {Object} context.slots - Slots that define the content to be rendered inside the transition.\n * @returns {VNode} Rendered virtual DOM node with or without transitions applied.\n */\nexport const MaybeTransition: FunctionalComponent<MaybeTransitionProps> = (props, { slots }) => {\n  const { transition, disabled, group, ...rest } = props;\n\n  const { component = group ? TransitionGroup : Transition, ...customProps } = isObject(transition) ? transition : {};\n\n  let transitionProps;\n  if (isObject(transition)) {\n    transitionProps = mergeProps(customProps, onlyDefinedProps({ disabled, group }), rest);\n  } else {\n    transitionProps = mergeProps({ name: disabled || !transition ? '' : transition }, rest);\n  }\n\n  return h(component as Component, transitionProps, slots);\n};\n\n/**\n * Creates a reactive transition between a source value and a target value using specified easing options.\n * This utility is useful for smooth animations or transitions of numeric values.\n *\n * @param {MaybeRefOrGetter<number>} source - The source numeric value to transition from. Can be a ref, reactive getter, or plain value.\n * @param {MaybeRefOrGetter<EasingOptions>} options - The easing options that specify the duration and easing pattern for the transition. Can be a ref, reactive getter, or plain object.\n * @return {ComputedRef<number>} A readonly computed ref representing the current interpolated value during the transition.\n */\nexport function useTransition(source: MaybeRefOrGetter<number>, options: MaybeRefOrGetter<EasingOptions>) {\n  const defaultTransition: InternalEasingOptions = {\n    duration: 300,\n    transition: easingPatterns.easeInOutCubic\n  };\n\n  let raf = -1;\n  const outputRef = shallowRef(toValue(source));\n\n  watch(\n    () => toValue(source),\n    async (to) => {\n      cancelAnimationFrame(raf);\n      const easing = { ...defaultTransition, ...toValue(options) };\n      await executeTransition(outputRef, outputRef.value, to, easing);\n    }\n  );\n\n  function executeTransition(out: Ref<number>, from: number, to: number, options: InternalEasingOptions) {\n    const startTime = performance.now();\n    const ease = PREFERS_REDUCED_MOTION()\n      ? easingPatterns.instant\n      : (options.transition ?? easingPatterns.easeInOutCubic);\n\n    return new Promise<void>((resolve) => {\n      raf = requestAnimationFrame(function step(currentTime: number) {\n        const timeElapsed = currentTime - startTime;\n        const progress = timeElapsed / options.duration;\n        out.value = from + (to - from) * ease(clamp(progress, 0, 1));\n\n        if (progress < 1) {\n          raf = requestAnimationFrame(step);\n        } else {\n          out.value = to;\n          resolve();\n        }\n      });\n    });\n  }\n\n  return computed(() => unref(outputRef));\n}\n"],"names":[],"mappings":";;;AAqBO,MAAM,iBAAiB;AACvB,MAAM,oBAAoB;AAC1B,MAAM,oBAAoB;AAI1B,MAAM,iBAAiB;AAAA,EAC5B,QAAQ,CAAC,MAAc;AAAA,EACvB,YAAY,CAAC,MAAc,KAAK;AAAA,EAChC,aAAa,CAAC,MAAc,KAAK,IAAI;AAAA,EACrC,eAAe,CAAC,MAAe,IAAI,MAAM,IAAI,KAAK,IAAI,MAAM,IAAI,IAAI,KAAK;AAAA,EACzE,aAAa,CAAC,MAAc,KAAK;AAAA,EACjC,cAAc,CAAC,MAAe,EAAE,KAAM,IAAI;AAAA,EAC1C,gBAAgB,CAAC,MAAe,IAAI,MAAM,IAAI,KAAK,KAAK,IAAI,MAAM,IAAI,IAAI,MAAM,IAAI,IAAI,KAAK;AAAA,EAC7F,aAAa,CAAC,MAAc,KAAK;AAAA,EACjC,cAAc,CAAC,MAAc,IAAK,EAAE,KAAM;AAAA,EAC1C,gBAAgB,CAAC,MAAe,IAAI,MAAM,IAAI,KAAK,IAAI,IAAI,IAAK,EAAE,KAAM;AAAA,EACxE,aAAa,CAAC,MAAc,KAAK;AAAA,EACjC,cAAc,CAAC,MAAc,IAAK,EAAE,KAAM;AAAA,EAC1C,gBAAgB,CAAC,MAAe,IAAI,MAAM,KAAK,KAAK,IAAI,IAAI,KAAM,EAAE,KAAM;AAAA,EAC1E,SAAS,CAAC,OAAe;AAC3B;AAwBO,MAAM,wBAAwB;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,QAAQ,QAAQ;AAAA,IAAA;AAAA,EAC9B;AAAA,EAEF;AACF;AAyBO,MAAM,kBAA6D,CAAC,OAAO,EAAE,YAAY;AAC9F,QAAM,EAAE,YAAY,UAAU,OAAO,GAAG,SAAS;AAEjD,QAAM,EAAE,YAAY,QAAQ,kBAAkB,YAAY,GAAG,YAAA,IAAgB,SAAS,UAAU,IAAI,aAAa,CAAA;AAEjH,MAAI;AACJ,MAAI,SAAS,UAAU,GAAG;AACxB,sBAAkB,WAAW,aAAa,iBAAiB,EAAE,UAAU,MAAA,CAAO,GAAG,IAAI;AAAA,EACvF,OAAO;AACL,sBAAkB,WAAW,EAAE,MAAM,YAAY,CAAC,aAAa,KAAK,WAAA,GAAc,IAAI;AAAA,EACxF;AAEA,SAAO,EAAE,WAAwB,iBAAiB,KAAK;AACzD;"}

package/dist/es/src/composables/useValidation/useValidation.js

@@ -12,35 +12,55 @@ import { w as warn } from "../../utils/dom/console.js";
 import { shallowRef, computed, unref, ref, onBeforeMount, onBeforeUnmount, onMounted, watch, nextTick, useId } from "vue";
 const defineValidationProps = propsFactory(
   {
-    /** Имя поля ввода */
+    /**
+     * Имя поля ввода
+     * @en Name of the input
+     */
     name: String,
-    /** Значение компонента в v-model. Если компонент поддерживает свойство multiple, по умолчанию используется пустой массив. */
+    /**
+     * Значение компонента в v-model. Если компонент поддерживает свойство multiple, по умолчанию используется пустой массив.
+     * @en Value of the component in v-model. If the component supports the multiple prop, an empty array is used by default.
+     */
     modelValue: null,
     /**
      * Принимает массив, состоящий из элементов различных типов: функций, логических значений и строк.
      * Функции принимают входное значение в качестве аргумента и должны возвращать либо true / false, либо строку, содержащую сообщение об ошибке.
      * Поле ввода перейдет в состояние ошибки, если функция возвращает значение false (или любое значение в массиве содержит false) либо является строкой.
+     * @en Accepts an array of items of different types: functions, booleans and strings. Functions take the input value as an argument and must return either true / false, or a string with an error message. The input goes into the error state if a function returns false (or any value in the array is false) or is a string.
      */
     rules: {
       type: Array,
       default: () => []
     },
-    /** Изменяет тип события, при котором запускается валидация */
+    /**
+     * Изменяет тип события, при котором запускается валидация
+     * @en Changes the type of the event that triggers validation
+     */
     validateOn: String,
-    /** Значение, используемое при применении правил валидации */
+    /**
+     * Значение, используемое при применении правил валидации
+     * @en Value used when applying the validation rules
+     */
     validationValue: null,
-    /** Отображает компонент в состояние ошибки */
+    /**
+     * Отображает компонент в состояние ошибки
+     * @en Puts the component into the error state
+     */
     error: Boolean,
     /**
      * Отображает компонент в состояние ошибки и передает пользовательские сообщения об ошибках.
      * Будет объединяться с любыми проверками, заданными в свойстве `rules`.
      * Это поле не запускает валидацию.
+     * @en Puts the component into the error state and passes custom error messages. They are merged with any checks defined in the `rules` prop. This field does not trigger validation.
      */
     errorMessages: {
       type: [Array, String],
       default: () => []
     },
-    /** Максимальное число отображаемых ошибок при валидации */
+    /**
+     * Максимальное число отображаемых ошибок при валидации
+     * @en Maximum number of validation errors shown
+     */
     maxErrors: {
       type: [Number, String],
       default: 1

package/dist/es/src/composables/useValidation/useValidation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useValidation.js","sources":["../../../../../src/composables/useValidation/useValidation.ts"],"sourcesContent":["import { defineDisabledProps } from '@cds/composables/useDisabled';\nimport { defineFocusProps } from '@cds/composables/useFocus';\nimport { useForm } from '@cds/composables/useForm';\nimport { defineReadonlyProps } from '@cds/composables/useReadonly';\nimport { useRules } from '@cds/composables/useRules';\nimport { getCurrentInstance, getCurrentInstanceName, propsFactory, useProxyModel, useToggleScope } from '@cds/core';\nimport { type EventProp, warn, wrapInArray } from '@cds/utils';\nimport {\n  computed,\n  type ExtractPublicPropTypes,\n  type MaybeRef,\n  nextTick,\n  onBeforeMount,\n  onBeforeUnmount,\n  onMounted,\n  type PropType,\n  ref,\n  shallowRef,\n  unref,\n  useId,\n  watch\n} from 'vue';\n\nimport type { ValidateOn, ValidationRule } from './internal/useValidation.types';\n\nexport const defineValidationProps = propsFactory(\n  {\n    /** Имя поля ввода */\n    name: String,\n    /** Значение компонента в v-model. Если компонент поддерживает свойство multiple, по умолчанию используется пустой массив. */\n    modelValue: null,\n    /**\n     * Принимает массив, состоящий из элементов различных типов: функций, логических значений и строк.\n     * Функции принимают входное значение в качестве аргумента и должны возвращать либо true / false, либо строку, содержащую сообщение об ошибке.\n     * Поле ввода перейдет в состояние ошибки, если функция возвращает значение false (или любое значение в массиве содержит false) либо является строкой.\n     */\n    rules: {\n      type: Array as PropType<readonly ValidationRule[]>,\n      default: () => []\n    },\n    /** Изменяет тип события, при котором запускается валидация */\n    validateOn: String as PropType<ValidateOn>,\n    /** Значение, используемое при применении правил валидации */\n    validationValue: null,\n    /** Отображает компонент в состояние ошибки */\n    error: Boolean,\n    /**\n     * Отображает компонент в состояние ошибки и передает пользовательские сообщения об ошибках.\n     * Будет объединяться с любыми проверками, заданными в свойстве `rules`.\n     * Это поле не запускает валидацию.\n     */\n    errorMessages: {\n      type: [Array, String] as PropType<string | readonly string[] | null>,\n      default: () => []\n    },\n    /** Максимальное число отображаемых ошибок при валидации */\n    maxErrors: {\n      type: [Number, String],\n      default: 1\n    },\n\n    ...defineFocusProps(),\n    ...defineReadonlyProps(),\n    ...defineDisabledProps()\n  },\n  'validation'\n);\n\nexport interface ValidationProps extends ExtractPublicPropTypes<ReturnType<typeof defineValidationProps>> {\n  'onUpdate:modelValue'?: EventProp | undefined;\n}\n\nexport function useValidation(\n  props: ValidationProps,\n  name = getCurrentInstanceName(),\n  id: MaybeRef<string | number> = useId()\n) {\n  const model = useProxyModel(props, 'modelValue');\n  const form = useForm(props);\n  const rules = useRules(() => props.rules);\n\n  const isValidating = shallowRef(false);\n  const validationModel = computed(() => (props.validationValue === undefined ? model.value : props.validationValue));\n  const isPure = shallowRef(true);\n  const isDirty = computed(\n    () =>\n      !!(\n        wrapInArray(unref(model) === '' ? null : unref(model)).length ||\n        wrapInArray(unref(validationModel) === '' ? null : unref(validationModel)).length\n      )\n  );\n\n  const validateOn = computed(() => {\n    let value = (props.validateOn ?? unref(form.validateOn)) || 'input';\n    if (value === 'lazy') value = 'input lazy';\n    if (value === 'eager') value = 'input eager';\n    const set = new Set(value?.split(' ') ?? []);\n\n    return {\n      input: set.has('input'),\n      blur: set.has('blur') || set.has('input') || set.has('invalid-input'),\n      invalidInput: set.has('invalid-input'),\n      lazy: set.has('lazy'),\n      eager: set.has('eager')\n    };\n  });\n\n  const internalErrorMessages = ref<string[]>([]);\n  const errorMessages = computed(() => {\n    return props.errorMessages?.length\n      ? wrapInArray(props.errorMessages as string | string[])\n          .concat(unref(internalErrorMessages))\n          .slice(0, Math.max(0, Number(props.maxErrors)))\n      : unref(internalErrorMessages);\n  });\n\n  const isValid = computed(() => {\n    if (props.error || props.errorMessages?.length) return false;\n    if (!props.rules?.length) return true;\n    if (unref(isPure)) {\n      return unref(internalErrorMessages).length || unref(validateOn).lazy ? null : true;\n    } else {\n      return !unref(internalErrorMessages).length;\n    }\n  });\n\n  const validationClasses = computed(() => {\n    return {\n      [`${name}--error`]: unref(isValid) === false,\n      [`${name}--dirty`]: unref(isDirty),\n      [`${name}--disabled`]: unref(form.isDisabled),\n      [`${name}--readonly`]: unref(form.isReadonly)\n    };\n  });\n\n  const vm = getCurrentInstance('validation');\n  const uid = computed(() => props.name ?? unref(id));\n\n  onBeforeMount(() => {\n    form.register?.({\n      id: unref(uid),\n      vm,\n      validate,\n      reset,\n      resetValidation\n    });\n  });\n\n  onBeforeUnmount(() => {\n    form.unregister?.(unref(uid));\n  });\n\n  onMounted(async () => {\n    if (!unref(validateOn).lazy) {\n      await validate(!unref(validateOn).eager);\n    }\n    form.update?.(unref(uid), unref(isValid), unref(errorMessages));\n  });\n\n  watch([isValid, errorMessages], () => {\n    form.update?.(unref(uid), unref(isValid), unref(errorMessages));\n  });\n\n  useToggleScope(\n    () => unref(validateOn).input || (unref(validateOn).invalidInput && unref(isValid) === false),\n    () => {\n      watch(validationModel, () => {\n        if (unref(validationModel) != null) {\n          validate();\n        } else if (props.focused) {\n          const unwatch = watch(\n            () => props.focused,\n            (val) => {\n              if (!val) validate();\n\n              unwatch();\n            }\n          );\n        }\n      });\n    }\n  );\n\n  useToggleScope(\n    () => unref(validateOn).blur,\n    () => {\n      watch(\n        () => props.focused,\n        (val) => {\n          if (!val) validate();\n        }\n      );\n    }\n  );\n\n  async function reset() {\n    model.value = null;\n\n    await nextTick();\n    await resetValidation();\n  }\n\n  async function resetValidation() {\n    isPure.value = true;\n\n    if (!unref(validateOn).lazy) {\n      await validate(!unref(validateOn).eager);\n    } else {\n      internalErrorMessages.value = [];\n    }\n  }\n\n  async function validate(silent = false) {\n    const results = [];\n\n    isValidating.value = true;\n\n    for (const rule of unref(rules)!) {\n      if (results.length >= Number(props.maxErrors ?? 1)) {\n        break;\n      }\n\n      const handler = typeof rule === 'function' ? rule : () => rule;\n      const result = await handler(validationModel.value);\n\n      if (result === true) continue;\n\n      if (result !== false && typeof result !== 'string') {\n        warn('useValidation', `${result} is not a valid value. Rule functions must return boolean true or a string.`);\n\n        continue;\n      }\n\n      results.push(result || '');\n    }\n\n    internalErrorMessages.value = results;\n    isValidating.value = false;\n    isPure.value = silent;\n\n    return internalErrorMessages.value;\n  }\n\n  return {\n    errorMessages,\n    isDirty,\n    isDisabled: form.isDisabled,\n    isReadonly: form.isReadonly,\n    isPure,\n    isValid,\n    isValidating,\n    reset,\n    resetValidation,\n    validate,\n    validationClasses\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAyBO,MAAM,wBAAwB;AAAA,EACnC;AAAA;AAAA,IAEE,MAAM;AAAA;AAAA,IAEN,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMZ,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS,MAAM,CAAA;AAAA,IAAC;AAAA;AAAA,IAGlB,YAAY;AAAA;AAAA,IAEZ,iBAAiB;AAAA;AAAA,IAEjB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMP,eAAe;AAAA,MACb,MAAM,CAAC,OAAO,MAAM;AAAA,MACpB,SAAS,MAAM,CAAA;AAAA,IAAC;AAAA;AAAA,IAGlB,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IAAA;AAAA,IAGX,GAAG,iBAAA;AAAA,IACH,GAAG,oBAAA;AAAA,IACH,GAAG,oBAAA;AAAA,EAAoB;AAAA,EAEzB;AACF;AAMO,SAAS,cACd,OACA,OAAO,0BACP,KAAgC,SAChC;AACA,QAAM,QAAQ,cAAc,OAAO,YAAY;AAC/C,QAAM,OAAO,QAAQ,KAAK;AAC1B,QAAM,QAAQ,SAAS,MAAM,MAAM,KAAK;AAExC,QAAM,eAAe,WAAW,KAAK;AACrC,QAAM,kBAAkB,SAAS,MAAO,MAAM,oBAAoB,SAAY,MAAM,QAAQ,MAAM,eAAgB;AAClH,QAAM,SAAS,WAAW,IAAI;AAC9B,QAAM,UAAU;AAAA,IACd,MACE,CAAC,EACC,YAAY,MAAM,KAAK,MAAM,KAAK,OAAO,MAAM,KAAK,CAAC,EAAE,UACvD,YAAY,MAAM,eAAe,MAAM,KAAK,OAAO,MAAM,eAAe,CAAC,EAAE;AAAA,EAAA;AAIjF,QAAM,aAAa,SAAS,MAAM;AAChC,QAAI,SAAS,MAAM,cAAc,MAAM,KAAK,UAAU,MAAM;AAC5D,QAAI,UAAU,OAAQ,SAAQ;AAC9B,QAAI,UAAU,QAAS,SAAQ;AAC/B,UAAM,MAAM,IAAI,KAAI,+BAAO,MAAM,SAAQ,EAAE;AAE3C,WAAO;AAAA,MACL,OAAO,IAAI,IAAI,OAAO;AAAA,MACtB,MAAM,IAAI,IAAI,MAAM,KAAK,IAAI,IAAI,OAAO,KAAK,IAAI,IAAI,eAAe;AAAA,MACpE,cAAc,IAAI,IAAI,eAAe;AAAA,MACrC,MAAM,IAAI,IAAI,MAAM;AAAA,MACpB,OAAO,IAAI,IAAI,OAAO;AAAA,IAAA;AAAA,EAE1B,CAAC;AAED,QAAM,wBAAwB,IAAc,EAAE;AAC9C,QAAM,gBAAgB,SAAS,MAAM;;AACnC,aAAO,WAAM,kBAAN,mBAAqB,UACxB,YAAY,MAAM,aAAkC,EACjD,OAAO,MAAM,qBAAqB,CAAC,EACnC,MAAM,GAAG,KAAK,IAAI,GAAG,OAAO,MAAM,SAAS,CAAC,CAAC,IAChD,MAAM,qBAAqB;AAAA,EACjC,CAAC;AAED,QAAM,UAAU,SAAS,MAAM;;AAC7B,QAAI,MAAM,WAAS,WAAM,kBAAN,mBAAqB,QAAQ,QAAO;AACvD,QAAI,GAAC,WAAM,UAAN,mBAAa,QAAQ,QAAO;AACjC,QAAI,MAAM,MAAM,GAAG;AACjB,aAAO,MAAM,qBAAqB,EAAE,UAAU,MAAM,UAAU,EAAE,OAAO,OAAO;AAAA,IAChF,OAAO;AACL,aAAO,CAAC,MAAM,qBAAqB,EAAE;AAAA,IACvC;AAAA,EACF,CAAC;AAED,QAAM,oBAAoB,SAAS,MAAM;AACvC,WAAO;AAAA,MACL,CAAC,GAAG,IAAI,SAAS,GAAG,MAAM,OAAO,MAAM;AAAA,MACvC,CAAC,GAAG,IAAI,SAAS,GAAG,MAAM,OAAO;AAAA,MACjC,CAAC,GAAG,IAAI,YAAY,GAAG,MAAM,KAAK,UAAU;AAAA,MAC5C,CAAC,GAAG,IAAI,YAAY,GAAG,MAAM,KAAK,UAAU;AAAA,IAAA;AAAA,EAEhD,CAAC;AAED,QAAM,KAAK,mBAAmB,YAAY;AAC1C,QAAM,MAAM,SAAS,MAAM,MAAM,QAAQ,MAAM,EAAE,CAAC;AAElD,gBAAc,MAAM;;AAClB,eAAK,aAAL,8BAAgB;AAAA,MACd,IAAI,MAAM,GAAG;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ,CAAC;AAED,kBAAgB,MAAM;;AACpB,eAAK,eAAL,8BAAkB,MAAM,GAAG;AAAA,EAC7B,CAAC;AAED,YAAU,YAAY;;AACpB,QAAI,CAAC,MAAM,UAAU,EAAE,MAAM;AAC3B,YAAM,SAAS,CAAC,MAAM,UAAU,EAAE,KAAK;AAAA,IACzC;AACA,eAAK,WAAL,8BAAc,MAAM,GAAG,GAAG,MAAM,OAAO,GAAG,MAAM,aAAa;AAAA,EAC/D,CAAC;AAED,QAAM,CAAC,SAAS,aAAa,GAAG,MAAM;;AACpC,eAAK,WAAL,8BAAc,MAAM,GAAG,GAAG,MAAM,OAAO,GAAG,MAAM,aAAa;AAAA,EAC/D,CAAC;AAED;AAAA,IACE,MAAM,MAAM,UAAU,EAAE,SAAU,MAAM,UAAU,EAAE,gBAAgB,MAAM,OAAO,MAAM;AAAA,IACvF,MAAM;AACJ,YAAM,iBAAiB,MAAM;AAC3B,YAAI,MAAM,eAAe,KAAK,MAAM;AAClC,mBAAA;AAAA,QACF,WAAW,MAAM,SAAS;AACxB,gBAAM,UAAU;AAAA,YACd,MAAM,MAAM;AAAA,YACZ,CAAC,QAAQ;AACP,kBAAI,CAAC,IAAK,UAAA;AAEV,sBAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAEJ;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EAAA;AAGF;AAAA,IACE,MAAM,MAAM,UAAU,EAAE;AAAA,IACxB,MAAM;AACJ;AAAA,QACE,MAAM,MAAM;AAAA,QACZ,CAAC,QAAQ;AACP,cAAI,CAAC,IAAK,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAGF,iBAAe,QAAQ;AACrB,UAAM,QAAQ;AAEd,UAAM,SAAA;AACN,UAAM,gBAAA;AAAA,EACR;AAEA,iBAAe,kBAAkB;AAC/B,WAAO,QAAQ;AAEf,QAAI,CAAC,MAAM,UAAU,EAAE,MAAM;AAC3B,YAAM,SAAS,CAAC,MAAM,UAAU,EAAE,KAAK;AAAA,IACzC,OAAO;AACL,4BAAsB,QAAQ,CAAA;AAAA,IAChC;AAAA,EACF;AAEA,iBAAe,SAAS,SAAS,OAAO;AACtC,UAAM,UAAU,CAAA;AAEhB,iBAAa,QAAQ;AAErB,eAAW,QAAQ,MAAM,KAAK,GAAI;AAChC,UAAI,QAAQ,UAAU,OAAO,MAAM,aAAa,CAAC,GAAG;AAClD;AAAA,MACF;AAEA,YAAM,UAAU,OAAO,SAAS,aAAa,OAAO,MAAM;AAC1D,YAAM,SAAS,MAAM,QAAQ,gBAAgB,KAAK;AAElD,UAAI,WAAW,KAAM;AAErB,UAAI,WAAW,SAAS,OAAO,WAAW,UAAU;AAClD,aAAK,iBAAiB,GAAG,MAAM,6EAA6E;AAE5G;AAAA,MACF;AAEA,cAAQ,KAAK,UAAU,EAAE;AAAA,IAC3B;AAEA,0BAAsB,QAAQ;AAC9B,iBAAa,QAAQ;AACrB,WAAO,QAAQ;AAEf,WAAO,sBAAsB;AAAA,EAC/B;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,YAAY,KAAK;AAAA,IACjB,YAAY,KAAK;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useValidation.js","sources":["../../../../../src/composables/useValidation/useValidation.ts"],"sourcesContent":["import { defineDisabledProps } from '@cds/composables/useDisabled';\nimport { defineFocusProps } from '@cds/composables/useFocus';\nimport { useForm } from '@cds/composables/useForm';\nimport { defineReadonlyProps } from '@cds/composables/useReadonly';\nimport { useRules } from '@cds/composables/useRules';\nimport { getCurrentInstance, getCurrentInstanceName, propsFactory, useProxyModel, useToggleScope } from '@cds/core';\nimport { type EventProp, warn, wrapInArray } from '@cds/utils';\nimport {\n  computed,\n  type ExtractPublicPropTypes,\n  type MaybeRef,\n  nextTick,\n  onBeforeMount,\n  onBeforeUnmount,\n  onMounted,\n  type PropType,\n  ref,\n  shallowRef,\n  unref,\n  useId,\n  watch\n} from 'vue';\n\nimport type { ValidateOn, ValidationRule } from './internal/useValidation.types';\n\nexport const defineValidationProps = propsFactory(\n  {\n    /**\n     * Имя поля ввода\n     * @en Name of the input\n     */\n    name: String,\n    /**\n     * Значение компонента в v-model. Если компонент поддерживает свойство multiple, по умолчанию используется пустой массив.\n     * @en Value of the component in v-model. If the component supports the multiple prop, an empty array is used by default.\n     */\n    modelValue: null,\n    /**\n     * Принимает массив, состоящий из элементов различных типов: функций, логических значений и строк.\n     * Функции принимают входное значение в качестве аргумента и должны возвращать либо true / false, либо строку, содержащую сообщение об ошибке.\n     * Поле ввода перейдет в состояние ошибки, если функция возвращает значение false (или любое значение в массиве содержит false) либо является строкой.\n     * @en Accepts an array of items of different types: functions, booleans and strings. Functions take the input value as an argument and must return either true / false, or a string with an error message. The input goes into the error state if a function returns false (or any value in the array is false) or is a string.\n     */\n    rules: {\n      type: Array as PropType<readonly ValidationRule[]>,\n      default: () => []\n    },\n    /**\n     * Изменяет тип события, при котором запускается валидация\n     * @en Changes the type of the event that triggers validation\n     */\n    validateOn: String as PropType<ValidateOn>,\n    /**\n     * Значение, используемое при применении правил валидации\n     * @en Value used when applying the validation rules\n     */\n    validationValue: null,\n    /**\n     * Отображает компонент в состояние ошибки\n     * @en Puts the component into the error state\n     */\n    error: Boolean,\n    /**\n     * Отображает компонент в состояние ошибки и передает пользовательские сообщения об ошибках.\n     * Будет объединяться с любыми проверками, заданными в свойстве `rules`.\n     * Это поле не запускает валидацию.\n     * @en Puts the component into the error state and passes custom error messages. They are merged with any checks defined in the `rules` prop. This field does not trigger validation.\n     */\n    errorMessages: {\n      type: [Array, String] as PropType<string | readonly string[] | null>,\n      default: () => []\n    },\n    /**\n     * Максимальное число отображаемых ошибок при валидации\n     * @en Maximum number of validation errors shown\n     */\n    maxErrors: {\n      type: [Number, String],\n      default: 1\n    },\n\n    ...defineFocusProps(),\n    ...defineReadonlyProps(),\n    ...defineDisabledProps()\n  },\n  'validation'\n);\n\nexport interface ValidationProps extends ExtractPublicPropTypes<ReturnType<typeof defineValidationProps>> {\n  'onUpdate:modelValue'?: EventProp | undefined;\n}\n\nexport function useValidation(\n  props: ValidationProps,\n  name = getCurrentInstanceName(),\n  id: MaybeRef<string | number> = useId()\n) {\n  const model = useProxyModel(props, 'modelValue');\n  const form = useForm(props);\n  const rules = useRules(() => props.rules);\n\n  const isValidating = shallowRef(false);\n  const validationModel = computed(() => (props.validationValue === undefined ? model.value : props.validationValue));\n  const isPure = shallowRef(true);\n  const isDirty = computed(\n    () =>\n      !!(\n        wrapInArray(unref(model) === '' ? null : unref(model)).length ||\n        wrapInArray(unref(validationModel) === '' ? null : unref(validationModel)).length\n      )\n  );\n\n  const validateOn = computed(() => {\n    let value = (props.validateOn ?? unref(form.validateOn)) || 'input';\n    if (value === 'lazy') value = 'input lazy';\n    if (value === 'eager') value = 'input eager';\n    const set = new Set(value?.split(' ') ?? []);\n\n    return {\n      input: set.has('input'),\n      blur: set.has('blur') || set.has('input') || set.has('invalid-input'),\n      invalidInput: set.has('invalid-input'),\n      lazy: set.has('lazy'),\n      eager: set.has('eager')\n    };\n  });\n\n  const internalErrorMessages = ref<string[]>([]);\n  const errorMessages = computed(() => {\n    return props.errorMessages?.length\n      ? wrapInArray(props.errorMessages as string | string[])\n          .concat(unref(internalErrorMessages))\n          .slice(0, Math.max(0, Number(props.maxErrors)))\n      : unref(internalErrorMessages);\n  });\n\n  const isValid = computed(() => {\n    if (props.error || props.errorMessages?.length) return false;\n    if (!props.rules?.length) return true;\n    if (unref(isPure)) {\n      return unref(internalErrorMessages).length || unref(validateOn).lazy ? null : true;\n    } else {\n      return !unref(internalErrorMessages).length;\n    }\n  });\n\n  const validationClasses = computed(() => {\n    return {\n      [`${name}--error`]: unref(isValid) === false,\n      [`${name}--dirty`]: unref(isDirty),\n      [`${name}--disabled`]: unref(form.isDisabled),\n      [`${name}--readonly`]: unref(form.isReadonly)\n    };\n  });\n\n  const vm = getCurrentInstance('validation');\n  const uid = computed(() => props.name ?? unref(id));\n\n  onBeforeMount(() => {\n    form.register?.({\n      id: unref(uid),\n      vm,\n      validate,\n      reset,\n      resetValidation\n    });\n  });\n\n  onBeforeUnmount(() => {\n    form.unregister?.(unref(uid));\n  });\n\n  onMounted(async () => {\n    if (!unref(validateOn).lazy) {\n      await validate(!unref(validateOn).eager);\n    }\n    form.update?.(unref(uid), unref(isValid), unref(errorMessages));\n  });\n\n  watch([isValid, errorMessages], () => {\n    form.update?.(unref(uid), unref(isValid), unref(errorMessages));\n  });\n\n  useToggleScope(\n    () => unref(validateOn).input || (unref(validateOn).invalidInput && unref(isValid) === false),\n    () => {\n      watch(validationModel, () => {\n        if (unref(validationModel) != null) {\n          validate();\n        } else if (props.focused) {\n          const unwatch = watch(\n            () => props.focused,\n            (val) => {\n              if (!val) validate();\n\n              unwatch();\n            }\n          );\n        }\n      });\n    }\n  );\n\n  useToggleScope(\n    () => unref(validateOn).blur,\n    () => {\n      watch(\n        () => props.focused,\n        (val) => {\n          if (!val) validate();\n        }\n      );\n    }\n  );\n\n  async function reset() {\n    model.value = null;\n\n    await nextTick();\n    await resetValidation();\n  }\n\n  async function resetValidation() {\n    isPure.value = true;\n\n    if (!unref(validateOn).lazy) {\n      await validate(!unref(validateOn).eager);\n    } else {\n      internalErrorMessages.value = [];\n    }\n  }\n\n  async function validate(silent = false) {\n    const results = [];\n\n    isValidating.value = true;\n\n    for (const rule of unref(rules)!) {\n      if (results.length >= Number(props.maxErrors ?? 1)) {\n        break;\n      }\n\n      const handler = typeof rule === 'function' ? rule : () => rule;\n      const result = await handler(validationModel.value);\n\n      if (result === true) continue;\n\n      if (result !== false && typeof result !== 'string') {\n        warn('useValidation', `${result} is not a valid value. Rule functions must return boolean true or a string.`);\n\n        continue;\n      }\n\n      results.push(result || '');\n    }\n\n    internalErrorMessages.value = results;\n    isValidating.value = false;\n    isPure.value = silent;\n\n    return internalErrorMessages.value;\n  }\n\n  return {\n    errorMessages,\n    isDirty,\n    isDisabled: form.isDisabled,\n    isReadonly: form.isReadonly,\n    isPure,\n    isValid,\n    isValidating,\n    reset,\n    resetValidation,\n    validate,\n    validationClasses\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/es/src/composables/useVirtual/useVirtual.js

@@ -6,17 +6,26 @@ import { shallowRef, watchEffect, ref, unref, computed, watch, onScopeDispose, n
 import { u as useDisplay } from "../useDisplay/useDisplay.js";
 const defineVirtualProps = propsFactory(
   {
-    /** Высота одного элемента в пикселях. Если не задана — высота измеряется автоматически. */
+    /**
+     * Высота одного элемента в пикселях. Если не задана — высота измеряется автоматически.
+     * @en Height of a single item in pixels. When omitted, the height is measured automatically.
+     */
     itemHeight: {
       type: [Number, String],
       default: null
     },
-    /** Ключ элемента для идентификации (имя поля, путь или функция). По умолчанию используется индекс. */
+    /**
+     * Ключ элемента для идентификации (имя поля, путь или функция). По умолчанию используется индекс.
+     * @en Key that identifies an item (a field name, a path or a function). The index is used by default.
+     */
     itemKey: {
       type: [String, Array, Function],
       default: null
     },
-    /** Высота области просмотра виртуального списка. */
+    /**
+     * Высота области просмотра виртуального списка.
+     * @en Height of the viewport of the virtual list.
+     */
     height: [Number, String]
   },
   "virtual"

package/dist/es/src/composables/useVirtual/useVirtual.js.map

@@ -1 +1 @@
-{"version":3,"file":"useVirtual.js","sources":["../../../../../src/composables/useVirtual/useVirtual.ts"],"sourcesContent":["import { useDisplay } from '@cds/composables/useDisplay';\nimport { useResizeObserver } from '@cds/composables/useResizeObserver';\nimport { propsFactory } from '@cds/core';\nimport { clamp, debounce, getPropertyFromItem, IN_BROWSER, type SelectItemKey } from '@cds/utils';\nimport {\n  computed,\n  type ExtractPublicPropTypes,\n  nextTick,\n  onScopeDispose,\n  type PropType,\n  type Ref,\n  ref,\n  shallowRef,\n  unref,\n  watch,\n  watchEffect\n} from 'vue';\n\nexport const defineVirtualProps = propsFactory(\n  {\n    /** Высота одного элемента в пикселях. Если не задана — высота измеряется автоматически. */\n    itemHeight: {\n      type: [Number, String],\n      default: null\n    },\n    /** Ключ элемента для идентификации (имя поля, путь или функция). По умолчанию используется индекс. */\n    itemKey: {\n      type: [String, Array, Function] as PropType<SelectItemKey>,\n      default: null\n    },\n    /** Высота области просмотра виртуального списка. */\n    height: [Number, String]\n  },\n  'virtual'\n);\n\nexport interface VirtualProps extends ExtractPublicPropTypes<ReturnType<typeof defineVirtualProps>> {}\n\nconst UP = -1;\nconst DOWN = 1;\nconst BUFFER_PX = 100;\n\nexport function useVirtual<T>(props: VirtualProps, items: Ref<readonly T[]>) {\n  const display = useDisplay();\n\n  const itemHeight = shallowRef(0);\n  watchEffect(() => {\n    itemHeight.value = parseFloat(props.itemHeight || 0);\n  });\n\n  const paddingTop = shallowRef(0);\n  const paddingBottom = shallowRef(0);\n  const first = shallowRef(0);\n  const last = shallowRef(Math.ceil((parseInt(props.height!) || display.height.value) / (itemHeight.value || 16)) || 1);\n\n  const containerRef = ref<HTMLElement>();\n  const markerRef = ref<HTMLElement>();\n  let markerOffset = 0;\n\n  const { resizeRef, contentRect } = useResizeObserver();\n\n  watchEffect(() => {\n    resizeRef.value = unref(containerRef);\n  });\n\n  const viewportHeight = computed(() => {\n    return containerRef.value === document.documentElement\n      ? display.height.value\n      : contentRect.value?.height || parseInt(props.height!) || 0;\n  });\n\n  const hasInitialRender = computed(() => {\n    return !!(unref(containerRef) && unref(markerRef) && unref(viewportHeight) && unref(itemHeight));\n  });\n\n  let sizes = Array.from<number | null>({ length: items.value.length });\n  let offsets = Array.from<number>({ length: items.value.length });\n  let targetScrollIndex = -1;\n\n  const updateTime = shallowRef(0);\n\n  const updateOffsets = debounce(() => {\n    const start = performance.now();\n    offsets[0] = 0;\n    const length = items.value.length;\n    for (let i = 1; i <= length; i++) {\n      offsets[i] = (offsets[i - 1] || 0) + getSize(i - 1);\n    }\n    updateTime.value = Math.max(updateTime.value, performance.now() - start);\n  }, updateTime);\n\n  const unwatch = watch(hasInitialRender, (v) => {\n    if (!v) return;\n\n    unwatch();\n\n    markerOffset = markerRef.value!.offsetTop;\n    updateOffsets.immediate();\n    calculateVisibleItems();\n\n    if (!~targetScrollIndex) return;\n\n    nextTick(() => {\n      IN_BROWSER &&\n        window.requestAnimationFrame(() => {\n          scrollToIndex(targetScrollIndex);\n          targetScrollIndex = -1;\n        });\n    });\n  });\n\n  onScopeDispose(() => {\n    updateOffsets.clear();\n  });\n\n  function getSize(index: number) {\n    return sizes[index] || itemHeight.value;\n  }\n\n  function handleItemResize(index: number, height: number) {\n    const prevHeight = sizes[index];\n    const prevMinHeight = itemHeight.value;\n\n    itemHeight.value = prevMinHeight ? Math.min(itemHeight.value, height) : height;\n\n    if (prevHeight !== height || prevMinHeight !== itemHeight.value) {\n      sizes[index] = height;\n      updateOffsets();\n    }\n  }\n\n  function calculateOffset(index: number) {\n    index = clamp(index, 0, items.value.length);\n    const whole = Math.floor(index);\n    const fraction = index % 1;\n    const next = whole + 1;\n    const wholeOffset = offsets[whole] || 0;\n    const nextOffset = offsets[next] || wholeOffset;\n    return wholeOffset + (nextOffset - wholeOffset) * fraction;\n  }\n\n  function calculateIndex(scrollTop: number) {\n    return binaryClosest(offsets, scrollTop);\n  }\n\n  let lastScrollTop = 0;\n  let scrollVelocity = 0;\n  let lastScrollTime = 0;\n\n  watch(viewportHeight, (val, oldVal) => {\n    calculateVisibleItems();\n    if (val < oldVal) {\n      requestAnimationFrame(() => {\n        scrollVelocity = 0;\n        calculateVisibleItems();\n      });\n    }\n  });\n\n  let scrollTimeout = -1;\n  function handleScroll() {\n    if (!containerRef.value || !markerRef.value) return;\n\n    const scrollTop = containerRef.value.scrollTop;\n    const scrollTime = performance.now();\n    const scrollDeltaT = scrollTime - lastScrollTime;\n\n    if (scrollDeltaT > 500) {\n      scrollVelocity = Math.sign(scrollTop - lastScrollTop);\n      markerOffset = markerRef.value.offsetTop;\n    } else {\n      scrollVelocity = scrollTop - lastScrollTop;\n    }\n\n    lastScrollTop = scrollTop;\n    lastScrollTime = scrollTime;\n\n    window.clearTimeout(scrollTimeout);\n    scrollTimeout = window.setTimeout(handleScrollend, 500);\n\n    calculateVisibleItems();\n  }\n\n  function handleScrollend() {\n    if (!containerRef.value || !markerRef.value) return;\n\n    scrollVelocity = 0;\n    lastScrollTime = 0;\n\n    window.clearTimeout(scrollTimeout);\n    calculateVisibleItems();\n  }\n\n  let raf = -1;\n  function calculateVisibleItems() {\n    cancelAnimationFrame(raf);\n    raf = requestAnimationFrame(_calculateVisibleItems);\n  }\n\n  function _calculateVisibleItems() {\n    if (!containerRef.value || !viewportHeight.value || !itemHeight.value) return;\n    const scrollTop = lastScrollTop - markerOffset;\n    const direction = Math.sign(scrollVelocity);\n\n    const startPx = Math.max(0, scrollTop - BUFFER_PX);\n    const start = clamp(calculateIndex(startPx), 0, items.value.length);\n\n    const endPx = scrollTop + viewportHeight.value + BUFFER_PX;\n    const end = clamp(calculateIndex(endPx) + 1, start + 1, items.value.length);\n\n    if (\n      // Only update the side we're scrolling towards,\n      // the other side will be updated incidentally\n      (direction !== UP || start < first.value) &&\n      (direction !== DOWN || end > last.value)\n    ) {\n      const topOverflow = calculateOffset(first.value) - calculateOffset(start);\n      const bottomOverflow = calculateOffset(end) - calculateOffset(last.value);\n      const bufferOverflow = Math.max(topOverflow, bottomOverflow);\n\n      if (bufferOverflow > BUFFER_PX) {\n        first.value = start;\n        last.value = end;\n      } else {\n        // Only update the side that's reached its limit if there's still buffer left\n        if (start <= 0) first.value = start;\n        if (end >= items.value.length) last.value = end;\n      }\n    }\n\n    paddingTop.value = calculateOffset(first.value);\n    paddingBottom.value = calculateOffset(items.value.length) - calculateOffset(last.value);\n  }\n\n  function scrollToIndex(index: number) {\n    const offset = calculateOffset(index);\n    if (!containerRef.value || (index && !offset)) {\n      targetScrollIndex = index;\n    } else {\n      containerRef.value.scrollTop = offset;\n    }\n  }\n\n  const computedItems = computed(() => {\n    return items.value.slice(first.value, last.value).map((item, index) => {\n      const _index = index + first.value;\n      return {\n        raw: item,\n        index: _index,\n        key: getPropertyFromItem(item, props.itemKey, _index)\n      };\n    });\n  });\n\n  watch(\n    items,\n    () => {\n      sizes = Array.from({ length: items.value.length });\n      offsets = Array.from({ length: items.value.length });\n      updateOffsets.immediate();\n      calculateVisibleItems();\n    },\n    { deep: 1 }\n  );\n\n  return {\n    containerRef,\n    markerRef,\n    computedItems,\n    paddingTop,\n    paddingBottom,\n    calculateVisibleItems,\n    scrollToIndex,\n    handleScroll,\n    handleScrollend,\n    handleItemResize\n  };\n}\n\nfunction binaryClosest(arr: ArrayLike<number>, val: number) {\n  let high = arr.length - 1;\n  let low = 0;\n  let mid = 0;\n  let item = null;\n  let target = -1;\n\n  if (arr[high]! < val) {\n    return high;\n  }\n\n  while (low <= high) {\n    mid = (low + high) >> 1;\n    item = arr[mid]!;\n\n    if (item > val) {\n      high = mid - 1;\n    } else if (item < val) {\n      target = mid;\n      low = mid + 1;\n    } else if (item === val) {\n      return mid;\n    } else {\n      return low;\n    }\n  }\n\n  return target;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useVirtual.js","sources":["../../../../../src/composables/useVirtual/useVirtual.ts"],"sourcesContent":["import { useDisplay } from '@cds/composables/useDisplay';\nimport { useResizeObserver } from '@cds/composables/useResizeObserver';\nimport { propsFactory } from '@cds/core';\nimport { clamp, debounce, getPropertyFromItem, IN_BROWSER, type SelectItemKey } from '@cds/utils';\nimport {\n  computed,\n  type ExtractPublicPropTypes,\n  nextTick,\n  onScopeDispose,\n  type PropType,\n  type Ref,\n  ref,\n  shallowRef,\n  unref,\n  watch,\n  watchEffect\n} from 'vue';\n\nexport const defineVirtualProps = propsFactory(\n  {\n    /**\n     * Высота одного элемента в пикселях. Если не задана — высота измеряется автоматически.\n     * @en Height of a single item in pixels. When omitted, the height is measured automatically.\n     */\n    itemHeight: {\n      type: [Number, String],\n      default: null\n    },\n    /**\n     * Ключ элемента для идентификации (имя поля, путь или функция). По умолчанию используется индекс.\n     * @en Key that identifies an item (a field name, a path or a function). The index is used by default.\n     */\n    itemKey: {\n      type: [String, Array, Function] as PropType<SelectItemKey>,\n      default: null\n    },\n    /**\n     * Высота области просмотра виртуального списка.\n     * @en Height of the viewport of the virtual list.\n     */\n    height: [Number, String]\n  },\n  'virtual'\n);\n\nexport interface VirtualProps extends ExtractPublicPropTypes<ReturnType<typeof defineVirtualProps>> {}\n\nconst UP = -1;\nconst DOWN = 1;\nconst BUFFER_PX = 100;\n\nexport function useVirtual<T>(props: VirtualProps, items: Ref<readonly T[]>) {\n  const display = useDisplay();\n\n  const itemHeight = shallowRef(0);\n  watchEffect(() => {\n    itemHeight.value = parseFloat(props.itemHeight || 0);\n  });\n\n  const paddingTop = shallowRef(0);\n  const paddingBottom = shallowRef(0);\n  const first = shallowRef(0);\n  const last = shallowRef(Math.ceil((parseInt(props.height!) || display.height.value) / (itemHeight.value || 16)) || 1);\n\n  const containerRef = ref<HTMLElement>();\n  const markerRef = ref<HTMLElement>();\n  let markerOffset = 0;\n\n  const { resizeRef, contentRect } = useResizeObserver();\n\n  watchEffect(() => {\n    resizeRef.value = unref(containerRef);\n  });\n\n  const viewportHeight = computed(() => {\n    return containerRef.value === document.documentElement\n      ? display.height.value\n      : contentRect.value?.height || parseInt(props.height!) || 0;\n  });\n\n  const hasInitialRender = computed(() => {\n    return !!(unref(containerRef) && unref(markerRef) && unref(viewportHeight) && unref(itemHeight));\n  });\n\n  let sizes = Array.from<number | null>({ length: items.value.length });\n  let offsets = Array.from<number>({ length: items.value.length });\n  let targetScrollIndex = -1;\n\n  const updateTime = shallowRef(0);\n\n  const updateOffsets = debounce(() => {\n    const start = performance.now();\n    offsets[0] = 0;\n    const length = items.value.length;\n    for (let i = 1; i <= length; i++) {\n      offsets[i] = (offsets[i - 1] || 0) + getSize(i - 1);\n    }\n    updateTime.value = Math.max(updateTime.value, performance.now() - start);\n  }, updateTime);\n\n  const unwatch = watch(hasInitialRender, (v) => {\n    if (!v) return;\n\n    unwatch();\n\n    markerOffset = markerRef.value!.offsetTop;\n    updateOffsets.immediate();\n    calculateVisibleItems();\n\n    if (!~targetScrollIndex) return;\n\n    nextTick(() => {\n      IN_BROWSER &&\n        window.requestAnimationFrame(() => {\n          scrollToIndex(targetScrollIndex);\n          targetScrollIndex = -1;\n        });\n    });\n  });\n\n  onScopeDispose(() => {\n    updateOffsets.clear();\n  });\n\n  function getSize(index: number) {\n    return sizes[index] || itemHeight.value;\n  }\n\n  function handleItemResize(index: number, height: number) {\n    const prevHeight = sizes[index];\n    const prevMinHeight = itemHeight.value;\n\n    itemHeight.value = prevMinHeight ? Math.min(itemHeight.value, height) : height;\n\n    if (prevHeight !== height || prevMinHeight !== itemHeight.value) {\n      sizes[index] = height;\n      updateOffsets();\n    }\n  }\n\n  function calculateOffset(index: number) {\n    index = clamp(index, 0, items.value.length);\n    const whole = Math.floor(index);\n    const fraction = index % 1;\n    const next = whole + 1;\n    const wholeOffset = offsets[whole] || 0;\n    const nextOffset = offsets[next] || wholeOffset;\n    return wholeOffset + (nextOffset - wholeOffset) * fraction;\n  }\n\n  function calculateIndex(scrollTop: number) {\n    return binaryClosest(offsets, scrollTop);\n  }\n\n  let lastScrollTop = 0;\n  let scrollVelocity = 0;\n  let lastScrollTime = 0;\n\n  watch(viewportHeight, (val, oldVal) => {\n    calculateVisibleItems();\n    if (val < oldVal) {\n      requestAnimationFrame(() => {\n        scrollVelocity = 0;\n        calculateVisibleItems();\n      });\n    }\n  });\n\n  let scrollTimeout = -1;\n  function handleScroll() {\n    if (!containerRef.value || !markerRef.value) return;\n\n    const scrollTop = containerRef.value.scrollTop;\n    const scrollTime = performance.now();\n    const scrollDeltaT = scrollTime - lastScrollTime;\n\n    if (scrollDeltaT > 500) {\n      scrollVelocity = Math.sign(scrollTop - lastScrollTop);\n      markerOffset = markerRef.value.offsetTop;\n    } else {\n      scrollVelocity = scrollTop - lastScrollTop;\n    }\n\n    lastScrollTop = scrollTop;\n    lastScrollTime = scrollTime;\n\n    window.clearTimeout(scrollTimeout);\n    scrollTimeout = window.setTimeout(handleScrollend, 500);\n\n    calculateVisibleItems();\n  }\n\n  function handleScrollend() {\n    if (!containerRef.value || !markerRef.value) return;\n\n    scrollVelocity = 0;\n    lastScrollTime = 0;\n\n    window.clearTimeout(scrollTimeout);\n    calculateVisibleItems();\n  }\n\n  let raf = -1;\n  function calculateVisibleItems() {\n    cancelAnimationFrame(raf);\n    raf = requestAnimationFrame(_calculateVisibleItems);\n  }\n\n  function _calculateVisibleItems() {\n    if (!containerRef.value || !viewportHeight.value || !itemHeight.value) return;\n    const scrollTop = lastScrollTop - markerOffset;\n    const direction = Math.sign(scrollVelocity);\n\n    const startPx = Math.max(0, scrollTop - BUFFER_PX);\n    const start = clamp(calculateIndex(startPx), 0, items.value.length);\n\n    const endPx = scrollTop + viewportHeight.value + BUFFER_PX;\n    const end = clamp(calculateIndex(endPx) + 1, start + 1, items.value.length);\n\n    if (\n      // Only update the side we're scrolling towards,\n      // the other side will be updated incidentally\n      (direction !== UP || start < first.value) &&\n      (direction !== DOWN || end > last.value)\n    ) {\n      const topOverflow = calculateOffset(first.value) - calculateOffset(start);\n      const bottomOverflow = calculateOffset(end) - calculateOffset(last.value);\n      const bufferOverflow = Math.max(topOverflow, bottomOverflow);\n\n      if (bufferOverflow > BUFFER_PX) {\n        first.value = start;\n        last.value = end;\n      } else {\n        // Only update the side that's reached its limit if there's still buffer left\n        if (start <= 0) first.value = start;\n        if (end >= items.value.length) last.value = end;\n      }\n    }\n\n    paddingTop.value = calculateOffset(first.value);\n    paddingBottom.value = calculateOffset(items.value.length) - calculateOffset(last.value);\n  }\n\n  function scrollToIndex(index: number) {\n    const offset = calculateOffset(index);\n    if (!containerRef.value || (index && !offset)) {\n      targetScrollIndex = index;\n    } else {\n      containerRef.value.scrollTop = offset;\n    }\n  }\n\n  const computedItems = computed(() => {\n    return items.value.slice(first.value, last.value).map((item, index) => {\n      const _index = index + first.value;\n      return {\n        raw: item,\n        index: _index,\n        key: getPropertyFromItem(item, props.itemKey, _index)\n      };\n    });\n  });\n\n  watch(\n    items,\n    () => {\n      sizes = Array.from({ length: items.value.length });\n      offsets = Array.from({ length: items.value.length });\n      updateOffsets.immediate();\n      calculateVisibleItems();\n    },\n    { deep: 1 }\n  );\n\n  return {\n    containerRef,\n    markerRef,\n    computedItems,\n    paddingTop,\n    paddingBottom,\n    calculateVisibleItems,\n    scrollToIndex,\n    handleScroll,\n    handleScrollend,\n    handleItemResize\n  };\n}\n\nfunction binaryClosest(arr: ArrayLike<number>, val: number) {\n  let high = arr.length - 1;\n  let low = 0;\n  let mid = 0;\n  let item = null;\n  let target = -1;\n\n  if (arr[high]! < val) {\n    return high;\n  }\n\n  while (low <= high) {\n    mid = (low + high) >> 1;\n    item = arr[mid]!;\n\n    if (item > val) {\n      high = mid - 1;\n    } else if (item < val) {\n      target = mid;\n      low = mid + 1;\n    } else if (item === val) {\n      return mid;\n    } else {\n      return low;\n    }\n  }\n\n  return target;\n}\n"],"names":[],"mappings":"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"}

package/dist/es/src/core/defineComponent.js

@@ -16,7 +16,10 @@ const defineComponentProps = propsFactory(
 );
 const defineTagProps = propsFactory(
   {
-    /** Пользовательский HTML-тег для отображения */
+    /**
+     * Пользовательский HTML-тег для отображения
+     * @en Custom HTML tag or component to render
+     */
     tag: {
       type: [String, Object, Function],
       default: "div"

package/dist/es/src/core/defineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"defineComponent.js","sources":["../../../../src/core/defineComponent.ts"],"sourcesContent":["import { propsFactory } from '@cds/core/propsFactory';\nimport { useDefaults } from '@cds/core/useDefaults';\nimport { classNames, kebabCase, pick } from '@cds/utils';\nimport {\n  type ComponentPublicInstance,\n  defineComponent,\n  type ExtractPublicPropTypes,\n  type FunctionalComponent,\n  h,\n  type PropType,\n  type StyleValue,\n  type VNodeChild\n} from 'vue';\n\nexport type JSXComponent<Props = any> = { new (): ComponentPublicInstance<Props> } | FunctionalComponent<Props>;\n\nexport type SlotsToProps<U extends RawSlots, T = MakeInternalSlots<U>> = {\n  $children?:\n    | VNodeChild\n    | (T extends { default: infer V } ? V : {})\n    | { [K in keyof T]?: T[K] }\n    | { $stable?: boolean };\n  'v-slots'?: { [K in keyof T]?: T[K] | false };\n} & {\n  [K in keyof T as `v-slot:${K & string}`]?: T[K] | false;\n};\n\nexport type ClassValue = any;\n\n/**\n * Defines the properties for a customizable component.\n *\n * The `defineComponentProps` object is constructed using the `propsFactory` function,\n * and it provides two configurable props for a component:\n *\n * 1. `class`: A flexible prop that accepts a string, array, or object\n *    for defining CSS class names. This allows dynamic class application based on user input.\n *\n * 2. `style`: A versatile prop that accepts a string, array, or object\n *    for defining inline styles. The default value for this prop is `null`.\n */\nexport const defineComponentProps = propsFactory(\n  {\n    class: [String, Array, Object] as PropType<ClassValue>,\n    style: {\n      type: [String, Array, Object] as PropType<StyleValue>,\n      default: null\n    }\n  },\n  'component'\n);\n\nexport type ComponentProps = ExtractPublicPropTypes<ReturnType<typeof defineComponentProps>>;\n\n/**\n * Defines configurable properties for a custom tag component.\n *\n * The `defineTagProps` is a property factory function that creates\n * reactive and type-safe props for a custom tag component. It primarily\n * includes a `tag` property to specify the HTML tag or component to render.\n */\nexport const defineTagProps = propsFactory(\n  {\n    /** Пользовательский HTML-тег для отображения */\n    tag: {\n      type: [String, Object, Function] as PropType<string | JSXComponent>,\n      default: 'div'\n    }\n  },\n  'tag'\n);\n\nexport type TagProps = ExtractPublicPropTypes<ReturnType<typeof defineTagProps>>;\n\ntype PropsFactoryFn = (defaults?: any) => Record<string, any>;\n\n/**\n * Filters the given props object to include only the keys defined in the provided factory function.\n *\n * @example\n * const inputProps = filterProps(defineCdsInputProps, props);\n * const fieldProps = filterProps(defineCdsFieldProps, props);\n */\nexport function filterProps<F extends PropsFactoryFn, P extends Record<string, any>>(\n  factory: F,\n  props: P\n): Pick<P, Extract<keyof P, Exclude<keyof ReturnType<F>, 'class' | 'style'>>> {\n  const factoryProps = factory();\n  const keys = Object.keys(factoryProps).filter((key) => key !== 'class' && key !== 'style');\n  return pick(props, keys as Extract<keyof P, string>[]) as any;\n}\n\ntype RawSlots = Record<string, unknown>;\ntype Slot<T> = [T] extends [never] ? () => VNodeChild : (arg: T) => VNodeChild;\ntype MakeInternalSlots<T extends RawSlots> = {\n  [K in keyof T]: Slot<T[K]>;\n};\n\n/**\n * Creates a simple functional Vue component with the specified class name, tag, and optional name.\n *\n * @param {string} componentName - Name of the component.\n * @param {string} className - The class name to apply to the root element of the component.\n * @param {string} [tag='div'] - The HTML tag name to be used as the root element. Defaults to 'div'.\n * @return {import('vue').DefineComponent} A Vue component with the specified configuration.\n */\nexport function createSimpleFunctionalComponent(componentName: string, className?: string, tag = 'div') {\n  return defineComponent({\n    name: componentName,\n    props: {\n      ...defineTagProps(),\n      ...defineComponentProps()\n    },\n    setup(_props, { slots }) {\n      const props = useDefaults(_props);\n      return () =>\n        h(\n          props.tag || tag,\n          { class: classNames(className ?? kebabCase(componentName), props.class), style: props.style },\n          slots.default?.()\n        );\n    }\n  });\n}\n"],"names":[],"mappings":";;;;;;AAyCO,MAAM,uBAAuB;AAAA,EAClC;AAAA,IACE,OAAO,CAAC,QAAQ,OAAO,MAAM;AAAA,IAC7B,OAAO;AAAA,MACL,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF;AACF;AAWO,MAAM,iBAAiB;AAAA,EAC5B;AAAA;AAAA,IAEE,KAAK;AAAA,MACH,MAAM,CAAC,QAAQ,QAAQ,QAAQ;AAAA,MAC/B,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF;AACF;AAaO,SAAS,YACd,SACA,OAC4E;AAC5E,QAAM,eAAe,QAAA;AACrB,QAAM,OAAO,OAAO,KAAK,YAAY,EAAE,OAAO,CAAC,QAAQ,QAAQ,WAAW,QAAQ,OAAO;AACzF,SAAO,KAAK,OAAO,IAAkC;AACvD;AAgBO,SAAS,gCAAgC,eAAuB,WAAoB,MAAM,OAAO;AACtG,SAAO,gBAAgB;AAAA,IACrB,MAAM;AAAA,IACN,OAAO;AAAA,MACL,GAAG,eAAA;AAAA,MACH,GAAG,qBAAA;AAAA,IAAqB;AAAA,IAE1B,MAAM,QAAQ,EAAE,SAAS;AACvB,YAAM,QAAQ,YAAY,MAAM;AAChC,aAAO;;AACL;AAAA,UACE,MAAM,OAAO;AAAA,UACb,EAAE,OAAO,WAAW,aAAa,UAAU,aAAa,GAAG,MAAM,KAAK,GAAG,OAAO,MAAM,MAAA;AAAA,WACtF,WAAM,YAAN;AAAA,QAAgB;AAAA;AAAA,IAEtB;AAAA,EAAA,CACD;AACH;"}
+{"version":3,"file":"defineComponent.js","sources":["../../../../src/core/defineComponent.ts"],"sourcesContent":["import { propsFactory } from '@cds/core/propsFactory';\nimport { useDefaults } from '@cds/core/useDefaults';\nimport { classNames, kebabCase, pick } from '@cds/utils';\nimport {\n  type ComponentPublicInstance,\n  defineComponent,\n  type ExtractPublicPropTypes,\n  type FunctionalComponent,\n  h,\n  type PropType,\n  type StyleValue,\n  type VNodeChild\n} from 'vue';\n\nexport type JSXComponent<Props = any> = { new (): ComponentPublicInstance<Props> } | FunctionalComponent<Props>;\n\nexport type SlotsToProps<U extends RawSlots, T = MakeInternalSlots<U>> = {\n  $children?:\n    | VNodeChild\n    | (T extends { default: infer V } ? V : {})\n    | { [K in keyof T]?: T[K] }\n    | { $stable?: boolean };\n  'v-slots'?: { [K in keyof T]?: T[K] | false };\n} & {\n  [K in keyof T as `v-slot:${K & string}`]?: T[K] | false;\n};\n\nexport type ClassValue = any;\n\n/**\n * Defines the properties for a customizable component.\n *\n * The `defineComponentProps` object is constructed using the `propsFactory` function,\n * and it provides two configurable props for a component:\n *\n * 1. `class`: A flexible prop that accepts a string, array, or object\n *    for defining CSS class names. This allows dynamic class application based on user input.\n *\n * 2. `style`: A versatile prop that accepts a string, array, or object\n *    for defining inline styles. The default value for this prop is `null`.\n */\nexport const defineComponentProps = propsFactory(\n  {\n    class: [String, Array, Object] as PropType<ClassValue>,\n    style: {\n      type: [String, Array, Object] as PropType<StyleValue>,\n      default: null\n    }\n  },\n  'component'\n);\n\nexport type ComponentProps = ExtractPublicPropTypes<ReturnType<typeof defineComponentProps>>;\n\n/**\n * Defines configurable properties for a custom tag component.\n *\n * The `defineTagProps` is a property factory function that creates\n * reactive and type-safe props for a custom tag component. It primarily\n * includes a `tag` property to specify the HTML tag or component to render.\n */\nexport const defineTagProps = propsFactory(\n  {\n    /**\n     * Пользовательский HTML-тег для отображения\n     * @en Custom HTML tag or component to render\n     */\n    tag: {\n      type: [String, Object, Function] as PropType<string | JSXComponent>,\n      default: 'div'\n    }\n  },\n  'tag'\n);\n\nexport type TagProps = ExtractPublicPropTypes<ReturnType<typeof defineTagProps>>;\n\ntype PropsFactoryFn = (defaults?: any) => Record<string, any>;\n\n/**\n * Filters the given props object to include only the keys defined in the provided factory function.\n *\n * @example\n * const inputProps = filterProps(defineCdsInputProps, props);\n * const fieldProps = filterProps(defineCdsFieldProps, props);\n */\nexport function filterProps<F extends PropsFactoryFn, P extends Record<string, any>>(\n  factory: F,\n  props: P\n): Pick<P, Extract<keyof P, Exclude<keyof ReturnType<F>, 'class' | 'style'>>> {\n  const factoryProps = factory();\n  const keys = Object.keys(factoryProps).filter((key) => key !== 'class' && key !== 'style');\n  return pick(props, keys as Extract<keyof P, string>[]) as any;\n}\n\ntype RawSlots = Record<string, unknown>;\ntype Slot<T> = [T] extends [never] ? () => VNodeChild : (arg: T) => VNodeChild;\ntype MakeInternalSlots<T extends RawSlots> = {\n  [K in keyof T]: Slot<T[K]>;\n};\n\n/**\n * Creates a simple functional Vue component with the specified class name, tag, and optional name.\n *\n * @param {string} componentName - Name of the component.\n * @param {string} className - The class name to apply to the root element of the component.\n * @param {string} [tag='div'] - The HTML tag name to be used as the root element. Defaults to 'div'.\n * @return {import('vue').DefineComponent} A Vue component with the specified configuration.\n */\nexport function createSimpleFunctionalComponent(componentName: string, className?: string, tag = 'div') {\n  return defineComponent({\n    name: componentName,\n    props: {\n      ...defineTagProps(),\n      ...defineComponentProps()\n    },\n    setup(_props, { slots }) {\n      const props = useDefaults(_props);\n      return () =>\n        h(\n          props.tag || tag,\n          { class: classNames(className ?? kebabCase(componentName), props.class), style: props.style },\n          slots.default?.()\n        );\n    }\n  });\n}\n"],"names":[],"mappings":";;;;;;AAyCO,MAAM,uBAAuB;AAAA,EAClC;AAAA,IACE,OAAO,CAAC,QAAQ,OAAO,MAAM;AAAA,IAC7B,OAAO;AAAA,MACL,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF;AACF;AAWO,MAAM,iBAAiB;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,KAAK;AAAA,MACH,MAAM,CAAC,QAAQ,QAAQ,QAAQ;AAAA,MAC/B,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF;AACF;AAaO,SAAS,YACd,SACA,OAC4E;AAC5E,QAAM,eAAe,QAAA;AACrB,QAAM,OAAO,OAAO,KAAK,YAAY,EAAE,OAAO,CAAC,QAAQ,QAAQ,WAAW,QAAQ,OAAO;AACzF,SAAO,KAAK,OAAO,IAAkC;AACvD;AAgBO,SAAS,gCAAgC,eAAuB,WAAoB,MAAM,OAAO;AACtG,SAAO,gBAAgB;AAAA,IACrB,MAAM;AAAA,IACN,OAAO;AAAA,MACL,GAAG,eAAA;AAAA,MACH,GAAG,qBAAA;AAAA,IAAqB;AAAA,IAE1B,MAAM,QAAQ,EAAE,SAAS;AACvB,YAAM,QAAQ,YAAY,MAAM;AAChC,aAAO;;AACL;AAAA,UACE,MAAM,OAAO;AAAA,UACb,EAAE,OAAO,WAAW,aAAa,UAAU,aAAa,GAAG,MAAM,KAAK,GAAG,OAAO,MAAM,MAAA;AAAA,WACtF,WAAM,YAAN;AAAA,QAAgB;AAAA;AAAA,IAEtB;AAAA,EAAA,CACD;AACH;"}

package/dist/es/src/themes/lumaDark.js

@@ -3,10 +3,14 @@ const lumaDark = {
   ...cdsDark,
   colors: {
     ...cdsDark.colors,
-    "brand-secondary-hover": "#650B25",
-    "brand-secondary-border": "#8A1034",
-    "brand-secondary-active": "#8A1034",
-    "brand-secondary": "#3A0715",
+    "surface-secondary": "#24262C",
+    "surface-primary": "#1B1D21",
+    "surface-elevated": "#24262C",
+    "page-primary": "#16171A",
+    "brand-secondary-hover": "#8A1034",
+    "brand-secondary-border": "#A01639",
+    "brand-secondary-active": "#A01639",
+    "brand-secondary": "#6F0C28",
     "brand-primary-hover": "#8A1034",
     "brand-primary-content": "#FFD9E1",
     "brand-primary-border": "#D2154B",

package/dist/es/src/themes/lumaDark.js.map

@@ -1 +1 @@
-{"version":3,"file":"lumaDark.js","sources":["../../../../src/themes/lumaDark.ts"],"sourcesContent":["import cdsDark from './cdsDark';\n\nexport default {\n  ...cdsDark,\n  colors: {\n    ...cdsDark.colors,\n    'brand-secondary-hover': '#650B25',\n    'brand-secondary-border': '#8A1034',\n    'brand-secondary-active': '#8A1034',\n    'brand-secondary': '#3A0715',\n    'brand-primary-hover': '#8A1034',\n    'brand-primary-content': '#FFD9E1',\n    'brand-primary-border': '#D2154B',\n    'brand-primary-active': '#650B25',\n    'brand-primary': '#D2154B'\n  }\n};\n"],"names":[],"mappings":";AAEA,MAAA,WAAe;AAAA,EACb,GAAG;AAAA,EACH,QAAQ;AAAA,IACN,GAAG,QAAQ;AAAA,IACX,yBAAyB;AAAA,IACzB,0BAA0B;AAAA,IAC1B,0BAA0B;AAAA,IAC1B,mBAAmB;AAAA,IACnB,uBAAuB;AAAA,IACvB,yBAAyB;AAAA,IACzB,wBAAwB;AAAA,IACxB,wBAAwB;AAAA,IACxB,iBAAiB;AAAA,EAAA;AAErB;"}
+{"version":3,"file":"lumaDark.js","sources":["../../../../src/themes/lumaDark.ts"],"sourcesContent":["import cdsDark from './cdsDark';\n\nexport default {\n  ...cdsDark,\n  colors: {\n    ...cdsDark.colors,\n    'surface-secondary': '#24262C',\n    'surface-primary': '#1B1D21',\n    'surface-elevated': '#24262C',\n    'page-primary': '#16171A',\n    'brand-secondary-hover': '#8A1034',\n    'brand-secondary-border': '#A01639',\n    'brand-secondary-active': '#A01639',\n    'brand-secondary': '#6F0C28',\n    'brand-primary-hover': '#8A1034',\n    'brand-primary-content': '#FFD9E1',\n    'brand-primary-border': '#D2154B',\n    'brand-primary-active': '#650B25',\n    'brand-primary': '#D2154B'\n  }\n};\n"],"names":[],"mappings":";AAEA,MAAA,WAAe;AAAA,EACb,GAAG;AAAA,EACH,QAAQ;AAAA,IACN,GAAG,QAAQ;AAAA,IACX,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,yBAAyB;AAAA,IACzB,0BAA0B;AAAA,IAC1B,0BAA0B;AAAA,IAC1B,mBAAmB;AAAA,IACnB,uBAAuB;AAAA,IACvB,yBAAyB;AAAA,IACzB,wBAAwB;AAAA,IACxB,wBAAwB;AAAA,IACxB,iBAAiB;AAAA,EAAA;AAErB;"}

package/dist/es/src/utils/date/date.js

@@ -378,14 +378,14 @@ function endOfDate(date, unit, utc) {
 }
 function getMaxDate(date, ...args) {
   let _date = new Date(date);
-  Array.prototype.slice.call(args, 1).forEach((date2) => {
+  args.forEach((date2) => {
     _date = Math.max(_date, new Date(date2));
   });
   return _date;
 }
 function getMinDate(date, ...args) {
   let _date = new Date(date);
-  Array.prototype.slice.call(args, 1).forEach((date2) => {
+  args.forEach((date2) => {
     _date = Math.min(_date, new Date(date2));
   });
   return _date;
@@ -621,7 +621,7 @@ function formatTimezone(offset, delimiter = "") {
 function applyYearMonthDayChange(date, modified, sign) {
   let year = date.getFullYear();
   let month = date.getMonth();
-  const day = date.getMonth();
+  const day = date.getDate();
   if (modified.year) {
     year += sign * modified.year;
     delete modified.year;
@@ -659,7 +659,7 @@ function applyYearMonthDay(date, modified, middle) {
 function getChange(date, rawModified, sign) {
   const modified = normalizeModified(rawModified);
   const _date = new Date(date);
-  const changedDate = modified.year || modified.month || modified.date ? applyYearMonthDayChange(date, modified, sign) : _date;
+  const changedDate = modified.year || modified.month || modified.date ? applyYearMonthDayChange(_date, modified, sign) : _date;
   for (const key in modified) {
     const op = key.charAt(0).toUpperCase() + key.slice(1);
     changedDate[`set${op}`](