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

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

@@ -1 +1 @@
-{"version":3,"file":"useFilter.js","sources":["../../../../../src/composables/useFilter/useFilter.ts"],"sourcesContent":["import { propsFactory } from '@cds/core';\nimport { getPropertyFromItem, wrapInArray } from '@cds/utils';\nimport {\n  computed,\n  type ExtractPublicPropTypes,\n  type MaybeRef,\n  type PropType,\n  type Ref,\n  shallowRef,\n  unref,\n  watchEffect\n} from 'vue';\n\nimport type {\n  FilterFunction,\n  FilterKeyFunctions,\n  FilterKeys,\n  FilterMatch,\n  FilterMatchArrayMultiple,\n  FilterMode,\n  FilterResult,\n  InternalItem\n} from './internal/useFilter.types';\n\n/**\n * Factory for defining properties related to filtering mechanisms. This utility\n * enables the creation of reusable filter-related properties for components.\n *\n * @property {Function} customFilter\n *   A custom filter function to be applied. The function determines how\n *   filtering is performed.\n *\n * @property {Object} customKeyFilter\n *   An object defining custom key-based filter mappings for more fine-grained\n *   filtering configurations.\n *\n * @property {Array|String} filterKeys\n *   Specifies the keys to be used during the filtering process. Can be provided\n *   as an array or a single string.\n *\n * @property {String} filterMode\n *   Defines the strategy used for filtering, such as matching conditions.\n *   Defaults to 'intersection'.\n *\n * @property {Boolean} noFilter\n *   A flag to disable filtering entirely when set to true.\n */\nexport const defineFilterProps = propsFactory(\n  {\n    customFilter: Function as PropType<FilterFunction>,\n    customKeyFilter: Object as PropType<FilterKeyFunctions>,\n    filterKeys: [Array, String] as PropType<FilterKeys>,\n    filterMode: {\n      type: String as PropType<FilterMode>,\n      default: 'intersection'\n    },\n    noFilter: Boolean\n  },\n  'filter'\n);\n\nexport interface FilterProps extends ExtractPublicPropTypes<ReturnType<typeof defineFilterProps>> {}\n\n/**\n * A function that filters a set of items based on a query and specified filtering options.\n *\n * @param {FilterProps} props - Settings and options specific to the filtering process, including custom behavior.\n * @param {MaybeRef<T[]>} items - The array of items to filter. Can be a reactive reference or value.\n * @param {Ref<string | undefined> | (() => string | undefined)} query - The search query, either as a reactive reference or callback function.\n * @param {Object} [options] - Optional configuration for advanced filtering.\n * @param {(item: T) => {} } [options.transform] - A function to transform items for filtering.\n * @param {MaybeRef<FilterKeyFunctions | undefined>} [options.customKeyFilter] - Custom key filtering logic to override default behavior.\n *\n * @return {Object} Returns an object containing the filtered items, map of matches, and a helper function:\n * - `filteredItems`: Reactive reference to the array of filtered items.\n * - `filteredMatches`: A reactive map of item keys to their matched filter results.\n * - `getMatches`: A function to retrieve match information for a specific item.\n */\nexport function useFilter<T extends InternalItem>(\n  props: FilterProps,\n  items: MaybeRef<T[]>,\n  query: Ref<string | undefined> | (() => string | undefined),\n  options?: {\n    transform?: (item: T) => {};\n    customKeyFilter?: MaybeRef<FilterKeyFunctions | undefined>;\n  }\n) {\n  const filteredItems = shallowRef<T[]>([]);\n  const filteredMatches = shallowRef(new Map<unknown, Record<string, FilterMatchArrayMultiple | undefined>>());\n  const transformedItems = computed(() =>\n    options?.transform ? unref(items).map((item) => [item, options.transform!(item)] as const) : unref(items)\n  );\n\n  watchEffect(() => {\n    const _query = typeof query === 'function' ? query() : unref(query);\n    const strQuery = typeof _query !== 'string' && typeof _query !== 'number' ? '' : String(_query);\n\n    const results = filterItems(transformedItems.value, strQuery, {\n      customKeyFilter: {\n        ...props.customKeyFilter,\n        ...unref(options?.customKeyFilter)\n      },\n      default: props.customFilter,\n      filterKeys: props.filterKeys,\n      filterMode: props.filterMode,\n      noFilter: props.noFilter\n    });\n\n    const originalItems = unref(items);\n\n    const _filteredItems: (typeof filteredItems)['value'] = [];\n    const _filteredMatches: (typeof filteredMatches)['value'] = new Map();\n    results.forEach(({ index, matches }) => {\n      const item = originalItems[index];\n      _filteredItems.push(item);\n      if (item.value !== undefined) {\n        _filteredMatches.set(item.value, matches);\n      }\n    });\n    filteredItems.value = _filteredItems;\n    filteredMatches.value = _filteredMatches;\n  });\n\n  function getMatches(item: T) {\n    return filteredMatches.value.get(item.value);\n  }\n\n  return { filteredItems, filteredMatches, getMatches };\n}\n\n/**\n * A default filter function used to search for a query within a given value and return the matching index ranges.\n *\n * This function performs a case-insensitive search by converting both the value and the query to lowercase.\n * If the query is not found within the value, it returns -1. If the query is empty, it returns 0. If matches are found,\n * it returns an array of index ranges, where each range is an immutable tuple indicating the start and end index\n * of a match within the value.\n *\n * @param {string | null | undefined} value - The value to search within. If null or undefined, the function returns -1.\n * @param {string | null | undefined} query - The query string to search for. If null, undefined, or empty, specific return values are applied.\n * @param {any} item - A contextual item associated with the search (unused in this function).\n * @returns {number | Array<readonly [number, number]>} - Returns:\n *   - -1 if the `value` or `query` is null or undefined, or if the `query` is not found.\n *   - 0 if the `query` is an empty string.\n *   - An array of immutable index ranges indicating the positions of matches in the `value`, if the `query` is found.\n */\nexport const defaultFilter: FilterFunction = (value, query, _item) => {\n  if (value == null || query == null) return -1;\n  if (!query.length) return 0;\n\n  value = value.toString().toLocaleLowerCase();\n  query = query.toString().toLocaleLowerCase();\n\n  const result = [];\n  let idx = value.indexOf(query);\n  while (~idx) {\n    result.push([idx, idx + query.length] as const);\n\n    idx = value.indexOf(query, idx + query.length);\n  }\n\n  return result.length ? result : -1;\n};\n\n/**\n * Filters the provided list of items based on the given query and options.\n *\n * @param {Array<readonly [InternalItem, {}] | InternalItem>} items - The list of items to filter.\n *        Items can either be an array of `InternalItem` objects or an array of tuples containing an\n *        `InternalItem` and its transformed representation.\n * @param {string} query - The query string used to filter the items.\n * @param {Object} [options] - Optional configuration for the filtering process.\n * @param {FilterKeyFunctions} [options.customKeyFilter] - An object containing custom filter functions for specific keys.\n * @param {FilterFunction} [options.default] - The default filter function to use if no custom filter is defined.\n * @param {FilterKeys} [options.filterKeys] - The keys in each item to compare to the query.\n * @param {FilterMode} [options.filterMode] - The filtering mode. Can be 'union', 'intersection', or 'every'.\n * @param {boolean} [options.noFilter] - If true, disables the filtering process and returns an empty result.\n *\n * @return {FilterResult[]} - An array of filtered items. Each item in the output contains the index of the item in the\n *         original array and a record of matches based on the filtering criteria.\n */\nexport function filterItems(\n  items: readonly (readonly [item: InternalItem, transformed: {}])[] | readonly InternalItem[],\n  query: string,\n  options?: {\n    customKeyFilter?: FilterKeyFunctions;\n    default?: FilterFunction;\n    filterKeys?: FilterKeys;\n    filterMode?: FilterMode;\n    noFilter?: boolean;\n  }\n) {\n  const array: FilterResult[] = [];\n  const filter = options?.default ?? defaultFilter;\n  const keys = options?.filterKeys ? wrapInArray(options.filterKeys) : false;\n  const customFiltersLength = Object.keys(options?.customKeyFilter ?? {}).length;\n\n  if (!items?.length) return array;\n\n  let lookAheadItems: FilterResult[] = [];\n\n  loop: for (let i = 0; i < items.length; i++) {\n    const [item, transformed = item] = wrapInArray(items[i]) as readonly [InternalItem, {}];\n    const customMatches: Record<string, FilterMatchArrayMultiple | undefined> = {};\n    const defaultMatches: Record<string, FilterMatchArrayMultiple | undefined> = {};\n    let match: FilterMatch = -1;\n\n    if ((query || customFiltersLength > 0) && !options?.noFilter) {\n      let hasOnlyCustomFilters = false;\n\n      if (typeof item === 'object') {\n        if (item.type === 'divider' || item.type === 'subheader') {\n          if (lookAheadItems.at(-1)?.type !== 'divider' || item.type !== 'subheader') {\n            lookAheadItems = [];\n          }\n\n          lookAheadItems.push({ index: i, matches: {}, type: item.type });\n          continue;\n        }\n\n        const filterKeys = keys || Object.keys(transformed);\n        hasOnlyCustomFilters = filterKeys.length === customFiltersLength;\n\n        for (const key of filterKeys) {\n          const value = getPropertyFromItem(transformed, key);\n          const keyFilter = options?.customKeyFilter?.[key];\n\n          match = keyFilter ? keyFilter(value, query, item) : filter(value, query, item);\n\n          if (match !== -1 && match !== false) {\n            if (keyFilter) customMatches[key] = normaliseMatch(match, query);\n            else defaultMatches[key] = normaliseMatch(match, query);\n          } else if (options?.filterMode === 'every') {\n            continue loop;\n          }\n        }\n      } else {\n        match = filter(item, query, item);\n        if (match !== -1 && match !== false) {\n          defaultMatches.title = normaliseMatch(match, query);\n        }\n      }\n\n      const defaultMatchesLength = Object.keys(defaultMatches).length;\n      const customMatchesLength = Object.keys(customMatches).length;\n\n      if (!defaultMatchesLength && !customMatchesLength) continue;\n\n      if (options?.filterMode === 'union' && customMatchesLength !== customFiltersLength && !defaultMatchesLength)\n        continue;\n\n      if (\n        options?.filterMode === 'intersection' &&\n        (customMatchesLength !== customFiltersLength ||\n          (!defaultMatchesLength && customFiltersLength > 0 && !hasOnlyCustomFilters))\n      )\n        continue;\n    }\n\n    if (lookAheadItems.length) {\n      array.push(...lookAheadItems);\n      lookAheadItems = [];\n    }\n\n    array.push({ index: i, matches: { ...defaultMatches, ...customMatches } });\n  }\n\n  return array;\n}\n\nfunction normaliseMatch(match: FilterMatch, query: string): FilterMatchArrayMultiple | undefined {\n  if (match == null || typeof match === 'boolean' || match === -1) return;\n  if (typeof match === 'number') return [[match, match + query.length]];\n  if (Array.isArray(match[0])) return match as FilterMatchArrayMultiple;\n  return [match] as FilterMatchArrayMultiple;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useFilter.js","sources":["../../../../../src/composables/useFilter/useFilter.ts"],"sourcesContent":["import { propsFactory } from '@cds/core';\nimport { getPropertyFromItem, wrapInArray } from '@cds/utils';\nimport {\n  computed,\n  type ExtractPublicPropTypes,\n  type MaybeRef,\n  type PropType,\n  type Ref,\n  shallowRef,\n  unref,\n  watchEffect\n} from 'vue';\n\nimport type {\n  FilterFunction,\n  FilterKeyFunctions,\n  FilterKeys,\n  FilterMatch,\n  FilterMatchArrayMultiple,\n  FilterMode,\n  FilterResult,\n  InternalItem\n} from './internal/useFilter.types';\n\n/**\n * Factory for defining properties related to filtering mechanisms. This utility\n * enables the creation of reusable filter-related properties for components.\n *\n * @property {Function} customFilter\n *   A custom filter function to be applied. The function determines how\n *   filtering is performed.\n *\n * @property {Object} customKeyFilter\n *   An object defining custom key-based filter mappings for more fine-grained\n *   filtering configurations.\n *\n * @property {Array|String} filterKeys\n *   Specifies the keys to be used during the filtering process. Can be provided\n *   as an array or a single string.\n *\n * @property {String} filterMode\n *   Defines the strategy used for filtering, such as matching conditions.\n *   Defaults to 'intersection'.\n *\n * @property {Boolean} noFilter\n *   A flag to disable filtering entirely when set to true.\n */\nexport const defineFilterProps = propsFactory(\n  {\n    /**\n     * Своя функция фильтрации значений. Получает значение, поисковый запрос и элемент, возвращает совпадение или `-1`\n     * @en Your own value filtering function. Receives the value, the search query and the item, returns a match or `-1`\n     */\n    customFilter: Function as PropType<FilterFunction>,\n    /**\n     * Отдельные функции фильтрации для конкретных ключей элемента — объект вида `{ ключ: функция }`\n     * @en Separate filtering functions for specific item keys — an object of the form `{ key: function }`\n     */\n    customKeyFilter: Object as PropType<FilterKeyFunctions>,\n    /**\n     * Ключи элемента, по которым идёт поиск. По умолчанию фильтрация идёт по заголовку элемента\n     * @en Item keys the search runs over. By default filtering goes by the item title\n     */\n    filterKeys: [Array, String] as PropType<FilterKeys>,\n    /**\n     * Как объединяются результаты `customKeyFilter` и общей фильтрации: пересечением, объединением или заменой\n     * @en How the results of `customKeyFilter` and of the general filtering are combined: by intersection, by union or by replacement\n     */\n    filterMode: {\n      type: String as PropType<FilterMode>,\n      default: 'intersection'\n    },\n    /**\n     * Отключает встроенную фильтрацию — список показывается как есть, поиск обрабатывается снаружи\n     * @en Turns off the built-in filtering — the list is shown as is, the search is handled outside\n     */\n    noFilter: Boolean\n  },\n  'filter'\n);\n\nexport interface FilterProps extends ExtractPublicPropTypes<ReturnType<typeof defineFilterProps>> {}\n\n/**\n * A function that filters a set of items based on a query and specified filtering options.\n *\n * @param {FilterProps} props - Settings and options specific to the filtering process, including custom behavior.\n * @param {MaybeRef<T[]>} items - The array of items to filter. Can be a reactive reference or value.\n * @param {Ref<string | undefined> | (() => string | undefined)} query - The search query, either as a reactive reference or callback function.\n * @param {Object} [options] - Optional configuration for advanced filtering.\n * @param {(item: T) => {} } [options.transform] - A function to transform items for filtering.\n * @param {MaybeRef<FilterKeyFunctions | undefined>} [options.customKeyFilter] - Custom key filtering logic to override default behavior.\n *\n * @return {Object} Returns an object containing the filtered items, map of matches, and a helper function:\n * - `filteredItems`: Reactive reference to the array of filtered items.\n * - `filteredMatches`: A reactive map of item keys to their matched filter results.\n * - `getMatches`: A function to retrieve match information for a specific item.\n */\nexport function useFilter<T extends InternalItem>(\n  props: FilterProps,\n  items: MaybeRef<T[]>,\n  query: Ref<string | undefined> | (() => string | undefined),\n  options?: {\n    transform?: (item: T) => {};\n    customKeyFilter?: MaybeRef<FilterKeyFunctions | undefined>;\n  }\n) {\n  const filteredItems = shallowRef<T[]>([]);\n  const filteredMatches = shallowRef(new Map<unknown, Record<string, FilterMatchArrayMultiple | undefined>>());\n  const transformedItems = computed(() =>\n    options?.transform ? unref(items).map((item) => [item, options.transform!(item)] as const) : unref(items)\n  );\n\n  watchEffect(() => {\n    const _query = typeof query === 'function' ? query() : unref(query);\n    const strQuery = typeof _query !== 'string' && typeof _query !== 'number' ? '' : String(_query);\n\n    const results = filterItems(transformedItems.value, strQuery, {\n      customKeyFilter: {\n        ...props.customKeyFilter,\n        ...unref(options?.customKeyFilter)\n      },\n      default: props.customFilter,\n      filterKeys: props.filterKeys,\n      filterMode: props.filterMode,\n      noFilter: props.noFilter\n    });\n\n    const originalItems = unref(items);\n\n    const _filteredItems: (typeof filteredItems)['value'] = [];\n    const _filteredMatches: (typeof filteredMatches)['value'] = new Map();\n    results.forEach(({ index, matches }) => {\n      const item = originalItems[index];\n      _filteredItems.push(item);\n      if (item.value !== undefined) {\n        _filteredMatches.set(item.value, matches);\n      }\n    });\n    filteredItems.value = _filteredItems;\n    filteredMatches.value = _filteredMatches;\n  });\n\n  function getMatches(item: T) {\n    return filteredMatches.value.get(item.value);\n  }\n\n  return { filteredItems, filteredMatches, getMatches };\n}\n\n/**\n * A default filter function used to search for a query within a given value and return the matching index ranges.\n *\n * This function performs a case-insensitive search by converting both the value and the query to lowercase.\n * If the query is not found within the value, it returns -1. If the query is empty, it returns 0. If matches are found,\n * it returns an array of index ranges, where each range is an immutable tuple indicating the start and end index\n * of a match within the value.\n *\n * @param {string | null | undefined} value - The value to search within. If null or undefined, the function returns -1.\n * @param {string | null | undefined} query - The query string to search for. If null, undefined, or empty, specific return values are applied.\n * @param {any} item - A contextual item associated with the search (unused in this function).\n * @returns {number | Array<readonly [number, number]>} - Returns:\n *   - -1 if the `value` or `query` is null or undefined, or if the `query` is not found.\n *   - 0 if the `query` is an empty string.\n *   - An array of immutable index ranges indicating the positions of matches in the `value`, if the `query` is found.\n */\nexport const defaultFilter: FilterFunction = (value, query, _item) => {\n  if (value == null || query == null) return -1;\n  if (!query.length) return 0;\n\n  value = value.toString().toLocaleLowerCase();\n  query = query.toString().toLocaleLowerCase();\n\n  const result = [];\n  let idx = value.indexOf(query);\n  while (~idx) {\n    result.push([idx, idx + query.length] as const);\n\n    idx = value.indexOf(query, idx + query.length);\n  }\n\n  return result.length ? result : -1;\n};\n\n/**\n * Filters the provided list of items based on the given query and options.\n *\n * @param {Array<readonly [InternalItem, {}] | InternalItem>} items - The list of items to filter.\n *        Items can either be an array of `InternalItem` objects or an array of tuples containing an\n *        `InternalItem` and its transformed representation.\n * @param {string} query - The query string used to filter the items.\n * @param {Object} [options] - Optional configuration for the filtering process.\n * @param {FilterKeyFunctions} [options.customKeyFilter] - An object containing custom filter functions for specific keys.\n * @param {FilterFunction} [options.default] - The default filter function to use if no custom filter is defined.\n * @param {FilterKeys} [options.filterKeys] - The keys in each item to compare to the query.\n * @param {FilterMode} [options.filterMode] - The filtering mode. Can be 'union', 'intersection', or 'every'.\n * @param {boolean} [options.noFilter] - If true, disables the filtering process and returns an empty result.\n *\n * @return {FilterResult[]} - An array of filtered items. Each item in the output contains the index of the item in the\n *         original array and a record of matches based on the filtering criteria.\n */\nexport function filterItems(\n  items: readonly (readonly [item: InternalItem, transformed: {}])[] | readonly InternalItem[],\n  query: string,\n  options?: {\n    customKeyFilter?: FilterKeyFunctions;\n    default?: FilterFunction;\n    filterKeys?: FilterKeys;\n    filterMode?: FilterMode;\n    noFilter?: boolean;\n  }\n) {\n  const array: FilterResult[] = [];\n  const filter = options?.default ?? defaultFilter;\n  const keys = options?.filterKeys ? wrapInArray(options.filterKeys) : false;\n  const customFiltersLength = Object.keys(options?.customKeyFilter ?? {}).length;\n\n  if (!items?.length) return array;\n\n  let lookAheadItems: FilterResult[] = [];\n\n  loop: for (let i = 0; i < items.length; i++) {\n    const [item, transformed = item] = wrapInArray(items[i]) as readonly [InternalItem, {}];\n    const customMatches: Record<string, FilterMatchArrayMultiple | undefined> = {};\n    const defaultMatches: Record<string, FilterMatchArrayMultiple | undefined> = {};\n    let match: FilterMatch = -1;\n\n    if ((query || customFiltersLength > 0) && !options?.noFilter) {\n      let hasOnlyCustomFilters = false;\n\n      if (typeof item === 'object') {\n        if (item.type === 'divider' || item.type === 'subheader') {\n          if (lookAheadItems.at(-1)?.type !== 'divider' || item.type !== 'subheader') {\n            lookAheadItems = [];\n          }\n\n          lookAheadItems.push({ index: i, matches: {}, type: item.type });\n          continue;\n        }\n\n        const filterKeys = keys || Object.keys(transformed);\n        hasOnlyCustomFilters = filterKeys.length === customFiltersLength;\n\n        for (const key of filterKeys) {\n          const value = getPropertyFromItem(transformed, key);\n          const keyFilter = options?.customKeyFilter?.[key];\n\n          match = keyFilter ? keyFilter(value, query, item) : filter(value, query, item);\n\n          if (match !== -1 && match !== false) {\n            if (keyFilter) customMatches[key] = normaliseMatch(match, query);\n            else defaultMatches[key] = normaliseMatch(match, query);\n          } else if (options?.filterMode === 'every') {\n            continue loop;\n          }\n        }\n      } else {\n        match = filter(item, query, item);\n        if (match !== -1 && match !== false) {\n          defaultMatches.title = normaliseMatch(match, query);\n        }\n      }\n\n      const defaultMatchesLength = Object.keys(defaultMatches).length;\n      const customMatchesLength = Object.keys(customMatches).length;\n\n      if (!defaultMatchesLength && !customMatchesLength) continue;\n\n      if (options?.filterMode === 'union' && customMatchesLength !== customFiltersLength && !defaultMatchesLength)\n        continue;\n\n      if (\n        options?.filterMode === 'intersection' &&\n        (customMatchesLength !== customFiltersLength ||\n          (!defaultMatchesLength && customFiltersLength > 0 && !hasOnlyCustomFilters))\n      )\n        continue;\n    }\n\n    if (lookAheadItems.length) {\n      array.push(...lookAheadItems);\n      lookAheadItems = [];\n    }\n\n    array.push({ index: i, matches: { ...defaultMatches, ...customMatches } });\n  }\n\n  return array;\n}\n\nfunction normaliseMatch(match: FilterMatch, query: string): FilterMatchArrayMultiple | undefined {\n  if (match == null || typeof match === 'boolean' || match === -1) return;\n  if (typeof match === 'number') return [[match, match + query.length]];\n  if (Array.isArray(match[0])) return match as FilterMatchArrayMultiple;\n  return [match] as FilterMatchArrayMultiple;\n}\n"],"names":[],"mappings":"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"}

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

@@ -5,9 +5,15 @@ import { E as EventProp } from "../../utils/helpers.js";
 import { toRef, unref } from "vue";
 const defineFocusProps = propsFactory(
   {
-    /** Управляет состоянием фокуса компонента. Когда `true`, компонент считается сфокусированным и может применять соответствующие стили или поведение. */
+    /**
+     * Управляет состоянием фокуса компонента. Когда `true`, компонент считается сфокусированным и может применять соответствующие стили или поведение.
+     * @en Controls the focus state of the component. When `true`, the component is considered focused and may apply the corresponding styles or behavior.
+     */
     focused: Boolean,
-    /** Событие, которое срабатывает при изменении состояния фокуса компонента. */
+    /**
+     * Событие, которое срабатывает при изменении состояния фокуса компонента.
+     * @en Fires when the focus state of the component changes.
+     */
     "onUpdate:focused": EventProp()
   },
   "focus"
@@ -27,7 +33,10 @@ function useFocus(props, name = getCurrentInstanceName()) {
 }
 const defineAutofocusProps = propsFactory(
   {
-    /** Включает автофокус */
+    /**
+     * Включает автофокус
+     * @en Enables autofocus
+     */
     autofocus: Boolean
   },
   "autofocus"

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

@@ -1 +1 @@
-{"version":3,"file":"useFocus.js","sources":["../../../../../src/composables/useFocus/useFocus.ts"],"sourcesContent":["import { getCurrentInstanceName, propsFactory, useProxyModel } from '@cds/core';\nimport { EventProp } from '@cds/utils';\nimport { type ExtractPublicPropTypes, toRef, unref } from 'vue';\n\nexport const defineFocusProps = propsFactory(\n  {\n    /** Управляет состоянием фокуса компонента. Когда `true`, компонент считается сфокусированным и может применять соответствующие стили или поведение. */\n    focused: Boolean,\n    /** Событие, которое срабатывает при изменении состояния фокуса компонента. */\n    'onUpdate:focused': EventProp<[boolean]>()\n  },\n  'focus'\n);\n\nexport interface FocusProps extends ExtractPublicPropTypes<ReturnType<typeof defineFocusProps>> {}\n\n/**\n * A composable function that manages focus state and associated CSS class mappings\n * for a component. Provides methods to programmatically set focus or blur states.\n *\n * @param {FocusProps} props - The properties object that includes the reactive focus state model.\n * @param {string} [name=getCurrentInstanceName()] - The name of the current instance, used to generate class mappings.\n * @return {Object} An object containing:\n *                  - `focusClasses`: A reactive reference to the CSS classes based on the focus state.\n *                  - `isFocused`: A reactive model tracking the focus state.\n *                  - `focus`: A function to set the focus state to true.\n *                  - `blur`: A function to set the focus state to false.\n */\nexport function useFocus(props: FocusProps, name = getCurrentInstanceName()) {\n  const isFocused = useProxyModel(props, 'focused');\n  const focusClasses = toRef(() => ({\n    [`${name}--focused`]: unref(isFocused)\n  }));\n\n  function focus() {\n    isFocused.value = true;\n  }\n\n  function blur() {\n    isFocused.value = false;\n  }\n\n  return { focusClasses, isFocused, focus, blur };\n}\n\nexport const defineAutofocusProps = propsFactory(\n  {\n    /** Включает автофокус */\n    autofocus: Boolean\n  },\n  'autofocus'\n);\n\nexport interface AutofocusProps extends ExtractPublicPropTypes<ReturnType<typeof defineAutofocusProps>> {}\n\n/**\n * A custom hook that manages autofocus behavior for elements when they enter the viewport.\n *\n * @param {AutofocusProps} props - The properties to configure the autofocus behavior. The `autofocus` property determines\n * whether the autofocus functionality is enabled.\n * @return {Object} An object containing the `onIntersect` method, which handles intersection logic and applies focus to the target elements.\n */\nexport function useAutofocus(props: AutofocusProps) {\n  function onIntersect(isIntersecting: boolean, entries: IntersectionObserverEntry[]) {\n    if (!props.autofocus || !isIntersecting) return;\n\n    const el = entries[0].target;\n    const target = (el.matches('input,textarea') ? el : el.querySelector('input,textarea')) as HTMLElement | null;\n    target?.focus();\n  }\n\n  return {\n    onIntersect\n  };\n}\n"],"names":[],"mappings":";;;;;AAIO,MAAM,mBAAmB;AAAA,EAC9B;AAAA;AAAA,IAEE,SAAS;AAAA;AAAA,IAET,oBAAoB,UAAA;AAAA,EAAqB;AAAA,EAE3C;AACF;AAgBO,SAAS,SAAS,OAAmB,OAAO,0BAA0B;AAC3E,QAAM,YAAY,cAAc,OAAO,SAAS;AAChD,QAAM,eAAe,MAAM,OAAO;AAAA,IAChC,CAAC,GAAG,IAAI,WAAW,GAAG,MAAM,SAAS;AAAA,EAAA,EACrC;AAEF,WAAS,QAAQ;AACf,cAAU,QAAQ;AAAA,EACpB;AAEA,WAAS,OAAO;AACd,cAAU,QAAQ;AAAA,EACpB;AAEA,SAAO,EAAE,cAAc,WAAW,OAAO,KAAA;AAC3C;AAEO,MAAM,uBAAuB;AAAA,EAClC;AAAA;AAAA,IAEE,WAAW;AAAA,EAAA;AAAA,EAEb;AACF;AAWO,SAAS,aAAa,OAAuB;AAClD,WAAS,YAAY,gBAAyB,SAAsC;AAClF,QAAI,CAAC,MAAM,aAAa,CAAC,eAAgB;AAEzC,UAAM,KAAK,QAAQ,CAAC,EAAE;AACtB,UAAM,SAAU,GAAG,QAAQ,gBAAgB,IAAI,KAAK,GAAG,cAAc,gBAAgB;AACrF,qCAAQ;AAAA,EACV;AAEA,SAAO;AAAA,IACL;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useFocus.js","sources":["../../../../../src/composables/useFocus/useFocus.ts"],"sourcesContent":["import { getCurrentInstanceName, propsFactory, useProxyModel } from '@cds/core';\nimport { EventProp } from '@cds/utils';\nimport { type ExtractPublicPropTypes, toRef, unref } from 'vue';\n\nexport const defineFocusProps = propsFactory(\n  {\n    /**\n     * Управляет состоянием фокуса компонента. Когда `true`, компонент считается сфокусированным и может применять соответствующие стили или поведение.\n     * @en Controls the focus state of the component. When `true`, the component is considered focused and may apply the corresponding styles or behavior.\n     */\n    focused: Boolean,\n    /**\n     * Событие, которое срабатывает при изменении состояния фокуса компонента.\n     * @en Fires when the focus state of the component changes.\n     */\n    'onUpdate:focused': EventProp<[boolean]>()\n  },\n  'focus'\n);\n\nexport interface FocusProps extends ExtractPublicPropTypes<ReturnType<typeof defineFocusProps>> {}\n\n/**\n * A composable function that manages focus state and associated CSS class mappings\n * for a component. Provides methods to programmatically set focus or blur states.\n *\n * @param {FocusProps} props - The properties object that includes the reactive focus state model.\n * @param {string} [name=getCurrentInstanceName()] - The name of the current instance, used to generate class mappings.\n * @return {Object} An object containing:\n *                  - `focusClasses`: A reactive reference to the CSS classes based on the focus state.\n *                  - `isFocused`: A reactive model tracking the focus state.\n *                  - `focus`: A function to set the focus state to true.\n *                  - `blur`: A function to set the focus state to false.\n */\nexport function useFocus(props: FocusProps, name = getCurrentInstanceName()) {\n  const isFocused = useProxyModel(props, 'focused');\n  const focusClasses = toRef(() => ({\n    [`${name}--focused`]: unref(isFocused)\n  }));\n\n  function focus() {\n    isFocused.value = true;\n  }\n\n  function blur() {\n    isFocused.value = false;\n  }\n\n  return { focusClasses, isFocused, focus, blur };\n}\n\nexport const defineAutofocusProps = propsFactory(\n  {\n    /**\n     * Включает автофокус\n     * @en Enables autofocus\n     */\n    autofocus: Boolean\n  },\n  'autofocus'\n);\n\nexport interface AutofocusProps extends ExtractPublicPropTypes<ReturnType<typeof defineAutofocusProps>> {}\n\n/**\n * A custom hook that manages autofocus behavior for elements when they enter the viewport.\n *\n * @param {AutofocusProps} props - The properties to configure the autofocus behavior. The `autofocus` property determines\n * whether the autofocus functionality is enabled.\n * @return {Object} An object containing the `onIntersect` method, which handles intersection logic and applies focus to the target elements.\n */\nexport function useAutofocus(props: AutofocusProps) {\n  function onIntersect(isIntersecting: boolean, entries: IntersectionObserverEntry[]) {\n    if (!props.autofocus || !isIntersecting) return;\n\n    const el = entries[0].target;\n    const target = (el.matches('input,textarea') ? el : el.querySelector('input,textarea')) as HTMLElement | null;\n    target?.focus();\n  }\n\n  return {\n    onIntersect\n  };\n}\n"],"names":[],"mappings":";;;;;AAIO,MAAM,mBAAmB;AAAA,EAC9B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKT,oBAAoB,UAAA;AAAA,EAAqB;AAAA,EAE3C;AACF;AAgBO,SAAS,SAAS,OAAmB,OAAO,0BAA0B;AAC3E,QAAM,YAAY,cAAc,OAAO,SAAS;AAChD,QAAM,eAAe,MAAM,OAAO;AAAA,IAChC,CAAC,GAAG,IAAI,WAAW,GAAG,MAAM,SAAS;AAAA,EAAA,EACrC;AAEF,WAAS,QAAQ;AACf,cAAU,QAAQ;AAAA,EACpB;AAEA,WAAS,OAAO;AACd,cAAU,QAAQ;AAAA,EACpB;AAEA,SAAO,EAAE,cAAc,WAAW,OAAO,KAAA;AAC3C;AAEO,MAAM,uBAAuB;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,WAAW;AAAA,EAAA;AAAA,EAEb;AACF;AAWO,SAAS,aAAa,OAAuB;AAClD,WAAS,YAAY,gBAAyB,SAAsC;AAClF,QAAI,CAAC,MAAM,aAAa,CAAC,eAAgB;AAEzC,UAAM,KAAK,QAAQ,CAAC,EAAE;AACtB,UAAM,SAAU,GAAG,QAAQ,gBAAgB,IAAI,KAAK,GAAG,cAAc,gBAAgB;AACrF,qCAAQ;AAAA,EACV;AAEA,SAAO;AAAA,IACL;AAAA,EAAA;AAEJ;"}

package/dist/es/src/composables/useFocus/useFocusTrap.js

@@ -4,9 +4,15 @@ import { a as IN_BROWSER } from "../../utils/dom/globals.js";
 import { toRef, watch, onScopeDispose, nextTick, toValue } from "vue";
 const defineFocusTrapProps = propsFactory(
   {
-    /** Замыкает Tab-навигацию внутри контента: с последнего фокусируемого элемента фокус переходит на первый и наоборот. */
+    /**
+     * Замыкает Tab-навигацию внутри контента: с последнего фокусируемого элемента фокус переходит на первый и наоборот.
+     * @en Traps Tab navigation inside the content: from the last focusable element the focus moves to the first one and back.
+     */
     retainFocus: Boolean,
-    /** Возвращает фокус внутрь контента, если он ушёл за его пределы — например, по Tab с конца страницы. Клик мышью фокус не перехватывает. */
+    /**
+     * Возвращает фокус внутрь контента, если он ушёл за его пределы — например, по Tab с конца страницы. Клик мышью фокус не перехватывает.
+     * @en Returns the focus back into the content if it has left it — for example on Tab from the end of the page. A mouse click does not steal the focus.
+     */
     captureFocus: Boolean
   },
   "focus-trap"

package/dist/es/src/composables/useFocus/useFocusTrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.js","sources":["../../../../../src/composables/useFocus/useFocusTrap.ts"],"sourcesContent":["import { propsFactory } from '@cds/core';\nimport { focusableChildren, IN_BROWSER } from '@cds/utils';\nimport { type ExtractPublicPropTypes, nextTick, onScopeDispose, type Ref, toRef, toValue, watch } from 'vue';\n\nexport const defineFocusTrapProps = propsFactory(\n  {\n    /** Замыкает Tab-навигацию внутри контента: с последнего фокусируемого элемента фокус переходит на первый и наоборот. */\n    retainFocus: Boolean,\n    /** Возвращает фокус внутрь контента, если он ушёл за его пределы — например, по Tab с конца страницы. Клик мышью фокус не перехватывает. */\n    captureFocus: Boolean\n  },\n  'focus-trap'\n);\n\nexport interface FocusTrapProps extends ExtractPublicPropTypes<ReturnType<typeof defineFocusTrapProps>> {}\n\nconst registry = new Map<\n  symbol,\n  {\n    isActive: Ref<boolean>;\n    contentEl: Ref<HTMLElement | undefined>;\n  }\n>();\nlet subscribers = 0;\n\n/**\n * Manages focus trapping within a specific DOM element. This method ensures that focus remains within the designated element\n * when active, preventing focus from escaping to other parts of the document.\n *\n * @param {FocusTrapProps} props - Configuration options for the focus trap behavior, such as whether to retain or capture focus.\n * @param {Object} options - Additional parameters for managing focus trap functionality.\n * @param {Ref<boolean>} options.isActive - A reactive reference indicating if the focus trap is currently active.\n * @param {Readonly<Ref<boolean>>} options.localTop - A reactive flag determining if the current trap context is at the local top.\n * @param {Readonly<Ref<HTMLElement | undefined>>} [options.activatorEl] - A reactive reference to the element that activates the focus trap. Optional.\n * @param {Readonly<Ref<HTMLElement | undefined>>} options.contentEl - A reactive reference to the primary content element to focus within.\n *\n * @return {void} This method does not return any value.\n */\nexport function useFocusTrap(\n  props: FocusTrapProps,\n  {\n    isActive,\n    localTop,\n    contentEl\n  }: {\n    isActive: Ref<boolean>;\n    localTop: Readonly<Ref<boolean>>;\n    activatorEl?: Readonly<Ref<HTMLElement | undefined>>;\n    contentEl: Readonly<Ref<HTMLElement | undefined>>;\n  }\n) {\n  const trapId = Symbol('trap');\n\n  let focusTrapSuppressed = false;\n  let focusTrapSuppressionTimeout = -1;\n\n  async function onPointerdown() {\n    focusTrapSuppressed = true;\n    focusTrapSuppressionTimeout = window.setTimeout(() => {\n      focusTrapSuppressed = false;\n    }, 100);\n  }\n\n  async function captureOnFocus(e: FocusEvent) {\n    const before = e.relatedTarget as HTMLElement | null;\n    const after = e.target as HTMLElement | null;\n\n    document.removeEventListener('pointerdown', onPointerdown);\n    document.removeEventListener('keydown', captureOnKeydown);\n\n    await nextTick();\n\n    if (\n      isActive.value &&\n      !focusTrapSuppressed &&\n      before !== after &&\n      contentEl.value &&\n      // We're the menu without open submenus or overlays\n      toValue(localTop) &&\n      // It isn't the document or the container body\n      ![document, contentEl.value].includes(after!) &&\n      // It isn't inside the container body\n      !contentEl.value.contains(after)\n    ) {\n      const focusable = focusableChildren(contentEl.value);\n      focusable[0]?.focus();\n    }\n  }\n\n  function captureOnKeydown(e: KeyboardEvent) {\n    if (e.key !== 'Tab') return;\n    document.removeEventListener('keydown', captureOnKeydown);\n\n    if (isActive.value && contentEl.value && e.target && !contentEl.value.contains(e.target as Element)) {\n      const allFocusableElements = focusableChildren(document.documentElement);\n\n      if (\n        (e.shiftKey && e.target === allFocusableElements.at(0)) ||\n        (!e.shiftKey && e.target === allFocusableElements.at(-1))\n      ) {\n        const focusable = focusableChildren(contentEl.value);\n        if (focusable.length > 0) {\n          e.preventDefault();\n          focusable[0].focus();\n        }\n      }\n    }\n  }\n\n  const shouldCapture = toRef(() => isActive.value && props.captureFocus);\n\n  if (IN_BROWSER) {\n    watch(\n      () => props.retainFocus,\n      (val) => {\n        if (val) {\n          registry.set(trapId, { isActive, contentEl });\n        } else {\n          registry.delete(trapId);\n        }\n      },\n      { immediate: true }\n    );\n\n    watch(\n      shouldCapture,\n      (val) => {\n        if (val) {\n          document.addEventListener('pointerdown', onPointerdown);\n          document.addEventListener('focusin', captureOnFocus, { once: true });\n          document.addEventListener('keydown', captureOnKeydown);\n        } else {\n          document.removeEventListener('pointerdown', onPointerdown);\n          document.removeEventListener('focusin', captureOnFocus);\n          document.removeEventListener('keydown', captureOnKeydown);\n        }\n      },\n      { immediate: true }\n    );\n\n    if (subscribers++ < 1) {\n      document.addEventListener('keydown', onKeydown);\n    }\n  }\n\n  onScopeDispose(() => {\n    registry.delete(trapId);\n    clearTimeout(focusTrapSuppressionTimeout);\n    document.removeEventListener('pointerdown', onPointerdown);\n    document.removeEventListener('focusin', captureOnFocus);\n    document.removeEventListener('keydown', captureOnKeydown);\n\n    if (--subscribers < 1) {\n      document.removeEventListener('keydown', onKeydown);\n    }\n  });\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  const activeElement = document.activeElement as HTMLElement | null;\n  if (e.key !== 'Tab' || !activeElement) return;\n\n  const parentTraps = Array.from(registry.values())\n    .filter(({ isActive, contentEl }) => isActive.value && contentEl.value?.contains(activeElement))\n    .map((x) => x.contentEl.value);\n\n  let closestTrap;\n  let currentParent = activeElement.parentElement;\n  while (currentParent) {\n    if (parentTraps.includes(currentParent)) {\n      closestTrap = currentParent;\n      break;\n    }\n    currentParent = currentParent.parentElement;\n  }\n\n  if (!closestTrap) return;\n\n  const focusable = focusableChildren(closestTrap)\n    // excluding VListItems with tabindex=\"-2\"\n    .filter((x) => x.tabIndex >= 0);\n\n  if (!focusable.length) return;\n\n  const active = document.activeElement as HTMLElement | null;\n  if (focusable.length === 1 && focusable[0].classList.contains('v-list') && focusable[0].contains(active)) {\n    e.preventDefault();\n    return;\n  }\n\n  const firstElement = focusable[0];\n  const lastElement = focusable[focusable.length - 1];\n\n  if (\n    e.shiftKey &&\n    (active === firstElement || (firstElement.classList.contains('v-list') && firstElement.contains(active)))\n  ) {\n    e.preventDefault();\n    lastElement.focus();\n  }\n\n  if (\n    !e.shiftKey &&\n    (active === lastElement || (lastElement.classList.contains('v-list') && lastElement.contains(active)))\n  ) {\n    e.preventDefault();\n    firstElement.focus();\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useFocusTrap.js","sources":["../../../../../src/composables/useFocus/useFocusTrap.ts"],"sourcesContent":["import { propsFactory } from '@cds/core';\nimport { focusableChildren, IN_BROWSER } from '@cds/utils';\nimport { type ExtractPublicPropTypes, nextTick, onScopeDispose, type Ref, toRef, toValue, watch } from 'vue';\n\nexport const defineFocusTrapProps = propsFactory(\n  {\n    /**\n     * Замыкает Tab-навигацию внутри контента: с последнего фокусируемого элемента фокус переходит на первый и наоборот.\n     * @en Traps Tab navigation inside the content: from the last focusable element the focus moves to the first one and back.\n     */\n    retainFocus: Boolean,\n    /**\n     * Возвращает фокус внутрь контента, если он ушёл за его пределы — например, по Tab с конца страницы. Клик мышью фокус не перехватывает.\n     * @en Returns the focus back into the content if it has left it — for example on Tab from the end of the page. A mouse click does not steal the focus.\n     */\n    captureFocus: Boolean\n  },\n  'focus-trap'\n);\n\nexport interface FocusTrapProps extends ExtractPublicPropTypes<ReturnType<typeof defineFocusTrapProps>> {}\n\nconst registry = new Map<\n  symbol,\n  {\n    isActive: Ref<boolean>;\n    contentEl: Ref<HTMLElement | undefined>;\n  }\n>();\nlet subscribers = 0;\n\n/**\n * Manages focus trapping within a specific DOM element. This method ensures that focus remains within the designated element\n * when active, preventing focus from escaping to other parts of the document.\n *\n * @param {FocusTrapProps} props - Configuration options for the focus trap behavior, such as whether to retain or capture focus.\n * @param {Object} options - Additional parameters for managing focus trap functionality.\n * @param {Ref<boolean>} options.isActive - A reactive reference indicating if the focus trap is currently active.\n * @param {Readonly<Ref<boolean>>} options.localTop - A reactive flag determining if the current trap context is at the local top.\n * @param {Readonly<Ref<HTMLElement | undefined>>} [options.activatorEl] - A reactive reference to the element that activates the focus trap. Optional.\n * @param {Readonly<Ref<HTMLElement | undefined>>} options.contentEl - A reactive reference to the primary content element to focus within.\n *\n * @return {void} This method does not return any value.\n */\nexport function useFocusTrap(\n  props: FocusTrapProps,\n  {\n    isActive,\n    localTop,\n    contentEl\n  }: {\n    isActive: Ref<boolean>;\n    localTop: Readonly<Ref<boolean>>;\n    activatorEl?: Readonly<Ref<HTMLElement | undefined>>;\n    contentEl: Readonly<Ref<HTMLElement | undefined>>;\n  }\n) {\n  const trapId = Symbol('trap');\n\n  let focusTrapSuppressed = false;\n  let focusTrapSuppressionTimeout = -1;\n\n  async function onPointerdown() {\n    focusTrapSuppressed = true;\n    focusTrapSuppressionTimeout = window.setTimeout(() => {\n      focusTrapSuppressed = false;\n    }, 100);\n  }\n\n  async function captureOnFocus(e: FocusEvent) {\n    const before = e.relatedTarget as HTMLElement | null;\n    const after = e.target as HTMLElement | null;\n\n    document.removeEventListener('pointerdown', onPointerdown);\n    document.removeEventListener('keydown', captureOnKeydown);\n\n    await nextTick();\n\n    if (\n      isActive.value &&\n      !focusTrapSuppressed &&\n      before !== after &&\n      contentEl.value &&\n      // We're the menu without open submenus or overlays\n      toValue(localTop) &&\n      // It isn't the document or the container body\n      ![document, contentEl.value].includes(after!) &&\n      // It isn't inside the container body\n      !contentEl.value.contains(after)\n    ) {\n      const focusable = focusableChildren(contentEl.value);\n      focusable[0]?.focus();\n    }\n  }\n\n  function captureOnKeydown(e: KeyboardEvent) {\n    if (e.key !== 'Tab') return;\n    document.removeEventListener('keydown', captureOnKeydown);\n\n    if (isActive.value && contentEl.value && e.target && !contentEl.value.contains(e.target as Element)) {\n      const allFocusableElements = focusableChildren(document.documentElement);\n\n      if (\n        (e.shiftKey && e.target === allFocusableElements.at(0)) ||\n        (!e.shiftKey && e.target === allFocusableElements.at(-1))\n      ) {\n        const focusable = focusableChildren(contentEl.value);\n        if (focusable.length > 0) {\n          e.preventDefault();\n          focusable[0].focus();\n        }\n      }\n    }\n  }\n\n  const shouldCapture = toRef(() => isActive.value && props.captureFocus);\n\n  if (IN_BROWSER) {\n    watch(\n      () => props.retainFocus,\n      (val) => {\n        if (val) {\n          registry.set(trapId, { isActive, contentEl });\n        } else {\n          registry.delete(trapId);\n        }\n      },\n      { immediate: true }\n    );\n\n    watch(\n      shouldCapture,\n      (val) => {\n        if (val) {\n          document.addEventListener('pointerdown', onPointerdown);\n          document.addEventListener('focusin', captureOnFocus, { once: true });\n          document.addEventListener('keydown', captureOnKeydown);\n        } else {\n          document.removeEventListener('pointerdown', onPointerdown);\n          document.removeEventListener('focusin', captureOnFocus);\n          document.removeEventListener('keydown', captureOnKeydown);\n        }\n      },\n      { immediate: true }\n    );\n\n    if (subscribers++ < 1) {\n      document.addEventListener('keydown', onKeydown);\n    }\n  }\n\n  onScopeDispose(() => {\n    registry.delete(trapId);\n    clearTimeout(focusTrapSuppressionTimeout);\n    document.removeEventListener('pointerdown', onPointerdown);\n    document.removeEventListener('focusin', captureOnFocus);\n    document.removeEventListener('keydown', captureOnKeydown);\n\n    if (--subscribers < 1) {\n      document.removeEventListener('keydown', onKeydown);\n    }\n  });\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  const activeElement = document.activeElement as HTMLElement | null;\n  if (e.key !== 'Tab' || !activeElement) return;\n\n  const parentTraps = Array.from(registry.values())\n    .filter(({ isActive, contentEl }) => isActive.value && contentEl.value?.contains(activeElement))\n    .map((x) => x.contentEl.value);\n\n  let closestTrap;\n  let currentParent = activeElement.parentElement;\n  while (currentParent) {\n    if (parentTraps.includes(currentParent)) {\n      closestTrap = currentParent;\n      break;\n    }\n    currentParent = currentParent.parentElement;\n  }\n\n  if (!closestTrap) return;\n\n  const focusable = focusableChildren(closestTrap)\n    // excluding VListItems with tabindex=\"-2\"\n    .filter((x) => x.tabIndex >= 0);\n\n  if (!focusable.length) return;\n\n  const active = document.activeElement as HTMLElement | null;\n  if (focusable.length === 1 && focusable[0].classList.contains('v-list') && focusable[0].contains(active)) {\n    e.preventDefault();\n    return;\n  }\n\n  const firstElement = focusable[0];\n  const lastElement = focusable[focusable.length - 1];\n\n  if (\n    e.shiftKey &&\n    (active === firstElement || (firstElement.classList.contains('v-list') && firstElement.contains(active)))\n  ) {\n    e.preventDefault();\n    lastElement.focus();\n  }\n\n  if (\n    !e.shiftKey &&\n    (active === lastElement || (lastElement.classList.contains('v-list') && lastElement.contains(active)))\n  ) {\n    e.preventDefault();\n    firstElement.focus();\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -7,11 +7,23 @@ import { inject, computed, unref, toRef, shallowRef, ref, watch, provide, markRa
 import { F as FormKey } from "./internal/useForm.constants.js";
 const defineFormProps = propsFactory(
   {
+    /**
+     * Останавливает валидацию на первом же невалидном поле — остальные поля не проверяются
+     * @en Stops the validation at the very first invalid field — the remaining fields are not checked
+     */
     firstFail: Boolean,
+    /**
+     * Итоговая валидность формы: `true` — все поля прошли проверку, `false` — есть ошибки, `null` — форма ещё не валидировалась
+     * @en Resulting validity of the form: `true` — every field passed the check, `false` — there are errors, `null` — the form has not been validated yet
+     */
     modelValue: {
       type: Boolean,
       default: null
     },
+    /**
+     * Когда запускать валидацию полей формы: при вводе, потере фокуса или только вручную
+     * @en When to run the validation of the form fields: on input, on blur or manually only
+     */
     validateOn: {
       type: String,
       default: "input"
@@ -106,14 +118,47 @@ function createForm(props) {
     validateOn: toRef(() => props.validateOn)
   });
   return {
+    /**
+     * Ошибки валидации полей формы: идентификатор поля и его сообщения об ошибках.
+     * @en Validation errors of the form fields: the identifier of a field and its error messages.
+     */
     errors,
+    /**
+     * Заблокированы ли все поля формы.
+     * @en Whether all the fields of the form are blocked.
+     */
     isDisabled,
+    /**
+     * Доступны ли поля формы только для чтения.
+     * @en Whether the fields of the form are read-only.
+     */
     isReadonly,
+    /**
+     * Идёт ли сейчас валидация формы.
+     * @en Whether the form is being validated right now.
+     */
     isValidating,
+    /**
+     * Валидность формы: `true` — все поля прошли проверку, `false` — есть ошибки, `null` — форма ещё не валидировалась.
+     * @en Validity of the form: `true` — every field passed the check, `false` — there are errors, `null` — the form has not been validated yet.
+     */
     isValid: model,
+    /**
+     * Зарегистрированные в форме поля с их состоянием валидации.
+     * @en The fields registered in the form together with their validation state.
+     */
     items,
+    /**
+     * Запускает валидацию всех полей формы и возвращает результат вместе со списком ошибок.
+     * @en Runs the validation of all the form fields and returns the result together with the list of errors.
+     */
     validate,
+    /** Сбрасывает значения всех полей формы и их валидацию. */
     reset,
+    /**
+     * Сбрасывает только состояние валидации, сохраняя введённые значения.
+     * @en Resets the validation state only, keeping the entered values.
+     */
     resetValidation
   };
 }

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

@@ -1 +1 @@
-{"version":3,"file":"useForm.js","sources":["../../../../../src/composables/useForm/useForm.ts"],"sourcesContent":["import { defineDisabledProps } from '@cds/composables/useDisabled';\nimport { defineReadonlyProps } from '@cds/composables/useReadonly';\nimport type { ValidationProps } from '@cds/composables/useValidation';\nimport { propsFactory, useProxyModel } from '@cds/core';\nimport { warn } from '@cds/utils';\nimport {\n  computed,\n  type ExtractPublicPropTypes,\n  inject,\n  markRaw,\n  type PropType,\n  provide,\n  ref,\n  shallowRef,\n  toRef,\n  unref,\n  watch\n} from 'vue';\n\nimport { FormKey } from './internal/useForm.constants';\nimport type { FieldValidationResult, FormField } from './internal/useForm.types';\n\nexport const defineFormProps = propsFactory(\n  {\n    firstFail: Boolean,\n    modelValue: {\n      type: Boolean as PropType<boolean | null>,\n      default: null\n    },\n    validateOn: {\n      type: String as PropType<ValidationProps['validateOn']>,\n      default: 'input'\n    },\n    ...defineDisabledProps(),\n    ...defineReadonlyProps()\n  },\n  'form'\n);\n\nexport interface FormProps extends ExtractPublicPropTypes<ReturnType<typeof defineFormProps>> {}\n\nexport function createForm(props: FormProps) {\n  const model = useProxyModel(props, 'modelValue');\n\n  const isDisabled = toRef(() => props.disabled);\n  const isReadonly = toRef(() => props.readonly);\n  const isValidating = shallowRef(false);\n  const items = ref<FormField[]>([]);\n  const errors = ref<FieldValidationResult[]>([]);\n\n  async function validate() {\n    const results = [];\n    let valid = true;\n\n    errors.value = [];\n    isValidating.value = true;\n\n    for (const item of unref(items)) {\n      const itemErrorMessages = await item.validate();\n\n      if (itemErrorMessages.length > 0) {\n        valid = false;\n\n        results.push({\n          id: item.id,\n          errorMessages: itemErrorMessages\n        });\n      }\n\n      if (!valid && props.firstFail) break;\n    }\n\n    errors.value = results;\n    isValidating.value = false;\n\n    return { valid, errors: unref(errors) };\n  }\n\n  function reset() {\n    unref(items).forEach((item) => item.reset());\n  }\n\n  function resetValidation() {\n    unref(items).forEach((item) => item.resetValidation());\n  }\n\n  watch(\n    items,\n    () => {\n      let valid = 0;\n      let invalid = 0;\n      const results = [];\n\n      for (const item of unref(items)) {\n        if (item.isValid === false) {\n          invalid++;\n          results.push({\n            id: item.id,\n            errorMessages: item.errorMessages\n          });\n        } else if (item.isValid === true) valid++;\n      }\n\n      errors.value = results;\n      model.value = invalid > 0 ? false : valid === unref(items).length ? true : null;\n    },\n    { deep: true, flush: 'post' }\n  );\n\n  provide(FormKey, {\n    register: ({ id, vm, validate, reset, resetValidation }) => {\n      if (unref(items).some((item) => item.id === id)) {\n        warn('useForm', `Duplicate input name \"${id}\"`);\n      }\n\n      items.value.push({\n        id,\n        validate,\n        reset,\n        resetValidation,\n        vm: markRaw(vm),\n        isValid: null,\n        errorMessages: []\n      });\n    },\n    unregister: (id) => {\n      items.value = unref(items).filter((item) => item.id !== id);\n    },\n    update: (id, isValid, errorMessages) => {\n      const found = unref(items).find((item) => item.id === id);\n\n      if (!found) return;\n\n      found.isValid = isValid;\n      found.errorMessages = errorMessages;\n    },\n    isDisabled,\n    isReadonly,\n    isValidating,\n    isValid: model,\n    items,\n    validateOn: toRef(() => props.validateOn)\n  });\n\n  return {\n    errors,\n    isDisabled,\n    isReadonly,\n    isValidating,\n    isValid: model,\n    items,\n    validate,\n    reset,\n    resetValidation\n  };\n}\n\nexport function useForm(props?: { readonly?: boolean | null; disabled?: boolean | null }) {\n  const form = inject(FormKey, null);\n  return {\n    ...form,\n    isReadonly: computed(() => !!(props?.readonly ?? unref(form?.isReadonly))),\n    isDisabled: computed(() => !!(props?.disabled ?? unref(form?.isDisabled)))\n  };\n}\n"],"names":["validate","reset","resetValidation"],"mappings":"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"}
+{"version":3,"file":"useForm.js","sources":["../../../../../src/composables/useForm/useForm.ts"],"sourcesContent":["import { defineDisabledProps } from '@cds/composables/useDisabled';\nimport { defineReadonlyProps } from '@cds/composables/useReadonly';\nimport type { ValidationProps } from '@cds/composables/useValidation';\nimport { propsFactory, useProxyModel } from '@cds/core';\nimport { warn } from '@cds/utils';\nimport {\n  computed,\n  type ExtractPublicPropTypes,\n  inject,\n  markRaw,\n  type PropType,\n  provide,\n  ref,\n  shallowRef,\n  toRef,\n  unref,\n  watch\n} from 'vue';\n\nimport { FormKey } from './internal/useForm.constants';\nimport type { FieldValidationResult, FormField } from './internal/useForm.types';\n\nexport const defineFormProps = propsFactory(\n  {\n    /**\n     * Останавливает валидацию на первом же невалидном поле — остальные поля не проверяются\n     * @en Stops the validation at the very first invalid field — the remaining fields are not checked\n     */\n    firstFail: Boolean,\n    /**\n     * Итоговая валидность формы: `true` — все поля прошли проверку, `false` — есть ошибки, `null` — форма ещё не валидировалась\n     * @en Resulting validity of the form: `true` — every field passed the check, `false` — there are errors, `null` — the form has not been validated yet\n     */\n    modelValue: {\n      type: Boolean as PropType<boolean | null>,\n      default: null\n    },\n    /**\n     * Когда запускать валидацию полей формы: при вводе, потере фокуса или только вручную\n     * @en When to run the validation of the form fields: on input, on blur or manually only\n     */\n    validateOn: {\n      type: String as PropType<ValidationProps['validateOn']>,\n      default: 'input'\n    },\n    ...defineDisabledProps(),\n    ...defineReadonlyProps()\n  },\n  'form'\n);\n\nexport interface FormProps extends ExtractPublicPropTypes<ReturnType<typeof defineFormProps>> {}\n\nexport function createForm(props: FormProps) {\n  const model = useProxyModel(props, 'modelValue');\n\n  const isDisabled = toRef(() => props.disabled);\n  const isReadonly = toRef(() => props.readonly);\n  const isValidating = shallowRef(false);\n  const items = ref<FormField[]>([]);\n  const errors = ref<FieldValidationResult[]>([]);\n\n  async function validate() {\n    const results = [];\n    let valid = true;\n\n    errors.value = [];\n    isValidating.value = true;\n\n    for (const item of unref(items)) {\n      const itemErrorMessages = await item.validate();\n\n      if (itemErrorMessages.length > 0) {\n        valid = false;\n\n        results.push({\n          id: item.id,\n          errorMessages: itemErrorMessages\n        });\n      }\n\n      if (!valid && props.firstFail) break;\n    }\n\n    errors.value = results;\n    isValidating.value = false;\n\n    return { valid, errors: unref(errors) };\n  }\n\n  function reset() {\n    unref(items).forEach((item) => item.reset());\n  }\n\n  function resetValidation() {\n    unref(items).forEach((item) => item.resetValidation());\n  }\n\n  watch(\n    items,\n    () => {\n      let valid = 0;\n      let invalid = 0;\n      const results = [];\n\n      for (const item of unref(items)) {\n        if (item.isValid === false) {\n          invalid++;\n          results.push({\n            id: item.id,\n            errorMessages: item.errorMessages\n          });\n        } else if (item.isValid === true) valid++;\n      }\n\n      errors.value = results;\n      model.value = invalid > 0 ? false : valid === unref(items).length ? true : null;\n    },\n    { deep: true, flush: 'post' }\n  );\n\n  provide(FormKey, {\n    register: ({ id, vm, validate, reset, resetValidation }) => {\n      if (unref(items).some((item) => item.id === id)) {\n        warn('useForm', `Duplicate input name \"${id}\"`);\n      }\n\n      items.value.push({\n        id,\n        validate,\n        reset,\n        resetValidation,\n        vm: markRaw(vm),\n        isValid: null,\n        errorMessages: []\n      });\n    },\n    unregister: (id) => {\n      items.value = unref(items).filter((item) => item.id !== id);\n    },\n    update: (id, isValid, errorMessages) => {\n      const found = unref(items).find((item) => item.id === id);\n\n      if (!found) return;\n\n      found.isValid = isValid;\n      found.errorMessages = errorMessages;\n    },\n    isDisabled,\n    isReadonly,\n    isValidating,\n    isValid: model,\n    items,\n    validateOn: toRef(() => props.validateOn)\n  });\n\n  return {\n    /**\n     * Ошибки валидации полей формы: идентификатор поля и его сообщения об ошибках.\n     * @en Validation errors of the form fields: the identifier of a field and its error messages.\n     */\n    errors,\n    /**\n     * Заблокированы ли все поля формы.\n     * @en Whether all the fields of the form are blocked.\n     */\n    isDisabled,\n    /**\n     * Доступны ли поля формы только для чтения.\n     * @en Whether the fields of the form are read-only.\n     */\n    isReadonly,\n    /**\n     * Идёт ли сейчас валидация формы.\n     * @en Whether the form is being validated right now.\n     */\n    isValidating,\n    /**\n     * Валидность формы: `true` — все поля прошли проверку, `false` — есть ошибки, `null` — форма ещё не валидировалась.\n     * @en Validity of the form: `true` — every field passed the check, `false` — there are errors, `null` — the form has not been validated yet.\n     */\n    isValid: model,\n    /**\n     * Зарегистрированные в форме поля с их состоянием валидации.\n     * @en The fields registered in the form together with their validation state.\n     */\n    items,\n    /**\n     * Запускает валидацию всех полей формы и возвращает результат вместе со списком ошибок.\n     * @en Runs the validation of all the form fields and returns the result together with the list of errors.\n     */\n    validate,\n    /** Сбрасывает значения всех полей формы и их валидацию. */\n    reset,\n    /**\n     * Сбрасывает только состояние валидации, сохраняя введённые значения.\n     * @en Resets the validation state only, keeping the entered values.\n     */\n    resetValidation\n  };\n}\n\nexport function useForm(props?: { readonly?: boolean | null; disabled?: boolean | null }) {\n  const form = inject(FormKey, null);\n  return {\n    ...form,\n    isReadonly: computed(() => !!(props?.readonly ?? unref(form?.isReadonly))),\n    isDisabled: computed(() => !!(props?.disabled ?? unref(form?.isDisabled)))\n  };\n}\n"],"names":["validate","reset","resetValidation"],"mappings":";;;;;;;AAsBO,MAAM,kBAAkB;AAAA,EAC7B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,IAKX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,IAEX,GAAG,oBAAA;AAAA,IACH,GAAG,oBAAA;AAAA,EAAoB;AAAA,EAEzB;AACF;AAIO,SAAS,WAAW,OAAkB;AAC3C,QAAM,QAAQ,cAAc,OAAO,YAAY;AAE/C,QAAM,aAAa,MAAM,MAAM,MAAM,QAAQ;AAC7C,QAAM,aAAa,MAAM,MAAM,MAAM,QAAQ;AAC7C,QAAM,eAAe,WAAW,KAAK;AACrC,QAAM,QAAQ,IAAiB,EAAE;AACjC,QAAM,SAAS,IAA6B,EAAE;AAE9C,iBAAe,WAAW;AACxB,UAAM,UAAU,CAAA;AAChB,QAAI,QAAQ;AAEZ,WAAO,QAAQ,CAAA;AACf,iBAAa,QAAQ;AAErB,eAAW,QAAQ,MAAM,KAAK,GAAG;AAC/B,YAAM,oBAAoB,MAAM,KAAK,SAAA;AAErC,UAAI,kBAAkB,SAAS,GAAG;AAChC,gBAAQ;AAER,gBAAQ,KAAK;AAAA,UACX,IAAI,KAAK;AAAA,UACT,eAAe;AAAA,QAAA,CAChB;AAAA,MACH;AAEA,UAAI,CAAC,SAAS,MAAM,UAAW;AAAA,IACjC;AAEA,WAAO,QAAQ;AACf,iBAAa,QAAQ;AAErB,WAAO,EAAE,OAAO,QAAQ,MAAM,MAAM,EAAA;AAAA,EACtC;AAEA,WAAS,QAAQ;AACf,UAAM,KAAK,EAAE,QAAQ,CAAC,SAAS,KAAK,OAAO;AAAA,EAC7C;AAEA,WAAS,kBAAkB;AACzB,UAAM,KAAK,EAAE,QAAQ,CAAC,SAAS,KAAK,iBAAiB;AAAA,EACvD;AAEA;AAAA,IACE;AAAA,IACA,MAAM;AACJ,UAAI,QAAQ;AACZ,UAAI,UAAU;AACd,YAAM,UAAU,CAAA;AAEhB,iBAAW,QAAQ,MAAM,KAAK,GAAG;AAC/B,YAAI,KAAK,YAAY,OAAO;AAC1B;AACA,kBAAQ,KAAK;AAAA,YACX,IAAI,KAAK;AAAA,YACT,eAAe,KAAK;AAAA,UAAA,CACrB;AAAA,QACH,WAAW,KAAK,YAAY,KAAM;AAAA,MACpC;AAEA,aAAO,QAAQ;AACf,YAAM,QAAQ,UAAU,IAAI,QAAQ,UAAU,MAAM,KAAK,EAAE,SAAS,OAAO;AAAA,IAC7E;AAAA,IACA,EAAE,MAAM,MAAM,OAAO,OAAA;AAAA,EAAO;AAG9B,UAAQ,SAAS;AAAA,IACf,UAAU,CAAC,EAAE,IAAI,IAAI,UAAAA,WAAU,OAAAC,QAAO,iBAAAC,uBAAsB;AAC1D,UAAI,MAAM,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,OAAO,EAAE,GAAG;AAC/C,aAAK,WAAW,yBAAyB,EAAE,GAAG;AAAA,MAChD;AAEA,YAAM,MAAM,KAAK;AAAA,QACf;AAAA,QACA,UAAAF;AAAAA,QACA,OAAAC;AAAAA,QACA,iBAAAC;AAAAA,QACA,IAAI,QAAQ,EAAE;AAAA,QACd,SAAS;AAAA,QACT,eAAe,CAAA;AAAA,MAAC,CACjB;AAAA,IACH;AAAA,IACA,YAAY,CAAC,OAAO;AAClB,YAAM,QAAQ,MAAM,KAAK,EAAE,OAAO,CAAC,SAAS,KAAK,OAAO,EAAE;AAAA,IAC5D;AAAA,IACA,QAAQ,CAAC,IAAI,SAAS,kBAAkB;AACtC,YAAM,QAAQ,MAAM,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,OAAO,EAAE;AAExD,UAAI,CAAC,MAAO;AAEZ,YAAM,UAAU;AAChB,YAAM,gBAAgB;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,YAAY,MAAM,MAAM,MAAM,UAAU;AAAA,EAAA,CACzC;AAED,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKT;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,EAAA;AAEJ;AAEO,SAAS,QAAQ,OAAkE;AACxF,QAAM,OAAO,OAAO,SAAS,IAAI;AACjC,SAAO;AAAA,IACL,GAAG;AAAA,IACH,YAAY,SAAS,MAAM,CAAC,GAAE,+BAAO,aAAY,MAAM,6BAAM,UAAU,EAAE;AAAA,IACzE,YAAY,SAAS,MAAM,CAAC,GAAE,+BAAO,aAAY,MAAM,6BAAM,UAAU,EAAE;AAAA,EAAA;AAE7E;"}

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

@@ -7,20 +7,38 @@ import { w as warn } from "../../utils/dom/console.js";
 import { reactive, onMounted, onBeforeUnmount, onUpdated, unref, toRef, provide } from "vue";
 const defineGroupProps = propsFactory(
   {
-    /** Значение выбранных элементов группы */
+    /**
+     * Значение выбранных элементов группы
+     * @en Value of the selected items of the group
+     */
     modelValue: {
       type: null,
       default: void 0
     },
-    /** Разрешить множественный выбор */
+    /**
+     * Разрешить множественный выбор
+     * @en Allows selecting several items at once
+     */
     multiple: Boolean,
-    /** Обязательный выбор хотя бы одного элемента */
+    /**
+     * Обязательный выбор хотя бы одного элемента
+     * @en Requires at least one item to stay selected
+     */
     required: [Boolean, String],
-    /** Обязательный выбор хотя бы одного элемента */
+    /**
+     * Обязательный выбор хотя бы одного элемента
+     * @en Requires at least one item to stay selected
+     */
     mandatory: [Boolean, String],
-    /** Максимальное количество выбираемых элементов */
+    /**
+     * Максимальное количество выбираемых элементов
+     * @en Maximum number of items that can be selected
+     */
     max: Number,
-    /** CSS класс для выбранного состояния */
+    /**
+     * CSS класс для выбранного состояния
+     * @en CSS class applied in the selected state
+     */
     selectedClass: String,
     ...defineDisabledProps()
   },

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

@@ -1 +1 @@
-{"version":3,"file":"useGroup.js","sources":["../../../../../src/composables/useGroup/useGroup.ts"],"sourcesContent":["import { defineDisabledProps } from '@cds/composables/useDisabled';\nimport { getCurrentInstance, propsFactory, useProxyModel } from '@cds/core';\nimport { deepEqual, type EventProp, findChildrenWithProvide, warn, wrapInArray } from '@cds/utils';\nimport {\n  type ComponentInternalInstance,\n  type ExtractPublicPropTypes,\n  type InjectionKey,\n  onBeforeUnmount,\n  onMounted,\n  onUpdated,\n  type PropType,\n  provide,\n  reactive,\n  type Ref,\n  toRef,\n  unref,\n  type UnwrapRef\n} from 'vue';\n\nimport type { GroupItem } from './useGroupItem';\n\nexport interface GroupProvide {\n  register: (item: GroupItem, cmp: ComponentInternalInstance) => void;\n  unregister: (id: string) => void;\n  select: (id: string, value: boolean) => void;\n  selected: Ref<Readonly<string[]>>;\n  isSelected: (id: string) => boolean;\n  selectedClass: Ref<string | undefined>;\n  items: Readonly<\n    Ref<\n      {\n        id: string;\n        value: unknown;\n        disabled: boolean | undefined;\n      }[]\n    >\n  >;\n  disabled: Ref<boolean | null | undefined>;\n  getItemIndex: (value: unknown) => number;\n  prev: () => void;\n  next: () => void;\n}\n\nexport const defineGroupProps = propsFactory(\n  {\n    /** Значение выбранных элементов группы */\n    modelValue: {\n      type: null,\n      default: undefined\n    },\n    /** Разрешить множественный выбор */\n    multiple: Boolean,\n    /** Обязательный выбор хотя бы одного элемента */\n    required: [Boolean, String] as PropType<boolean | 'force'>,\n    /** Обязательный выбор хотя бы одного элемента */\n    mandatory: [Boolean, String] as PropType<boolean | 'force'>,\n    /** Максимальное количество выбираемых элементов */\n    max: Number,\n    /** CSS класс для выбранного состояния */\n    selectedClass: String,\n\n    ...defineDisabledProps()\n  },\n  'group'\n);\nexport interface GroupProps extends ExtractPublicPropTypes<ReturnType<typeof defineGroupProps>> {\n  'onUpdate:modelValue'?: EventProp<[unknown]> | undefined;\n}\n\n/**\n * Provides group management functionality, including item registration, selection, and navigation.\n *\n * @param {GroupProps} props - The props object for configuring the group behavior. It includes options like `modelValue`, `multiple`, `mandatory`, and others.\n * @param {InjectionKey<GroupProvide>} injectKey - The injection key used to provide the group state to child components.\n * @return {GroupProvide} An object containing methods and properties for managing the group state. This includes methods for registering/unregistering items, selecting/deselecting items, navigating through items, and querying item states.\n */\nexport function useGroup(props: GroupProps, injectKey: InjectionKey<GroupProvide>) {\n  let isUnmounted = false;\n  const items = reactive<GroupItem[]>([]);\n  const groupVm = getCurrentInstance('useGroup');\n\n  const selected = useProxyModel(\n    props,\n    'modelValue',\n    [],\n    (value) => {\n      if (value === undefined) return [];\n      return getIds(items, value === null ? [null] : wrapInArray(value));\n    },\n    (value) => {\n      const arr = getValues(items, value);\n      return props.multiple ? arr : arr[0];\n    }\n  );\n\n  onMounted(() => {\n    forceMandatoryValue();\n  });\n\n  onBeforeUnmount(() => {\n    isUnmounted = true;\n  });\n\n  onUpdated(() => {\n    for (let i = 0; i < items.length; i++) {\n      if (items[i].useIndexAsValue) {\n        items[i].value = i;\n      }\n    }\n  });\n\n  function register(item: GroupItem, vm: ComponentInternalInstance) {\n    const unwrapped = item as unknown as UnwrapRef<GroupItem>;\n\n    const key = Symbol.for(`${injectKey.description}:id`);\n    const children = findChildrenWithProvide(key, groupVm?.vnode);\n    const index = children.indexOf(vm);\n\n    if (unref(unwrapped.value) === undefined) {\n      unwrapped.value = index;\n      unwrapped.useIndexAsValue = true;\n    }\n\n    if (index > -1) {\n      items.splice(index, 0, unwrapped);\n    } else {\n      items.push(unwrapped);\n    }\n  }\n\n  function unregister(id: string) {\n    if (isUnmounted) return;\n\n    forceMandatoryValue();\n\n    const index = items.findIndex((item) => item.id === id);\n    items.splice(index, 1);\n  }\n\n  function forceMandatoryValue() {\n    const item = items.find((item) => !item.disabled);\n    const forceMandatory = props.mandatory === 'force' || props.required === 'force';\n\n    if (item && forceMandatory && !unref(selected).length) {\n      selected.value = [item.id];\n    }\n  }\n\n  function select(id: string, value?: boolean) {\n    const item = items.find((item) => item.id === id);\n    const isMandatory = props.mandatory || props.required;\n\n    if (value && item?.disabled) return;\n\n    if (props.multiple) {\n      const internalValue = unref(selected).slice();\n      const index = internalValue.findIndex((v) => v === id);\n      const isSelected = ~index;\n\n      value = value ?? !isSelected;\n\n      if (isSelected && isMandatory && internalValue.length <= 1) return;\n      if (!isSelected && props.max != null && internalValue.length + 1 > props.max) return;\n\n      if (index < 0 && value) internalValue.push(id);\n      else if (index >= 0 && !value) internalValue.splice(index, 1);\n\n      selected.value = internalValue;\n    } else {\n      const isSelected = selected.value.includes(id);\n      if (isMandatory && isSelected) return;\n      if (!isSelected && !value) return;\n\n      selected.value = (value ?? !isSelected) ? [id] : [];\n    }\n  }\n\n  function step(offset: number) {\n    if (props.multiple) warn('useGroup', 'This method is not supported when using \"multiple\" prop');\n\n    if (!unref(selected).length) {\n      const item = items.find((item) => !item.disabled);\n      item && (selected.value = [item.id]);\n    } else {\n      const currentId = unref(selected)[0];\n      const currentIndex = items.findIndex((i) => i.id === currentId);\n\n      let newIndex = (currentIndex + offset) % items.length;\n      let newItem = items[newIndex];\n\n      while (newItem.disabled && newIndex !== currentIndex) {\n        newIndex = (newIndex + offset) % items.length;\n        newItem = items[newIndex];\n      }\n\n      if (newItem.disabled) return;\n\n      selected.value = [items[newIndex].id];\n    }\n  }\n\n  const state: GroupProvide = {\n    register,\n    unregister,\n    selected,\n    select,\n    disabled: toRef(() => props.disabled),\n    prev: () => step(items.length - 1),\n    next: () => step(1),\n    isSelected: (id: string) => selected.value.includes(id),\n    selectedClass: toRef(() => props.selectedClass),\n    items: toRef(() => items),\n    getItemIndex: (value: unknown) => getItemIndex(items, value)\n  };\n\n  provide(injectKey, state);\n\n  return state;\n}\n\nfunction getItemIndex(items: UnwrapRef<GroupItem[]>, value: unknown) {\n  const ids = getIds(items, [value]);\n\n  if (!ids.length) return -1;\n\n  return items.findIndex((item) => item.id === ids[0]);\n}\n\nfunction getIds(items: UnwrapRef<GroupItem[]>, modelValue: any[]) {\n  const ids: string[] = [];\n\n  modelValue.forEach((value) => {\n    const item = items.find((item) => deepEqual(value, item.value));\n    const itemByIndex = items[value];\n\n    if (item?.value !== undefined) {\n      ids.push(item.id);\n    } else if (itemByIndex?.useIndexAsValue) {\n      ids.push(itemByIndex.id);\n    }\n  });\n\n  return ids;\n}\n\nfunction getValues(items: UnwrapRef<GroupItem[]>, ids: any[]) {\n  const values: unknown[] = [];\n\n  ids.forEach((id) => {\n    const itemIndex = items.findIndex((item) => item.id === id);\n    if (~itemIndex) {\n      const item = items[itemIndex];\n      values.push(item.value !== undefined ? item.value : itemIndex);\n    }\n  });\n\n  return values;\n}\n"],"names":["item"],"mappings":"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"}
+{"version":3,"file":"useGroup.js","sources":["../../../../../src/composables/useGroup/useGroup.ts"],"sourcesContent":["import { defineDisabledProps } from '@cds/composables/useDisabled';\nimport { getCurrentInstance, propsFactory, useProxyModel } from '@cds/core';\nimport { deepEqual, type EventProp, findChildrenWithProvide, warn, wrapInArray } from '@cds/utils';\nimport {\n  type ComponentInternalInstance,\n  type ExtractPublicPropTypes,\n  type InjectionKey,\n  onBeforeUnmount,\n  onMounted,\n  onUpdated,\n  type PropType,\n  provide,\n  reactive,\n  type Ref,\n  toRef,\n  unref,\n  type UnwrapRef\n} from 'vue';\n\nimport type { GroupItem } from './useGroupItem';\n\nexport interface GroupProvide {\n  register: (item: GroupItem, cmp: ComponentInternalInstance) => void;\n  unregister: (id: string) => void;\n  select: (id: string, value: boolean) => void;\n  selected: Ref<Readonly<string[]>>;\n  isSelected: (id: string) => boolean;\n  selectedClass: Ref<string | undefined>;\n  items: Readonly<\n    Ref<\n      {\n        id: string;\n        value: unknown;\n        disabled: boolean | undefined;\n      }[]\n    >\n  >;\n  disabled: Ref<boolean | null | undefined>;\n  getItemIndex: (value: unknown) => number;\n  prev: () => void;\n  next: () => void;\n}\n\nexport const defineGroupProps = propsFactory(\n  {\n    /**\n     * Значение выбранных элементов группы\n     * @en Value of the selected items of the group\n     */\n    modelValue: {\n      type: null,\n      default: undefined\n    },\n    /**\n     * Разрешить множественный выбор\n     * @en Allows selecting several items at once\n     */\n    multiple: Boolean,\n    /**\n     * Обязательный выбор хотя бы одного элемента\n     * @en Requires at least one item to stay selected\n     */\n    required: [Boolean, String] as PropType<boolean | 'force'>,\n    /**\n     * Обязательный выбор хотя бы одного элемента\n     * @en Requires at least one item to stay selected\n     */\n    mandatory: [Boolean, String] as PropType<boolean | 'force'>,\n    /**\n     * Максимальное количество выбираемых элементов\n     * @en Maximum number of items that can be selected\n     */\n    max: Number,\n    /**\n     * CSS класс для выбранного состояния\n     * @en CSS class applied in the selected state\n     */\n    selectedClass: String,\n\n    ...defineDisabledProps()\n  },\n  'group'\n);\nexport interface GroupProps extends ExtractPublicPropTypes<ReturnType<typeof defineGroupProps>> {\n  'onUpdate:modelValue'?: EventProp<[unknown]> | undefined;\n}\n\n/**\n * Provides group management functionality, including item registration, selection, and navigation.\n *\n * @param {GroupProps} props - The props object for configuring the group behavior. It includes options like `modelValue`, `multiple`, `mandatory`, and others.\n * @param {InjectionKey<GroupProvide>} injectKey - The injection key used to provide the group state to child components.\n * @return {GroupProvide} An object containing methods and properties for managing the group state. This includes methods for registering/unregistering items, selecting/deselecting items, navigating through items, and querying item states.\n */\nexport function useGroup(props: GroupProps, injectKey: InjectionKey<GroupProvide>) {\n  let isUnmounted = false;\n  const items = reactive<GroupItem[]>([]);\n  const groupVm = getCurrentInstance('useGroup');\n\n  const selected = useProxyModel(\n    props,\n    'modelValue',\n    [],\n    (value) => {\n      if (value === undefined) return [];\n      return getIds(items, value === null ? [null] : wrapInArray(value));\n    },\n    (value) => {\n      const arr = getValues(items, value);\n      return props.multiple ? arr : arr[0];\n    }\n  );\n\n  onMounted(() => {\n    forceMandatoryValue();\n  });\n\n  onBeforeUnmount(() => {\n    isUnmounted = true;\n  });\n\n  onUpdated(() => {\n    for (let i = 0; i < items.length; i++) {\n      if (items[i].useIndexAsValue) {\n        items[i].value = i;\n      }\n    }\n  });\n\n  function register(item: GroupItem, vm: ComponentInternalInstance) {\n    const unwrapped = item as unknown as UnwrapRef<GroupItem>;\n\n    const key = Symbol.for(`${injectKey.description}:id`);\n    const children = findChildrenWithProvide(key, groupVm?.vnode);\n    const index = children.indexOf(vm);\n\n    if (unref(unwrapped.value) === undefined) {\n      unwrapped.value = index;\n      unwrapped.useIndexAsValue = true;\n    }\n\n    if (index > -1) {\n      items.splice(index, 0, unwrapped);\n    } else {\n      items.push(unwrapped);\n    }\n  }\n\n  function unregister(id: string) {\n    if (isUnmounted) return;\n\n    forceMandatoryValue();\n\n    const index = items.findIndex((item) => item.id === id);\n    items.splice(index, 1);\n  }\n\n  function forceMandatoryValue() {\n    const item = items.find((item) => !item.disabled);\n    const forceMandatory = props.mandatory === 'force' || props.required === 'force';\n\n    if (item && forceMandatory && !unref(selected).length) {\n      selected.value = [item.id];\n    }\n  }\n\n  function select(id: string, value?: boolean) {\n    const item = items.find((item) => item.id === id);\n    const isMandatory = props.mandatory || props.required;\n\n    if (value && item?.disabled) return;\n\n    if (props.multiple) {\n      const internalValue = unref(selected).slice();\n      const index = internalValue.findIndex((v) => v === id);\n      const isSelected = ~index;\n\n      value = value ?? !isSelected;\n\n      if (isSelected && isMandatory && internalValue.length <= 1) return;\n      if (!isSelected && props.max != null && internalValue.length + 1 > props.max) return;\n\n      if (index < 0 && value) internalValue.push(id);\n      else if (index >= 0 && !value) internalValue.splice(index, 1);\n\n      selected.value = internalValue;\n    } else {\n      const isSelected = selected.value.includes(id);\n      if (isMandatory && isSelected) return;\n      if (!isSelected && !value) return;\n\n      selected.value = (value ?? !isSelected) ? [id] : [];\n    }\n  }\n\n  function step(offset: number) {\n    if (props.multiple) warn('useGroup', 'This method is not supported when using \"multiple\" prop');\n\n    if (!unref(selected).length) {\n      const item = items.find((item) => !item.disabled);\n      item && (selected.value = [item.id]);\n    } else {\n      const currentId = unref(selected)[0];\n      const currentIndex = items.findIndex((i) => i.id === currentId);\n\n      let newIndex = (currentIndex + offset) % items.length;\n      let newItem = items[newIndex];\n\n      while (newItem.disabled && newIndex !== currentIndex) {\n        newIndex = (newIndex + offset) % items.length;\n        newItem = items[newIndex];\n      }\n\n      if (newItem.disabled) return;\n\n      selected.value = [items[newIndex].id];\n    }\n  }\n\n  const state: GroupProvide = {\n    register,\n    unregister,\n    selected,\n    select,\n    disabled: toRef(() => props.disabled),\n    prev: () => step(items.length - 1),\n    next: () => step(1),\n    isSelected: (id: string) => selected.value.includes(id),\n    selectedClass: toRef(() => props.selectedClass),\n    items: toRef(() => items),\n    getItemIndex: (value: unknown) => getItemIndex(items, value)\n  };\n\n  provide(injectKey, state);\n\n  return state;\n}\n\nfunction getItemIndex(items: UnwrapRef<GroupItem[]>, value: unknown) {\n  const ids = getIds(items, [value]);\n\n  if (!ids.length) return -1;\n\n  return items.findIndex((item) => item.id === ids[0]);\n}\n\nfunction getIds(items: UnwrapRef<GroupItem[]>, modelValue: any[]) {\n  const ids: string[] = [];\n\n  modelValue.forEach((value) => {\n    const item = items.find((item) => deepEqual(value, item.value));\n    const itemByIndex = items[value];\n\n    if (item?.value !== undefined) {\n      ids.push(item.id);\n    } else if (itemByIndex?.useIndexAsValue) {\n      ids.push(itemByIndex.id);\n    }\n  });\n\n  return ids;\n}\n\nfunction getValues(items: UnwrapRef<GroupItem[]>, ids: any[]) {\n  const values: unknown[] = [];\n\n  ids.forEach((id) => {\n    const itemIndex = items.findIndex((item) => item.id === id);\n    if (~itemIndex) {\n      const item = items[itemIndex];\n      values.push(item.value !== undefined ? item.value : itemIndex);\n    }\n  });\n\n  return values;\n}\n"],"names":["item"],"mappings":"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"}

package/dist/es/src/composables/useGroup/useGroupItem.js

@@ -4,9 +4,15 @@ import { p as propsFactory } from "../../core/propsFactory.js";
 import { useId, provide, inject, toRef, computed, unref, onBeforeUnmount, watch } from "vue";
 const defineGroupItemProps = propsFactory(
   {
-    /** Значение компонента в группе */
+    /**
+     * Значение компонента в группе
+     * @en Value of the component within the group
+     */
     value: null,
-    /** CSS класс для выбранного состояния */
+    /**
+     * CSS класс для выбранного состояния
+     * @en CSS class applied in the selected state
+     */
     selectedClass: String,
     ...defineDisabledProps()
   },

package/dist/es/src/composables/useGroup/useGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGroupItem.js","sources":["../../../../../src/composables/useGroup/useGroupItem.ts"],"sourcesContent":["import { defineDisabledProps } from '@cds/composables/useDisabled';\nimport { getCurrentInstance, propsFactory } from '@cds/core';\nimport type { EventProp } from '@cds/utils';\nimport {\n  computed,\n  type ExtractPublicPropTypes,\n  inject,\n  type InjectionKey,\n  onBeforeUnmount,\n  provide,\n  type Ref,\n  toRef,\n  unref,\n  useId,\n  watch\n} from 'vue';\n\nimport type { GroupProvide } from './useGroup';\n\nexport interface GroupItem {\n  id: string;\n  value: Ref<unknown>;\n  disabled: Ref<boolean | undefined>;\n  useIndexAsValue?: boolean;\n}\n\nexport interface GroupItemProvide {\n  id: string;\n  isSelected: Ref<boolean>;\n  isFirst: Ref<boolean>;\n  isLast: Ref<boolean>;\n  toggle: () => void;\n  select: (value: boolean) => void;\n  selectedClass: Ref<(string | undefined)[] | false>;\n  value: Ref<unknown>;\n  disabled: Ref<boolean | undefined>;\n  group: GroupProvide;\n  register: () => void;\n  unregister: () => void;\n}\n\nexport const defineGroupItemProps = propsFactory(\n  {\n    /** Значение компонента в группе */\n    value: null,\n    /** CSS класс для выбранного состояния */\n    selectedClass: String,\n    ...defineDisabledProps()\n  },\n  'group-item'\n);\nexport interface GroupItemProps extends ExtractPublicPropTypes<ReturnType<typeof defineGroupItemProps>> {\n  'onGroup:selected'?: EventProp<[{ value: boolean }]> | undefined;\n}\n\n/**\n * Provides logic for managing group items within a group context.\n *\n * @param {GroupItemProps} props - The properties of the group item to be used.\n * @param {InjectionKey<GroupProvide>} injectKey - The injection key used to access the group context.\n * @param {true} [required] - A flag indicating if the group context is required.\n * @return {GroupItemProvide} The group item instance with its associated behavior and properties.\n */\nexport function useGroupItem(\n  props: GroupItemProps,\n  injectKey: InjectionKey<GroupProvide>,\n  required?: true\n): GroupItemProvide;\nexport function useGroupItem(\n  props: GroupItemProps,\n  injectKey: InjectionKey<GroupProvide>,\n  required: false\n): GroupItemProvide | null;\nexport function useGroupItem(\n  props: GroupItemProps,\n  injectKey: InjectionKey<GroupProvide>,\n  required = true\n): GroupItemProvide | null {\n  const vm = getCurrentInstance('useGroupItem');\n\n  if (!vm) {\n    throw new Error(`[CDS] useGroupItem must be used inside a setup function.`);\n  }\n\n  const id = useId();\n\n  provide(Symbol.for(`${injectKey.description}:id`), id);\n\n  const group = inject(injectKey, null);\n\n  if (!group) {\n    if (!required) return group;\n\n    throw new Error(`[CDS] Could not find useGroup injection with symbol ${injectKey.description}`);\n  }\n\n  const value = toRef(() => props.value);\n  const disabled = computed(() => !!(unref(group.disabled) || props.disabled));\n\n  function register() {\n    group?.register({ id, value, disabled }, vm);\n  }\n\n  function unregister() {\n    group?.unregister(id);\n  }\n\n  register();\n  onBeforeUnmount(() => unregister());\n\n  const isSelected = computed(() => {\n    return group.isSelected(id);\n  });\n  const isFirst = computed(() => {\n    return unref(group.items)[0].id === id;\n  });\n  const isLast = computed(() => {\n    return unref(group.items)[unref(group.items).length - 1].id === id;\n  });\n\n  const selectedClass = computed(() => unref(isSelected) && [unref(group.selectedClass), props.selectedClass]);\n\n  watch(\n    isSelected,\n    (value) => {\n      vm.emit('group:selected', { value });\n    },\n    { flush: 'sync' }\n  );\n\n  return {\n    id,\n    isSelected,\n    isFirst,\n    isLast,\n    selectedClass,\n    value,\n    disabled,\n    group,\n    register,\n    unregister,\n    toggle: () => group.select(id, !unref(isSelected)),\n    select: (value: boolean) => group.select(id, value)\n  };\n}\n"],"names":["value"],"mappings":";;;;AAyCO,MAAM,uBAAuB;AAAA,EAClC;AAAA;AAAA,IAEE,OAAO;AAAA;AAAA,IAEP,eAAe;AAAA,IACf,GAAG,oBAAA;AAAA,EAAoB;AAAA,EAEzB;AACF;AAuBO,SAAS,aACd,OACA,WACA,WAAW,MACc;AACzB,QAAM,KAAK,mBAAmB,cAAc;AAE5C,MAAI,CAAC,IAAI;AACP,UAAM,IAAI,MAAM,0DAA0D;AAAA,EAC5E;AAEA,QAAM,KAAK,MAAA;AAEX,UAAQ,OAAO,IAAI,GAAG,UAAU,WAAW,KAAK,GAAG,EAAE;AAErD,QAAM,QAAQ,OAAO,WAAW,IAAI;AAEpC,MAAI,CAAC,OAAO;AACV,QAAI,CAAC,SAAU,QAAO;AAEtB,UAAM,IAAI,MAAM,uDAAuD,UAAU,WAAW,EAAE;AAAA,EAChG;AAEA,QAAM,QAAQ,MAAM,MAAM,MAAM,KAAK;AACrC,QAAM,WAAW,SAAS,MAAM,CAAC,EAAE,MAAM,MAAM,QAAQ,KAAK,MAAM,SAAS;AAE3E,WAAS,WAAW;AAClB,mCAAO,SAAS,EAAE,IAAI,OAAO,SAAA,GAAY;AAAA,EAC3C;AAEA,WAAS,aAAa;AACpB,mCAAO,WAAW;AAAA,EACpB;AAEA,WAAA;AACA,kBAAgB,MAAM,YAAY;AAElC,QAAM,aAAa,SAAS,MAAM;AAChC,WAAO,MAAM,WAAW,EAAE;AAAA,EAC5B,CAAC;AACD,QAAM,UAAU,SAAS,MAAM;AAC7B,WAAO,MAAM,MAAM,KAAK,EAAE,CAAC,EAAE,OAAO;AAAA,EACtC,CAAC;AACD,QAAM,SAAS,SAAS,MAAM;AAC5B,WAAO,MAAM,MAAM,KAAK,EAAE,MAAM,MAAM,KAAK,EAAE,SAAS,CAAC,EAAE,OAAO;AAAA,EAClE,CAAC;AAED,QAAM,gBAAgB,SAAS,MAAM,MAAM,UAAU,KAAK,CAAC,MAAM,MAAM,aAAa,GAAG,MAAM,aAAa,CAAC;AAE3G;AAAA,IACE;AAAA,IACA,CAACA,WAAU;AACT,SAAG,KAAK,kBAAkB,EAAE,OAAAA,QAAO;AAAA,IACrC;AAAA,IACA,EAAE,OAAO,OAAA;AAAA,EAAO;AAGlB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,MAAM,MAAM,OAAO,IAAI,CAAC,MAAM,UAAU,CAAC;AAAA,IACjD,QAAQ,CAACA,WAAmB,MAAM,OAAO,IAAIA,MAAK;AAAA,EAAA;AAEtD;"}
+{"version":3,"file":"useGroupItem.js","sources":["../../../../../src/composables/useGroup/useGroupItem.ts"],"sourcesContent":["import { defineDisabledProps } from '@cds/composables/useDisabled';\nimport { getCurrentInstance, propsFactory } from '@cds/core';\nimport type { EventProp } from '@cds/utils';\nimport {\n  computed,\n  type ExtractPublicPropTypes,\n  inject,\n  type InjectionKey,\n  onBeforeUnmount,\n  provide,\n  type Ref,\n  toRef,\n  unref,\n  useId,\n  watch\n} from 'vue';\n\nimport type { GroupProvide } from './useGroup';\n\nexport interface GroupItem {\n  id: string;\n  value: Ref<unknown>;\n  disabled: Ref<boolean | undefined>;\n  useIndexAsValue?: boolean;\n}\n\nexport interface GroupItemProvide {\n  id: string;\n  isSelected: Ref<boolean>;\n  isFirst: Ref<boolean>;\n  isLast: Ref<boolean>;\n  toggle: () => void;\n  select: (value: boolean) => void;\n  selectedClass: Ref<(string | undefined)[] | false>;\n  value: Ref<unknown>;\n  disabled: Ref<boolean | undefined>;\n  group: GroupProvide;\n  register: () => void;\n  unregister: () => void;\n}\n\nexport const defineGroupItemProps = propsFactory(\n  {\n    /**\n     * Значение компонента в группе\n     * @en Value of the component within the group\n     */\n    value: null,\n    /**\n     * CSS класс для выбранного состояния\n     * @en CSS class applied in the selected state\n     */\n    selectedClass: String,\n    ...defineDisabledProps()\n  },\n  'group-item'\n);\nexport interface GroupItemProps extends ExtractPublicPropTypes<ReturnType<typeof defineGroupItemProps>> {\n  'onGroup:selected'?: EventProp<[{ value: boolean }]> | undefined;\n}\n\n/**\n * Provides logic for managing group items within a group context.\n *\n * @param {GroupItemProps} props - The properties of the group item to be used.\n * @param {InjectionKey<GroupProvide>} injectKey - The injection key used to access the group context.\n * @param {true} [required] - A flag indicating if the group context is required.\n * @return {GroupItemProvide} The group item instance with its associated behavior and properties.\n */\nexport function useGroupItem(\n  props: GroupItemProps,\n  injectKey: InjectionKey<GroupProvide>,\n  required?: true\n): GroupItemProvide;\nexport function useGroupItem(\n  props: GroupItemProps,\n  injectKey: InjectionKey<GroupProvide>,\n  required: false\n): GroupItemProvide | null;\nexport function useGroupItem(\n  props: GroupItemProps,\n  injectKey: InjectionKey<GroupProvide>,\n  required = true\n): GroupItemProvide | null {\n  const vm = getCurrentInstance('useGroupItem');\n\n  if (!vm) {\n    throw new Error(`[CDS] useGroupItem must be used inside a setup function.`);\n  }\n\n  const id = useId();\n\n  provide(Symbol.for(`${injectKey.description}:id`), id);\n\n  const group = inject(injectKey, null);\n\n  if (!group) {\n    if (!required) return group;\n\n    throw new Error(`[CDS] Could not find useGroup injection with symbol ${injectKey.description}`);\n  }\n\n  const value = toRef(() => props.value);\n  const disabled = computed(() => !!(unref(group.disabled) || props.disabled));\n\n  function register() {\n    group?.register({ id, value, disabled }, vm);\n  }\n\n  function unregister() {\n    group?.unregister(id);\n  }\n\n  register();\n  onBeforeUnmount(() => unregister());\n\n  const isSelected = computed(() => {\n    return group.isSelected(id);\n  });\n  const isFirst = computed(() => {\n    return unref(group.items)[0].id === id;\n  });\n  const isLast = computed(() => {\n    return unref(group.items)[unref(group.items).length - 1].id === id;\n  });\n\n  const selectedClass = computed(() => unref(isSelected) && [unref(group.selectedClass), props.selectedClass]);\n\n  watch(\n    isSelected,\n    (value) => {\n      vm.emit('group:selected', { value });\n    },\n    { flush: 'sync' }\n  );\n\n  return {\n    id,\n    isSelected,\n    isFirst,\n    isLast,\n    selectedClass,\n    value,\n    disabled,\n    group,\n    register,\n    unregister,\n    toggle: () => group.select(id, !unref(isSelected)),\n    select: (value: boolean) => group.select(id, value)\n  };\n}\n"],"names":["value"],"mappings":";;;;AAyCO,MAAM,uBAAuB;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,eAAe;AAAA,IACf,GAAG,oBAAA;AAAA,EAAoB;AAAA,EAEzB;AACF;AAuBO,SAAS,aACd,OACA,WACA,WAAW,MACc;AACzB,QAAM,KAAK,mBAAmB,cAAc;AAE5C,MAAI,CAAC,IAAI;AACP,UAAM,IAAI,MAAM,0DAA0D;AAAA,EAC5E;AAEA,QAAM,KAAK,MAAA;AAEX,UAAQ,OAAO,IAAI,GAAG,UAAU,WAAW,KAAK,GAAG,EAAE;AAErD,QAAM,QAAQ,OAAO,WAAW,IAAI;AAEpC,MAAI,CAAC,OAAO;AACV,QAAI,CAAC,SAAU,QAAO;AAEtB,UAAM,IAAI,MAAM,uDAAuD,UAAU,WAAW,EAAE;AAAA,EAChG;AAEA,QAAM,QAAQ,MAAM,MAAM,MAAM,KAAK;AACrC,QAAM,WAAW,SAAS,MAAM,CAAC,EAAE,MAAM,MAAM,QAAQ,KAAK,MAAM,SAAS;AAE3E,WAAS,WAAW;AAClB,mCAAO,SAAS,EAAE,IAAI,OAAO,SAAA,GAAY;AAAA,EAC3C;AAEA,WAAS,aAAa;AACpB,mCAAO,WAAW;AAAA,EACpB;AAEA,WAAA;AACA,kBAAgB,MAAM,YAAY;AAElC,QAAM,aAAa,SAAS,MAAM;AAChC,WAAO,MAAM,WAAW,EAAE;AAAA,EAC5B,CAAC;AACD,QAAM,UAAU,SAAS,MAAM;AAC7B,WAAO,MAAM,MAAM,KAAK,EAAE,CAAC,EAAE,OAAO;AAAA,EACtC,CAAC;AACD,QAAM,SAAS,SAAS,MAAM;AAC5B,WAAO,MAAM,MAAM,KAAK,EAAE,MAAM,MAAM,KAAK,EAAE,SAAS,CAAC,EAAE,OAAO;AAAA,EAClE,CAAC;AAED,QAAM,gBAAgB,SAAS,MAAM,MAAM,UAAU,KAAK,CAAC,MAAM,MAAM,aAAa,GAAG,MAAM,aAAa,CAAC;AAE3G;AAAA,IACE;AAAA,IACA,CAACA,WAAU;AACT,SAAG,KAAK,kBAAkB,EAAE,OAAAA,QAAO;AAAA,IACrC;AAAA,IACA,EAAE,OAAO,OAAA;AAAA,EAAO;AAGlB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,MAAM,MAAM,OAAO,IAAI,CAAC,MAAM,UAAU,CAAC;AAAA,IACjD,QAAQ,CAACA,WAAmB,MAAM,OAAO,IAAIA,MAAK;AAAA,EAAA;AAEtD;"}

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

@@ -1,6 +1,6 @@
-import { u as useDisplay } from "../useDisplay/useDisplay.js";
 import { a as IN_BROWSER } from "../../utils/dom/globals.js";
 import { shallowRef, onMounted } from "vue";
+import { u as useDisplay } from "../useDisplay/useDisplay.js";
 function useHydration() {
   if (!IN_BROWSER) return shallowRef(false);
   const { ssr } = useDisplay();

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

@@ -3,39 +3,63 @@ import { W as isPrimitive, a7 as pick, x as deepEqual, M as getPropertyFromItem,
 import { computed, shallowRef, watchEffect } from "vue";
 const defineItemsProps = propsFactory(
   {
-    /** Массив элементов для отображения */
+    /**
+     * Массив элементов для отображения
+     * @en Array of items to display
+     */
     items: {
       type: Array,
       default: () => []
     },
-    /** Свойство объекта, используемое как заголовок элемента, либо функция для его получения */
+    /**
+     * Свойство объекта, используемое как заголовок элемента, либо функция для его получения
+     * @en Object field used as the item title, or a function that returns it
+     */
     itemTitle: {
       type: [String, Array, Function],
       default: "title"
     },
-    /** Свойство объекта, используемое как значение элемента, либо функция для его получения */
+    /**
+     * Свойство объекта, используемое как значение элемента, либо функция для его получения
+     * @en Object field used as the item value, or a function that returns it
+     */
     itemValue: {
       type: [String, Array, Function],
       default: "value"
     },
-    /** Свойство объекта, содержащее дочерние элементы, либо функция для их получения */
+    /**
+     * Свойство объекта, содержащее дочерние элементы, либо функция для их получения
+     * @en Object field that holds the child items, or a function that returns them
+     */
     itemChildren: {
       type: [Boolean, String, Array, Function],
       default: "children"
     },
-    /** Свойство объекта, содержащее пропсы для элемента, либо функция для их получения */
+    /**
+     * Свойство объекта, содержащее пропсы для элемента, либо функция для их получения
+     * @en Object field that holds the props of the item, or a function that returns them
+     */
     itemProps: {
       type: [Boolean, String, Array, Function],
       default: "props"
     },
-    /** Свойство объекта, определяющее тип элемента (`item`, `divider`, `subheader`), либо функция для его получения */
+    /**
+     * Свойство объекта, определяющее тип элемента (`item`, `divider`, `subheader`), либо функция для его получения
+     * @en Object field that defines the item type (`item`, `divider`, `subheader`), or a function that returns it
+     */
     itemType: {
       type: [Boolean, String, Array, Function],
       default: "type"
     },
-    /** Возвращать в значении модели объект вместо массива */
+    /**
+     * Возвращать в значении модели объект вместо массива
+     * @en Return an object in the model value instead of an array
+     */
     returnObject: Boolean,
-    /** Функция сравнения значений элементов для определения выбранного состояния */
+    /**
+     * Функция сравнения значений элементов для определения выбранного состояния
+     * @en Function that compares item values to determine the selected state
+     */
     valueComparator: Function
   },
   "list-items"