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

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

@@ -1 +1 @@
-{"version":3,"file":"useReveal.js","sources":["../../../../../src/composables/useReveal/useReveal.ts"],"sourcesContent":["import { propsFactory } from '@cds/core';\nimport { onMounted, type PropType, shallowRef, toRef } from 'vue';\n\nexport interface RevealProps {\n  reveal: boolean | { duration?: number };\n}\n\n/**\n * Define the reveal properties for components.\n */\nexport const defineRevealProps = propsFactory(\n  {\n    /** Анимирует индикатор от нуля до текущего значения при появлении компонента. Объект `{ duration }` задаёт длительность анимации в миллисекундах */\n    reveal: {\n      type: [Boolean, Object] as PropType<\n        | boolean\n        | {\n            duration?: number;\n          }\n      >,\n      default: false\n    }\n  },\n  'reveal'\n);\n\nexport function useReveal(props: RevealProps) {\n  const defaultDuration = 900;\n  const duration = toRef(() =>\n    typeof props.reveal === 'object' ? Math.max(0, Number(props.reveal.duration ?? defaultDuration)) : defaultDuration\n  );\n\n  const state = shallowRef(props.reveal ? 'initial' : 'disabled');\n\n  onMounted(async () => {\n    if (props.reveal) {\n      state.value = 'initial';\n      await new Promise((resolve) => requestAnimationFrame(resolve));\n      state.value = 'pending';\n      await new Promise((resolve) => setTimeout(resolve, duration.value));\n      state.value = 'done';\n    }\n  });\n\n  return {\n    duration,\n    state\n  };\n}\n"],"names":[],"mappings":";;AAUO,MAAM,oBAAoB;AAAA,EAC/B;AAAA;AAAA,IAEE,QAAQ;AAAA,MACN,MAAM,CAAC,SAAS,MAAM;AAAA,MAMtB,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF;AACF;AAEO,SAAS,UAAU,OAAoB;AAC5C,QAAM,kBAAkB;AACxB,QAAM,WAAW;AAAA,IAAM,MACrB,OAAO,MAAM,WAAW,WAAW,KAAK,IAAI,GAAG,OAAO,MAAM,OAAO,YAAY,eAAe,CAAC,IAAI;AAAA,EAAA;AAGrG,QAAM,QAAQ,WAAW,MAAM,SAAS,YAAY,UAAU;AAE9D,YAAU,YAAY;AACpB,QAAI,MAAM,QAAQ;AAChB,YAAM,QAAQ;AACd,YAAM,IAAI,QAAQ,CAAC,YAAY,sBAAsB,OAAO,CAAC;AAC7D,YAAM,QAAQ;AACd,YAAM,IAAI,QAAQ,CAAC,YAAY,WAAW,SAAS,SAAS,KAAK,CAAC;AAClE,YAAM,QAAQ;AAAA,IAChB;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useReveal.js","sources":["../../../../../src/composables/useReveal/useReveal.ts"],"sourcesContent":["import { propsFactory } from '@cds/core';\nimport { onMounted, type PropType, shallowRef, toRef } from 'vue';\n\nexport interface RevealProps {\n  reveal: boolean | { duration?: number };\n}\n\n/**\n * Define the reveal properties for components.\n */\nexport const defineRevealProps = propsFactory(\n  {\n    /**\n     * Анимирует индикатор от нуля до текущего значения при появлении компонента. Объект `{ duration }` задаёт длительность анимации в миллисекундах\n     * @en Animates the indicator from zero to the current value when the component appears. The `{ duration }` object sets the animation duration in milliseconds\n     */\n    reveal: {\n      type: [Boolean, Object] as PropType<\n        | boolean\n        | {\n            duration?: number;\n          }\n      >,\n      default: false\n    }\n  },\n  'reveal'\n);\n\nexport function useReveal(props: RevealProps) {\n  const defaultDuration = 900;\n  const duration = toRef(() =>\n    typeof props.reveal === 'object' ? Math.max(0, Number(props.reveal.duration ?? defaultDuration)) : defaultDuration\n  );\n\n  const state = shallowRef(props.reveal ? 'initial' : 'disabled');\n\n  onMounted(async () => {\n    if (props.reveal) {\n      state.value = 'initial';\n      await new Promise((resolve) => requestAnimationFrame(resolve));\n      state.value = 'pending';\n      await new Promise((resolve) => setTimeout(resolve, duration.value));\n      state.value = 'done';\n    }\n  });\n\n  return {\n    duration,\n    state\n  };\n}\n"],"names":[],"mappings":";;AAUO,MAAM,oBAAoB;AAAA,EAC/B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,QAAQ;AAAA,MACN,MAAM,CAAC,SAAS,MAAM;AAAA,MAMtB,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF;AACF;AAEO,SAAS,UAAU,OAAoB;AAC5C,QAAM,kBAAkB;AACxB,QAAM,WAAW;AAAA,IAAM,MACrB,OAAO,MAAM,WAAW,WAAW,KAAK,IAAI,GAAG,OAAO,MAAM,OAAO,YAAY,eAAe,CAAC,IAAI;AAAA,EAAA;AAGrG,QAAM,QAAQ,WAAW,MAAM,SAAS,YAAY,UAAU;AAE9D,YAAU,YAAY;AACpB,QAAI,MAAM,QAAQ;AAChB,YAAM,QAAQ;AACd,YAAM,IAAI,QAAQ,CAAC,YAAY,sBAAsB,OAAO,CAAC;AAC7D,YAAM,QAAQ;AACd,YAAM,IAAI,QAAQ,CAAC,YAAY,WAAW,SAAS,SAAS,KAAK,CAAC;AAClE,YAAM,QAAQ;AAAA,IAChB;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/es/src/composables/useRouter/index.js

@@ -1,2 +1,2 @@
-
+import "vue";
 //# sourceMappingURL=index.js.map

package/dist/es/src/composables/useRouter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -5,22 +5,34 @@ import { a as IN_BROWSER } from "../../utils/dom/globals.js";
 import { resolveDynamicComponent, toRef, computed, unref, reactive, nextTick, onScopeDispose } from "vue";
 const defineRouterProps = propsFactory(
   {
-    /** Атрибут href для ссылки. Если указан, компонент будет вести себя как обычная ссылка */
+    /**
+     * Атрибут href для ссылки. Если указан, компонент будет вести себя как обычная ссылка
+     * @en The `href` attribute of the link. When set, the component behaves as a regular link
+     */
     href: {
       type: String,
       default: void 0
     },
-    /** Если true, навигация по маршруту будет заменять текущую запись в истории вместо добавления новой */
+    /**
+     * Если true, навигация по маршруту будет заменять текущую запись в истории вместо добавления новой
+     * @en If true, navigation replaces the current history entry instead of pushing a new one
+     */
     replace: {
       type: Boolean,
       default: void 0
     },
-    /** Маршрут назначения или объект для RouterLink. Если указан, компонент будет вести себя как RouterLink */
+    /**
+     * Маршрут назначения или объект для RouterLink. Если указан, компонент будет вести себя как RouterLink
+     * @en Target route or route location object for RouterLink. When set, the component behaves as a RouterLink
+     */
     to: {
       type: [String, Object],
       default: void 0
     },
-    /** Если true, активное состояние будет применяться только при точном совпадении маршрута */
+    /**
+     * Если true, активное состояние будет применяться только при точном совпадении маршрута
+     * @en If true, the active state applies only on an exact route match
+     */
     exact: {
       type: Boolean,
       default: void 0

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

@@ -1 +1 @@
-{"version":3,"file":"useRouter.js","sources":["../../../../../src/composables/useRouter/useRouter.ts"],"sourcesContent":["import { getCurrentInstance, propsFactory } from '@cds/core';\nimport { deepEqual, type EventProp, hasEvent, IN_BROWSER } from '@cds/utils';\nimport {\n  computed,\n  type ExtractPublicPropTypes,\n  nextTick,\n  onScopeDispose,\n  type PropType,\n  reactive,\n  type Ref,\n  resolveDynamicComponent,\n  type SetupContext,\n  toRef,\n  unref\n} from 'vue';\nimport type {\n  NavigationGuardReturn,\n  RouteLocation,\n  RouteLocationNormalizedLoaded,\n  RouteLocationRaw,\n  Router,\n  RouterLink as _RouterLink,\n  useLink as _useLink\n} from 'vue-router';\n\nexport interface LinkProps extends ExtractPublicPropTypes<ReturnType<typeof defineRouterProps>> {\n  disabled?: boolean | null;\n}\n\nexport interface LinkListeners {\n  onClick?: EventProp;\n  onClickOnce?: EventProp;\n}\n\nexport interface UseLink extends Omit<Partial<ReturnType<typeof _useLink>>, 'href' | 'route' | 'navigate'> {\n  isLink: Readonly<Ref<boolean>>;\n  isRouterLink: Readonly<Ref<boolean>>;\n  isClickable: Readonly<Ref<boolean>>;\n  href: Ref<string | undefined>;\n  linkProps: Record<string, string | undefined>;\n  route: Readonly<Ref<(RouteLocation & { href: string }) | undefined>>;\n  navigate: Readonly<Ref<ReturnType<typeof _useLink>['navigate'] | undefined>>;\n}\n\n/**\n * Factory for defining props related to router behavior for a component.\n *\n * The created props include options for assigning link targets, handling route navigation,\n * and defining how the component behaves in relation to the Vue Router.\n *\n * @prop {string|undefined} href - The `href` attribute for a link. If provided, the component behaves like a standard HTML link.\n * @prop {boolean|undefined} replace - If `true`, navigation will replace the current history entry instead of adding a new one.\n * @prop {string|object|undefined} to - Target route or a route location object for `RouterLink`. If provided, the component behaves as a `RouterLink`.\n * @prop {boolean|undefined} exact - If `true`, active state is applied only if the route matches exactly.\n */\nexport const defineRouterProps = propsFactory(\n  {\n    /** Атрибут href для ссылки. Если указан, компонент будет вести себя как обычная ссылка */\n    href: {\n      type: String as PropType<string>,\n      default: undefined\n    },\n    /** Если true, навигация по маршруту будет заменять текущую запись в истории вместо добавления новой */\n    replace: {\n      type: Boolean as PropType<boolean>,\n      default: undefined\n    },\n    /** Маршрут назначения или объект для RouterLink. Если указан, компонент будет вести себя как RouterLink */\n    to: {\n      type: [String, Object] as PropType<RouteLocationRaw>,\n      default: undefined\n    },\n    /** Если true, активное состояние будет применяться только при точном совпадении маршрута */\n    exact: {\n      type: Boolean as PropType<boolean>,\n      default: undefined\n    }\n  },\n  'router'\n);\n\n/**\n * Provides functionality and properties for handling links, including router links\n * and standard anchor tags, with reactive properties for navigation and interactivity.\n *\n * @param {LinkProps} props - The props for the link, including attributes like `href`, `to`, `replace`, and more.\n * @param {SetupContext['attrs']} attrs - The attributes passed to the link, e.g., event listeners like `click`.\n * @return {UseLink} An object containing properties and methods for managing the link:\n * - `route`: The route information for a router link, if applicable.\n * - `navigate`: A function to navigate the link if it's a router link.\n * - `href`: A computed property resolving the `href` for the link.\n * - `isLink`: A reactive boolean indicating whether the link is defined (`href` or `to`).\n * - `isRouterLink`: A reactive boolean indicating whether the link is a router link.\n * - `isClickable`: A reactive boolean indicating whether the link is interactable.\n * - `isActive`: A reactive boolean indicating if the route is active for router links.\n * - `linkProps`: Reactive link attributes such as `href`, `aria-current`, `aria-disabled`, and `tabindex`.\n */\nexport function useLink(props: LinkProps & LinkListeners, attrs: SetupContext['attrs']): UseLink {\n  const route = useRoute();\n  const RouterLink = resolveDynamicComponent('RouterLink') as typeof _RouterLink | string;\n  const isLink = toRef(() => !!(props.href || props.to));\n  const isClickable = computed(() => unref(isLink) || hasEvent(attrs, 'click') || hasEvent(props, 'click'));\n\n  if (typeof RouterLink === 'string' || !('useLink' in RouterLink)) {\n    const href = toRef(() => props.href);\n\n    return {\n      isLink,\n      isRouterLink: toRef(() => false),\n      isClickable,\n      href,\n      linkProps: reactive({ href }),\n      route: toRef(() => undefined),\n      navigate: toRef(() => undefined)\n    };\n  }\n\n  const routerLink = RouterLink.useLink({\n    to: toRef(() => props.to || ''),\n    replace: toRef(() => props.replace)\n  });\n  const link = computed(() => (props.to ? routerLink : undefined));\n  const href = computed(() => (props.to ? unref(link)?.route.value.href : props.href));\n\n  const isRouterLink = toRef(() => !!props.to);\n  const isActive = computed(() => {\n    if (!link.value) return false;\n    if (!props.exact) return link.value.isActive?.value ?? false;\n    if (!route.value) return link.value.isExactActive?.value ?? false;\n\n    return link.value.isExactActive?.value && deepEqual(link.value.route.value.query, route.value.query);\n  });\n\n  return {\n    href,\n    isLink,\n    isRouterLink,\n    isClickable,\n    isActive,\n    linkProps: reactive({\n      href,\n      'aria-current': toRef(() => (unref(isActive) ? 'page' : undefined)),\n      'aria-disabled': toRef(() => (props.disabled && unref(isLink) ? 'true' : undefined)),\n      tabindex: toRef(() => (props.disabled && unref(isLink) ? '-1' : undefined))\n    }),\n    route: toRef(() => unref(link)?.route.value),\n    navigate: toRef(() => unref(link)?.navigate)\n  };\n}\n\n/**\n * A composable function that provides a reactive reference to the current route.\n * It retrieves the current route from the Vue instance and wraps it in a computed reference.\n * This allows for reactive updates when the route changes.\n *\n * @return {Ref<RouteLocationNormalizedLoaded | undefined>} A reactive reference to the current normalized loaded route or undefined if no route is available.\n */\nexport function useRoute(): Ref<RouteLocationNormalizedLoaded | undefined> {\n  const vm = getCurrentInstance('useRoute');\n  return computed(() => vm?.proxy?.$route);\n}\n\n/**\n * Provides access to the current Vue Router instance.\n *\n * This method retrieves the router instance associated with the current Vue component\n * instance, if available. The router instance can be used for navigation and accessing\n * route-specific data.\n *\n * @return {Router | undefined} The Vue Router instance if the current component is associated\n * with a router, or undefined if it is not found.\n */\nexport function useRouter(): Router | undefined {\n  const vm = getCurrentInstance('useRouter');\n  return vm?.proxy?.$router;\n}\n\nlet inTransition = false;\n\n/**\n * Sets up a back button handler using the provided router and callback function.\n * Listens for browser back button events and triggers the given callback during navigation.\n * Ensures safe handling of navigation transitions.\n *\n * @param {Router | undefined} router - The router instance to integrate with, which can be undefined if no router is used.\n * @param {() => NavigationGuardReturn} cb - A callback function that will be invoked during a back button interaction or navigation guard step.\n * @return {void} No return value.\n */\nexport function useBackButton(router: Router | undefined, cb: () => NavigationGuardReturn) {\n  let popped = false;\n  let removeBefore: (() => void) | undefined;\n  let removeAfter: (() => void) | undefined;\n\n  if (IN_BROWSER && router?.beforeEach) {\n    nextTick(() => {\n      window.addEventListener('popstate', onPopstate);\n      removeBefore = router.beforeEach(() => {\n        if (!inTransition) {\n          inTransition = true;\n          return new Promise<NavigationGuardReturn>((resolve) => {\n            setTimeout(() => resolve(popped ? cb() : undefined));\n          });\n        }\n        return popped ? cb() : undefined;\n      });\n      removeAfter = router?.afterEach(() => {\n        inTransition = false;\n      });\n    });\n    onScopeDispose(() => {\n      window.removeEventListener('popstate', onPopstate);\n      removeBefore?.();\n      removeAfter?.();\n    });\n  }\n\n  function onPopstate(e: PopStateEvent) {\n    if (e.state?.replaced) return;\n\n    popped = true;\n    setTimeout(() => (popped = false));\n  }\n}\n"],"names":["href"],"mappings":"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"}
+{"version":3,"file":"useRouter.js","sources":["../../../../../src/composables/useRouter/useRouter.ts"],"sourcesContent":["import { getCurrentInstance, propsFactory } from '@cds/core';\nimport { deepEqual, type EventProp, hasEvent, IN_BROWSER } from '@cds/utils';\nimport {\n  computed,\n  type ExtractPublicPropTypes,\n  nextTick,\n  onScopeDispose,\n  type PropType,\n  reactive,\n  type Ref,\n  resolveDynamicComponent,\n  type SetupContext,\n  toRef,\n  unref\n} from 'vue';\nimport type {\n  NavigationGuardReturn,\n  RouteLocation,\n  RouteLocationNormalizedLoaded,\n  RouteLocationRaw,\n  Router,\n  RouterLink as _RouterLink,\n  useLink as _useLink\n} from 'vue-router';\n\nexport interface LinkProps extends ExtractPublicPropTypes<ReturnType<typeof defineRouterProps>> {\n  disabled?: boolean | null;\n}\n\nexport interface LinkListeners {\n  onClick?: EventProp;\n  onClickOnce?: EventProp;\n}\n\nexport interface UseLink extends Omit<Partial<ReturnType<typeof _useLink>>, 'href' | 'route' | 'navigate'> {\n  isLink: Readonly<Ref<boolean>>;\n  isRouterLink: Readonly<Ref<boolean>>;\n  isClickable: Readonly<Ref<boolean>>;\n  href: Ref<string | undefined>;\n  linkProps: Record<string, string | undefined>;\n  route: Readonly<Ref<(RouteLocation & { href: string }) | undefined>>;\n  navigate: Readonly<Ref<ReturnType<typeof _useLink>['navigate'] | undefined>>;\n}\n\n/**\n * Factory for defining props related to router behavior for a component.\n *\n * The created props include options for assigning link targets, handling route navigation,\n * and defining how the component behaves in relation to the Vue Router.\n *\n * @prop {string|undefined} href - The `href` attribute for a link. If provided, the component behaves like a standard HTML link.\n * @prop {boolean|undefined} replace - If `true`, navigation will replace the current history entry instead of adding a new one.\n * @prop {string|object|undefined} to - Target route or a route location object for `RouterLink`. If provided, the component behaves as a `RouterLink`.\n * @prop {boolean|undefined} exact - If `true`, active state is applied only if the route matches exactly.\n */\nexport const defineRouterProps = propsFactory(\n  {\n    /**\n     * Атрибут href для ссылки. Если указан, компонент будет вести себя как обычная ссылка\n     * @en The `href` attribute of the link. When set, the component behaves as a regular link\n     */\n    href: {\n      type: String as PropType<string>,\n      default: undefined\n    },\n    /**\n     * Если true, навигация по маршруту будет заменять текущую запись в истории вместо добавления новой\n     * @en If true, navigation replaces the current history entry instead of pushing a new one\n     */\n    replace: {\n      type: Boolean as PropType<boolean>,\n      default: undefined\n    },\n    /**\n     * Маршрут назначения или объект для RouterLink. Если указан, компонент будет вести себя как RouterLink\n     * @en Target route or route location object for RouterLink. When set, the component behaves as a RouterLink\n     */\n    to: {\n      type: [String, Object] as PropType<RouteLocationRaw>,\n      default: undefined\n    },\n    /**\n     * Если true, активное состояние будет применяться только при точном совпадении маршрута\n     * @en If true, the active state applies only on an exact route match\n     */\n    exact: {\n      type: Boolean as PropType<boolean>,\n      default: undefined\n    }\n  },\n  'router'\n);\n\n/**\n * Provides functionality and properties for handling links, including router links\n * and standard anchor tags, with reactive properties for navigation and interactivity.\n *\n * @param {LinkProps} props - The props for the link, including attributes like `href`, `to`, `replace`, and more.\n * @param {SetupContext['attrs']} attrs - The attributes passed to the link, e.g., event listeners like `click`.\n * @return {UseLink} An object containing properties and methods for managing the link:\n * - `route`: The route information for a router link, if applicable.\n * - `navigate`: A function to navigate the link if it's a router link.\n * - `href`: A computed property resolving the `href` for the link.\n * - `isLink`: A reactive boolean indicating whether the link is defined (`href` or `to`).\n * - `isRouterLink`: A reactive boolean indicating whether the link is a router link.\n * - `isClickable`: A reactive boolean indicating whether the link is interactable.\n * - `isActive`: A reactive boolean indicating if the route is active for router links.\n * - `linkProps`: Reactive link attributes such as `href`, `aria-current`, `aria-disabled`, and `tabindex`.\n */\nexport function useLink(props: LinkProps & LinkListeners, attrs: SetupContext['attrs']): UseLink {\n  const route = useRoute();\n  const RouterLink = resolveDynamicComponent('RouterLink') as typeof _RouterLink | string;\n  const isLink = toRef(() => !!(props.href || props.to));\n  const isClickable = computed(() => unref(isLink) || hasEvent(attrs, 'click') || hasEvent(props, 'click'));\n\n  if (typeof RouterLink === 'string' || !('useLink' in RouterLink)) {\n    const href = toRef(() => props.href);\n\n    return {\n      isLink,\n      isRouterLink: toRef(() => false),\n      isClickable,\n      href,\n      linkProps: reactive({ href }),\n      route: toRef(() => undefined),\n      navigate: toRef(() => undefined)\n    };\n  }\n\n  const routerLink = RouterLink.useLink({\n    to: toRef(() => props.to || ''),\n    replace: toRef(() => props.replace)\n  });\n  const link = computed(() => (props.to ? routerLink : undefined));\n  const href = computed(() => (props.to ? unref(link)?.route.value.href : props.href));\n\n  const isRouterLink = toRef(() => !!props.to);\n  const isActive = computed(() => {\n    if (!link.value) return false;\n    if (!props.exact) return link.value.isActive?.value ?? false;\n    if (!route.value) return link.value.isExactActive?.value ?? false;\n\n    return link.value.isExactActive?.value && deepEqual(link.value.route.value.query, route.value.query);\n  });\n\n  return {\n    href,\n    isLink,\n    isRouterLink,\n    isClickable,\n    isActive,\n    linkProps: reactive({\n      href,\n      'aria-current': toRef(() => (unref(isActive) ? 'page' : undefined)),\n      'aria-disabled': toRef(() => (props.disabled && unref(isLink) ? 'true' : undefined)),\n      tabindex: toRef(() => (props.disabled && unref(isLink) ? '-1' : undefined))\n    }),\n    route: toRef(() => unref(link)?.route.value),\n    navigate: toRef(() => unref(link)?.navigate)\n  };\n}\n\n/**\n * A composable function that provides a reactive reference to the current route.\n * It retrieves the current route from the Vue instance and wraps it in a computed reference.\n * This allows for reactive updates when the route changes.\n *\n * @return {Ref<RouteLocationNormalizedLoaded | undefined>} A reactive reference to the current normalized loaded route or undefined if no route is available.\n */\nexport function useRoute(): Ref<RouteLocationNormalizedLoaded | undefined> {\n  const vm = getCurrentInstance('useRoute');\n  return computed(() => vm?.proxy?.$route);\n}\n\n/**\n * Provides access to the current Vue Router instance.\n *\n * This method retrieves the router instance associated with the current Vue component\n * instance, if available. The router instance can be used for navigation and accessing\n * route-specific data.\n *\n * @return {Router | undefined} The Vue Router instance if the current component is associated\n * with a router, or undefined if it is not found.\n */\nexport function useRouter(): Router | undefined {\n  const vm = getCurrentInstance('useRouter');\n  return vm?.proxy?.$router;\n}\n\nlet inTransition = false;\n\n/**\n * Sets up a back button handler using the provided router and callback function.\n * Listens for browser back button events and triggers the given callback during navigation.\n * Ensures safe handling of navigation transitions.\n *\n * @param {Router | undefined} router - The router instance to integrate with, which can be undefined if no router is used.\n * @param {() => NavigationGuardReturn} cb - A callback function that will be invoked during a back button interaction or navigation guard step.\n * @return {void} No return value.\n */\nexport function useBackButton(router: Router | undefined, cb: () => NavigationGuardReturn) {\n  let popped = false;\n  let removeBefore: (() => void) | undefined;\n  let removeAfter: (() => void) | undefined;\n\n  if (IN_BROWSER && router?.beforeEach) {\n    nextTick(() => {\n      window.addEventListener('popstate', onPopstate);\n      removeBefore = router.beforeEach(() => {\n        if (!inTransition) {\n          inTransition = true;\n          return new Promise<NavigationGuardReturn>((resolve) => {\n            setTimeout(() => resolve(popped ? cb() : undefined));\n          });\n        }\n        return popped ? cb() : undefined;\n      });\n      removeAfter = router?.afterEach(() => {\n        inTransition = false;\n      });\n    });\n    onScopeDispose(() => {\n      window.removeEventListener('popstate', onPopstate);\n      removeBefore?.();\n      removeAfter?.();\n    });\n  }\n\n  function onPopstate(e: PopStateEvent) {\n    if (e.state?.replaced) return;\n\n    popped = true;\n    setTimeout(() => (popped = false));\n  }\n}\n"],"names":["href"],"mappings":"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"}

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

@@ -5,7 +5,10 @@ import { toValue } from "vue";
 const availableSizes = ["xs", "sm", "md", "lg", "xl"];
 const defineSizeProps = propsFactory(
   {
-    /** Размер компонента */
+    /**
+     * Размер компонента
+     * @en Size of the component
+     */
     size: {
       type: [String, Number],
       default: "md",

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

@@ -1 +1 @@
-{"version":3,"file":"useSize.js","sources":["../../../../../src/composables/useSize/useSize.ts"],"sourcesContent":["import { getCurrentInstanceName, propsFactory } from '@cds/core';\nimport { convertToUnit, destructComputed, includes } from '@cds/utils';\nimport { type ExtractPublicPropTypes, type MaybeRefOrGetter, type PropType, toValue } from 'vue';\n\nexport const availableSizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;\nexport type Size = (typeof availableSizes)[number];\n\n/**\n * A factory function defining properties related to size configuration for components.\n *\n * @constant\n * @name defineSizeProps\n * @type {Function}\n *\n * Properties:\n * - `size`: Defines the size of the component.\n *   - Type: String or Number\n *   - Default: `'md'`\n *   - Validator: Validates if the value is a number or one of the predefined sizes in `availableSizes`.\n *\n * This function is typically used to generate size-related props for reusable or configurable UI components.\n */\nexport const defineSizeProps = propsFactory(\n  {\n    /** Размер компонента */\n    size: {\n      type: [String, Number] as PropType<Size | number>,\n      default: 'md',\n      validator: (value: Size | any) => typeof value === 'number' || availableSizes.includes(value)\n    }\n  },\n  'size'\n);\n\nexport type SizeProps = ExtractPublicPropTypes<ReturnType<typeof defineSizeProps>>;\n\n/**\n * Computes size-related classes and styles based on the provided properties.\n *\n * @param {MaybeRefOrGetter<SizeProps>} props - The properties containing size information.\n * @param {string} [name=getCurrentInstanceName()] - The name of the current component instance.\n * @return {Object} An object containing `sizeClasses` for CSS class names and `sizeStyles` for inline styles.\n */\nexport function useSize(props: MaybeRefOrGetter<SizeProps>, name = getCurrentInstanceName()) {\n  return destructComputed(() => {\n    const { size } = toValue(props);\n    let sizeClasses, sizeStyles;\n\n    if (includes(availableSizes, size)) {\n      sizeClasses = `${name}--size-${size}`;\n    } else if (size) {\n      sizeStyles = {\n        width: convertToUnit(size),\n        height: convertToUnit(size)\n      };\n    }\n\n    return { sizeClasses, sizeStyles };\n  });\n}\n"],"names":[],"mappings":";;;;AAIO,MAAM,iBAAiB,CAAC,MAAM,MAAM,MAAM,MAAM,IAAI;AAkBpD,MAAM,kBAAkB;AAAA,EAC7B;AAAA;AAAA,IAEE,MAAM;AAAA,MACJ,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAW,CAAC,UAAsB,OAAO,UAAU,YAAY,eAAe,SAAS,KAAK;AAAA,IAAA;AAAA,EAC9F;AAAA,EAEF;AACF;AAWO,SAAS,QAAQ,OAAoC,OAAO,0BAA0B;AAC3F,SAAO,iBAAiB,MAAM;AAC5B,UAAM,EAAE,KAAA,IAAS,QAAQ,KAAK;AAC9B,QAAI,aAAa;AAEjB,QAAI,SAAS,gBAAgB,IAAI,GAAG;AAClC,oBAAc,GAAG,IAAI,UAAU,IAAI;AAAA,IACrC,WAAW,MAAM;AACf,mBAAa;AAAA,QACX,OAAO,cAAc,IAAI;AAAA,QACzB,QAAQ,cAAc,IAAI;AAAA,MAAA;AAAA,IAE9B;AAEA,WAAO,EAAE,aAAa,WAAA;AAAA,EACxB,CAAC;AACH;"}
+{"version":3,"file":"useSize.js","sources":["../../../../../src/composables/useSize/useSize.ts"],"sourcesContent":["import { getCurrentInstanceName, propsFactory } from '@cds/core';\nimport { convertToUnit, destructComputed, includes } from '@cds/utils';\nimport { type ExtractPublicPropTypes, type MaybeRefOrGetter, type PropType, toValue } from 'vue';\n\nexport const availableSizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;\nexport type Size = (typeof availableSizes)[number];\n\n/**\n * A factory function defining properties related to size configuration for components.\n *\n * @constant\n * @name defineSizeProps\n * @type {Function}\n *\n * Properties:\n * - `size`: Defines the size of the component.\n *   - Type: String or Number\n *   - Default: `'md'`\n *   - Validator: Validates if the value is a number or one of the predefined sizes in `availableSizes`.\n *\n * This function is typically used to generate size-related props for reusable or configurable UI components.\n */\nexport const defineSizeProps = propsFactory(\n  {\n    /**\n     * Размер компонента\n     * @en Size of the component\n     */\n    size: {\n      type: [String, Number] as PropType<Size | number>,\n      default: 'md',\n      validator: (value: Size | any) => typeof value === 'number' || availableSizes.includes(value)\n    }\n  },\n  'size'\n);\n\nexport type SizeProps = ExtractPublicPropTypes<ReturnType<typeof defineSizeProps>>;\n\n/**\n * Computes size-related classes and styles based on the provided properties.\n *\n * @param {MaybeRefOrGetter<SizeProps>} props - The properties containing size information.\n * @param {string} [name=getCurrentInstanceName()] - The name of the current component instance.\n * @return {Object} An object containing `sizeClasses` for CSS class names and `sizeStyles` for inline styles.\n */\nexport function useSize(props: MaybeRefOrGetter<SizeProps>, name = getCurrentInstanceName()) {\n  return destructComputed(() => {\n    const { size } = toValue(props);\n    let sizeClasses, sizeStyles;\n\n    if (includes(availableSizes, size)) {\n      sizeClasses = `${name}--size-${size}`;\n    } else if (size) {\n      sizeStyles = {\n        width: convertToUnit(size),\n        height: convertToUnit(size)\n      };\n    }\n\n    return { sizeClasses, sizeStyles };\n  });\n}\n"],"names":[],"mappings":";;;;AAIO,MAAM,iBAAiB,CAAC,MAAM,MAAM,MAAM,MAAM,IAAI;AAkBpD,MAAM,kBAAkB;AAAA,EAC7B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,MAAM;AAAA,MACJ,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAW,CAAC,UAAsB,OAAO,UAAU,YAAY,eAAe,SAAS,KAAK;AAAA,IAAA;AAAA,EAC9F;AAAA,EAEF;AACF;AAWO,SAAS,QAAQ,OAAoC,OAAO,0BAA0B;AAC3F,SAAO,iBAAiB,MAAM;AAC5B,UAAM,EAAE,KAAA,IAAS,QAAQ,KAAK;AAC9B,QAAI,aAAa;AAEjB,QAAI,SAAS,gBAAgB,IAAI,GAAG;AAClC,oBAAc,GAAG,IAAI,UAAU,IAAI;AAAA,IACrC,WAAW,MAAM;AACf,mBAAa;AAAA,QACX,OAAO,cAAc,IAAI;AAAA,QACzB,QAAQ,cAAc,IAAI;AAAA,MAAA;AAAA,IAE9B;AAEA,WAAO,EAAE,aAAa,WAAA;AAAA,EACxB,CAAC;AACH;"}

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

@@ -3,7 +3,10 @@ import { computed } from "vue";
 import { s as statusIcons } from "./internal/useStatus.constants.js";
 const defineStatusProps = propsFactory(
   {
-    /** Семантический статус — определяет цвет и дефолтную иконку. */
+    /**
+     * Семантический статус — определяет цвет и дефолтную иконку.
+     * @en Semantic status — drives the color and the default icon.
+     */
     status: {
       type: String,
       default: "info"

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

@@ -1 +1 @@
-{"version":3,"file":"useStatus.js","sources":["../../../../../src/composables/useStatus/useStatus.ts"],"sourcesContent":["import type { IconValue } from '@cds/composables/useIcons';\nimport { propsFactory } from '@cds/core';\nimport { computed, type ComputedRef, type PropType } from 'vue';\n\nimport { type CdsStatusValue, statusIcons } from './internal/useStatus.constants';\n\nexport const defineStatusProps = propsFactory(\n  {\n    /** Семантический статус — определяет цвет и дефолтную иконку. */\n    status: {\n      type: String as PropType<CdsStatusValue>,\n      default: 'info'\n    }\n  },\n  'status'\n);\n\nexport interface UseStatusOptions {\n  /** Переопределение набора иконок статуса (например, не-`fill` для алертов). */\n  icons?: Record<CdsStatusValue, IconValue>;\n}\n\nexport interface UseStatusReturn {\n  status: ComputedRef<CdsStatusValue>;\n  statusIcon: ComputedRef<IconValue>;\n}\n\n/**\n * Резолвит семантику статуса: текущий статус и иконку для него.\n * `options.icons` позволяет компоненту подменить набор иконок.\n */\nexport function useStatus(props: { status: CdsStatusValue }, options: UseStatusOptions = {}): UseStatusReturn {\n  const icons = options.icons ?? statusIcons;\n\n  return {\n    status: computed(() => props.status),\n    statusIcon: computed(() => icons[props.status])\n  };\n}\n"],"names":[],"mappings":";;;AAMO,MAAM,oBAAoB;AAAA,EAC/B;AAAA;AAAA,IAEE,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF;AACF;AAgBO,SAAS,UAAU,OAAmC,UAA4B,IAAqB;AAC5G,QAAM,QAAQ,QAAQ,SAAS;AAE/B,SAAO;AAAA,IACL,QAAQ,SAAS,MAAM,MAAM,MAAM;AAAA,IACnC,YAAY,SAAS,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA,EAAA;AAElD;"}
+{"version":3,"file":"useStatus.js","sources":["../../../../../src/composables/useStatus/useStatus.ts"],"sourcesContent":["import type { IconValue } from '@cds/composables/useIcons';\nimport { propsFactory } from '@cds/core';\nimport { computed, type ComputedRef, type PropType } from 'vue';\n\nimport { type CdsStatusValue, statusIcons } from './internal/useStatus.constants';\n\nexport const defineStatusProps = propsFactory(\n  {\n    /**\n     * Семантический статус — определяет цвет и дефолтную иконку.\n     * @en Semantic status — drives the color and the default icon.\n     */\n    status: {\n      type: String as PropType<CdsStatusValue>,\n      default: 'info'\n    }\n  },\n  'status'\n);\n\nexport interface UseStatusOptions {\n  /** Переопределение набора иконок статуса (например, не-`fill` для алертов). */\n  icons?: Record<CdsStatusValue, IconValue>;\n}\n\nexport interface UseStatusReturn {\n  status: ComputedRef<CdsStatusValue>;\n  statusIcon: ComputedRef<IconValue>;\n}\n\n/**\n * Резолвит семантику статуса: текущий статус и иконку для него.\n * `options.icons` позволяет компоненту подменить набор иконок.\n */\nexport function useStatus(props: { status: CdsStatusValue }, options: UseStatusOptions = {}): UseStatusReturn {\n  const icons = options.icons ?? statusIcons;\n\n  return {\n    status: computed(() => props.status),\n    statusIcon: computed(() => icons[props.status])\n  };\n}\n"],"names":[],"mappings":";;;AAMO,MAAM,oBAAoB;AAAA,EAC/B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF;AACF;AAgBO,SAAS,UAAU,OAAmC,UAA4B,IAAqB;AAC5G,QAAM,QAAQ,QAAQ,SAAS;AAE/B,SAAO;AAAA,IACL,QAAQ,SAAS,MAAM,MAAM,MAAM;AAAA,IACnC,YAAY,SAAS,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA,EAAA;AAElD;"}

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

@@ -2,9 +2,15 @@ import { p as propsFactory } from "../../core/propsFactory.js";
 import { computed, toDisplayString } from "vue";
 const defineTextProps = propsFactory(
   {
-    /** Текст, отображаемый в компоненте. */
+    /**
+     * Текст, отображаемый в компоненте.
+     * @en Text displayed in the component.
+     */
     text: [String, Number],
-    /** Контент, отображаемый в компоненте. */
+    /**
+     * Контент, отображаемый в компоненте.
+     * @en Content displayed in the component.
+     */
     content: [String, Number]
   },
   "text"

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

@@ -1 +1 @@
-{"version":3,"file":"useText.js","sources":["../../../../../src/composables/useText/useText.ts"],"sourcesContent":["import { propsFactory } from '@cds/core';\nimport { computed, type ExtractPublicPropTypes, toDisplayString } from 'vue';\n\n/**\n * Factory function to define the text-related properties for a component.\n *\n * @typedef {Object} defineTextProps\n * @property {(String|Number)} text - The text displayed in the component.\n * @property {(String|Number)} content - The content displayed in the component.\n */\nexport const defineTextProps = propsFactory(\n  {\n    /** Текст, отображаемый в компоненте. */\n    text: [String, Number],\n    /** Контент, отображаемый в компоненте. */\n    content: [String, Number]\n  },\n  'text'\n);\n\nexport type TextProps = ExtractPublicPropTypes<ReturnType<typeof defineTextProps>>;\n\n/**\n * Processes the input text properties and generates plain content and displayable text.\n *\n * @param {TextProps} props - The text properties containing the input text or content.\n * @return {Object} An object containing `plainContent` and `displayText`:\n *                  - `plainContent`: Реактивный (computed) исходный контент из `text`/`content`.\n *                  - `displayText`: Реактивная (computed) строка для отображения.\n */\nexport function useText(props: TextProps) {\n  const plainContent = computed(() => props.text ?? props.content);\n  const displayText = computed(() => toDisplayString(plainContent.value));\n\n  return {\n    plainContent,\n    displayText\n  };\n}\n"],"names":[],"mappings":";;AAUO,MAAM,kBAAkB;AAAA,EAC7B;AAAA;AAAA,IAEE,MAAM,CAAC,QAAQ,MAAM;AAAA;AAAA,IAErB,SAAS,CAAC,QAAQ,MAAM;AAAA,EAAA;AAAA,EAE1B;AACF;AAYO,SAAS,QAAQ,OAAkB;AACxC,QAAM,eAAe,SAAS,MAAM,MAAM,QAAQ,MAAM,OAAO;AAC/D,QAAM,cAAc,SAAS,MAAM,gBAAgB,aAAa,KAAK,CAAC;AAEtE,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useText.js","sources":["../../../../../src/composables/useText/useText.ts"],"sourcesContent":["import { propsFactory } from '@cds/core';\nimport { computed, type ExtractPublicPropTypes, toDisplayString } from 'vue';\n\n/**\n * Factory function to define the text-related properties for a component.\n *\n * @typedef {Object} defineTextProps\n * @property {(String|Number)} text - The text displayed in the component.\n * @property {(String|Number)} content - The content displayed in the component.\n */\nexport const defineTextProps = propsFactory(\n  {\n    /**\n     * Текст, отображаемый в компоненте.\n     * @en Text displayed in the component.\n     */\n    text: [String, Number],\n    /**\n     * Контент, отображаемый в компоненте.\n     * @en Content displayed in the component.\n     */\n    content: [String, Number]\n  },\n  'text'\n);\n\nexport type TextProps = ExtractPublicPropTypes<ReturnType<typeof defineTextProps>>;\n\n/**\n * Processes the input text properties and generates plain content and displayable text.\n *\n * @param {TextProps} props - The text properties containing the input text or content.\n * @return {Object} An object containing `plainContent` and `displayText`:\n *                  - `plainContent`: Реактивный (computed) исходный контент из `text`/`content`.\n *                  - `displayText`: Реактивная (computed) строка для отображения.\n */\nexport function useText(props: TextProps) {\n  const plainContent = computed(() => props.text ?? props.content);\n  const displayText = computed(() => toDisplayString(plainContent.value));\n\n  return {\n    plainContent,\n    displayText\n  };\n}\n"],"names":[],"mappings":";;AAUO,MAAM,kBAAkB;AAAA,EAC7B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,MAAM,CAAC,QAAQ,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAKrB,SAAS,CAAC,QAAQ,MAAM;AAAA,EAAA;AAAA,EAE1B;AACF;AAYO,SAAS,QAAQ,OAAkB;AACxC,QAAM,eAAe,SAAS,MAAM,MAAM,QAAQ,MAAM,OAAO;AAC/D,QAAM,cAAc,SAAS,MAAM,gBAAgB,aAAa,KAAK,CAAC;AAEtE,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/es/src/composables/useTheme/internal/useTheme.constants.js

@@ -1,17 +1,28 @@
 import { p as promoLight } from "../../../themes/promoLight.js";
 import { p as promoDark } from "../../../themes/promoDark.js";
+import { l as lumaDark } from "../../../themes/lumaDark.js";
+import { l as lumaLight } from "../../../themes/lumaLight.js";
 import { b as b2bDark } from "../../../themes/b2bDark.js";
 import { b as b2bLight } from "../../../themes/b2bLight.js";
 import { c as cdsDark } from "../../../themes/cdsDark.js";
 import { c as cdsLight } from "../../../themes/cdsLight.js";
 const ThemeSymbol = Symbol.for("cds:theme");
-const availableTheme = ["cdsLight", "cdsDark", "b2bLight", "b2bDark", "promoDark", "promoLight"];
+const availableTheme = [
+  "cdsLight",
+  "cdsDark",
+  "b2bLight",
+  "b2bDark",
+  "lumaLight",
+  "lumaDark",
+  "promoDark",
+  "promoLight"
+];
 const DEFAULT_THEME = "cdsLight";
 const defaultThemeOptions = {
   defaultTheme: DEFAULT_THEME,
   prefix: "cds",
   variations: false,
-  themes: { cdsLight, cdsDark, b2bLight, b2bDark, promoDark, promoLight },
+  themes: { cdsLight, cdsDark, b2bLight, b2bDark, lumaLight, lumaDark, promoDark, promoLight },
   stylesheetId: "cds-theme-stylesheet",
   scoped: false,
   utilities: true,

package/dist/es/src/composables/useTheme/internal/useTheme.constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.constants.js","sources":["../../../../../../src/composables/useTheme/internal/useTheme.constants.ts"],"sourcesContent":["import { b2bDark, b2bLight, cdsDark, cdsLight, promoDark, promoLight, type ThemeName } from '@cds/themes';\nimport type { InjectionKey } from 'vue';\n\nimport type { ThemeInstance, ThemeOptions } from './useTheme.types';\n\nexport const ThemeSymbol: InjectionKey<ThemeInstance> = Symbol.for('cds:theme');\n\nexport const availableTheme = ['cdsLight', 'cdsDark', 'b2bLight', 'b2bDark', 'promoDark', 'promoLight'] as const;\n\nexport const DEFAULT_THEME: ThemeName = 'cdsLight';\n\nexport const defaultThemeOptions: Exclude<ThemeOptions, false> = {\n  defaultTheme: DEFAULT_THEME,\n  prefix: 'cds',\n  variations: false,\n  themes: { cdsLight, cdsDark, b2bLight, b2bDark, promoDark, promoLight },\n  stylesheetId: 'cds-theme-stylesheet',\n  scoped: false,\n  utilities: true,\n  legacyClasses: false\n};\n"],"names":[],"mappings":";;;;;;AAKO,MAAM,cAA2C,OAAO,IAAI,WAAW;AAEvE,MAAM,iBAAiB,CAAC,YAAY,WAAW,YAAY,WAAW,aAAa,YAAY;AAE/F,MAAM,gBAA2B;AAEjC,MAAM,sBAAoD;AAAA,EAC/D,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,QAAQ,EAAE,UAAU,SAAS,UAAU,SAAS,WAAW,WAAA;AAAA,EAC3D,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,eAAe;AACjB;"}
+{"version":3,"file":"useTheme.constants.js","sources":["../../../../../../src/composables/useTheme/internal/useTheme.constants.ts"],"sourcesContent":["import {\n  b2bDark,\n  b2bLight,\n  cdsDark,\n  cdsLight,\n  lumaDark,\n  lumaLight,\n  promoDark,\n  promoLight,\n  type ThemeName\n} from '@cds/themes';\nimport type { InjectionKey } from 'vue';\n\nimport type { ThemeInstance, ThemeOptions } from './useTheme.types';\n\nexport const ThemeSymbol: InjectionKey<ThemeInstance> = Symbol.for('cds:theme');\n\nexport const availableTheme = [\n  'cdsLight',\n  'cdsDark',\n  'b2bLight',\n  'b2bDark',\n  'lumaLight',\n  'lumaDark',\n  'promoDark',\n  'promoLight'\n] as const;\n\nexport const DEFAULT_THEME: ThemeName = 'cdsLight';\n\nexport const defaultThemeOptions: Exclude<ThemeOptions, false> = {\n  defaultTheme: DEFAULT_THEME,\n  prefix: 'cds',\n  variations: false,\n  themes: { cdsLight, cdsDark, b2bLight, b2bDark, lumaLight, lumaDark, promoDark, promoLight },\n  stylesheetId: 'cds-theme-stylesheet',\n  scoped: false,\n  utilities: true,\n  legacyClasses: false\n};\n"],"names":[],"mappings":";;;;;;;;AAeO,MAAM,cAA2C,OAAO,IAAI,WAAW;AAEvE,MAAM,iBAAiB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,gBAA2B;AAEjC,MAAM,sBAAoD;AAAA,EAC/D,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,QAAQ,EAAE,UAAU,SAAS,UAAU,SAAS,WAAW,UAAU,WAAW,WAAA;AAAA,EAChF,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,eAAe;AACjB;"}

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

@@ -7,7 +7,10 @@ import { D as DEFAULT_THEME, T as ThemeSymbol } from "./internal/useTheme.consta
 import { p as parseThemeOptions, g as generateVariations, a as generateOnColors, c as createCssClass, b as generateCssVariables, u as upsertStyles } from "./internal/useTheme.utils.js";
 const defineThemeProps = propsFactory(
   {
-    /** Тема компонента */
+    /**
+     * Тема компонента
+     * @en Component theme
+     */
     theme: {
       type: String,
       default: void 0

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

@@ -1 +1 @@
-{"version":3,"file":"useTheme.js","sources":["../../../../../src/composables/useTheme/useTheme.ts"],"sourcesContent":["import { getCurrentInstance, propsFactory } from '@cds/core';\nimport { IN_BROWSER, mergeDeep } from '@cds/utils';\nimport { type App, computed, inject, type PropType, provide, ref, shallowRef, unref, watch, watchEffect } from 'vue';\n\nimport { DEFAULT_THEME, ThemeSymbol } from './internal/useTheme.constants';\nimport type { InternalThemeDefinition, Theme, ThemeInstance, ThemeOptions } from './internal/useTheme.types';\nimport {\n  createCssClass,\n  generateCssVariables,\n  generateOnColors,\n  generateVariations,\n  parseThemeOptions,\n  upsertStyles\n} from './internal/useTheme.utils';\n\n/**\n * Defines props related to theming for a Vue component.\n *\n * The `defineThemeProps` variable facilitates the creation of a property configuration\n * to manage the component's theme. It provides flexibility to set a theme either as a\n * predefined object or as a string-based theme identifier.\n */\nexport const defineThemeProps = propsFactory(\n  {\n    /** Тема компонента */\n    theme: {\n      type: String as PropType<Theme | string>,\n      default: undefined\n    }\n  },\n  'theme'\n);\n\n/**\n * Creates a theme instance with support for generating color variations,\n * CSS classes, and dynamic theme installation in a Vue application.\n *\n * @param {ThemeOptions} [options] - Configuration options for the theme, including default theme name, themes, variations, and other settings.\n * @return {ThemeInstance & { install: (app: App) => void }} An object containing the theme instance properties, computed values, and an `install` function for integrating with a Vue app.\n */\nexport function createTheme(options?: ThemeOptions): ThemeInstance & { install: (app: App) => void } {\n  const parsedOptions = parseThemeOptions(options);\n  const _name = ref(parsedOptions.defaultTheme);\n  const themes = ref(parsedOptions.themes);\n  const systemName = shallowRef(DEFAULT_THEME);\n\n  const name = computed({\n    get() {\n      return _name.value === 'system' ? systemName.value : _name.value;\n    },\n    set(val: string) {\n      _name.value = val;\n    }\n  });\n\n  const computedThemes = computed(() => {\n    const acc: Record<string, InternalThemeDefinition> = {};\n\n    for (const [name, original] of Object.entries(unref(themes))) {\n      const defaultTheme = original.dark || name === 'dark' ? unref(themes).cdsDark : unref(themes).cdsLight;\n\n      const merged = mergeDeep(defaultTheme, original) as InternalThemeDefinition;\n\n      const colors = {\n        ...merged.colors,\n        ...generateVariations(merged.colors, parsedOptions.variations)\n      };\n\n      acc[name] = {\n        ...merged,\n        colors: {\n          ...colors,\n          ...generateOnColors(colors, merged.variables)\n        }\n      };\n    }\n\n    return acc;\n  });\n\n  const current = computed(() => unref(computedThemes)[unref(name)]);\n\n  // const isSystem = toRef(() => _name.value === 'system');\n\n  const styles = computed(() => {\n    const lines: string[] = [];\n\n    lines.push('@layer theme-base {\\n');\n\n    if (unref(current).dark) {\n      createCssClass(lines, ':root', ['color-scheme: dark'], parsedOptions.scope);\n    }\n\n    createCssClass(lines, ':root', generateCssVariables(unref(current), parsedOptions.prefix), parsedOptions.scope);\n\n    for (const [themeName, theme] of Object.entries(unref(computedThemes))) {\n      createCssClass(\n        lines,\n        `.${parsedOptions.prefix}-theme--${themeName}`,\n        [`color-scheme: ${theme.dark ? 'dark' : 'normal'}`, ...generateCssVariables(theme, parsedOptions.prefix)],\n        parsedOptions.scope\n      );\n    }\n\n    lines.push('}\\n');\n\n    if (parsedOptions.utilities) {\n      const bgLines: string[] = [];\n      const fgLines: string[] = [];\n\n      const colors = new Set(Object.values(unref(computedThemes)).flatMap((theme) => Object.keys(theme.colors)));\n\n      for (const key of colors) {\n        if (/^on-[a-z]/.test(key)) {\n          createCssClass(fgLines, `.${key}`, [`color: rgb(var(--${parsedOptions.prefix}-color-${key})) !important`]);\n        } else {\n          if (parsedOptions.legacyClasses) {\n            createCssClass(bgLines, `.${parsedOptions.prefix}-bg-${key}`, [\n              `--${parsedOptions.prefix}-color-overlay-multiplier: var(--${parsedOptions.prefix}-color-${key}-overlay-multiplier)`,\n              `background-color: rgb(var(--${parsedOptions.prefix}-color-${key})) !important`,\n              `color: rgb(var(--${parsedOptions.prefix}-color-on-${key})) !important`\n            ]);\n            createCssClass(fgLines, `.${parsedOptions.prefix}-text-${key}`, [\n              `color: rgb(var(--${parsedOptions.prefix}-color-${key})) !important`\n            ]);\n            createCssClass(fgLines, `.${parsedOptions.prefix}-border-${key}`, [\n              `border-color: rgb(var(--${parsedOptions.prefix}-color-${key}))`\n            ]);\n          }\n        }\n      }\n\n      lines.push(\n        '@layer theme-background {\\n',\n        ...bgLines.map((v) => `  ${v}`),\n        '}\\n',\n        '@layer theme-foreground {\\n',\n        ...fgLines.map((v) => `  ${v}`),\n        '}\\n'\n      );\n    }\n\n    return '@layer cds-utilities {\\n' + lines.map((v) => `  ${v}`).join('') + '\\n}';\n  });\n\n  function getHead() {\n    return {\n      style: [\n        {\n          children: unref(styles),\n          id: parsedOptions.stylesheetId,\n          nonce: parsedOptions.cspNonce || (false as never)\n        }\n      ]\n    };\n  }\n\n  function install(app: App) {\n    if (parsedOptions.isDisabled) return;\n\n    const head = app._context.provides.usehead;\n\n    if (head) {\n      if (head.push) {\n        const entry = head.push(getHead);\n\n        if (IN_BROWSER) {\n          watch(styles, () => entry.patch(getHead));\n        }\n      } else {\n        if (IN_BROWSER) {\n          head.addHeadObjs(computed(getHead));\n          watchEffect(() => head.updateDOM());\n        } else {\n          head.addHeadObjs(getHead());\n        }\n      }\n    } else {\n      if (IN_BROWSER) {\n        watch(styles, updateStyles, { immediate: true });\n      } else {\n        updateStyles();\n      }\n\n      function updateStyles() {\n        upsertStyles(parsedOptions.stylesheetId, parsedOptions.cspNonce, styles.value);\n      }\n    }\n  }\n\n  const themeClasses = computed(() => (parsedOptions.isDisabled ? undefined : `cds-theme--${unref(name)}`));\n\n  return {\n    install,\n    isDisabled: parsedOptions.isDisabled,\n    name,\n    themes,\n    current,\n    computedThemes,\n    themeClasses,\n    styles,\n    global: {\n      name,\n      current\n    }\n  };\n}\n\n/**\n * Provides a theme to the current component and its descendants.\n *\n * This method injects an existing theme instance, validates its existence, and creates\n * a new extended theme instance with additional properties based on the provided or\n * inherited theme configuration. The new theme is then provided to the component's\n * context for usage in child components.\n *\n * @param {Object} props - Configuration options for the theme.\n * @param {string} [props.theme] - A string representing the name of the theme to be applied. If not provided, the theme is inherited from the injected theme instance.\n * @return {ThemeInstance} The newly created theme instance with updated properties, which includes the computed name, current theme object, and the theme's CSS class.\n */\nexport function provideTheme(props: { theme?: string }) {\n  getCurrentInstance('provideTheme');\n\n  const theme = inject(ThemeSymbol, null);\n\n  if (!theme) throw new Error('[CDS] Could not find CDS theme injection');\n\n  const name = computed<string>(() => {\n    return props.theme ?? unref(theme.name);\n  });\n  const current = computed(() => unref(theme.themes)[unref(name)]);\n\n  const themeClasses = computed(() => (theme.isDisabled ? undefined : `cds-theme--${unref(name)}`));\n\n  const newTheme: ThemeInstance = {\n    ...theme,\n    name,\n    current,\n    themeClasses\n  };\n\n  provide(ThemeSymbol, newTheme);\n\n  return newTheme;\n}\n\n/**\n * A function to retrieve the current theme object from the Vue context. This function relies on\n * Vue's dependency injection system to provide the theme associated with the current component.\n * If the theme cannot be found, it throws an error.\n *\n * @return {Object} The injected theme object associated with the current Vue context.\n * @throws {Error} If the theme injection cannot be found in the current context.\n */\nexport function useTheme() {\n  getCurrentInstance('useTheme');\n\n  const theme = inject(ThemeSymbol, null);\n\n  if (!theme) throw new Error('[CDS] Could not find theme injection');\n\n  return theme;\n}\n"],"names":["name"],"mappings":"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"}
+{"version":3,"file":"useTheme.js","sources":["../../../../../src/composables/useTheme/useTheme.ts"],"sourcesContent":["import { getCurrentInstance, propsFactory } from '@cds/core';\nimport { IN_BROWSER, mergeDeep } from '@cds/utils';\nimport { type App, computed, inject, type PropType, provide, ref, shallowRef, unref, watch, watchEffect } from 'vue';\n\nimport { DEFAULT_THEME, ThemeSymbol } from './internal/useTheme.constants';\nimport type { InternalThemeDefinition, Theme, ThemeInstance, ThemeOptions } from './internal/useTheme.types';\nimport {\n  createCssClass,\n  generateCssVariables,\n  generateOnColors,\n  generateVariations,\n  parseThemeOptions,\n  upsertStyles\n} from './internal/useTheme.utils';\n\n/**\n * Defines props related to theming for a Vue component.\n *\n * The `defineThemeProps` variable facilitates the creation of a property configuration\n * to manage the component's theme. It provides flexibility to set a theme either as a\n * predefined object or as a string-based theme identifier.\n */\nexport const defineThemeProps = propsFactory(\n  {\n    /**\n     * Тема компонента\n     * @en Component theme\n     */\n    theme: {\n      type: String as PropType<Theme | string>,\n      default: undefined\n    }\n  },\n  'theme'\n);\n\n/**\n * Creates a theme instance with support for generating color variations,\n * CSS classes, and dynamic theme installation in a Vue application.\n *\n * @param {ThemeOptions} [options] - Configuration options for the theme, including default theme name, themes, variations, and other settings.\n * @return {ThemeInstance & { install: (app: App) => void }} An object containing the theme instance properties, computed values, and an `install` function for integrating with a Vue app.\n */\nexport function createTheme(options?: ThemeOptions): ThemeInstance & { install: (app: App) => void } {\n  const parsedOptions = parseThemeOptions(options);\n  const _name = ref(parsedOptions.defaultTheme);\n  const themes = ref(parsedOptions.themes);\n  const systemName = shallowRef(DEFAULT_THEME);\n\n  const name = computed({\n    get() {\n      return _name.value === 'system' ? systemName.value : _name.value;\n    },\n    set(val: string) {\n      _name.value = val;\n    }\n  });\n\n  const computedThemes = computed(() => {\n    const acc: Record<string, InternalThemeDefinition> = {};\n\n    for (const [name, original] of Object.entries(unref(themes))) {\n      const defaultTheme = original.dark || name === 'dark' ? unref(themes).cdsDark : unref(themes).cdsLight;\n\n      const merged = mergeDeep(defaultTheme, original) as InternalThemeDefinition;\n\n      const colors = {\n        ...merged.colors,\n        ...generateVariations(merged.colors, parsedOptions.variations)\n      };\n\n      acc[name] = {\n        ...merged,\n        colors: {\n          ...colors,\n          ...generateOnColors(colors, merged.variables)\n        }\n      };\n    }\n\n    return acc;\n  });\n\n  const current = computed(() => unref(computedThemes)[unref(name)]);\n\n  // const isSystem = toRef(() => _name.value === 'system');\n\n  const styles = computed(() => {\n    const lines: string[] = [];\n\n    lines.push('@layer theme-base {\\n');\n\n    if (unref(current).dark) {\n      createCssClass(lines, ':root', ['color-scheme: dark'], parsedOptions.scope);\n    }\n\n    createCssClass(lines, ':root', generateCssVariables(unref(current), parsedOptions.prefix), parsedOptions.scope);\n\n    for (const [themeName, theme] of Object.entries(unref(computedThemes))) {\n      createCssClass(\n        lines,\n        `.${parsedOptions.prefix}-theme--${themeName}`,\n        [`color-scheme: ${theme.dark ? 'dark' : 'normal'}`, ...generateCssVariables(theme, parsedOptions.prefix)],\n        parsedOptions.scope\n      );\n    }\n\n    lines.push('}\\n');\n\n    if (parsedOptions.utilities) {\n      const bgLines: string[] = [];\n      const fgLines: string[] = [];\n\n      const colors = new Set(Object.values(unref(computedThemes)).flatMap((theme) => Object.keys(theme.colors)));\n\n      for (const key of colors) {\n        if (/^on-[a-z]/.test(key)) {\n          createCssClass(fgLines, `.${key}`, [`color: rgb(var(--${parsedOptions.prefix}-color-${key})) !important`]);\n        } else {\n          if (parsedOptions.legacyClasses) {\n            createCssClass(bgLines, `.${parsedOptions.prefix}-bg-${key}`, [\n              `--${parsedOptions.prefix}-color-overlay-multiplier: var(--${parsedOptions.prefix}-color-${key}-overlay-multiplier)`,\n              `background-color: rgb(var(--${parsedOptions.prefix}-color-${key})) !important`,\n              `color: rgb(var(--${parsedOptions.prefix}-color-on-${key})) !important`\n            ]);\n            createCssClass(fgLines, `.${parsedOptions.prefix}-text-${key}`, [\n              `color: rgb(var(--${parsedOptions.prefix}-color-${key})) !important`\n            ]);\n            createCssClass(fgLines, `.${parsedOptions.prefix}-border-${key}`, [\n              `border-color: rgb(var(--${parsedOptions.prefix}-color-${key}))`\n            ]);\n          }\n        }\n      }\n\n      lines.push(\n        '@layer theme-background {\\n',\n        ...bgLines.map((v) => `  ${v}`),\n        '}\\n',\n        '@layer theme-foreground {\\n',\n        ...fgLines.map((v) => `  ${v}`),\n        '}\\n'\n      );\n    }\n\n    return '@layer cds-utilities {\\n' + lines.map((v) => `  ${v}`).join('') + '\\n}';\n  });\n\n  function getHead() {\n    return {\n      style: [\n        {\n          children: unref(styles),\n          id: parsedOptions.stylesheetId,\n          nonce: parsedOptions.cspNonce || (false as never)\n        }\n      ]\n    };\n  }\n\n  function install(app: App) {\n    if (parsedOptions.isDisabled) return;\n\n    const head = app._context.provides.usehead;\n\n    if (head) {\n      if (head.push) {\n        const entry = head.push(getHead);\n\n        if (IN_BROWSER) {\n          watch(styles, () => entry.patch(getHead));\n        }\n      } else {\n        if (IN_BROWSER) {\n          head.addHeadObjs(computed(getHead));\n          watchEffect(() => head.updateDOM());\n        } else {\n          head.addHeadObjs(getHead());\n        }\n      }\n    } else {\n      if (IN_BROWSER) {\n        watch(styles, updateStyles, { immediate: true });\n      } else {\n        updateStyles();\n      }\n\n      function updateStyles() {\n        upsertStyles(parsedOptions.stylesheetId, parsedOptions.cspNonce, styles.value);\n      }\n    }\n  }\n\n  const themeClasses = computed(() => (parsedOptions.isDisabled ? undefined : `cds-theme--${unref(name)}`));\n\n  return {\n    install,\n    isDisabled: parsedOptions.isDisabled,\n    name,\n    themes,\n    current,\n    computedThemes,\n    themeClasses,\n    styles,\n    global: {\n      name,\n      current\n    }\n  };\n}\n\n/**\n * Provides a theme to the current component and its descendants.\n *\n * This method injects an existing theme instance, validates its existence, and creates\n * a new extended theme instance with additional properties based on the provided or\n * inherited theme configuration. The new theme is then provided to the component's\n * context for usage in child components.\n *\n * @param {Object} props - Configuration options for the theme.\n * @param {string} [props.theme] - A string representing the name of the theme to be applied. If not provided, the theme is inherited from the injected theme instance.\n * @return {ThemeInstance} The newly created theme instance with updated properties, which includes the computed name, current theme object, and the theme's CSS class.\n */\nexport function provideTheme(props: { theme?: string }) {\n  getCurrentInstance('provideTheme');\n\n  const theme = inject(ThemeSymbol, null);\n\n  if (!theme) throw new Error('[CDS] Could not find CDS theme injection');\n\n  const name = computed<string>(() => {\n    return props.theme ?? unref(theme.name);\n  });\n  const current = computed(() => unref(theme.themes)[unref(name)]);\n\n  const themeClasses = computed(() => (theme.isDisabled ? undefined : `cds-theme--${unref(name)}`));\n\n  const newTheme: ThemeInstance = {\n    ...theme,\n    name,\n    current,\n    themeClasses\n  };\n\n  provide(ThemeSymbol, newTheme);\n\n  return newTheme;\n}\n\n/**\n * A function to retrieve the current theme object from the Vue context. This function relies on\n * Vue's dependency injection system to provide the theme associated with the current component.\n * If the theme cannot be found, it throws an error.\n *\n * @return {Object} The injected theme object associated with the current Vue context.\n * @throws {Error} If the theme injection cannot be found in the current context.\n */\nexport function useTheme() {\n  getCurrentInstance('useTheme');\n\n  const theme = inject(ThemeSymbol, null);\n\n  if (!theme) throw new Error('[CDS] Could not find theme injection');\n\n  return theme;\n}\n"],"names":["name"],"mappings":"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"}

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

@@ -22,7 +22,10 @@ const easingPatterns = {
 };
 const defineTransitionProps = propsFactory(
   {
-    /** Анимация перехода */
+    /**
+     * Анимация перехода
+     * @en Transition animation
+     */
     transition: {
       type: null,
       default: "fade-transition",

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":"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"}
+{"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

@@ -1,22 +1,31 @@
-import { u as useDisplay } from "../useDisplay/useDisplay.js";
 import { u as useResizeObserver } from "../useResizeObserver/useResizeObserver.js";
 import { p as propsFactory } from "../../core/propsFactory.js";
 import { w as debounce, c as clamp, M as getPropertyFromItem } from "../../utils/helpers.js";
 import { a as IN_BROWSER } from "../../utils/dom/globals.js";
 import { shallowRef, watchEffect, ref, unref, computed, watch, onScopeDispose, nextTick } from "vue";
+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"