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

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

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":";;;;;;;AA2CO,MAAM,mBAAmB;AAAA,EAC9B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMX,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAKV,UAAU,CAAC,SAAS,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAK1B,WAAW,CAAC,SAAS,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAK3B,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,eAAe;AAAA,IAEf,GAAG,oBAAA;AAAA,EAAoB;AAAA,EAEzB;AACF;AAYO,SAAS,SAAS,OAAmB,WAAuC;AACjF,MAAI,cAAc;AAClB,QAAM,QAAQ,SAAsB,EAAE;AACtC,QAAM,UAAU,mBAAmB,UAAU;AAE7C,QAAM,WAAW;AAAA,IACf;AAAA,IACA;AAAA,IACA,CAAA;AAAA,IACA,CAAC,UAAU;AACT,UAAI,UAAU,OAAW,QAAO,CAAA;AAChC,aAAO,OAAO,OAAO,UAAU,OAAO,CAAC,IAAI,IAAI,YAAY,KAAK,CAAC;AAAA,IACnE;AAAA,IACA,CAAC,UAAU;AACT,YAAM,MAAM,UAAU,OAAO,KAAK;AAClC,aAAO,MAAM,WAAW,MAAM,IAAI,CAAC;AAAA,IACrC;AAAA,EAAA;AAGF,YAAU,MAAM;AACd,wBAAA;AAAA,EACF,CAAC;AAED,kBAAgB,MAAM;AACpB,kBAAc;AAAA,EAChB,CAAC;AAED,YAAU,MAAM;AACd,aAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,UAAI,MAAM,CAAC,EAAE,iBAAiB;AAC5B,cAAM,CAAC,EAAE,QAAQ;AAAA,MACnB;AAAA,IACF;AAAA,EACF,CAAC;AAED,WAAS,SAAS,MAAiB,IAA+B;AAChE,UAAM,YAAY;AAElB,UAAM,MAAM,OAAO,IAAI,GAAG,UAAU,WAAW,KAAK;AACpD,UAAM,WAAW,wBAAwB,KAAK,mCAAS,KAAK;AAC5D,UAAM,QAAQ,SAAS,QAAQ,EAAE;AAEjC,QAAI,MAAM,UAAU,KAAK,MAAM,QAAW;AACxC,gBAAU,QAAQ;AAClB,gBAAU,kBAAkB;AAAA,IAC9B;AAEA,QAAI,QAAQ,IAAI;AACd,YAAM,OAAO,OAAO,GAAG,SAAS;AAAA,IAClC,OAAO;AACL,YAAM,KAAK,SAAS;AAAA,IACtB;AAAA,EACF;AAEA,WAAS,WAAW,IAAY;AAC9B,QAAI,YAAa;AAEjB,wBAAA;AAEA,UAAM,QAAQ,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,EAAE;AACtD,UAAM,OAAO,OAAO,CAAC;AAAA,EACvB;AAEA,WAAS,sBAAsB;AAC7B,UAAM,OAAO,MAAM,KAAK,CAACA,UAAS,CAACA,MAAK,QAAQ;AAChD,UAAM,iBAAiB,MAAM,cAAc,WAAW,MAAM,aAAa;AAEzE,QAAI,QAAQ,kBAAkB,CAAC,MAAM,QAAQ,EAAE,QAAQ;AACrD,eAAS,QAAQ,CAAC,KAAK,EAAE;AAAA,IAC3B;AAAA,EACF;AAEA,WAAS,OAAO,IAAY,OAAiB;AAC3C,UAAM,OAAO,MAAM,KAAK,CAACA,UAASA,MAAK,OAAO,EAAE;AAChD,UAAM,cAAc,MAAM,aAAa,MAAM;AAE7C,QAAI,UAAS,6BAAM,UAAU;AAE7B,QAAI,MAAM,UAAU;AAClB,YAAM,gBAAgB,MAAM,QAAQ,EAAE,MAAA;AACtC,YAAM,QAAQ,cAAc,UAAU,CAAC,MAAM,MAAM,EAAE;AACrD,YAAM,aAAa,CAAC;AAEpB,cAAQ,SAAS,CAAC;AAElB,UAAI,cAAc,eAAe,cAAc,UAAU,EAAG;AAC5D,UAAI,CAAC,cAAc,MAAM,OAAO,QAAQ,cAAc,SAAS,IAAI,MAAM,IAAK;AAE9E,UAAI,QAAQ,KAAK,MAAO,eAAc,KAAK,EAAE;AAAA,eACpC,SAAS,KAAK,CAAC,MAAO,eAAc,OAAO,OAAO,CAAC;AAE5D,eAAS,QAAQ;AAAA,IACnB,OAAO;AACL,YAAM,aAAa,SAAS,MAAM,SAAS,EAAE;AAC7C,UAAI,eAAe,WAAY;AAC/B,UAAI,CAAC,cAAc,CAAC,MAAO;AAE3B,eAAS,QAAS,SAAS,CAAC,aAAc,CAAC,EAAE,IAAI,CAAA;AAAA,IACnD;AAAA,EACF;AAEA,WAAS,KAAK,QAAgB;AAC5B,QAAI,MAAM,SAAU,MAAK,YAAY,yDAAyD;AAE9F,QAAI,CAAC,MAAM,QAAQ,EAAE,QAAQ;AAC3B,YAAM,OAAO,MAAM,KAAK,CAACA,UAAS,CAACA,MAAK,QAAQ;AAChD,eAAS,SAAS,QAAQ,CAAC,KAAK,EAAE;AAAA,IACpC,OAAO;AACL,YAAM,YAAY,MAAM,QAAQ,EAAE,CAAC;AACnC,YAAM,eAAe,MAAM,UAAU,CAAC,MAAM,EAAE,OAAO,SAAS;AAE9D,UAAI,YAAY,eAAe,UAAU,MAAM;AAC/C,UAAI,UAAU,MAAM,QAAQ;AAE5B,aAAO,QAAQ,YAAY,aAAa,cAAc;AACpD,oBAAY,WAAW,UAAU,MAAM;AACvC,kBAAU,MAAM,QAAQ;AAAA,MAC1B;AAEA,UAAI,QAAQ,SAAU;AAEtB,eAAS,QAAQ,CAAC,MAAM,QAAQ,EAAE,EAAE;AAAA,IACtC;AAAA,EACF;AAEA,QAAM,QAAsB;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,MAAM,MAAM,MAAM,QAAQ;AAAA,IACpC,MAAM,MAAM,KAAK,MAAM,SAAS,CAAC;AAAA,IACjC,MAAM,MAAM,KAAK,CAAC;AAAA,IAClB,YAAY,CAAC,OAAe,SAAS,MAAM,SAAS,EAAE;AAAA,IACtD,eAAe,MAAM,MAAM,MAAM,aAAa;AAAA,IAC9C,OAAO,MAAM,MAAM,KAAK;AAAA,IACxB,cAAc,CAAC,UAAmB,aAAa,OAAO,KAAK;AAAA,EAAA;AAG7D,UAAQ,WAAW,KAAK;AAExB,SAAO;AACT;AAEA,SAAS,aAAa,OAA+B,OAAgB;AACnE,QAAM,MAAM,OAAO,OAAO,CAAC,KAAK,CAAC;AAEjC,MAAI,CAAC,IAAI,OAAQ,QAAO;AAExB,SAAO,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,IAAI,CAAC,CAAC;AACrD;AAEA,SAAS,OAAO,OAA+B,YAAmB;AAChE,QAAM,MAAgB,CAAA;AAEtB,aAAW,QAAQ,CAAC,UAAU;AAC5B,UAAM,OAAO,MAAM,KAAK,CAACA,UAAS,UAAU,OAAOA,MAAK,KAAK,CAAC;AAC9D,UAAM,cAAc,MAAM,KAAK;AAE/B,SAAI,6BAAM,WAAU,QAAW;AAC7B,UAAI,KAAK,KAAK,EAAE;AAAA,IAClB,WAAW,2CAAa,iBAAiB;AACvC,UAAI,KAAK,YAAY,EAAE;AAAA,IACzB;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAEA,SAAS,UAAU,OAA+B,KAAY;AAC5D,QAAM,SAAoB,CAAA;AAE1B,MAAI,QAAQ,CAAC,OAAO;AAClB,UAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,EAAE;AAC1D,QAAI,CAAC,WAAW;AACd,YAAM,OAAO,MAAM,SAAS;AAC5B,aAAO,KAAK,KAAK,UAAU,SAAY,KAAK,QAAQ,SAAS;AAAA,IAC/D;AAAA,EACF,CAAC;AAED,SAAO;AACT;"}

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/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"

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

@@ -1 +1 @@
-{"version":3,"file":"useItems.js","sources":["../../../../../src/composables/useItems/useItems.ts"],"sourcesContent":["import { propsFactory } from '@cds/core';\nimport {\n  deepEqual,\n  getPropertyFromItem,\n  isPrimitive,\n  omit,\n  pick,\n  type Primitive,\n  type SelectItemKey,\n  type ValueComparator\n} from '@cds/utils';\nimport { computed, type ExtractPublicPropTypes, type PropType, shallowRef, watchEffect } from 'vue';\n\nimport type { ListItem } from './internal/useItems.types';\n\nexport const defineItemsProps = propsFactory(\n  {\n    /** Массив элементов для отображения */\n    items: {\n      type: Array as PropType<any[]>,\n      default: () => []\n    },\n    /** Свойство объекта, используемое как заголовок элемента, либо функция для его получения */\n    itemTitle: {\n      type: [String, Array, Function] as PropType<SelectItemKey>,\n      default: 'title'\n    },\n    /** Свойство объекта, используемое как значение элемента, либо функция для его получения */\n    itemValue: {\n      type: [String, Array, Function] as PropType<SelectItemKey>,\n      default: 'value'\n    },\n    /** Свойство объекта, содержащее дочерние элементы, либо функция для их получения */\n    itemChildren: {\n      type: [Boolean, String, Array, Function] as PropType<SelectItemKey>,\n      default: 'children'\n    },\n    /** Свойство объекта, содержащее пропсы для элемента, либо функция для их получения */\n    itemProps: {\n      type: [Boolean, String, Array, Function] as PropType<SelectItemKey>,\n      default: 'props'\n    },\n    /** Свойство объекта, определяющее тип элемента (`item`, `divider`, `subheader`), либо функция для его получения */\n    itemType: {\n      type: [Boolean, String, Array, Function] as PropType<SelectItemKey>,\n      default: 'type'\n    },\n    /** Возвращать в значении модели объект вместо массива */\n    returnObject: Boolean,\n    /** Функция сравнения значений элементов для определения выбранного состояния */\n    valueComparator: Function as PropType<ValueComparator>\n  },\n  'list-items'\n);\n\nexport interface ItemProps extends ExtractPublicPropTypes<ReturnType<typeof defineItemsProps>> {}\n\nconst itemTypes = new Set(['item', 'divider', 'subheader']);\n\nexport function transformItem(props: Pick<ItemProps, (typeof transformItem.neededProps)[number]>, item: any): ListItem {\n  const title = getPropertyFromItem(item, props.itemTitle, item);\n  const value = getPropertyFromItem(item, props.itemValue, title);\n  const children = getPropertyFromItem(item, props.itemChildren);\n  const itemProps =\n    props.itemProps === true\n      ? typeof item === 'object' && item != null && !Array.isArray(item)\n        ? 'children' in item\n          ? omit(item, ['children'])\n          : item\n        : undefined\n      : getPropertyFromItem(item, props.itemProps);\n\n  let type = getPropertyFromItem(item, props.itemType, 'item');\n  if (!itemTypes.has(type)) {\n    type = 'item';\n  }\n\n  const _props = {\n    title,\n    value,\n    ...itemProps\n  };\n\n  return {\n    type,\n    title: String(_props.title ?? ''),\n    value: _props.value,\n    props: _props,\n    children: type === 'item' && Array.isArray(children) ? transformItems(props, children) : undefined,\n    raw: item\n  };\n}\n\ntransformItem.neededProps = ['itemTitle', 'itemValue', 'itemChildren', 'itemProps', 'itemType'] as const;\n\nexport function transformItems(\n  props: Pick<ItemProps, (typeof transformItem.neededProps)[number]>,\n  items: ItemProps['items']\n) {\n  // avoid reactive access in the loop\n  const _props = pick(props, [...transformItem.neededProps]);\n\n  const array: ListItem[] = [];\n  for (const item of items ?? []) {\n    array.push(transformItem(_props, item));\n  }\n\n  return array;\n}\n\nexport function useItems(props: ItemProps) {\n  const items = computed(() => transformItems(props, props.items));\n  const hasNullItem = computed(() => items.value.some((item) => item.value === null));\n\n  const itemsMap = shallowRef<Map<Primitive, ListItem[]>>(new Map());\n  const keylessItems = shallowRef<ListItem[]>([]);\n\n  watchEffect(() => {\n    const _items = items.value;\n    const map = new Map();\n    const keyless = [];\n    for (let i = 0; i < _items.length; i++) {\n      const item = _items[i];\n      if (isPrimitive(item.value) || item.value === null) {\n        let values = map.get(item.value);\n        if (!values) {\n          values = [];\n          map.set(item.value, values);\n        }\n        values.push(item);\n      } else {\n        keyless.push(item);\n      }\n    }\n    itemsMap.value = map;\n    keylessItems.value = keyless;\n  });\n\n  function transformIn(value: any[]): ListItem[] {\n    // Cache unrefed values outside the loop,\n    // proxy getters can be slow when you call them a billion times\n    const _items = itemsMap.value;\n    const _allItems = items.value;\n    const _keylessItems = keylessItems.value;\n    const _hasNullItem = hasNullItem.value;\n    const _returnObject = props.returnObject;\n    const hasValueComparator = !!props.valueComparator;\n    const valueComparator = props.valueComparator || deepEqual;\n    const _props = pick(props, [...transformItem.neededProps]);\n\n    const returnValue: ListItem[] = [];\n    main: for (const v of value) {\n      // When the model value is null, return an InternalItem\n      // based on null only if null is one of the items\n      if (!_hasNullItem && v === null) continue;\n\n      // String model value means value is a custom input value from combobox\n      // Don't look up existing items if the model value is a string\n      if (_returnObject && typeof v === 'string') {\n        returnValue.push(transformItem(_props, v));\n        continue;\n      }\n\n      // Fast path, items with primitive values and no\n      // custom valueComparator can use a constant-time\n      // map lookup instead of searching the items array\n      const fastItems = _items.get(v);\n\n      // Slow path, always use valueComparator.\n      // This is O(n^2) so we really don't want to\n      // do it for more than a couple hundred items.\n      if (hasValueComparator || !fastItems) {\n        for (const item of hasValueComparator ? _allItems : _keylessItems) {\n          if (valueComparator(v, item.value)) {\n            returnValue.push(item);\n            continue main;\n          }\n        }\n        returnValue.push(transformItem(_props, v));\n        continue;\n      }\n\n      returnValue.push(...fastItems);\n    }\n\n    return returnValue;\n  }\n\n  function transformOut(value: ListItem[]): any[] {\n    return props.returnObject ? value.map(({ raw }) => raw) : value.map(({ value }) => value);\n  }\n\n  return { items, transformIn, transformOut };\n}\n"],"names":["value"],"mappings":"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"}
+{"version":3,"file":"useItems.js","sources":["../../../../../src/composables/useItems/useItems.ts"],"sourcesContent":["import { propsFactory } from '@cds/core';\nimport {\n  deepEqual,\n  getPropertyFromItem,\n  isPrimitive,\n  omit,\n  pick,\n  type Primitive,\n  type SelectItemKey,\n  type ValueComparator\n} from '@cds/utils';\nimport { computed, type ExtractPublicPropTypes, type PropType, shallowRef, watchEffect } from 'vue';\n\nimport type { ListItem } from './internal/useItems.types';\n\nexport const defineItemsProps = propsFactory(\n  {\n    /**\n     * Массив элементов для отображения\n     * @en Array of items to display\n     */\n    items: {\n      type: Array as PropType<any[]>,\n      default: () => []\n    },\n    /**\n     * Свойство объекта, используемое как заголовок элемента, либо функция для его получения\n     * @en Object field used as the item title, or a function that returns it\n     */\n    itemTitle: {\n      type: [String, Array, Function] as PropType<SelectItemKey>,\n      default: 'title'\n    },\n    /**\n     * Свойство объекта, используемое как значение элемента, либо функция для его получения\n     * @en Object field used as the item value, or a function that returns it\n     */\n    itemValue: {\n      type: [String, Array, Function] as PropType<SelectItemKey>,\n      default: 'value'\n    },\n    /**\n     * Свойство объекта, содержащее дочерние элементы, либо функция для их получения\n     * @en Object field that holds the child items, or a function that returns them\n     */\n    itemChildren: {\n      type: [Boolean, String, Array, Function] as PropType<SelectItemKey>,\n      default: 'children'\n    },\n    /**\n     * Свойство объекта, содержащее пропсы для элемента, либо функция для их получения\n     * @en Object field that holds the props of the item, or a function that returns them\n     */\n    itemProps: {\n      type: [Boolean, String, Array, Function] as PropType<SelectItemKey>,\n      default: 'props'\n    },\n    /**\n     * Свойство объекта, определяющее тип элемента (`item`, `divider`, `subheader`), либо функция для его получения\n     * @en Object field that defines the item type (`item`, `divider`, `subheader`), or a function that returns it\n     */\n    itemType: {\n      type: [Boolean, String, Array, Function] as PropType<SelectItemKey>,\n      default: 'type'\n    },\n    /**\n     * Возвращать в значении модели объект вместо массива\n     * @en Return an object in the model value instead of an array\n     */\n    returnObject: Boolean,\n    /**\n     * Функция сравнения значений элементов для определения выбранного состояния\n     * @en Function that compares item values to determine the selected state\n     */\n    valueComparator: Function as PropType<ValueComparator>\n  },\n  'list-items'\n);\n\nexport interface ItemProps extends ExtractPublicPropTypes<ReturnType<typeof defineItemsProps>> {}\n\nconst itemTypes = new Set(['item', 'divider', 'subheader']);\n\nexport function transformItem(props: Pick<ItemProps, (typeof transformItem.neededProps)[number]>, item: any): ListItem {\n  const title = getPropertyFromItem(item, props.itemTitle, item);\n  const value = getPropertyFromItem(item, props.itemValue, title);\n  const children = getPropertyFromItem(item, props.itemChildren);\n  const itemProps =\n    props.itemProps === true\n      ? typeof item === 'object' && item != null && !Array.isArray(item)\n        ? 'children' in item\n          ? omit(item, ['children'])\n          : item\n        : undefined\n      : getPropertyFromItem(item, props.itemProps);\n\n  let type = getPropertyFromItem(item, props.itemType, 'item');\n  if (!itemTypes.has(type)) {\n    type = 'item';\n  }\n\n  const _props = {\n    title,\n    value,\n    ...itemProps\n  };\n\n  return {\n    type,\n    title: String(_props.title ?? ''),\n    value: _props.value,\n    props: _props,\n    children: type === 'item' && Array.isArray(children) ? transformItems(props, children) : undefined,\n    raw: item\n  };\n}\n\ntransformItem.neededProps = ['itemTitle', 'itemValue', 'itemChildren', 'itemProps', 'itemType'] as const;\n\nexport function transformItems(\n  props: Pick<ItemProps, (typeof transformItem.neededProps)[number]>,\n  items: ItemProps['items']\n) {\n  // avoid reactive access in the loop\n  const _props = pick(props, [...transformItem.neededProps]);\n\n  const array: ListItem[] = [];\n  for (const item of items ?? []) {\n    array.push(transformItem(_props, item));\n  }\n\n  return array;\n}\n\nexport function useItems(props: ItemProps) {\n  const items = computed(() => transformItems(props, props.items));\n  const hasNullItem = computed(() => items.value.some((item) => item.value === null));\n\n  const itemsMap = shallowRef<Map<Primitive, ListItem[]>>(new Map());\n  const keylessItems = shallowRef<ListItem[]>([]);\n\n  watchEffect(() => {\n    const _items = items.value;\n    const map = new Map();\n    const keyless = [];\n    for (let i = 0; i < _items.length; i++) {\n      const item = _items[i];\n      if (isPrimitive(item.value) || item.value === null) {\n        let values = map.get(item.value);\n        if (!values) {\n          values = [];\n          map.set(item.value, values);\n        }\n        values.push(item);\n      } else {\n        keyless.push(item);\n      }\n    }\n    itemsMap.value = map;\n    keylessItems.value = keyless;\n  });\n\n  function transformIn(value: any[]): ListItem[] {\n    // Cache unrefed values outside the loop,\n    // proxy getters can be slow when you call them a billion times\n    const _items = itemsMap.value;\n    const _allItems = items.value;\n    const _keylessItems = keylessItems.value;\n    const _hasNullItem = hasNullItem.value;\n    const _returnObject = props.returnObject;\n    const hasValueComparator = !!props.valueComparator;\n    const valueComparator = props.valueComparator || deepEqual;\n    const _props = pick(props, [...transformItem.neededProps]);\n\n    const returnValue: ListItem[] = [];\n    main: for (const v of value) {\n      // When the model value is null, return an InternalItem\n      // based on null only if null is one of the items\n      if (!_hasNullItem && v === null) continue;\n\n      // String model value means value is a custom input value from combobox\n      // Don't look up existing items if the model value is a string\n      if (_returnObject && typeof v === 'string') {\n        returnValue.push(transformItem(_props, v));\n        continue;\n      }\n\n      // Fast path, items with primitive values and no\n      // custom valueComparator can use a constant-time\n      // map lookup instead of searching the items array\n      const fastItems = _items.get(v);\n\n      // Slow path, always use valueComparator.\n      // This is O(n^2) so we really don't want to\n      // do it for more than a couple hundred items.\n      if (hasValueComparator || !fastItems) {\n        for (const item of hasValueComparator ? _allItems : _keylessItems) {\n          if (valueComparator(v, item.value)) {\n            returnValue.push(item);\n            continue main;\n          }\n        }\n        returnValue.push(transformItem(_props, v));\n        continue;\n      }\n\n      returnValue.push(...fastItems);\n    }\n\n    return returnValue;\n  }\n\n  function transformOut(value: ListItem[]): any[] {\n    return props.returnObject ? value.map(({ raw }) => raw) : value.map(({ value }) => value);\n  }\n\n  return { items, transformIn, transformOut };\n}\n"],"names":["value"],"mappings":"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"}

package/dist/es/src/composables/useLayout/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","sources":["../../../../../src/composables/useLayout/context.ts"],"sourcesContent":["import { createContext } from '@cds/hooks/createContext';\nimport type { ComputedRef, Ref } from 'vue';\n\n/**\n * Состояние наблюдателя за скроллом области макета.\n */\nexport interface ScrollObserver {\n  position: {\n    top: number;\n    left: number;\n  };\n  direction: 'up' | 'down' | 'left' | 'right';\n  directionChanged: boolean;\n  delta: {\n    top: number;\n    left: number;\n  };\n  inflectionPoint: {\n    top: number;\n    left: number;\n  };\n}\n\n/**\n * Описание одной части макета (header / footer / left / right).\n */\nexport interface LayoutPart {\n  /** Размер части в пикселях. */\n  size: number;\n  /** Смещение части относительно края макета. */\n  offset: number;\n  /** Резервирует ли часть пространство в потоке. */\n  space: boolean;\n}\n\n/**\n * Контекст макета, предоставляемый `CdsLayout` и потребляемый\n * `CdsHeader`, `CdsFooter`, `CdsDrawer`, `CdsMain`, `CdsPage`.\n */\nexport interface LayoutContext {\n  instances: Record<string, unknown>;\n  view: ComputedRef<string>;\n  isContainer: ComputedRef<boolean>;\n  rootRef: Ref<HTMLElement | undefined>;\n  height: Ref<number>;\n  containerHeight: Ref<number>;\n  scrollbarWidth: Ref<number>;\n  totalWidth: ComputedRef<number>;\n  rows: ComputedRef<{\n    top: string[];\n    middle: string[];\n    bottom: string[];\n  }>;\n  header: LayoutPart;\n  right: LayoutPart;\n  footer: LayoutPart;\n  left: LayoutPart;\n  scroll: Ref<ScrollObserver>;\n  animate: () => void;\n  update: (part: 'header' | 'footer' | 'left' | 'right', prop: keyof LayoutPart, value: number | boolean) => void;\n}\n\nexport const CDS_LAYOUT_CONTEXT_KEY = 'cds:layout';\n\n/**\n * Возвращает контекст макета. Вне `CdsLayout` отдаёт пустой объект —\n * потребители проверяют это и предупреждают разработчика.\n */\nexport const [useInjectLayout, provideLayout] = createContext<LayoutContext>(\n  CDS_LAYOUT_CONTEXT_KEY,\n  {} as LayoutContext\n);\n"],"names":[],"mappings":";AA8DO,MAAM,yBAAyB;AAM/B,MAAM,CAAC,iBAAiB,aAAa,IAAI;AAAA,EAC9C;AAAA,EACA,CAAA;AACF;"}
+{"version":3,"file":"context.js","sources":["../../../../../src/composables/useLayout/context.ts"],"sourcesContent":["import { createContext } from '@cds/hooks/createContext';\nimport type { ComputedRef, Ref } from 'vue';\n\n/**\n * Состояние наблюдателя за скроллом области макета.\n */\nexport interface ScrollObserver {\n  position: {\n    top: number;\n    left: number;\n  };\n  direction: 'up' | 'down' | 'left' | 'right';\n  directionChanged: boolean;\n  delta: {\n    top: number;\n    left: number;\n  };\n  inflectionPoint: {\n    top: number;\n    left: number;\n  };\n}\n\n/**\n * Описание одной части макета (header / footer / left / right).\n */\nexport interface LayoutPart {\n  /** Размер части в пикселях. */\n  size: number;\n  /** Смещение части относительно края макета. */\n  offset: number;\n  /** Резервирует ли часть пространство в потоке. */\n  space: boolean;\n}\n\n/**\n * Контекст макета, предоставляемый `CdsLayout` и потребляемый\n * `CdsHeader`, `CdsFooter`, `CdsDrawer`, `CdsMain`, `CdsPage`.\n */\nexport interface LayoutContext {\n  /**\n   * Зарегистрированные в макете компоненты по идентификаторам — шапка, подвал, панели, контент.\n   * @en Components registered in the layout by their identifiers — the header, the footer, the drawers, the content.\n   */\n  instances: Record<string, unknown>;\n  /** Текущая раскладка макета — какие части занимают верх, низ и бока. */\n  view: ComputedRef<string>;\n  /**\n   * Ограничен ли макет по ширине контейнером (`container`) вместо растягивания на весь экран.\n   * @en Whether the layout is limited in width by a container (`container`) instead of stretching across the whole screen.\n   */\n  isContainer: ComputedRef<boolean>;\n  /**\n   * Ссылка на корневой DOM-элемент макета.\n   * @en Ref to the root DOM element of the layout.\n   */\n  rootRef: Ref<HTMLElement | undefined>;\n  /**\n   * Полная высота макета в пикселях.\n   * @en Full height of the layout in pixels.\n   */\n  height: Ref<number>;\n  /**\n   * Высота области контента без шапки и подвала, в пикселях.\n   * @en Height of the content area without the header and the footer, in pixels.\n   */\n  containerHeight: Ref<number>;\n  /**\n   * Ширина системной полосы прокрутки в пикселях — учитывается при блокировке скролла.\n   * @en Width of the system scrollbar in pixels — taken into account when the scroll is locked.\n   */\n  scrollbarWidth: Ref<number>;\n  /**\n   * Полная ширина макета в пикселях.\n   * @en Full width of the layout in pixels.\n   */\n  totalWidth: ComputedRef<number>;\n  /**\n   * Идентификаторы компонентов, распределённые по рядам макета: сверху, посередине и снизу.\n   * @en Identifiers of the components distributed across the rows of the layout: top, middle and bottom.\n   */\n  rows: ComputedRef<{\n    top: string[];\n    middle: string[];\n    bottom: string[];\n  }>;\n  /**\n   * Размеры и смещение шапки макета.\n   * @en Size and offset of the layout header.\n   */\n  header: LayoutPart;\n  /**\n   * Размеры и смещение правой панели макета.\n   * @en Size and offset of the right drawer of the layout.\n   */\n  right: LayoutPart;\n  /**\n   * Размеры и смещение подвала макета.\n   * @en Size and offset of the layout footer.\n   */\n  footer: LayoutPart;\n  /**\n   * Размеры и смещение левой панели макета.\n   * @en Size and offset of the left drawer of the layout.\n   */\n  left: LayoutPart;\n  /**\n   * Состояние прокрутки макета: позиция, направление и дельта.\n   * @en Scroll state of the layout: position, direction and delta.\n   */\n  scroll: Ref<ScrollObserver>;\n  /**\n   * Включает анимацию перестроения макета на время ближайшего обновления размеров.\n   * @en Turns on the rebuild animation of the layout for the duration of the next size update.\n   */\n  animate: () => void;\n  /**\n   * Обновляет размер, смещение или резервирование места для части макета.\n   * @en Updates the size, the offset or the space reservation for a part of the layout.\n   */\n  update: (part: 'header' | 'footer' | 'left' | 'right', prop: keyof LayoutPart, value: number | boolean) => void;\n}\n\nexport const CDS_LAYOUT_CONTEXT_KEY = 'cds:layout';\n\n/**\n * Возвращает контекст макета. Вне `CdsLayout` отдаёт пустой объект —\n * потребители проверяют это и предупреждают разработчика.\n */\nexport const [useInjectLayout, provideLayout] = createContext<LayoutContext>(\n  CDS_LAYOUT_CONTEXT_KEY,\n  {} as LayoutContext\n);\n"],"names":[],"mappings":";AA2HO,MAAM,yBAAyB;AAM/B,MAAM,CAAC,iBAAiB,aAAa,IAAI;AAAA,EAC9C;AAAA,EACA,CAAA;AACF;"}

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

@@ -5,32 +5,50 @@ import { u as useInjectLayout } from "./context.js";
 import { u as useDisplay } from "../useDisplay/useDisplay.js";
 const defineLayoutProps = propsFactory(
   {
-    /** Видимость элемента в макете. */
+    /**
+     * Видимость элемента в макете.
+     * @en Visibility of the element in the layout.
+     */
     modelValue: {
       type: Boolean,
       default: true
     },
-    /** Плавающий режим: элемент появляется/скрывается при скролле. */
+    /**
+     * Плавающий режим: элемент появляется/скрывается при скролле.
+     * @en Floating mode: the element appears/hides on scroll.
+     */
     reveal: {
       type: Boolean,
       default: false
     },
-    /** Порог скролла (px), до которого плавающий элемент остаётся видимым. */
+    /**
+     * Порог скролла (px), до которого плавающий элемент остаётся видимым.
+     * @en Scroll threshold (px) up to which the floating element stays visible.
+     */
     revealOffset: {
       type: Number,
       default: 250
     },
-    /** Отображение границы. */
+    /**
+     * Отображение границы.
+     * @en Shows the border.
+     */
     bordered: {
       type: Boolean,
       default: false
     },
-    /** Отображение тени. */
+    /**
+     * Отображение тени.
+     * @en Shows the shadow.
+     */
     elevated: {
       type: Boolean,
       default: false
     },
-    /** Высота элемента. */
+    /**
+     * Высота элемента.
+     * @en Height of the element.
+     */
     height: {
       type: [String, Number],
       default: 50

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

@@ -1 +1 @@
-{"version":3,"file":"useLayout.js","sources":["../../../../../src/composables/useLayout/useLayout.ts"],"sourcesContent":["import { useDisplay } from '@cds/composables/useDisplay';\nimport { propsFactory } from '@cds/core';\nimport { IN_BROWSER } from '@cds/utils';\nimport {\n  computed,\n  type ComputedRef,\n  type CSSProperties,\n  type ExtractPublicPropTypes,\n  onBeforeUnmount,\n  type PropType,\n  type Ref,\n  ref,\n  unref,\n  watch\n} from 'vue';\n\nimport { type LayoutPart, useInjectLayout } from './context';\n\n/**\n * Фабрика пропсов для частей макета `CdsHeader` / `CdsFooter`.\n */\nexport const defineLayoutProps = propsFactory(\n  {\n    /** Видимость элемента в макете. */\n    modelValue: {\n      type: Boolean as PropType<boolean>,\n      default: true\n    },\n    /** Плавающий режим: элемент появляется/скрывается при скролле. */\n    reveal: {\n      type: Boolean as PropType<boolean>,\n      default: false\n    },\n    /** Порог скролла (px), до которого плавающий элемент остаётся видимым. */\n    revealOffset: {\n      type: Number as PropType<number>,\n      default: 250\n    },\n    /** Отображение границы. */\n    bordered: {\n      type: Boolean as PropType<boolean>,\n      default: false\n    },\n    /** Отображение тени. */\n    elevated: {\n      type: Boolean as PropType<boolean>,\n      default: false\n    },\n    /** Высота элемента. */\n    height: {\n      type: [String, Number] as PropType<string | number>,\n      default: 50\n    }\n  },\n  'layout'\n);\n\nexport interface LayoutProps extends ExtractPublicPropTypes<ReturnType<typeof defineLayoutProps>> {}\n\nexport interface UseLayout {\n  layout: ReturnType<typeof useInjectLayout>;\n  size: Ref<number>;\n  revealed: Ref<boolean>;\n  fixed: ComputedRef<boolean>;\n  windowHeight: Ref<number>;\n  containerHeight: ComputedRef<number>;\n  offset: ComputedRef<number>;\n  hidden: ComputedRef<boolean>;\n  revealOnFocus: ComputedRef<boolean>;\n  classes: ComputedRef<Record<string, boolean>>;\n  style: ComputedRef<CSSProperties>;\n  updateLocal: (prop: Ref, value: unknown) => void;\n  updateRevealed: () => void;\n  onResize: (rect: Pick<DOMRectReadOnly, 'width' | 'height'>) => void;\n}\n\n/**\n * Общая логика частей макета (header/footer): вычисление видимости,\n * плавающего поведения при скролле, классов и стилей, синхронизация\n * размеров с контекстом макета.\n *\n * @param props Пропсы части макета.\n * @param rootClass kebab-class компонента (например `cds-header`).\n * @param view Тип части: `H` — header, `F` — footer.\n */\nexport function useLayout(props: LayoutProps, rootClass: string, view: 'H' | 'F' = 'H'): UseLayout {\n  const isHeader = view === 'H';\n  const isFooter = view === 'F';\n\n  const layout = useInjectLayout();\n  const display = useDisplay();\n  const size = ref(parseInt(props.height as string, 10));\n  const revealed = ref(true);\n\n  const fixed = computed(\n    () =>\n      props.reveal ||\n      unref(layout.view).indexOf(view) > -1 ||\n      (unref(display.platform).ios && unref(layout.isContainer))\n  );\n\n  const windowHeight = ref(!IN_BROWSER || unref(layout.isContainer) ? 0 : window.innerHeight);\n\n  const containerHeight = computed(() =>\n    unref(layout.isContainer) ? unref(layout.containerHeight) : unref(windowHeight)\n  );\n\n  const offset = computed(() => {\n    if (!props.modelValue) return 0;\n    if (unref(fixed)) return unref(revealed) ? unref(size) : 0;\n\n    let offset = 0;\n\n    if (isHeader) {\n      offset = unref(size) - unref(layout.scroll).position.top;\n    }\n\n    if (isFooter) {\n      offset = unref(layout.scroll).position.top + unref(containerHeight) + unref(size) - unref(layout.height);\n    }\n\n    return offset > 0 ? offset : 0;\n  });\n\n  const hidden = computed(() => !props.modelValue || (unref(fixed) && !unref(revealed)));\n\n  const revealOnFocus = computed(() => !!(props.modelValue && unref(hidden) && props.reveal));\n\n  const classes = computed(() => ({\n    [rootClass]: true,\n    [`${rootClass}--fixed`]: unref(fixed),\n    [`${rootClass}--absolute`]: !unref(fixed),\n    [`${rootClass}--hidden`]: unref(hidden),\n    [`${rootClass}--bordered`]: !!props.bordered,\n    [`${rootClass}--elevated`]: !!props.elevated,\n    [`${rootClass}--prevent-focus`]: !props.modelValue\n  }));\n\n  const style = computed(() => {\n    const rows = isHeader ? unref(layout.rows).top : unref(layout.rows).bottom;\n    const css: CSSProperties = {};\n\n    if (rows[0] === 'l' && layout.left.space) {\n      css.left = `${layout.left.size}px`;\n    }\n\n    if (rows[2] === 'r' && layout.right.space) {\n      css.right = `${layout.right.size}px`;\n    }\n\n    return css;\n  });\n\n  function updateLayout(prop: keyof LayoutPart, value: number | boolean) {\n    layout.update(isHeader ? 'header' : 'footer', prop, value);\n  }\n\n  function updateLocal(prop: Ref, value: unknown) {\n    if (unref(prop) !== value) {\n      prop.value = value;\n    }\n  }\n\n  function updateRevealed() {\n    if (!props.reveal) return;\n\n    const { direction, position, inflectionPoint } = unref(layout.scroll);\n\n    updateLocal(\n      revealed,\n      direction === 'up' ||\n        position.top - inflectionPoint.top < 100 ||\n        unref(layout.height) - unref(containerHeight) - position.top - unref(size) < 300\n    );\n  }\n\n  function onResize({ height }: Pick<DOMRectReadOnly, 'width' | 'height'>) {\n    updateLocal(size, height);\n    updateLayout('size', height);\n  }\n\n  watch(\n    () => props.modelValue,\n    (value) => {\n      updateLayout('space', !!value);\n      updateLocal(revealed, true);\n      layout.animate();\n    }\n  );\n\n  watch(offset, (value) => {\n    updateLayout('offset', value);\n  });\n\n  watch(\n    () => props.reveal,\n    (value) => {\n      !value && updateLocal(revealed, props.modelValue);\n    }\n  );\n\n  const instance = {};\n\n  layout.instances[isHeader ? 'header' : 'footer'] = instance;\n  props.modelValue && updateLayout('size', unref(size));\n  updateLayout('space', !!props.modelValue);\n  updateLayout('offset', unref(offset));\n\n  onBeforeUnmount(() => {\n    if (layout.instances[isHeader ? 'header' : 'footer'] === instance) {\n      layout.instances[isHeader ? 'header' : 'footer'] = undefined;\n      updateLayout('size', 0);\n      updateLayout('offset', 0);\n      updateLayout('space', false);\n    }\n  });\n\n  return {\n    layout,\n    size,\n    revealed,\n    fixed,\n    windowHeight,\n    containerHeight,\n    offset,\n    hidden,\n    revealOnFocus,\n    classes,\n    style,\n    updateLocal,\n    updateRevealed,\n    onResize\n  };\n}\n"],"names":["offset"],"mappings":"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"}
+{"version":3,"file":"useLayout.js","sources":["../../../../../src/composables/useLayout/useLayout.ts"],"sourcesContent":["import { useDisplay } from '@cds/composables/useDisplay';\nimport { propsFactory } from '@cds/core';\nimport { IN_BROWSER } from '@cds/utils';\nimport {\n  computed,\n  type ComputedRef,\n  type CSSProperties,\n  type ExtractPublicPropTypes,\n  onBeforeUnmount,\n  type PropType,\n  type Ref,\n  ref,\n  unref,\n  watch\n} from 'vue';\n\nimport { type LayoutPart, useInjectLayout } from './context';\n\n/**\n * Фабрика пропсов для частей макета `CdsHeader` / `CdsFooter`.\n */\nexport const defineLayoutProps = propsFactory(\n  {\n    /**\n     * Видимость элемента в макете.\n     * @en Visibility of the element in the layout.\n     */\n    modelValue: {\n      type: Boolean as PropType<boolean>,\n      default: true\n    },\n    /**\n     * Плавающий режим: элемент появляется/скрывается при скролле.\n     * @en Floating mode: the element appears/hides on scroll.\n     */\n    reveal: {\n      type: Boolean as PropType<boolean>,\n      default: false\n    },\n    /**\n     * Порог скролла (px), до которого плавающий элемент остаётся видимым.\n     * @en Scroll threshold (px) up to which the floating element stays visible.\n     */\n    revealOffset: {\n      type: Number as PropType<number>,\n      default: 250\n    },\n    /**\n     * Отображение границы.\n     * @en Shows the border.\n     */\n    bordered: {\n      type: Boolean as PropType<boolean>,\n      default: false\n    },\n    /**\n     * Отображение тени.\n     * @en Shows the shadow.\n     */\n    elevated: {\n      type: Boolean as PropType<boolean>,\n      default: false\n    },\n    /**\n     * Высота элемента.\n     * @en Height of the element.\n     */\n    height: {\n      type: [String, Number] as PropType<string | number>,\n      default: 50\n    }\n  },\n  'layout'\n);\n\nexport interface LayoutProps extends ExtractPublicPropTypes<ReturnType<typeof defineLayoutProps>> {}\n\nexport interface UseLayout {\n  layout: ReturnType<typeof useInjectLayout>;\n  size: Ref<number>;\n  revealed: Ref<boolean>;\n  fixed: ComputedRef<boolean>;\n  windowHeight: Ref<number>;\n  containerHeight: ComputedRef<number>;\n  offset: ComputedRef<number>;\n  hidden: ComputedRef<boolean>;\n  revealOnFocus: ComputedRef<boolean>;\n  classes: ComputedRef<Record<string, boolean>>;\n  style: ComputedRef<CSSProperties>;\n  updateLocal: (prop: Ref, value: unknown) => void;\n  updateRevealed: () => void;\n  onResize: (rect: Pick<DOMRectReadOnly, 'width' | 'height'>) => void;\n}\n\n/**\n * Общая логика частей макета (header/footer): вычисление видимости,\n * плавающего поведения при скролле, классов и стилей, синхронизация\n * размеров с контекстом макета.\n *\n * @param props Пропсы части макета.\n * @param rootClass kebab-class компонента (например `cds-header`).\n * @param view Тип части: `H` — header, `F` — footer.\n */\nexport function useLayout(props: LayoutProps, rootClass: string, view: 'H' | 'F' = 'H'): UseLayout {\n  const isHeader = view === 'H';\n  const isFooter = view === 'F';\n\n  const layout = useInjectLayout();\n  const display = useDisplay();\n  const size = ref(parseInt(props.height as string, 10));\n  const revealed = ref(true);\n\n  const fixed = computed(\n    () =>\n      props.reveal ||\n      unref(layout.view).indexOf(view) > -1 ||\n      (unref(display.platform).ios && unref(layout.isContainer))\n  );\n\n  const windowHeight = ref(!IN_BROWSER || unref(layout.isContainer) ? 0 : window.innerHeight);\n\n  const containerHeight = computed(() =>\n    unref(layout.isContainer) ? unref(layout.containerHeight) : unref(windowHeight)\n  );\n\n  const offset = computed(() => {\n    if (!props.modelValue) return 0;\n    if (unref(fixed)) return unref(revealed) ? unref(size) : 0;\n\n    let offset = 0;\n\n    if (isHeader) {\n      offset = unref(size) - unref(layout.scroll).position.top;\n    }\n\n    if (isFooter) {\n      offset = unref(layout.scroll).position.top + unref(containerHeight) + unref(size) - unref(layout.height);\n    }\n\n    return offset > 0 ? offset : 0;\n  });\n\n  const hidden = computed(() => !props.modelValue || (unref(fixed) && !unref(revealed)));\n\n  const revealOnFocus = computed(() => !!(props.modelValue && unref(hidden) && props.reveal));\n\n  const classes = computed(() => ({\n    [rootClass]: true,\n    [`${rootClass}--fixed`]: unref(fixed),\n    [`${rootClass}--absolute`]: !unref(fixed),\n    [`${rootClass}--hidden`]: unref(hidden),\n    [`${rootClass}--bordered`]: !!props.bordered,\n    [`${rootClass}--elevated`]: !!props.elevated,\n    [`${rootClass}--prevent-focus`]: !props.modelValue\n  }));\n\n  const style = computed(() => {\n    const rows = isHeader ? unref(layout.rows).top : unref(layout.rows).bottom;\n    const css: CSSProperties = {};\n\n    if (rows[0] === 'l' && layout.left.space) {\n      css.left = `${layout.left.size}px`;\n    }\n\n    if (rows[2] === 'r' && layout.right.space) {\n      css.right = `${layout.right.size}px`;\n    }\n\n    return css;\n  });\n\n  function updateLayout(prop: keyof LayoutPart, value: number | boolean) {\n    layout.update(isHeader ? 'header' : 'footer', prop, value);\n  }\n\n  function updateLocal(prop: Ref, value: unknown) {\n    if (unref(prop) !== value) {\n      prop.value = value;\n    }\n  }\n\n  function updateRevealed() {\n    if (!props.reveal) return;\n\n    const { direction, position, inflectionPoint } = unref(layout.scroll);\n\n    updateLocal(\n      revealed,\n      direction === 'up' ||\n        position.top - inflectionPoint.top < 100 ||\n        unref(layout.height) - unref(containerHeight) - position.top - unref(size) < 300\n    );\n  }\n\n  function onResize({ height }: Pick<DOMRectReadOnly, 'width' | 'height'>) {\n    updateLocal(size, height);\n    updateLayout('size', height);\n  }\n\n  watch(\n    () => props.modelValue,\n    (value) => {\n      updateLayout('space', !!value);\n      updateLocal(revealed, true);\n      layout.animate();\n    }\n  );\n\n  watch(offset, (value) => {\n    updateLayout('offset', value);\n  });\n\n  watch(\n    () => props.reveal,\n    (value) => {\n      !value && updateLocal(revealed, props.modelValue);\n    }\n  );\n\n  const instance = {};\n\n  layout.instances[isHeader ? 'header' : 'footer'] = instance;\n  props.modelValue && updateLayout('size', unref(size));\n  updateLayout('space', !!props.modelValue);\n  updateLayout('offset', unref(offset));\n\n  onBeforeUnmount(() => {\n    if (layout.instances[isHeader ? 'header' : 'footer'] === instance) {\n      layout.instances[isHeader ? 'header' : 'footer'] = undefined;\n      updateLayout('size', 0);\n      updateLayout('offset', 0);\n      updateLayout('space', false);\n    }\n  });\n\n  return {\n    layout,\n    size,\n    revealed,\n    fixed,\n    windowHeight,\n    containerHeight,\n    offset,\n    hidden,\n    revealOnFocus,\n    classes,\n    style,\n    updateLocal,\n    updateRevealed,\n    onResize\n  };\n}\n"],"names":["offset"],"mappings":"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"}

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

@@ -5,6 +5,7 @@ const defineLazyProps = propsFactory(
     /**
      * Принудительно рендерит содержимое компонента при его использовании.
      * Это полезно, если у вас есть контент, который не отображается в DOM, но который необходимо проиндексировать для SEO.
+     * @en Renders the content of the component right away. Useful when you have content that is not in the DOM but has to be indexed for SEO.
      */
     eager: Boolean
   },

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

@@ -1 +1 @@
-{"version":3,"file":"useLazy.js","sources":["../../../../../src/composables/useLazy/useLazy.ts"],"sourcesContent":["import { propsFactory } from '@cds/core';\nimport { type Ref, shallowRef, toRef, unref, watch } from 'vue';\n\n/**\n * A factory-generated configuration object used to define properties\n * with lazy initialization behavior. The resulting properties can\n * optionally be defined as eager using the `eager` option.\n *\n * @type {Object}\n * @property {boolean} eager - Specifies whether the properties should be initialized eagerly.\n */\nexport const defineLazyProps = propsFactory(\n  {\n    /**\n     * Принудительно рендерит содержимое компонента при его использовании.\n     * Это полезно, если у вас есть контент, который не отображается в DOM, но который необходимо проиндексировать для SEO.\n     */\n    eager: Boolean\n  },\n  'lazy'\n);\n\n/**\n * Hook to manage lazy behavior for content rendering.\n *\n * @param {Object} props - The properties object.\n * @param {boolean} props.eager - Determines if the content should be immediately booted.\n * @param {Ref<boolean>} active - A reference that indicates whether the content is active.\n * @return {Object} Returns an object containing reactive states and methods.\n * @return {Ref<boolean>} return.isBooted - A reactive reference indicating if the content has been booted.\n * @return {Ref<boolean>} return.hasContent - A reference indicating if the content is currently available.\n * @return {Function} return.onAfterLeave - A method to call after the content is left to reset its state if necessary.\n */\nexport function useLazy(props: { eager: boolean }, active: Ref<boolean>) {\n  const isBooted = shallowRef(false);\n  const hasContent = toRef(() => unref(isBooted) || props.eager || unref(active));\n\n  watch(active, () => (isBooted.value = true));\n\n  function onAfterLeave() {\n    if (!props.eager) isBooted.value = false;\n  }\n\n  return { isBooted, hasContent, onAfterLeave };\n}\n"],"names":[],"mappings":";;AAWO,MAAM,kBAAkB;AAAA,EAC7B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,OAAO;AAAA,EAAA;AAAA,EAET;AACF;AAaO,SAAS,QAAQ,OAA2B,QAAsB;AACvE,QAAM,WAAW,WAAW,KAAK;AACjC,QAAM,aAAa,MAAM,MAAM,MAAM,QAAQ,KAAK,MAAM,SAAS,MAAM,MAAM,CAAC;AAE9E,QAAM,QAAQ,MAAO,SAAS,QAAQ,IAAK;AAE3C,WAAS,eAAe;AACtB,QAAI,CAAC,MAAM,MAAO,UAAS,QAAQ;AAAA,EACrC;AAEA,SAAO,EAAE,UAAU,YAAY,aAAA;AACjC;"}
+{"version":3,"file":"useLazy.js","sources":["../../../../../src/composables/useLazy/useLazy.ts"],"sourcesContent":["import { propsFactory } from '@cds/core';\nimport { type Ref, shallowRef, toRef, unref, watch } from 'vue';\n\n/**\n * A factory-generated configuration object used to define properties\n * with lazy initialization behavior. The resulting properties can\n * optionally be defined as eager using the `eager` option.\n *\n * @type {Object}\n * @property {boolean} eager - Specifies whether the properties should be initialized eagerly.\n */\nexport const defineLazyProps = propsFactory(\n  {\n    /**\n     * Принудительно рендерит содержимое компонента при его использовании.\n     * Это полезно, если у вас есть контент, который не отображается в DOM, но который необходимо проиндексировать для SEO.\n     * @en Renders the content of the component right away. Useful when you have content that is not in the DOM but has to be indexed for SEO.\n     */\n    eager: Boolean\n  },\n  'lazy'\n);\n\n/**\n * Hook to manage lazy behavior for content rendering.\n *\n * @param {Object} props - The properties object.\n * @param {boolean} props.eager - Determines if the content should be immediately booted.\n * @param {Ref<boolean>} active - A reference that indicates whether the content is active.\n * @return {Object} Returns an object containing reactive states and methods.\n * @return {Ref<boolean>} return.isBooted - A reactive reference indicating if the content has been booted.\n * @return {Ref<boolean>} return.hasContent - A reference indicating if the content is currently available.\n * @return {Function} return.onAfterLeave - A method to call after the content is left to reset its state if necessary.\n */\nexport function useLazy(props: { eager: boolean }, active: Ref<boolean>) {\n  const isBooted = shallowRef(false);\n  const hasContent = toRef(() => unref(isBooted) || props.eager || unref(active));\n\n  watch(active, () => (isBooted.value = true));\n\n  function onAfterLeave() {\n    if (!props.eager) isBooted.value = false;\n  }\n\n  return { isBooted, hasContent, onAfterLeave };\n}\n"],"names":[],"mappings":";;AAWO,MAAM,kBAAkB;AAAA,EAC7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAME,OAAO;AAAA,EAAA;AAAA,EAET;AACF;AAaO,SAAS,QAAQ,OAA2B,QAAsB;AACvE,QAAM,WAAW,WAAW,KAAK;AACjC,QAAM,aAAa,MAAM,MAAM,MAAM,QAAQ,KAAK,MAAM,SAAS,MAAM,MAAM,CAAC;AAE9E,QAAM,QAAQ,MAAO,SAAS,QAAQ,IAAK;AAE3C,WAAS,eAAe;AACtB,QAAI,CAAC,MAAM,MAAO,UAAS,QAAQ;AAAA,EACrC;AAEA,SAAO,EAAE,UAAU,YAAY,aAAA;AACjC;"}

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

@@ -3,7 +3,10 @@ import { p as propsFactory } from "../../core/propsFactory.js";
 import { toRef, toValue } from "vue";
 const defineLoaderProps = propsFactory(
   {
-    /** Индикатор загрузки для компонента */
+    /**
+     * Индикатор загрузки для компонента
+     * @en Loading indicator for the component
+     */
     loading: {
       type: [Boolean, String],
       default: void 0

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

@@ -1 +1 @@
-{"version":3,"file":"useLoader.js","sources":["../../../../../src/composables/useLoader/useLoader.ts"],"sourcesContent":["import { getCurrentInstanceName, propsFactory } from '@cds/core';\nimport type { ExtractPublicPropTypes, MaybeRefOrGetter, PropType } from 'vue';\nimport { toRef, toValue } from 'vue';\n\nexport interface LoaderSlotProps {\n  color: string | undefined;\n  isActive: boolean;\n}\n\n/**\n * A factory function that defines props for a loader component.\n *\n * The `defineLoaderProps` variable utilizes `propsFactory` to create the `loading` prop,\n * which indicates the loading state of a component.\n *\n * Properties:\n * - `loading`: Accepts `Boolean` or `String` values. Represents the loading state\n *   of the component, with an optional default value of `undefined`.\n *\n * Used for generating consistent props configurations related to loading indicators.\n */\nexport const defineLoaderProps = propsFactory(\n  {\n    /** Индикатор загрузки для компонента */\n    loading: {\n      type: [Boolean, String] as PropType<boolean | string>,\n      default: undefined\n    }\n  },\n  'loader'\n);\n\nexport type LoaderProps = ExtractPublicPropTypes<ReturnType<typeof defineLoaderProps>>;\n\n/**\n * A composable function that provides reactive loader class information\n * based on the loading state defined in the provided properties.\n *\n * @param {MaybeRefOrGetter<LoaderProps>} props - Reactive or non-reactive loader properties that include the loading state.\n * @param {string} [name=getCurrentInstanceName()] - The component or context name to prefix the loader class.\n * @return {Object} An object containing reactive `loaderClasses` which maps the loader class name to its active state.\n */\nexport function useLoader(props: MaybeRefOrGetter<LoaderProps>, name = getCurrentInstanceName()) {\n  const loaderClasses = toRef(() => ({\n    [`${name}--loading`]: toValue(props).loading\n  }));\n\n  return { loaderClasses };\n}\n"],"names":[],"mappings":";;;AAqBO,MAAM,oBAAoB;AAAA,EAC/B;AAAA;AAAA,IAEE,SAAS;AAAA,MACP,MAAM,CAAC,SAAS,MAAM;AAAA,MACtB,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF;AACF;AAYO,SAAS,UAAU,OAAsC,OAAO,0BAA0B;AAC/F,QAAM,gBAAgB,MAAM,OAAO;AAAA,IACjC,CAAC,GAAG,IAAI,WAAW,GAAG,QAAQ,KAAK,EAAE;AAAA,EAAA,EACrC;AAEF,SAAO,EAAE,cAAA;AACX;"}
+{"version":3,"file":"useLoader.js","sources":["../../../../../src/composables/useLoader/useLoader.ts"],"sourcesContent":["import { getCurrentInstanceName, propsFactory } from '@cds/core';\nimport type { ExtractPublicPropTypes, MaybeRefOrGetter, PropType } from 'vue';\nimport { toRef, toValue } from 'vue';\n\nexport interface LoaderSlotProps {\n  color: string | undefined;\n  isActive: boolean;\n}\n\n/**\n * A factory function that defines props for a loader component.\n *\n * The `defineLoaderProps` variable utilizes `propsFactory` to create the `loading` prop,\n * which indicates the loading state of a component.\n *\n * Properties:\n * - `loading`: Accepts `Boolean` or `String` values. Represents the loading state\n *   of the component, with an optional default value of `undefined`.\n *\n * Used for generating consistent props configurations related to loading indicators.\n */\nexport const defineLoaderProps = propsFactory(\n  {\n    /**\n     * Индикатор загрузки для компонента\n     * @en Loading indicator for the component\n     */\n    loading: {\n      type: [Boolean, String] as PropType<boolean | string>,\n      default: undefined\n    }\n  },\n  'loader'\n);\n\nexport type LoaderProps = ExtractPublicPropTypes<ReturnType<typeof defineLoaderProps>>;\n\n/**\n * A composable function that provides reactive loader class information\n * based on the loading state defined in the provided properties.\n *\n * @param {MaybeRefOrGetter<LoaderProps>} props - Reactive or non-reactive loader properties that include the loading state.\n * @param {string} [name=getCurrentInstanceName()] - The component or context name to prefix the loader class.\n * @return {Object} An object containing reactive `loaderClasses` which maps the loader class name to its active state.\n */\nexport function useLoader(props: MaybeRefOrGetter<LoaderProps>, name = getCurrentInstanceName()) {\n  const loaderClasses = toRef(() => ({\n    [`${name}--loading`]: toValue(props).loading\n  }));\n\n  return { loaderClasses };\n}\n"],"names":[],"mappings":";;;AAqBO,MAAM,oBAAoB;AAAA,EAC/B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,SAAS;AAAA,MACP,MAAM,CAAC,SAAS,MAAM;AAAA,MACtB,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF;AACF;AAYO,SAAS,UAAU,OAAsC,OAAO,0BAA0B;AAC/F,QAAM,gBAAgB,MAAM,OAAO;AAAA,IACjC,CAAC,GAAG,IAAI,WAAW,GAAG,QAAQ,KAAK,EAAE;AAAA,EAAA,EACrC;AAEF,SAAO,EAAE,cAAA;AACX;"}

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

@@ -11,7 +11,10 @@ const oppositeMap = {
 };
 const defineLocationProps = propsFactory(
   {
-    /** Позиционирование элемента относительно его контейнера. Например, "top left", "center", "bottom right" и т.д. */
+    /**
+     * Позиционирование элемента относительно его контейнера. Например, "top left", "center", "bottom right" и т.д.
+     * @en Position of the element relative to its container, for example "top left", "center", "bottom right".
+     */
     location: String
   },
   "location"

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

@@ -1 +1 @@
-{"version":3,"file":"useLocation.js","sources":["../../../../../src/composables/useLocation/useLocation.ts"],"sourcesContent":["import { useRtl } from '@cds/composables/useLocale';\nimport { propsFactory } from '@cds/core';\nimport { type Anchor, parseAnchor } from '@cds/utils';\nimport { computed, type CSSProperties, type ExtractPublicPropTypes, type PropType } from 'vue';\n\nconst oppositeMap = {\n  center: 'center',\n  top: 'bottom',\n  bottom: 'top',\n  left: 'right',\n  right: 'left'\n} as const;\n\nexport const defineLocationProps = propsFactory(\n  {\n    /** Позиционирование элемента относительно его контейнера. Например, \"top left\", \"center\", \"bottom right\" и т.д. */\n    location: String as PropType<Anchor | null>\n  },\n  'location'\n);\n\nexport interface LocationProps extends ExtractPublicPropTypes<ReturnType<typeof defineLocationProps>> {}\n\n/**\n * Computes and returns CSS styles based on the specified location, alignment, and offset logic.\n *\n * @param {LocationProps} props - The properties containing the location configuration.\n * @param {boolean} [opposite=false] - Determines whether to apply styles in the opposite direction.\n * @param {function(string): number} [offset] - A function that calculates the offset for a specific side.\n * @return {{ locationStyles: import('vue').ComputedRef<CSSProperties> }} An object containing a computed ref with the calculated CSS properties.\n */\nexport function useLocation(props: LocationProps, opposite = false, offset?: (side: string) => number) {\n  const { isRtl } = useRtl();\n\n  const locationStyles = computed(() => {\n    if (!props.location) return {};\n\n    const { side, align } = parseAnchor(\n      props.location.split(' ').length > 1 ? props.location : (`${props.location} center` as Anchor),\n      isRtl.value\n    );\n\n    function getOffset(side: string) {\n      return offset ? offset(side) : 0;\n    }\n\n    const styles = {} as CSSProperties;\n\n    if (side !== 'center') {\n      if (opposite) styles[oppositeMap[side]] = `calc(100% - ${getOffset(side)}px)`;\n      else styles[side] = 0;\n    }\n    if (align !== 'center') {\n      if (opposite) styles[oppositeMap[align]] = `calc(100% - ${getOffset(align)}px)`;\n      else styles[align] = 0;\n    } else {\n      if (side === 'center') styles.top = styles.left = '50%';\n      else {\n        styles[\n          (\n            {\n              top: 'left',\n              bottom: 'left',\n              left: 'top',\n              right: 'top'\n            } as const\n          )[side]\n        ] = '50%';\n      }\n      styles.transform = {\n        top: 'translateX(-50%)',\n        bottom: 'translateX(-50%)',\n        left: 'translateY(-50%)',\n        right: 'translateY(-50%)',\n        center: 'translate(-50%, -50%)'\n      }[side];\n    }\n\n    return styles;\n  });\n\n  return { locationStyles };\n}\n"],"names":["side"],"mappings":";;;;AAKA,MAAM,cAAc;AAAA,EAClB,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AACT;AAEO,MAAM,sBAAsB;AAAA,EACjC;AAAA;AAAA,IAEE,UAAU;AAAA,EAAA;AAAA,EAEZ;AACF;AAYO,SAAS,YAAY,OAAsB,WAAW,OAAO,QAAmC;AACrG,QAAM,EAAE,MAAA,IAAU,OAAA;AAElB,QAAM,iBAAiB,SAAS,MAAM;AACpC,QAAI,CAAC,MAAM,SAAU,QAAO,CAAA;AAE5B,UAAM,EAAE,MAAM,MAAA,IAAU;AAAA,MACtB,MAAM,SAAS,MAAM,GAAG,EAAE,SAAS,IAAI,MAAM,WAAY,GAAG,MAAM,QAAQ;AAAA,MAC1E,MAAM;AAAA,IAAA;AAGR,aAAS,UAAUA,OAAc;AAC/B,aAAO,SAAS,OAAOA,KAAI,IAAI;AAAA,IACjC;AAEA,UAAM,SAAS,CAAA;AAEf,QAAI,SAAS,UAAU;AACrB,UAAI,iBAAiB,YAAY,IAAI,CAAC,IAAI,eAAe,UAAU,IAAI,CAAC;AAAA,UACnE,QAAO,IAAI,IAAI;AAAA,IACtB;AACA,QAAI,UAAU,UAAU;AACtB,UAAI,iBAAiB,YAAY,KAAK,CAAC,IAAI,eAAe,UAAU,KAAK,CAAC;AAAA,UACrE,QAAO,KAAK,IAAI;AAAA,IACvB,OAAO;AACL,UAAI,SAAS,SAAU,QAAO,MAAM,OAAO,OAAO;AAAA,WAC7C;AACH,eAEI;AAAA,UACE,KAAK;AAAA,UACL,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,OAAO;AAAA,QAAA,EAET,IAAI,CACR,IAAI;AAAA,MACN;AACA,aAAO,YAAY;AAAA,QACjB,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,MAAA,EACR,IAAI;AAAA,IACR;AAEA,WAAO;AAAA,EACT,CAAC;AAED,SAAO,EAAE,eAAA;AACX;"}
+{"version":3,"file":"useLocation.js","sources":["../../../../../src/composables/useLocation/useLocation.ts"],"sourcesContent":["import { useRtl } from '@cds/composables/useLocale';\nimport { propsFactory } from '@cds/core';\nimport { type Anchor, parseAnchor } from '@cds/utils';\nimport { computed, type CSSProperties, type ExtractPublicPropTypes, type PropType } from 'vue';\n\nconst oppositeMap = {\n  center: 'center',\n  top: 'bottom',\n  bottom: 'top',\n  left: 'right',\n  right: 'left'\n} as const;\n\nexport const defineLocationProps = propsFactory(\n  {\n    /**\n     * Позиционирование элемента относительно его контейнера. Например, \"top left\", \"center\", \"bottom right\" и т.д.\n     * @en Position of the element relative to its container, for example \"top left\", \"center\", \"bottom right\".\n     */\n    location: String as PropType<Anchor | null>\n  },\n  'location'\n);\n\nexport interface LocationProps extends ExtractPublicPropTypes<ReturnType<typeof defineLocationProps>> {}\n\n/**\n * Computes and returns CSS styles based on the specified location, alignment, and offset logic.\n *\n * @param {LocationProps} props - The properties containing the location configuration.\n * @param {boolean} [opposite=false] - Determines whether to apply styles in the opposite direction.\n * @param {function(string): number} [offset] - A function that calculates the offset for a specific side.\n * @return {{ locationStyles: import('vue').ComputedRef<CSSProperties> }} An object containing a computed ref with the calculated CSS properties.\n */\nexport function useLocation(props: LocationProps, opposite = false, offset?: (side: string) => number) {\n  const { isRtl } = useRtl();\n\n  const locationStyles = computed(() => {\n    if (!props.location) return {};\n\n    const { side, align } = parseAnchor(\n      props.location.split(' ').length > 1 ? props.location : (`${props.location} center` as Anchor),\n      isRtl.value\n    );\n\n    function getOffset(side: string) {\n      return offset ? offset(side) : 0;\n    }\n\n    const styles = {} as CSSProperties;\n\n    if (side !== 'center') {\n      if (opposite) styles[oppositeMap[side]] = `calc(100% - ${getOffset(side)}px)`;\n      else styles[side] = 0;\n    }\n    if (align !== 'center') {\n      if (opposite) styles[oppositeMap[align]] = `calc(100% - ${getOffset(align)}px)`;\n      else styles[align] = 0;\n    } else {\n      if (side === 'center') styles.top = styles.left = '50%';\n      else {\n        styles[\n          (\n            {\n              top: 'left',\n              bottom: 'left',\n              left: 'top',\n              right: 'top'\n            } as const\n          )[side]\n        ] = '50%';\n      }\n      styles.transform = {\n        top: 'translateX(-50%)',\n        bottom: 'translateX(-50%)',\n        left: 'translateY(-50%)',\n        right: 'translateY(-50%)',\n        center: 'translate(-50%, -50%)'\n      }[side];\n    }\n\n    return styles;\n  });\n\n  return { locationStyles };\n}\n"],"names":["side"],"mappings":";;;;AAKA,MAAM,cAAc;AAAA,EAClB,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AACT;AAEO,MAAM,sBAAsB;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,UAAU;AAAA,EAAA;AAAA,EAEZ;AACF;AAYO,SAAS,YAAY,OAAsB,WAAW,OAAO,QAAmC;AACrG,QAAM,EAAE,MAAA,IAAU,OAAA;AAElB,QAAM,iBAAiB,SAAS,MAAM;AACpC,QAAI,CAAC,MAAM,SAAU,QAAO,CAAA;AAE5B,UAAM,EAAE,MAAM,MAAA,IAAU;AAAA,MACtB,MAAM,SAAS,MAAM,GAAG,EAAE,SAAS,IAAI,MAAM,WAAY,GAAG,MAAM,QAAQ;AAAA,MAC1E,MAAM;AAAA,IAAA;AAGR,aAAS,UAAUA,OAAc;AAC/B,aAAO,SAAS,OAAOA,KAAI,IAAI;AAAA,IACjC;AAEA,UAAM,SAAS,CAAA;AAEf,QAAI,SAAS,UAAU;AACrB,UAAI,iBAAiB,YAAY,IAAI,CAAC,IAAI,eAAe,UAAU,IAAI,CAAC;AAAA,UACnE,QAAO,IAAI,IAAI;AAAA,IACtB;AACA,QAAI,UAAU,UAAU;AACtB,UAAI,iBAAiB,YAAY,KAAK,CAAC,IAAI,eAAe,UAAU,KAAK,CAAC;AAAA,UACrE,QAAO,KAAK,IAAI;AAAA,IACvB,OAAO;AACL,UAAI,SAAS,SAAU,QAAO,MAAM,OAAO,OAAO;AAAA,WAC7C;AACH,eAEI;AAAA,UACE,KAAK;AAAA,UACL,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,OAAO;AAAA,QAAA,EAET,IAAI,CACR,IAAI;AAAA,MACN;AACA,aAAO,YAAY;AAAA,QACjB,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,MAAA,EACR,IAAI;AAAA,IACR;AAEA,WAAO;AAAA,EACT,CAAC;AAED,SAAO,EAAE,eAAA;AACX;"}