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

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

@@ -2,9 +2,15 @@ import { p as propsFactory } from "../../core/propsFactory.js";
 import { y as defer } from "../../utils/helpers.js";
 const defineDelayProps = propsFactory(
   {
-    /** Время ожидания в миллисекундах перед закрытием компонента. Работает только с параметром open-on-hover. */
+    /**
+     * Время ожидания в миллисекундах перед закрытием компонента. Работает только с параметром open-on-hover.
+     * @en Delay in milliseconds before the component closes. Works only together with open-on-hover.
+     */
     closeDelay: [Number, String],
-    /** Время ожидания в миллисекундах перед открытием компонента. Работает только с параметром open-on-hover. */
+    /**
+     * Время ожидания в миллисекундах перед открытием компонента. Работает только с параметром open-on-hover.
+     * @en Delay in milliseconds before the component opens. Works only together with open-on-hover.
+     */
     openDelay: [Number, String]
   },
   "delay"

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

@@ -1 +1 @@
-{"version":3,"file":"useDelay.js","sources":["../../../../../src/composables/useDelay/useDelay.ts"],"sourcesContent":["import { propsFactory } from '@cds/core';\nimport { defer } from '@cds/utils';\nimport type { ExtractPublicPropTypes } from 'vue';\n\n/**\n * A variable that defines delay-related properties for a component.\n *\n * The `defineDelayProps` variable is generated using the `propsFactory` function\n * and is used to specify props that relate to opening and closing delays.\n *\n * Properties:\n * - `closeDelay`: Specifies the amount of time (in milliseconds or as a string) to delay before closing.\n *                 Accepts values of type `Number` or `String`.\n * - `openDelay`: Specifies the amount of time (in milliseconds or as a string) to delay before opening.\n *                Accepts values of type `Number` or `String`.\n *\n * These properties can be useful for controlling transition timings or for UI/UX scenarios\n * where timed delays are required for components such as tooltips, modals, or menus.\n */\nexport const defineDelayProps = propsFactory(\n  {\n    /** Время ожидания в миллисекундах перед закрытием компонента. Работает только с параметром open-on-hover. */\n    closeDelay: [Number, String],\n    /** Время ожидания в миллисекундах перед открытием компонента. Работает только с параметром open-on-hover. */\n    openDelay: [Number, String]\n  },\n  'delay'\n);\n\nexport interface DelayProps extends ExtractPublicPropTypes<ReturnType<typeof defineDelayProps>> {}\n\n/**\n * Manages delays for opening and closing events with optional callbacks.\n *\n * @param {DelayProps} props - Configurations for delay timings including `openDelay` and `closeDelay`.\n * @param {(value: boolean) => void} [cb] - Optional callback function executed when the delay completes. The callback is invoked with a boolean indicating the event type (`true` for opening, `false` for closing).\n * @return {Object} An object containing the following methods:\n *   - `clearDelay`: A function to clear the currently scheduled delay.\n *   - `runOpenDelay`: A function to initiate the open delay sequence.\n *   - `runCloseDelay`: A function to initiate the close delay sequence with optional minimum delay options.\n */\nexport function useDelay(props: DelayProps, cb?: (value: boolean) => void) {\n  let clearDelay: () => void = () => {};\n\n  function runDelay(isOpening: boolean, options?: { minDelay: number }) {\n    clearDelay?.();\n\n    const delay = isOpening ? props.openDelay : props.closeDelay;\n\n    const normalizedDelay = Math.max(options?.minDelay ?? 0, Number(delay ?? 0));\n\n    return new Promise((resolve) => {\n      clearDelay = defer(normalizedDelay, () => {\n        cb?.(isOpening);\n        resolve(isOpening);\n      });\n    });\n  }\n\n  function runOpenDelay() {\n    return runDelay(true);\n  }\n\n  function runCloseDelay(options?: { minDelay: number }) {\n    return runDelay(false, options);\n  }\n\n  return {\n    clearDelay,\n    runOpenDelay,\n    runCloseDelay\n  };\n}\n"],"names":[],"mappings":";;AAmBO,MAAM,mBAAmB;AAAA,EAC9B;AAAA;AAAA,IAEE,YAAY,CAAC,QAAQ,MAAM;AAAA;AAAA,IAE3B,WAAW,CAAC,QAAQ,MAAM;AAAA,EAAA;AAAA,EAE5B;AACF;AAcO,SAAS,SAAS,OAAmB,IAA+B;AACzE,MAAI,aAAyB,MAAM;AAAA,EAAC;AAEpC,WAAS,SAAS,WAAoB,SAAgC;AACpE;AAEA,UAAM,QAAQ,YAAY,MAAM,YAAY,MAAM;AAElD,UAAM,kBAAkB,KAAK,KAAI,mCAAS,aAAY,GAAG,OAAO,SAAS,CAAC,CAAC;AAE3E,WAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,mBAAa,MAAM,iBAAiB,MAAM;AACxC,iCAAK;AACL,gBAAQ,SAAS;AAAA,MACnB,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAEA,WAAS,eAAe;AACtB,WAAO,SAAS,IAAI;AAAA,EACtB;AAEA,WAAS,cAAc,SAAgC;AACrD,WAAO,SAAS,OAAO,OAAO;AAAA,EAChC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useDelay.js","sources":["../../../../../src/composables/useDelay/useDelay.ts"],"sourcesContent":["import { propsFactory } from '@cds/core';\nimport { defer } from '@cds/utils';\nimport type { ExtractPublicPropTypes } from 'vue';\n\n/**\n * A variable that defines delay-related properties for a component.\n *\n * The `defineDelayProps` variable is generated using the `propsFactory` function\n * and is used to specify props that relate to opening and closing delays.\n *\n * Properties:\n * - `closeDelay`: Specifies the amount of time (in milliseconds or as a string) to delay before closing.\n *                 Accepts values of type `Number` or `String`.\n * - `openDelay`: Specifies the amount of time (in milliseconds or as a string) to delay before opening.\n *                Accepts values of type `Number` or `String`.\n *\n * These properties can be useful for controlling transition timings or for UI/UX scenarios\n * where timed delays are required for components such as tooltips, modals, or menus.\n */\nexport const defineDelayProps = propsFactory(\n  {\n    /**\n     * Время ожидания в миллисекундах перед закрытием компонента. Работает только с параметром open-on-hover.\n     * @en Delay in milliseconds before the component closes. Works only together with open-on-hover.\n     */\n    closeDelay: [Number, String],\n    /**\n     * Время ожидания в миллисекундах перед открытием компонента. Работает только с параметром open-on-hover.\n     * @en Delay in milliseconds before the component opens. Works only together with open-on-hover.\n     */\n    openDelay: [Number, String]\n  },\n  'delay'\n);\n\nexport interface DelayProps extends ExtractPublicPropTypes<ReturnType<typeof defineDelayProps>> {}\n\n/**\n * Manages delays for opening and closing events with optional callbacks.\n *\n * @param {DelayProps} props - Configurations for delay timings including `openDelay` and `closeDelay`.\n * @param {(value: boolean) => void} [cb] - Optional callback function executed when the delay completes. The callback is invoked with a boolean indicating the event type (`true` for opening, `false` for closing).\n * @return {Object} An object containing the following methods:\n *   - `clearDelay`: A function to clear the currently scheduled delay.\n *   - `runOpenDelay`: A function to initiate the open delay sequence.\n *   - `runCloseDelay`: A function to initiate the close delay sequence with optional minimum delay options.\n */\nexport function useDelay(props: DelayProps, cb?: (value: boolean) => void) {\n  let clearDelay: () => void = () => {};\n\n  function runDelay(isOpening: boolean, options?: { minDelay: number }) {\n    clearDelay?.();\n\n    const delay = isOpening ? props.openDelay : props.closeDelay;\n\n    const normalizedDelay = Math.max(options?.minDelay ?? 0, Number(delay ?? 0));\n\n    return new Promise((resolve) => {\n      clearDelay = defer(normalizedDelay, () => {\n        cb?.(isOpening);\n        resolve(isOpening);\n      });\n    });\n  }\n\n  function runOpenDelay() {\n    return runDelay(true);\n  }\n\n  function runCloseDelay(options?: { minDelay: number }) {\n    return runDelay(false, options);\n  }\n\n  return {\n    clearDelay,\n    runOpenDelay,\n    runCloseDelay\n  };\n}\n"],"names":[],"mappings":";;AAmBO,MAAM,mBAAmB;AAAA,EAC9B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,YAAY,CAAC,QAAQ,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAK3B,WAAW,CAAC,QAAQ,MAAM;AAAA,EAAA;AAAA,EAE5B;AACF;AAcO,SAAS,SAAS,OAAmB,IAA+B;AACzE,MAAI,aAAyB,MAAM;AAAA,EAAC;AAEpC,WAAS,SAAS,WAAoB,SAAgC;AACpE;AAEA,UAAM,QAAQ,YAAY,MAAM,YAAY,MAAM;AAElD,UAAM,kBAAkB,KAAK,KAAI,mCAAS,aAAY,GAAG,OAAO,SAAS,CAAC,CAAC;AAE3E,WAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,mBAAa,MAAM,iBAAiB,MAAM;AACxC,iCAAK;AACL,gBAAQ,SAAS;AAAA,MACnB,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAEA,WAAS,eAAe;AACtB,WAAO,SAAS,IAAI;AAAA,EACtB;AAEA,WAAS,cAAc,SAAgC;AACrD,WAAO,SAAS,OAAO,OAAO;AAAA,EAChC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

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

@@ -3,32 +3,50 @@ import { u as convertToUnit } from "../../utils/helpers.js";
 import { computed } from "vue";
 const defineDimensionsProps = propsFactory(
   {
-    /** Ширина компонента */
+    /**
+     * Ширина компонента
+     * @en Component width
+     */
     width: {
       type: [Number, String],
       default: void 0
     },
-    /** Высота компонента */
+    /**
+     * Высота компонента
+     * @en Component height
+     */
     height: {
       type: [Number, String],
       default: void 0
     },
-    /** Максимальная ширина компонента */
+    /**
+     * Максимальная ширина компонента
+     * @en Maximum component width
+     */
     maxWidth: {
       type: [Number, String],
       default: void 0
     },
-    /** Максимальная высота компонента */
+    /**
+     * Максимальная высота компонента
+     * @en Maximum component height
+     */
     maxHeight: {
       type: [Number, String],
       default: void 0
     },
-    /** Минимальная ширина компонента */
+    /**
+     * Минимальная ширина компонента
+     * @en Minimum component width
+     */
     minWidth: {
       type: [Number, String],
       default: void 0
     },
-    /** Минимальная высота компонента */
+    /**
+     * Минимальная высота компонента
+     * @en Minimum component height
+     */
     minHeight: {
       type: [Number, String],
       default: void 0

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

@@ -1 +1 @@
-{"version":3,"file":"useDimensions.js","sources":["../../../../../src/composables/useDimensions/useDimensions.ts"],"sourcesContent":["import { propsFactory } from '@cds/core';\nimport { convertToUnit } from '@cds/utils';\nimport { computed, type ExtractPublicPropTypes, type PropType } from 'vue';\n\n/**\n * Factory function for defining dimension-related properties for components.\n *\n * The `defineDimensionsProps` variable provides a set of reusable properties\n * to specify the width, height, and constraints (min/max width and height) of a component.\n * These properties support both numerical values and string values (e.g., CSS units like \"px\", \"%\", \"em\").\n *\n * The following properties are included:\n * - `width`: Represents the width of the component.\n * - `height`: Represents the height of the component.\n * - `maxWidth`: Defines the maximum allowable width for the component.\n * - `maxHeight`: Defines the maximum allowable height for the component.\n * - `minWidth`: Defines the minimum allowable width for the component.\n * - `minHeight`: Defines the minimum allowable height for the component.\n *\n * All properties accept values of type `number | string` and default to `undefined`.\n *\n * This set of properties can be used to control and enforce dimension constraints\n * for UI components dynamically at runtime.\n *\n * @variable defineDimensionsProps\n */\nexport const defineDimensionsProps = propsFactory(\n  {\n    /** Ширина компонента */\n    width: {\n      type: [Number, String] as PropType<string | number>,\n      default: undefined\n    },\n    /** Высота компонента */\n    height: {\n      type: [Number, String] as PropType<string | number>,\n      default: undefined\n    },\n    /** Максимальная ширина компонента */\n    maxWidth: {\n      type: [Number, String] as PropType<string | number>,\n      default: undefined\n    },\n    /** Максимальная высота компонента */\n    maxHeight: {\n      type: [Number, String] as PropType<string | number>,\n      default: undefined\n    },\n    /** Минимальная ширина компонента */\n    minWidth: {\n      type: [Number, String] as PropType<string | number>,\n      default: undefined\n    },\n    /** Минимальная высота компонента */\n    minHeight: {\n      type: [Number, String] as PropType<string | number>,\n      default: undefined\n    }\n  },\n  'dimensions'\n);\n\nexport type DimensionsProps = ExtractPublicPropTypes<ReturnType<typeof defineDimensionsProps>>;\n\n/**\n * Computes and provides the dimension-related styles based on the provided properties.\n *\n * @param {DimensionsProps} props - An object containing dimension properties such as\n *                                   width, height, maxWidth, maxHeight, minWidth, and minHeight.\n *                                   These properties can be specified as strings or numbers.\n * @return {Object} An object containing the computed `dimensionStyles`, which includes\n *                  the CSS styles derived from the provided dimension properties.\n */\nexport function useDimensions(props: DimensionsProps) {\n  const dimensionStyles = computed(() => {\n    const styles: Record<string, any> = {};\n\n    const width = convertToUnit(props.width);\n    const height = convertToUnit(props.height);\n    const maxWidth = convertToUnit(props.maxWidth);\n    const maxHeight = convertToUnit(props.maxHeight);\n    const minWidth = convertToUnit(props.minWidth);\n    const minHeight = convertToUnit(props.minHeight);\n\n    if (width != null) styles.width = width;\n    if (height != null) styles.height = height;\n    if (maxWidth != null) styles.maxWidth = maxWidth;\n    if (maxHeight != null) styles.maxHeight = maxHeight;\n    if (minWidth != null) styles.minWidth = minWidth;\n    if (minHeight != null) styles.minHeight = minHeight;\n\n    return styles;\n  });\n\n  return { dimensionStyles };\n}\n"],"names":[],"mappings":";;;AA0BO,MAAM,wBAAwB;AAAA,EACnC;AAAA;AAAA,IAEE,OAAO;AAAA,MACL,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IAAA;AAAA;AAAA,IAGX,QAAQ;AAAA,MACN,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IAAA;AAAA;AAAA,IAGX,UAAU;AAAA,MACR,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IAAA;AAAA;AAAA,IAGX,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IAAA;AAAA;AAAA,IAGX,UAAU;AAAA,MACR,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IAAA;AAAA;AAAA,IAGX,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF;AACF;AAaO,SAAS,cAAc,OAAwB;AACpD,QAAM,kBAAkB,SAAS,MAAM;AACrC,UAAM,SAA8B,CAAA;AAEpC,UAAM,QAAQ,cAAc,MAAM,KAAK;AACvC,UAAM,SAAS,cAAc,MAAM,MAAM;AACzC,UAAM,WAAW,cAAc,MAAM,QAAQ;AAC7C,UAAM,YAAY,cAAc,MAAM,SAAS;AAC/C,UAAM,WAAW,cAAc,MAAM,QAAQ;AAC7C,UAAM,YAAY,cAAc,MAAM,SAAS;AAE/C,QAAI,SAAS,KAAM,QAAO,QAAQ;AAClC,QAAI,UAAU,KAAM,QAAO,SAAS;AACpC,QAAI,YAAY,KAAM,QAAO,WAAW;AACxC,QAAI,aAAa,KAAM,QAAO,YAAY;AAC1C,QAAI,YAAY,KAAM,QAAO,WAAW;AACxC,QAAI,aAAa,KAAM,QAAO,YAAY;AAE1C,WAAO;AAAA,EACT,CAAC;AAED,SAAO,EAAE,gBAAA;AACX;"}
+{"version":3,"file":"useDimensions.js","sources":["../../../../../src/composables/useDimensions/useDimensions.ts"],"sourcesContent":["import { propsFactory } from '@cds/core';\nimport { convertToUnit } from '@cds/utils';\nimport { computed, type ExtractPublicPropTypes, type PropType } from 'vue';\n\n/**\n * Factory function for defining dimension-related properties for components.\n *\n * The `defineDimensionsProps` variable provides a set of reusable properties\n * to specify the width, height, and constraints (min/max width and height) of a component.\n * These properties support both numerical values and string values (e.g., CSS units like \"px\", \"%\", \"em\").\n *\n * The following properties are included:\n * - `width`: Represents the width of the component.\n * - `height`: Represents the height of the component.\n * - `maxWidth`: Defines the maximum allowable width for the component.\n * - `maxHeight`: Defines the maximum allowable height for the component.\n * - `minWidth`: Defines the minimum allowable width for the component.\n * - `minHeight`: Defines the minimum allowable height for the component.\n *\n * All properties accept values of type `number | string` and default to `undefined`.\n *\n * This set of properties can be used to control and enforce dimension constraints\n * for UI components dynamically at runtime.\n *\n * @variable defineDimensionsProps\n */\nexport const defineDimensionsProps = propsFactory(\n  {\n    /**\n     * Ширина компонента\n     * @en Component width\n     */\n    width: {\n      type: [Number, String] as PropType<string | number>,\n      default: undefined\n    },\n    /**\n     * Высота компонента\n     * @en Component height\n     */\n    height: {\n      type: [Number, String] as PropType<string | number>,\n      default: undefined\n    },\n    /**\n     * Максимальная ширина компонента\n     * @en Maximum component width\n     */\n    maxWidth: {\n      type: [Number, String] as PropType<string | number>,\n      default: undefined\n    },\n    /**\n     * Максимальная высота компонента\n     * @en Maximum component height\n     */\n    maxHeight: {\n      type: [Number, String] as PropType<string | number>,\n      default: undefined\n    },\n    /**\n     * Минимальная ширина компонента\n     * @en Minimum component width\n     */\n    minWidth: {\n      type: [Number, String] as PropType<string | number>,\n      default: undefined\n    },\n    /**\n     * Минимальная высота компонента\n     * @en Minimum component height\n     */\n    minHeight: {\n      type: [Number, String] as PropType<string | number>,\n      default: undefined\n    }\n  },\n  'dimensions'\n);\n\nexport type DimensionsProps = ExtractPublicPropTypes<ReturnType<typeof defineDimensionsProps>>;\n\n/**\n * Computes and provides the dimension-related styles based on the provided properties.\n *\n * @param {DimensionsProps} props - An object containing dimension properties such as\n *                                   width, height, maxWidth, maxHeight, minWidth, and minHeight.\n *                                   These properties can be specified as strings or numbers.\n * @return {Object} An object containing the computed `dimensionStyles`, which includes\n *                  the CSS styles derived from the provided dimension properties.\n */\nexport function useDimensions(props: DimensionsProps) {\n  const dimensionStyles = computed(() => {\n    const styles: Record<string, any> = {};\n\n    const width = convertToUnit(props.width);\n    const height = convertToUnit(props.height);\n    const maxWidth = convertToUnit(props.maxWidth);\n    const maxHeight = convertToUnit(props.maxHeight);\n    const minWidth = convertToUnit(props.minWidth);\n    const minHeight = convertToUnit(props.minHeight);\n\n    if (width != null) styles.width = width;\n    if (height != null) styles.height = height;\n    if (maxWidth != null) styles.maxWidth = maxWidth;\n    if (maxHeight != null) styles.maxHeight = maxHeight;\n    if (minWidth != null) styles.minWidth = minWidth;\n    if (minHeight != null) styles.minHeight = minHeight;\n\n    return styles;\n  });\n\n  return { dimensionStyles };\n}\n"],"names":[],"mappings":";;;AA0BO,MAAM,wBAAwB;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,OAAO;AAAA,MACL,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMX,QAAQ;AAAA,MACN,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMX,UAAU;AAAA,MACR,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMX,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMX,UAAU;AAAA,MACR,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMX,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF;AACF;AAaO,SAAS,cAAc,OAAwB;AACpD,QAAM,kBAAkB,SAAS,MAAM;AACrC,UAAM,SAA8B,CAAA;AAEpC,UAAM,QAAQ,cAAc,MAAM,KAAK;AACvC,UAAM,SAAS,cAAc,MAAM,MAAM;AACzC,UAAM,WAAW,cAAc,MAAM,QAAQ;AAC7C,UAAM,YAAY,cAAc,MAAM,SAAS;AAC/C,UAAM,WAAW,cAAc,MAAM,QAAQ;AAC7C,UAAM,YAAY,cAAc,MAAM,SAAS;AAE/C,QAAI,SAAS,KAAM,QAAO,QAAQ;AAClC,QAAI,UAAU,KAAM,QAAO,SAAS;AACpC,QAAI,YAAY,KAAM,QAAO,WAAW;AACxC,QAAI,aAAa,KAAM,QAAO,YAAY;AAC1C,QAAI,YAAY,KAAM,QAAO,WAAW;AACxC,QAAI,aAAa,KAAM,QAAO,YAAY;AAE1C,WAAO;AAAA,EACT,CAAC;AAED,SAAO,EAAE,gBAAA;AACX;"}

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

@@ -3,7 +3,10 @@ import { p as propsFactory } from "../../core/propsFactory.js";
 import { computed, toRef, toValue } from "vue";
 const defineDirectionProps = propsFactory(
   {
-    /** Переключение между горизонтальным или вертикальным отображением. */
+    /**
+     * Переключение между горизонтальным или вертикальным отображением.
+     * @en Switches the component between horizontal and vertical layout.
+     */
     direction: {
       type: String,
       default: "horizontal",

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

@@ -1 +1 @@
-{"version":3,"file":"useDirection.js","sources":["../../../../../src/composables/useDirection/useDirection.ts"],"sourcesContent":["import { getCurrentInstanceName, propsFactory } from '@cds/core';\nimport { computed, type ExtractPublicPropTypes, type PropType, toRef, toValue } from 'vue';\n\n/**\n * Factory function to define properties for directional components.\n *\n * @const {object} defineDirectionProps\n *\n * @property {string} direction\n * Specifies the orientation of the component. Accepts either 'horizontal' or 'vertical'.\n * Defaults to 'horizontal'. Validates against the allowed values 'horizontal' and 'vertical'.\n */\nexport const defineDirectionProps = propsFactory(\n  {\n    /** Переключение между горизонтальным или вертикальным отображением. */\n    direction: {\n      type: String as PropType<'horizontal' | 'vertical'>,\n      default: 'horizontal',\n      validator: (value: any) => ['horizontal', 'vertical'].includes(value)\n    }\n  },\n  'direction'\n);\n\nexport interface DirectionProps extends ExtractPublicPropTypes<ReturnType<typeof defineDirectionProps>> {}\n\n/**\n * Computes and provides direction-related properties based on the given props.\n *\n * @param {DirectionProps} props - The properties containing the current direction configuration.\n * @param {string} [name=getCurrentInstanceName()] - The name of the current instance, defaulting to the current instance name.\n * @return {Object} An object containing the computed direction states and corresponding CSS classes:\n *                  - `isHorizontal` (`ComputedRef<boolean>`): Indicates if the direction is horizontal.\n *                  - `isVertical` (`ComputedRef<boolean>`): Indicates if the direction is vertical.\n *                  - `directionClasses` (`Ref<Object>`): A reference to an object containing CSS class mappings for the direction.\n */\nexport function useDirection(props: DirectionProps, name = getCurrentInstanceName()) {\n  const isHorizontal = computed(() => props.direction === 'horizontal');\n  const isVertical = computed(() => props.direction === 'vertical');\n\n  const directionClasses = toRef(() => ({\n    [`${name}--${props.direction}`]: toValue(props).direction\n  }));\n\n  return {\n    isHorizontal,\n    isVertical,\n    directionClasses\n  };\n}\n"],"names":[],"mappings":";;;AAYO,MAAM,uBAAuB;AAAA,EAClC;AAAA;AAAA,IAEE,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,UAAe,CAAC,cAAc,UAAU,EAAE,SAAS,KAAK;AAAA,IAAA;AAAA,EACtE;AAAA,EAEF;AACF;AAcO,SAAS,aAAa,OAAuB,OAAO,0BAA0B;AACnF,QAAM,eAAe,SAAS,MAAM,MAAM,cAAc,YAAY;AACpE,QAAM,aAAa,SAAS,MAAM,MAAM,cAAc,UAAU;AAEhE,QAAM,mBAAmB,MAAM,OAAO;AAAA,IACpC,CAAC,GAAG,IAAI,KAAK,MAAM,SAAS,EAAE,GAAG,QAAQ,KAAK,EAAE;AAAA,EAAA,EAChD;AAEF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useDirection.js","sources":["../../../../../src/composables/useDirection/useDirection.ts"],"sourcesContent":["import { getCurrentInstanceName, propsFactory } from '@cds/core';\nimport { computed, type ExtractPublicPropTypes, type PropType, toRef, toValue } from 'vue';\n\n/**\n * Factory function to define properties for directional components.\n *\n * @const {object} defineDirectionProps\n *\n * @property {string} direction\n * Specifies the orientation of the component. Accepts either 'horizontal' or 'vertical'.\n * Defaults to 'horizontal'. Validates against the allowed values 'horizontal' and 'vertical'.\n */\nexport const defineDirectionProps = propsFactory(\n  {\n    /**\n     * Переключение между горизонтальным или вертикальным отображением.\n     * @en Switches the component between horizontal and vertical layout.\n     */\n    direction: {\n      type: String as PropType<'horizontal' | 'vertical'>,\n      default: 'horizontal',\n      validator: (value: any) => ['horizontal', 'vertical'].includes(value)\n    }\n  },\n  'direction'\n);\n\nexport interface DirectionProps extends ExtractPublicPropTypes<ReturnType<typeof defineDirectionProps>> {}\n\n/**\n * Computes and provides direction-related properties based on the given props.\n *\n * @param {DirectionProps} props - The properties containing the current direction configuration.\n * @param {string} [name=getCurrentInstanceName()] - The name of the current instance, defaulting to the current instance name.\n * @return {Object} An object containing the computed direction states and corresponding CSS classes:\n *                  - `isHorizontal` (`ComputedRef<boolean>`): Indicates if the direction is horizontal.\n *                  - `isVertical` (`ComputedRef<boolean>`): Indicates if the direction is vertical.\n *                  - `directionClasses` (`Ref<Object>`): A reference to an object containing CSS class mappings for the direction.\n */\nexport function useDirection(props: DirectionProps, name = getCurrentInstanceName()) {\n  const isHorizontal = computed(() => props.direction === 'horizontal');\n  const isVertical = computed(() => props.direction === 'vertical');\n\n  const directionClasses = toRef(() => ({\n    [`${name}--${props.direction}`]: toValue(props).direction\n  }));\n\n  return {\n    isHorizontal,\n    isVertical,\n    directionClasses\n  };\n}\n"],"names":[],"mappings":";;;AAYO,MAAM,uBAAuB;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,UAAe,CAAC,cAAc,UAAU,EAAE,SAAS,KAAK;AAAA,IAAA;AAAA,EACtE;AAAA,EAEF;AACF;AAcO,SAAS,aAAa,OAAuB,OAAO,0BAA0B;AACnF,QAAM,eAAe,SAAS,MAAM,MAAM,cAAc,YAAY;AACpE,QAAM,aAAa,SAAS,MAAM,MAAM,cAAc,UAAU;AAEhE,QAAM,mBAAmB,MAAM,OAAO;AAAA,IACpC,CAAC,GAAG,IAAI,KAAK,MAAM,SAAS,EAAE,GAAG,QAAQ,KAAK,EAAE;AAAA,EAAA,EAChD;AAEF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

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

@@ -3,7 +3,10 @@ import { p as propsFactory } from "../../core/propsFactory.js";
 import { toRef, toValue } from "vue";
 const defineDisabledProps = propsFactory(
   {
-    /** Заблокированное состояние */
+    /**
+     * Заблокированное состояние
+     * @en Disabled state
+     */
     disabled: {
       type: Boolean,
       default: null

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

@@ -1 +1 @@
-{"version":3,"file":"useDisabled.js","sources":["../../../../../src/composables/useDisabled/useDisabled.ts"],"sourcesContent":["import { getCurrentInstanceName, propsFactory } from '@cds/core';\nimport { type ExtractPublicPropTypes, type PropType, toRef, toValue } from 'vue';\n\n/**\n * Factory function for defining properties related to the disabled state.\n *\n * The `defineDisabledProps` object generates a set of props allowing components\n * to handle a disabled state. These props can be used within Vue components\n * to standardize how `disabled` functionality is implemented and applied.\n *\n * @constant {Object} defineDisabledProps - The generated props object for handling the `disabled` state.\n * @property {boolean} disabled - Determines whether the component is in a disabled state. Defaults to `null`.\n */\nexport const defineDisabledProps = propsFactory(\n  {\n    /** Заблокированное состояние */\n    disabled: {\n      type: Boolean as PropType<boolean | null>,\n      default: null\n    }\n  },\n  'disabled'\n);\n\nexport type DisabledProps = ExtractPublicPropTypes<ReturnType<typeof defineDisabledProps>>;\n\n/**\n * A composable function that generates a reactive class mapping for a disabled state.\n *\n * @param {DisabledProps} props - An object containing properties related to the disabled state.\n * @param {string} [name=getCurrentInstanceName()] - The name of the current instance, used to prefix the class name.\n * @return {{ disabledClasses: Object }} An object containing a reactive class mapping for the disabled state.\n */\nexport function useDisabled(props: DisabledProps, name = getCurrentInstanceName()) {\n  const disabledClasses = toRef(() => ({\n    [`${name}--disabled`]: toValue(props).disabled\n  }));\n\n  return { disabledClasses };\n}\n"],"names":[],"mappings":";;;AAaO,MAAM,sBAAsB;AAAA,EACjC;AAAA;AAAA,IAEE,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF;AACF;AAWO,SAAS,YAAY,OAAsB,OAAO,0BAA0B;AACjF,QAAM,kBAAkB,MAAM,OAAO;AAAA,IACnC,CAAC,GAAG,IAAI,YAAY,GAAG,QAAQ,KAAK,EAAE;AAAA,EAAA,EACtC;AAEF,SAAO,EAAE,gBAAA;AACX;"}
+{"version":3,"file":"useDisabled.js","sources":["../../../../../src/composables/useDisabled/useDisabled.ts"],"sourcesContent":["import { getCurrentInstanceName, propsFactory } from '@cds/core';\nimport { type ExtractPublicPropTypes, type PropType, toRef, toValue } from 'vue';\n\n/**\n * Factory function for defining properties related to the disabled state.\n *\n * The `defineDisabledProps` object generates a set of props allowing components\n * to handle a disabled state. These props can be used within Vue components\n * to standardize how `disabled` functionality is implemented and applied.\n *\n * @constant {Object} defineDisabledProps - The generated props object for handling the `disabled` state.\n * @property {boolean} disabled - Determines whether the component is in a disabled state. Defaults to `null`.\n */\nexport const defineDisabledProps = propsFactory(\n  {\n    /**\n     * Заблокированное состояние\n     * @en Disabled state\n     */\n    disabled: {\n      type: Boolean as PropType<boolean | null>,\n      default: null\n    }\n  },\n  'disabled'\n);\n\nexport type DisabledProps = ExtractPublicPropTypes<ReturnType<typeof defineDisabledProps>>;\n\n/**\n * A composable function that generates a reactive class mapping for a disabled state.\n *\n * @param {DisabledProps} props - An object containing properties related to the disabled state.\n * @param {string} [name=getCurrentInstanceName()] - The name of the current instance, used to prefix the class name.\n * @return {{ disabledClasses: Object }} An object containing a reactive class mapping for the disabled state.\n */\nexport function useDisabled(props: DisabledProps, name = getCurrentInstanceName()) {\n  const disabledClasses = toRef(() => ({\n    [`${name}--disabled`]: toValue(props).disabled\n  }));\n\n  return { disabledClasses };\n}\n"],"names":[],"mappings":";;;AAaO,MAAM,sBAAsB;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF;AACF;AAWO,SAAS,YAAY,OAAsB,OAAO,0BAA0B;AACjF,QAAM,kBAAkB,MAAM,OAAO;AAAA,IACnC,CAAC,GAAG,IAAI,YAAY,GAAG,QAAQ,KAAK,EAAE;AAAA,EAAA,EACtC;AAEF,SAAO,EAAE,gBAAA;AACX;"}

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

@@ -10,6 +10,7 @@ const defineDisplayProps = propsFactory(
      * Если значение равно true, компонент будет отображаться в режиме для Mobile.
      * Если значение равно false, компонент будет отображаться в режиме для Desktop.
      * Если значение равно null, режим будет зависеть от текущего Breakpoint.
+     * @en Determines the display mode of the component: `true` renders it in mobile mode, `false` in desktop mode, `null` makes the mode depend on the current breakpoint.
      */
     mobile: {
       type: Boolean,
@@ -17,6 +18,7 @@ const defineDisplayProps = propsFactory(
     },
     /** Указывает точку преломления, при которой отображение будет переключаться в мобильный режим.
      * Может быть числом (например, 600) или строкой, соответствующей одному из предопределенных Breakpoint (например, 'xs', 'sm', 'md', 'lg', 'xl').
+     * @en Sets the breakpoint at which the component switches to mobile mode. Accepts a number (for example, 600) or the name of a predefined breakpoint (`xs`, `sm`, `md`, `lg`, `xl`).
      */
     mobileBreakpoint: [Number, String]
   },

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

@@ -1 +1 @@
-{"version":3,"file":"useDisplay.js","sources":["../../../../../src/composables/useDisplay/useDisplay.ts"],"sourcesContent":["import { getCurrentInstanceName, propsFactory } from '@cds/core';\nimport { IN_BROWSER } from '@cds/utils';\nimport {\n  computed,\n  type ExtractPublicPropTypes,\n  inject,\n  onScopeDispose,\n  type PropType,\n  reactive,\n  shallowRef,\n  toRef,\n  toRefs,\n  unref,\n  watchEffect\n} from 'vue';\n\nimport { DisplaySymbol } from './internal/useDisplay.constants';\nimport { getClientHeight, getClientWidth, getPlatform, parseDisplayOptions } from './internal/useDisplay.helpers';\nimport type { Breakpoint, DisplayInstance, DisplayOptions, SSROptions } from './internal/useDisplay.types';\n\n/**\n * Factory function for defining display-related properties.\n *\n * @typedef {Object} DisplayProps\n * @property {boolean | null} mobile - Determines if the display should adapt to mobile devices. Defaults to `false`.\n * @property {number | string} [mobileBreakpoint] - Specifies the breakpoint at which the display will switch to mobile view. Accepts a number or a named breakpoint.\n *\n * @param {string} namespace - The namespace for the property definitions.\n * @returns {DisplayProps} An object containing properties relevant to display configurations.\n */\nexport const defineDisplayProps = propsFactory(\n  {\n    /** Определяет режим отображения компонента:\n     * Если значение равно true, компонент будет отображаться в режиме для Mobile.\n     * Если значение равно false, компонент будет отображаться в режиме для Desktop.\n     * Если значение равно null, режим будет зависеть от текущего Breakpoint.\n     */\n    mobile: {\n      type: Boolean as PropType<boolean | null>,\n      default: false\n    },\n    /** Указывает точку преломления, при которой отображение будет переключаться в мобильный режим.\n     * Может быть числом (например, 600) или строкой, соответствующей одному из предопределенных Breakpoint (например, 'xs', 'sm', 'md', 'lg', 'xl').\n     */\n    mobileBreakpoint: [Number, String] as PropType<number | Breakpoint>\n  },\n  'display'\n);\n\nexport interface DisplayProps extends ExtractPublicPropTypes<ReturnType<typeof defineDisplayProps>> {}\n\n/**\n * Creates a display instance with reactive values for screen dimensions and platform information.\n *\n * @param {DisplayOptions} [options] Optional settings for display configurations, including thresholds and mobile breakpoints.\n * @param {SSROptions} [ssr] Optional server-side rendering configurations for initial screen dimensions and platform data.\n * @return {DisplayInstance} A reactive display instance containing screen dimension, breakpoint, and platform information.\n */\nexport function createDisplay(options?: DisplayOptions, ssr?: SSROptions): DisplayInstance {\n  const { thresholds, mobileBreakpoint } = parseDisplayOptions(options);\n\n  const width = shallowRef(getClientWidth(ssr));\n  const height = shallowRef(getClientHeight(ssr));\n  const platform = shallowRef(getPlatform(ssr));\n\n  const screenWidth = shallowRef(IN_BROWSER ? window.innerWidth : 0);\n  const screenHeight = shallowRef(IN_BROWSER ? window.innerHeight : 0);\n\n  const state = reactive<DisplayInstance>({} as DisplayInstance);\n\n  watchEffect(() => {\n    const xs = width.value < thresholds.sm;\n    const sm = width.value < thresholds.md && !xs;\n    const md = width.value < thresholds.lg && !(sm || xs);\n    const lg = width.value < thresholds.xl && !(md || sm || xs);\n    const xl = width.value >= thresholds.xl;\n\n    const name = xs ? 'xs' : sm ? 'sm' : md ? 'md' : lg ? 'lg' : 'xl';\n    const breakpointValue = typeof mobileBreakpoint === 'number' ? mobileBreakpoint : thresholds[mobileBreakpoint];\n    const mobile = width.value < breakpointValue;\n\n    state.xs = xs;\n    state.sm = sm;\n    state.md = md;\n    state.lg = lg;\n    state.xl = xl;\n    state.smUp = !xs;\n    state.mdUp = !(xs || sm);\n    state.lgUp = !(xs || sm || md);\n    state.xlUp = !(xs || sm || md || lg);\n    state.smDown = !(md || lg || xl);\n    state.mdDown = !(lg || xl);\n    state.lgDown = !xl;\n    state.xlDown = true;\n    state.name = name;\n    state.height = height.value;\n    state.width = width.value;\n    state.mobile = mobile;\n    state.mobileBreakpoint = mobileBreakpoint;\n    state.platform = platform.value;\n    state.thresholds = thresholds;\n    state.screenWidth = screenWidth.value;\n    state.screenHeight = screenHeight.value;\n  });\n\n  if (IN_BROWSER) {\n    window.addEventListener('resize', updateSize, { passive: true });\n\n    onScopeDispose(() => {\n      window.removeEventListener('resize', updateSize);\n    }, true);\n  }\n\n  function updateSize() {\n    height.value = getClientHeight();\n    width.value = getClientWidth();\n  }\n\n  function update() {\n    updateSize();\n    platform.value = getPlatform();\n  }\n\n  return { ...toRefs(state), update, ssr: !!ssr };\n}\n\n/**\n * A composable function that manages and provides display-related utilities,\n * including responsiveness and custom mobile breakpoint handling.\n *\n * @param {DisplayProps} props - The configuration object containing the display properties,\n * such as `mobile` and `mobileBreakpoint`.\n * @param {string} [name=getCurrentInstanceName()] - The name of the current instance. If not provided,\n * it defaults to the result of the `getCurrentInstanceName` function.\n * @return {object} An object containing display-related utilities:\n * - `display`: The injected display object.\n * - `displayClasses`: A reactive reference to display-specific classes, like mobile-specific classes.\n * - `mobile`: A reactive computed property indicating whether the display is in a mobile state\n * based on the provided breakpoints or other criteria in `props`.\n * @throws {Error} If the injection for `cds:display` is not found.\n */\nexport function useDisplay(props: DisplayProps = { mobile: null }, name = getCurrentInstanceName()) {\n  const display = inject(DisplaySymbol);\n\n  if (!display) {\n    throw new Error('[CDS] Could not find `cds:display` injection key. Are you missing the createDisplay function?');\n  }\n\n  const mobile = computed(() => {\n    if (props.mobile) {\n      return true;\n    } else if (typeof props.mobileBreakpoint === 'number') {\n      return display.width.value < props.mobileBreakpoint;\n    } else if (props.mobileBreakpoint) {\n      return display.width.value < display.thresholds.value[props.mobileBreakpoint];\n    } else if (props.mobile === null) {\n      return display.mobile.value;\n    } else {\n      return false;\n    }\n  });\n\n  const displayClasses = toRef(() => {\n    if (!name) return {};\n\n    return { [`${name}--mobile`]: unref(mobile) };\n  });\n\n  return { ...display, displayClasses, mobile };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useDisplay.js","sources":["../../../../../src/composables/useDisplay/useDisplay.ts"],"sourcesContent":["import { getCurrentInstanceName, propsFactory } from '@cds/core';\nimport { IN_BROWSER } from '@cds/utils';\nimport {\n  computed,\n  type ExtractPublicPropTypes,\n  inject,\n  onScopeDispose,\n  type PropType,\n  reactive,\n  shallowRef,\n  toRef,\n  toRefs,\n  unref,\n  watchEffect\n} from 'vue';\n\nimport { DisplaySymbol } from './internal/useDisplay.constants';\nimport { getClientHeight, getClientWidth, getPlatform, parseDisplayOptions } from './internal/useDisplay.helpers';\nimport type { Breakpoint, DisplayInstance, DisplayOptions, SSROptions } from './internal/useDisplay.types';\n\n/**\n * Factory function for defining display-related properties.\n *\n * @typedef {Object} DisplayProps\n * @property {boolean | null} mobile - Determines if the display should adapt to mobile devices. Defaults to `false`.\n * @property {number | string} [mobileBreakpoint] - Specifies the breakpoint at which the display will switch to mobile view. Accepts a number or a named breakpoint.\n *\n * @param {string} namespace - The namespace for the property definitions.\n * @returns {DisplayProps} An object containing properties relevant to display configurations.\n */\nexport const defineDisplayProps = propsFactory(\n  {\n    /** Определяет режим отображения компонента:\n     * Если значение равно true, компонент будет отображаться в режиме для Mobile.\n     * Если значение равно false, компонент будет отображаться в режиме для Desktop.\n     * Если значение равно null, режим будет зависеть от текущего Breakpoint.\n     * @en Determines the display mode of the component: `true` renders it in mobile mode, `false` in desktop mode, `null` makes the mode depend on the current breakpoint.\n     */\n    mobile: {\n      type: Boolean as PropType<boolean | null>,\n      default: false\n    },\n    /** Указывает точку преломления, при которой отображение будет переключаться в мобильный режим.\n     * Может быть числом (например, 600) или строкой, соответствующей одному из предопределенных Breakpoint (например, 'xs', 'sm', 'md', 'lg', 'xl').\n     * @en Sets the breakpoint at which the component switches to mobile mode. Accepts a number (for example, 600) or the name of a predefined breakpoint (`xs`, `sm`, `md`, `lg`, `xl`).\n     */\n    mobileBreakpoint: [Number, String] as PropType<number | Breakpoint>\n  },\n  'display'\n);\n\nexport interface DisplayProps extends ExtractPublicPropTypes<ReturnType<typeof defineDisplayProps>> {}\n\n/**\n * Creates a display instance with reactive values for screen dimensions and platform information.\n *\n * @param {DisplayOptions} [options] Optional settings for display configurations, including thresholds and mobile breakpoints.\n * @param {SSROptions} [ssr] Optional server-side rendering configurations for initial screen dimensions and platform data.\n * @return {DisplayInstance} A reactive display instance containing screen dimension, breakpoint, and platform information.\n */\nexport function createDisplay(options?: DisplayOptions, ssr?: SSROptions): DisplayInstance {\n  const { thresholds, mobileBreakpoint } = parseDisplayOptions(options);\n\n  const width = shallowRef(getClientWidth(ssr));\n  const height = shallowRef(getClientHeight(ssr));\n  const platform = shallowRef(getPlatform(ssr));\n\n  const screenWidth = shallowRef(IN_BROWSER ? window.innerWidth : 0);\n  const screenHeight = shallowRef(IN_BROWSER ? window.innerHeight : 0);\n\n  const state = reactive<DisplayInstance>({} as DisplayInstance);\n\n  watchEffect(() => {\n    const xs = width.value < thresholds.sm;\n    const sm = width.value < thresholds.md && !xs;\n    const md = width.value < thresholds.lg && !(sm || xs);\n    const lg = width.value < thresholds.xl && !(md || sm || xs);\n    const xl = width.value >= thresholds.xl;\n\n    const name = xs ? 'xs' : sm ? 'sm' : md ? 'md' : lg ? 'lg' : 'xl';\n    const breakpointValue = typeof mobileBreakpoint === 'number' ? mobileBreakpoint : thresholds[mobileBreakpoint];\n    const mobile = width.value < breakpointValue;\n\n    state.xs = xs;\n    state.sm = sm;\n    state.md = md;\n    state.lg = lg;\n    state.xl = xl;\n    state.smUp = !xs;\n    state.mdUp = !(xs || sm);\n    state.lgUp = !(xs || sm || md);\n    state.xlUp = !(xs || sm || md || lg);\n    state.smDown = !(md || lg || xl);\n    state.mdDown = !(lg || xl);\n    state.lgDown = !xl;\n    state.xlDown = true;\n    state.name = name;\n    state.height = height.value;\n    state.width = width.value;\n    state.mobile = mobile;\n    state.mobileBreakpoint = mobileBreakpoint;\n    state.platform = platform.value;\n    state.thresholds = thresholds;\n    state.screenWidth = screenWidth.value;\n    state.screenHeight = screenHeight.value;\n  });\n\n  if (IN_BROWSER) {\n    window.addEventListener('resize', updateSize, { passive: true });\n\n    onScopeDispose(() => {\n      window.removeEventListener('resize', updateSize);\n    }, true);\n  }\n\n  function updateSize() {\n    height.value = getClientHeight();\n    width.value = getClientWidth();\n  }\n\n  function update() {\n    updateSize();\n    platform.value = getPlatform();\n  }\n\n  return { ...toRefs(state), update, ssr: !!ssr };\n}\n\n/**\n * A composable function that manages and provides display-related utilities,\n * including responsiveness and custom mobile breakpoint handling.\n *\n * @param {DisplayProps} props - The configuration object containing the display properties,\n * such as `mobile` and `mobileBreakpoint`.\n * @param {string} [name=getCurrentInstanceName()] - The name of the current instance. If not provided,\n * it defaults to the result of the `getCurrentInstanceName` function.\n * @return {object} An object containing display-related utilities:\n * - `display`: The injected display object.\n * - `displayClasses`: A reactive reference to display-specific classes, like mobile-specific classes.\n * - `mobile`: A reactive computed property indicating whether the display is in a mobile state\n * based on the provided breakpoints or other criteria in `props`.\n * @throws {Error} If the injection for `cds:display` is not found.\n */\nexport function useDisplay(props: DisplayProps = { mobile: null }, name = getCurrentInstanceName()) {\n  const display = inject(DisplaySymbol);\n\n  if (!display) {\n    throw new Error('[CDS] Could not find `cds:display` injection key. Are you missing the createDisplay function?');\n  }\n\n  const mobile = computed(() => {\n    if (props.mobile) {\n      return true;\n    } else if (typeof props.mobileBreakpoint === 'number') {\n      return display.width.value < props.mobileBreakpoint;\n    } else if (props.mobileBreakpoint) {\n      return display.width.value < display.thresholds.value[props.mobileBreakpoint];\n    } else if (props.mobile === null) {\n      return display.mobile.value;\n    } else {\n      return false;\n    }\n  });\n\n  const displayClasses = toRef(() => {\n    if (!name) return {};\n\n    return { [`${name}--mobile`]: unref(mobile) };\n  });\n\n  return { ...display, displayClasses, mobile };\n}\n"],"names":[],"mappings":"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"}

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

@@ -3,13 +3,33 @@ import { ac as wrapInArray, M as getPropertyFromItem } from "../../utils/helpers
 import { shallowRef, computed, unref, watchEffect } from "vue";
 const defineFilterProps = propsFactory(
   {
+    /**
+     * Своя функция фильтрации значений. Получает значение, поисковый запрос и элемент, возвращает совпадение или `-1`
+     * @en Your own value filtering function. Receives the value, the search query and the item, returns a match or `-1`
+     */
     customFilter: Function,
+    /**
+     * Отдельные функции фильтрации для конкретных ключей элемента — объект вида `{ ключ: функция }`
+     * @en Separate filtering functions for specific item keys — an object of the form `{ key: function }`
+     */
     customKeyFilter: Object,
+    /**
+     * Ключи элемента, по которым идёт поиск. По умолчанию фильтрация идёт по заголовку элемента
+     * @en Item keys the search runs over. By default filtering goes by the item title
+     */
     filterKeys: [Array, String],
+    /**
+     * Как объединяются результаты `customKeyFilter` и общей фильтрации: пересечением, объединением или заменой
+     * @en How the results of `customKeyFilter` and of the general filtering are combined: by intersection, by union or by replacement
+     */
     filterMode: {
       type: String,
       default: "intersection"
     },
+    /**
+     * Отключает встроенную фильтрацию — список показывается как есть, поиск обрабатывается снаружи
+     * @en Turns off the built-in filtering — the list is shown as is, the search is handled outside
+     */
     noFilter: Boolean
   },
   "filter"

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.js","sources":["../../../../../src/composables/useFocus/useFocusTrap.ts"],"sourcesContent":["import { propsFactory } from '@cds/core';\nimport { focusableChildren, IN_BROWSER } from '@cds/utils';\nimport { type ExtractPublicPropTypes, nextTick, onScopeDispose, type Ref, toRef, toValue, watch } from 'vue';\n\nexport const defineFocusTrapProps = propsFactory(\n  {\n    /** Замыкает Tab-навигацию внутри контента: с последнего фокусируемого элемента фокус переходит на первый и наоборот. */\n    retainFocus: Boolean,\n    /** Возвращает фокус внутрь контента, если он ушёл за его пределы — например, по Tab с конца страницы. Клик мышью фокус не перехватывает. */\n    captureFocus: Boolean\n  },\n  'focus-trap'\n);\n\nexport interface FocusTrapProps extends ExtractPublicPropTypes<ReturnType<typeof defineFocusTrapProps>> {}\n\nconst registry = new Map<\n  symbol,\n  {\n    isActive: Ref<boolean>;\n    contentEl: Ref<HTMLElement | undefined>;\n  }\n>();\nlet subscribers = 0;\n\n/**\n * Manages focus trapping within a specific DOM element. This method ensures that focus remains within the designated element\n * when active, preventing focus from escaping to other parts of the document.\n *\n * @param {FocusTrapProps} props - Configuration options for the focus trap behavior, such as whether to retain or capture focus.\n * @param {Object} options - Additional parameters for managing focus trap functionality.\n * @param {Ref<boolean>} options.isActive - A reactive reference indicating if the focus trap is currently active.\n * @param {Readonly<Ref<boolean>>} options.localTop - A reactive flag determining if the current trap context is at the local top.\n * @param {Readonly<Ref<HTMLElement | undefined>>} [options.activatorEl] - A reactive reference to the element that activates the focus trap. Optional.\n * @param {Readonly<Ref<HTMLElement | undefined>>} options.contentEl - A reactive reference to the primary content element to focus within.\n *\n * @return {void} This method does not return any value.\n */\nexport function useFocusTrap(\n  props: FocusTrapProps,\n  {\n    isActive,\n    localTop,\n    contentEl\n  }: {\n    isActive: Ref<boolean>;\n    localTop: Readonly<Ref<boolean>>;\n    activatorEl?: Readonly<Ref<HTMLElement | undefined>>;\n    contentEl: Readonly<Ref<HTMLElement | undefined>>;\n  }\n) {\n  const trapId = Symbol('trap');\n\n  let focusTrapSuppressed = false;\n  let focusTrapSuppressionTimeout = -1;\n\n  async function onPointerdown() {\n    focusTrapSuppressed = true;\n    focusTrapSuppressionTimeout = window.setTimeout(() => {\n      focusTrapSuppressed = false;\n    }, 100);\n  }\n\n  async function captureOnFocus(e: FocusEvent) {\n    const before = e.relatedTarget as HTMLElement | null;\n    const after = e.target as HTMLElement | null;\n\n    document.removeEventListener('pointerdown', onPointerdown);\n    document.removeEventListener('keydown', captureOnKeydown);\n\n    await nextTick();\n\n    if (\n      isActive.value &&\n      !focusTrapSuppressed &&\n      before !== after &&\n      contentEl.value &&\n      // We're the menu without open submenus or overlays\n      toValue(localTop) &&\n      // It isn't the document or the container body\n      ![document, contentEl.value].includes(after!) &&\n      // It isn't inside the container body\n      !contentEl.value.contains(after)\n    ) {\n      const focusable = focusableChildren(contentEl.value);\n      focusable[0]?.focus();\n    }\n  }\n\n  function captureOnKeydown(e: KeyboardEvent) {\n    if (e.key !== 'Tab') return;\n    document.removeEventListener('keydown', captureOnKeydown);\n\n    if (isActive.value && contentEl.value && e.target && !contentEl.value.contains(e.target as Element)) {\n      const allFocusableElements = focusableChildren(document.documentElement);\n\n      if (\n        (e.shiftKey && e.target === allFocusableElements.at(0)) ||\n        (!e.shiftKey && e.target === allFocusableElements.at(-1))\n      ) {\n        const focusable = focusableChildren(contentEl.value);\n        if (focusable.length > 0) {\n          e.preventDefault();\n          focusable[0].focus();\n        }\n      }\n    }\n  }\n\n  const shouldCapture = toRef(() => isActive.value && props.captureFocus);\n\n  if (IN_BROWSER) {\n    watch(\n      () => props.retainFocus,\n      (val) => {\n        if (val) {\n          registry.set(trapId, { isActive, contentEl });\n        } else {\n          registry.delete(trapId);\n        }\n      },\n      { immediate: true }\n    );\n\n    watch(\n      shouldCapture,\n      (val) => {\n        if (val) {\n          document.addEventListener('pointerdown', onPointerdown);\n          document.addEventListener('focusin', captureOnFocus, { once: true });\n          document.addEventListener('keydown', captureOnKeydown);\n        } else {\n          document.removeEventListener('pointerdown', onPointerdown);\n          document.removeEventListener('focusin', captureOnFocus);\n          document.removeEventListener('keydown', captureOnKeydown);\n        }\n      },\n      { immediate: true }\n    );\n\n    if (subscribers++ < 1) {\n      document.addEventListener('keydown', onKeydown);\n    }\n  }\n\n  onScopeDispose(() => {\n    registry.delete(trapId);\n    clearTimeout(focusTrapSuppressionTimeout);\n    document.removeEventListener('pointerdown', onPointerdown);\n    document.removeEventListener('focusin', captureOnFocus);\n    document.removeEventListener('keydown', captureOnKeydown);\n\n    if (--subscribers < 1) {\n      document.removeEventListener('keydown', onKeydown);\n    }\n  });\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  const activeElement = document.activeElement as HTMLElement | null;\n  if (e.key !== 'Tab' || !activeElement) return;\n\n  const parentTraps = Array.from(registry.values())\n    .filter(({ isActive, contentEl }) => isActive.value && contentEl.value?.contains(activeElement))\n    .map((x) => x.contentEl.value);\n\n  let closestTrap;\n  let currentParent = activeElement.parentElement;\n  while (currentParent) {\n    if (parentTraps.includes(currentParent)) {\n      closestTrap = currentParent;\n      break;\n    }\n    currentParent = currentParent.parentElement;\n  }\n\n  if (!closestTrap) return;\n\n  const focusable = focusableChildren(closestTrap)\n    // excluding VListItems with tabindex=\"-2\"\n    .filter((x) => x.tabIndex >= 0);\n\n  if (!focusable.length) return;\n\n  const active = document.activeElement as HTMLElement | null;\n  if (focusable.length === 1 && focusable[0].classList.contains('v-list') && focusable[0].contains(active)) {\n    e.preventDefault();\n    return;\n  }\n\n  const firstElement = focusable[0];\n  const lastElement = focusable[focusable.length - 1];\n\n  if (\n    e.shiftKey &&\n    (active === firstElement || (firstElement.classList.contains('v-list') && firstElement.contains(active)))\n  ) {\n    e.preventDefault();\n    lastElement.focus();\n  }\n\n  if (\n    !e.shiftKey &&\n    (active === lastElement || (lastElement.classList.contains('v-list') && lastElement.contains(active)))\n  ) {\n    e.preventDefault();\n    firstElement.focus();\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useFocusTrap.js","sources":["../../../../../src/composables/useFocus/useFocusTrap.ts"],"sourcesContent":["import { propsFactory } from '@cds/core';\nimport { focusableChildren, IN_BROWSER } from '@cds/utils';\nimport { type ExtractPublicPropTypes, nextTick, onScopeDispose, type Ref, toRef, toValue, watch } from 'vue';\n\nexport const defineFocusTrapProps = propsFactory(\n  {\n    /**\n     * Замыкает Tab-навигацию внутри контента: с последнего фокусируемого элемента фокус переходит на первый и наоборот.\n     * @en Traps Tab navigation inside the content: from the last focusable element the focus moves to the first one and back.\n     */\n    retainFocus: Boolean,\n    /**\n     * Возвращает фокус внутрь контента, если он ушёл за его пределы — например, по Tab с конца страницы. Клик мышью фокус не перехватывает.\n     * @en Returns the focus back into the content if it has left it — for example on Tab from the end of the page. A mouse click does not steal the focus.\n     */\n    captureFocus: Boolean\n  },\n  'focus-trap'\n);\n\nexport interface FocusTrapProps extends ExtractPublicPropTypes<ReturnType<typeof defineFocusTrapProps>> {}\n\nconst registry = new Map<\n  symbol,\n  {\n    isActive: Ref<boolean>;\n    contentEl: Ref<HTMLElement | undefined>;\n  }\n>();\nlet subscribers = 0;\n\n/**\n * Manages focus trapping within a specific DOM element. This method ensures that focus remains within the designated element\n * when active, preventing focus from escaping to other parts of the document.\n *\n * @param {FocusTrapProps} props - Configuration options for the focus trap behavior, such as whether to retain or capture focus.\n * @param {Object} options - Additional parameters for managing focus trap functionality.\n * @param {Ref<boolean>} options.isActive - A reactive reference indicating if the focus trap is currently active.\n * @param {Readonly<Ref<boolean>>} options.localTop - A reactive flag determining if the current trap context is at the local top.\n * @param {Readonly<Ref<HTMLElement | undefined>>} [options.activatorEl] - A reactive reference to the element that activates the focus trap. Optional.\n * @param {Readonly<Ref<HTMLElement | undefined>>} options.contentEl - A reactive reference to the primary content element to focus within.\n *\n * @return {void} This method does not return any value.\n */\nexport function useFocusTrap(\n  props: FocusTrapProps,\n  {\n    isActive,\n    localTop,\n    contentEl\n  }: {\n    isActive: Ref<boolean>;\n    localTop: Readonly<Ref<boolean>>;\n    activatorEl?: Readonly<Ref<HTMLElement | undefined>>;\n    contentEl: Readonly<Ref<HTMLElement | undefined>>;\n  }\n) {\n  const trapId = Symbol('trap');\n\n  let focusTrapSuppressed = false;\n  let focusTrapSuppressionTimeout = -1;\n\n  async function onPointerdown() {\n    focusTrapSuppressed = true;\n    focusTrapSuppressionTimeout = window.setTimeout(() => {\n      focusTrapSuppressed = false;\n    }, 100);\n  }\n\n  async function captureOnFocus(e: FocusEvent) {\n    const before = e.relatedTarget as HTMLElement | null;\n    const after = e.target as HTMLElement | null;\n\n    document.removeEventListener('pointerdown', onPointerdown);\n    document.removeEventListener('keydown', captureOnKeydown);\n\n    await nextTick();\n\n    if (\n      isActive.value &&\n      !focusTrapSuppressed &&\n      before !== after &&\n      contentEl.value &&\n      // We're the menu without open submenus or overlays\n      toValue(localTop) &&\n      // It isn't the document or the container body\n      ![document, contentEl.value].includes(after!) &&\n      // It isn't inside the container body\n      !contentEl.value.contains(after)\n    ) {\n      const focusable = focusableChildren(contentEl.value);\n      focusable[0]?.focus();\n    }\n  }\n\n  function captureOnKeydown(e: KeyboardEvent) {\n    if (e.key !== 'Tab') return;\n    document.removeEventListener('keydown', captureOnKeydown);\n\n    if (isActive.value && contentEl.value && e.target && !contentEl.value.contains(e.target as Element)) {\n      const allFocusableElements = focusableChildren(document.documentElement);\n\n      if (\n        (e.shiftKey && e.target === allFocusableElements.at(0)) ||\n        (!e.shiftKey && e.target === allFocusableElements.at(-1))\n      ) {\n        const focusable = focusableChildren(contentEl.value);\n        if (focusable.length > 0) {\n          e.preventDefault();\n          focusable[0].focus();\n        }\n      }\n    }\n  }\n\n  const shouldCapture = toRef(() => isActive.value && props.captureFocus);\n\n  if (IN_BROWSER) {\n    watch(\n      () => props.retainFocus,\n      (val) => {\n        if (val) {\n          registry.set(trapId, { isActive, contentEl });\n        } else {\n          registry.delete(trapId);\n        }\n      },\n      { immediate: true }\n    );\n\n    watch(\n      shouldCapture,\n      (val) => {\n        if (val) {\n          document.addEventListener('pointerdown', onPointerdown);\n          document.addEventListener('focusin', captureOnFocus, { once: true });\n          document.addEventListener('keydown', captureOnKeydown);\n        } else {\n          document.removeEventListener('pointerdown', onPointerdown);\n          document.removeEventListener('focusin', captureOnFocus);\n          document.removeEventListener('keydown', captureOnKeydown);\n        }\n      },\n      { immediate: true }\n    );\n\n    if (subscribers++ < 1) {\n      document.addEventListener('keydown', onKeydown);\n    }\n  }\n\n  onScopeDispose(() => {\n    registry.delete(trapId);\n    clearTimeout(focusTrapSuppressionTimeout);\n    document.removeEventListener('pointerdown', onPointerdown);\n    document.removeEventListener('focusin', captureOnFocus);\n    document.removeEventListener('keydown', captureOnKeydown);\n\n    if (--subscribers < 1) {\n      document.removeEventListener('keydown', onKeydown);\n    }\n  });\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  const activeElement = document.activeElement as HTMLElement | null;\n  if (e.key !== 'Tab' || !activeElement) return;\n\n  const parentTraps = Array.from(registry.values())\n    .filter(({ isActive, contentEl }) => isActive.value && contentEl.value?.contains(activeElement))\n    .map((x) => x.contentEl.value);\n\n  let closestTrap;\n  let currentParent = activeElement.parentElement;\n  while (currentParent) {\n    if (parentTraps.includes(currentParent)) {\n      closestTrap = currentParent;\n      break;\n    }\n    currentParent = currentParent.parentElement;\n  }\n\n  if (!closestTrap) return;\n\n  const focusable = focusableChildren(closestTrap)\n    // excluding VListItems with tabindex=\"-2\"\n    .filter((x) => x.tabIndex >= 0);\n\n  if (!focusable.length) return;\n\n  const active = document.activeElement as HTMLElement | null;\n  if (focusable.length === 1 && focusable[0].classList.contains('v-list') && focusable[0].contains(active)) {\n    e.preventDefault();\n    return;\n  }\n\n  const firstElement = focusable[0];\n  const lastElement = focusable[focusable.length - 1];\n\n  if (\n    e.shiftKey &&\n    (active === firstElement || (firstElement.classList.contains('v-list') && firstElement.contains(active)))\n  ) {\n    e.preventDefault();\n    lastElement.focus();\n  }\n\n  if (\n    !e.shiftKey &&\n    (active === lastElement || (lastElement.classList.contains('v-list') && lastElement.contains(active)))\n  ) {\n    e.preventDefault();\n    firstElement.focus();\n  }\n}\n"],"names":[],"mappings":";;;;AAIO,MAAM,uBAAuB;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,IAKb,cAAc;AAAA,EAAA;AAAA,EAEhB;AACF;AAIA,MAAM,+BAAe,IAAA;AAOrB,IAAI,cAAc;AAeX,SAAS,aACd,OACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AACF,GAMA;AACA,QAAM,SAAS,OAAO,MAAM;AAE5B,MAAI,sBAAsB;AAC1B,MAAI,8BAA8B;AAElC,iBAAe,gBAAgB;AAC7B,0BAAsB;AACtB,kCAA8B,OAAO,WAAW,MAAM;AACpD,4BAAsB;AAAA,IACxB,GAAG,GAAG;AAAA,EACR;AAEA,iBAAe,eAAe,GAAe;;AAC3C,UAAM,SAAS,EAAE;AACjB,UAAM,QAAQ,EAAE;AAEhB,aAAS,oBAAoB,eAAe,aAAa;AACzD,aAAS,oBAAoB,WAAW,gBAAgB;AAExD,UAAM,SAAA;AAEN,QACE,SAAS,SACT,CAAC,uBACD,WAAW,SACX,UAAU;AAAA,IAEV,QAAQ,QAAQ;AAAA,IAEhB,CAAC,CAAC,UAAU,UAAU,KAAK,EAAE,SAAS,KAAM;AAAA,IAE5C,CAAC,UAAU,MAAM,SAAS,KAAK,GAC/B;AACA,YAAM,YAAY,kBAAkB,UAAU,KAAK;AACnD,sBAAU,CAAC,MAAX,mBAAc;AAAA,IAChB;AAAA,EACF;AAEA,WAAS,iBAAiB,GAAkB;AAC1C,QAAI,EAAE,QAAQ,MAAO;AACrB,aAAS,oBAAoB,WAAW,gBAAgB;AAExD,QAAI,SAAS,SAAS,UAAU,SAAS,EAAE,UAAU,CAAC,UAAU,MAAM,SAAS,EAAE,MAAiB,GAAG;AACnG,YAAM,uBAAuB,kBAAkB,SAAS,eAAe;AAEvE,UACG,EAAE,YAAY,EAAE,WAAW,qBAAqB,GAAG,CAAC,KACpD,CAAC,EAAE,YAAY,EAAE,WAAW,qBAAqB,GAAG,EAAE,GACvD;AACA,cAAM,YAAY,kBAAkB,UAAU,KAAK;AACnD,YAAI,UAAU,SAAS,GAAG;AACxB,YAAE,eAAA;AACF,oBAAU,CAAC,EAAE,MAAA;AAAA,QACf;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,gBAAgB,MAAM,MAAM,SAAS,SAAS,MAAM,YAAY;AAEtE,MAAI,YAAY;AACd;AAAA,MACE,MAAM,MAAM;AAAA,MACZ,CAAC,QAAQ;AACP,YAAI,KAAK;AACP,mBAAS,IAAI,QAAQ,EAAE,UAAU,WAAW;AAAA,QAC9C,OAAO;AACL,mBAAS,OAAO,MAAM;AAAA,QACxB;AAAA,MACF;AAAA,MACA,EAAE,WAAW,KAAA;AAAA,IAAK;AAGpB;AAAA,MACE;AAAA,MACA,CAAC,QAAQ;AACP,YAAI,KAAK;AACP,mBAAS,iBAAiB,eAAe,aAAa;AACtD,mBAAS,iBAAiB,WAAW,gBAAgB,EAAE,MAAM,MAAM;AACnE,mBAAS,iBAAiB,WAAW,gBAAgB;AAAA,QACvD,OAAO;AACL,mBAAS,oBAAoB,eAAe,aAAa;AACzD,mBAAS,oBAAoB,WAAW,cAAc;AACtD,mBAAS,oBAAoB,WAAW,gBAAgB;AAAA,QAC1D;AAAA,MACF;AAAA,MACA,EAAE,WAAW,KAAA;AAAA,IAAK;AAGpB,QAAI,gBAAgB,GAAG;AACrB,eAAS,iBAAiB,WAAW,SAAS;AAAA,IAChD;AAAA,EACF;AAEA,iBAAe,MAAM;AACnB,aAAS,OAAO,MAAM;AACtB,iBAAa,2BAA2B;AACxC,aAAS,oBAAoB,eAAe,aAAa;AACzD,aAAS,oBAAoB,WAAW,cAAc;AACtD,aAAS,oBAAoB,WAAW,gBAAgB;AAExD,QAAI,EAAE,cAAc,GAAG;AACrB,eAAS,oBAAoB,WAAW,SAAS;AAAA,IACnD;AAAA,EACF,CAAC;AACH;AAEA,SAAS,UAAU,GAAkB;AACnC,QAAM,gBAAgB,SAAS;AAC/B,MAAI,EAAE,QAAQ,SAAS,CAAC,cAAe;AAEvC,QAAM,cAAc,MAAM,KAAK,SAAS,QAAQ,EAC7C,OAAO,CAAC,EAAE,UAAU,UAAA,MAAU;;AAAM,oBAAS,WAAS,eAAU,UAAV,mBAAiB,SAAS;AAAA,GAAc,EAC9F,IAAI,CAAC,MAAM,EAAE,UAAU,KAAK;AAE/B,MAAI;AACJ,MAAI,gBAAgB,cAAc;AAClC,SAAO,eAAe;AACpB,QAAI,YAAY,SAAS,aAAa,GAAG;AACvC,oBAAc;AACd;AAAA,IACF;AACA,oBAAgB,cAAc;AAAA,EAChC;AAEA,MAAI,CAAC,YAAa;AAElB,QAAM,YAAY,kBAAkB,WAAW,EAE5C,OAAO,CAAC,MAAM,EAAE,YAAY,CAAC;AAEhC,MAAI,CAAC,UAAU,OAAQ;AAEvB,QAAM,SAAS,SAAS;AACxB,MAAI,UAAU,WAAW,KAAK,UAAU,CAAC,EAAE,UAAU,SAAS,QAAQ,KAAK,UAAU,CAAC,EAAE,SAAS,MAAM,GAAG;AACxG,MAAE,eAAA;AACF;AAAA,EACF;AAEA,QAAM,eAAe,UAAU,CAAC;AAChC,QAAM,cAAc,UAAU,UAAU,SAAS,CAAC;AAElD,MACE,EAAE,aACD,WAAW,gBAAiB,aAAa,UAAU,SAAS,QAAQ,KAAK,aAAa,SAAS,MAAM,IACtG;AACA,MAAE,eAAA;AACF,gBAAY,MAAA;AAAA,EACd;AAEA,MACE,CAAC,EAAE,aACF,WAAW,eAAgB,YAAY,UAAU,SAAS,QAAQ,KAAK,YAAY,SAAS,MAAM,IACnG;AACA,MAAE,eAAA;AACF,iBAAa,MAAA;AAAA,EACf;AACF;"}

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

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