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

package/dist/es/src/components/CdsHighlight/CdsHighlight.css

@@ -1,21 +1,3 @@
-@charset "UTF-8";
-/*
-* Easing component
-* @type Map
-*/
-/*
-* Get the transition-timing-function for a given easing and motion mode
-* @param {String} $type - Can be `ease-in-out`, `ease-in`, or `ease-out`
-* @param {String} $mode [basic] - Can be `basic` or `accent`
-* @param {Map} $easing [$easing] - Easing's map
-* @return {Function} CSS `cubic-bezier()` function
-*/
-/*
-* Set the transition-timing-function for a given easing and motion mode
-* @param {Number} $duration — The dynamic duration in ms
-* @param {String} $type - The name of the easing curve to apply
-* @param {String} $mode - The mode for the easing curve to use
-*/
 @layer cds-components {
   .cds-highlight__mark {
     color: var(--cds-highlight-color, inherit);

package/dist/es/src/components/CdsHighlight/api/CdsHighlight.props.js

@@ -3,24 +3,48 @@ import { p as propsFactory } from "../../../core/propsFactory.js";
 import { C as CdsHighlightConstants } from "./CdsHighlight.constants.js";
 const defineCdsHighlightProps = propsFactory(
   {
-    /** Текст, в котором выполняется подсветка. */
+    /**
+     * Текст, в котором выполняется подсветка.
+     * @en The text the highlighting is performed in.
+     */
     text: {
       type: String,
       default: ""
     },
-    /** Поисковый запрос: строка или массив строк-терминов. */
+    /**
+     * Поисковый запрос: строка или массив строк-терминов.
+     * @en Search query: a string or an array of term strings.
+     */
     query: [String, Array],
-    /** Готовые диапазоны совпадений `[start, end]`. Имеют приоритет над `query`. */
+    /**
+     * Готовые диапазоны совпадений `[start, end]`. Имеют приоритет над `query`.
+     * @en Ready match ranges `[start, end]`. They take precedence over `query`.
+     */
     matches: Array,
-    /** Подсвечивать все вхождения, а не только первое. */
+    /**
+     * Подсвечивать все вхождения, а не только первое.
+     * @en Highlights every occurrence, not just the first one.
+     */
     matchAll: Boolean,
-    /** Игнорировать регистр при поиске по `query`. */
+    /**
+     * Игнорировать регистр при поиске по `query`.
+     * @en Ignores the case when searching by `query`.
+     */
     ignoreCase: Boolean,
-    /** Цвет текста подсветки. */
+    /**
+     * Цвет текста подсветки.
+     * @en Color of the highlighted text.
+     */
     color: String,
-    /** Прозрачность фона подсветки (CSS-переменная `--cds-highlight-opacity`). */
+    /**
+     * Прозрачность фона подсветки (CSS-переменная `--cds-highlight-opacity`).
+     * @en Opacity of the highlight background (the `--cds-highlight-opacity` CSS variable).
+     */
     opacity: [String, Number],
-    /** Дополнительный CSS-класс для элемента `<mark>`. */
+    /**
+     * Дополнительный CSS-класс для элемента `<mark>`.
+     * @en Extra CSS class for the `<mark>` element.
+     */
     markClass: String,
     ...defineTagProps({ tag: "span" }),
     ...defineComponentProps()

package/dist/es/src/components/CdsHighlight/api/CdsHighlight.props.js.map

@@ -1 +1 @@
-{"version":3,"file":"CdsHighlight.props.js","sources":["../../../../../../src/components/CdsHighlight/api/CdsHighlight.props.ts"],"sourcesContent":["import { defineComponentProps, defineTagProps, propsFactory } from '@cds/core';\nimport type { PropType } from 'vue';\n\nimport type { MatchRange } from '../utils/toHighlight';\nimport { CdsHighlightConstants } from './CdsHighlight.constants';\n\nexport const defineCdsHighlightProps = propsFactory(\n  {\n    /** Текст, в котором выполняется подсветка. */\n    text: {\n      type: String,\n      default: ''\n    },\n    /** Поисковый запрос: строка или массив строк-терминов. */\n    query: [String, Array] as PropType<string | string[]>,\n    /** Готовые диапазоны совпадений `[start, end]`. Имеют приоритет над `query`. */\n    matches: Array as PropType<readonly MatchRange[]>,\n    /** Подсвечивать все вхождения, а не только первое. */\n    matchAll: Boolean,\n    /** Игнорировать регистр при поиске по `query`. */\n    ignoreCase: Boolean,\n    /** Цвет текста подсветки. */\n    color: String,\n    /** Прозрачность фона подсветки (CSS-переменная `--cds-highlight-opacity`). */\n    opacity: [String, Number] as PropType<string | number>,\n    /** Дополнительный CSS-класс для элемента `<mark>`. */\n    markClass: String,\n\n    ...defineTagProps({ tag: 'span' }),\n    ...defineComponentProps()\n  },\n  CdsHighlightConstants.name\n);\n"],"names":[],"mappings":";;;AAMO,MAAM,0BAA0B;AAAA,EACrC;AAAA;AAAA,IAEE,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA;AAAA,IAGX,OAAO,CAAC,QAAQ,KAAK;AAAA;AAAA,IAErB,SAAS;AAAA;AAAA,IAET,UAAU;AAAA;AAAA,IAEV,YAAY;AAAA;AAAA,IAEZ,OAAO;AAAA;AAAA,IAEP,SAAS,CAAC,QAAQ,MAAM;AAAA;AAAA,IAExB,WAAW;AAAA,IAEX,GAAG,eAAe,EAAE,KAAK,QAAQ;AAAA,IACjC,GAAG,qBAAA;AAAA,EAAqB;AAAA,EAE1B,sBAAsB;AACxB;"}
+{"version":3,"file":"CdsHighlight.props.js","sources":["../../../../../../src/components/CdsHighlight/api/CdsHighlight.props.ts"],"sourcesContent":["import { defineComponentProps, defineTagProps, propsFactory } from '@cds/core';\nimport type { PropType } from 'vue';\n\nimport type { MatchRange } from '../utils/toHighlight';\nimport { CdsHighlightConstants } from './CdsHighlight.constants';\n\nexport const defineCdsHighlightProps = propsFactory(\n  {\n    /**\n     * Текст, в котором выполняется подсветка.\n     * @en The text the highlighting is performed in.\n     */\n    text: {\n      type: String,\n      default: ''\n    },\n    /**\n     * Поисковый запрос: строка или массив строк-терминов.\n     * @en Search query: a string or an array of term strings.\n     */\n    query: [String, Array] as PropType<string | string[]>,\n    /**\n     * Готовые диапазоны совпадений `[start, end]`. Имеют приоритет над `query`.\n     * @en Ready match ranges `[start, end]`. They take precedence over `query`.\n     */\n    matches: Array as PropType<readonly MatchRange[]>,\n    /**\n     * Подсвечивать все вхождения, а не только первое.\n     * @en Highlights every occurrence, not just the first one.\n     */\n    matchAll: Boolean,\n    /**\n     * Игнорировать регистр при поиске по `query`.\n     * @en Ignores the case when searching by `query`.\n     */\n    ignoreCase: Boolean,\n    /**\n     * Цвет текста подсветки.\n     * @en Color of the highlighted text.\n     */\n    color: String,\n    /**\n     * Прозрачность фона подсветки (CSS-переменная `--cds-highlight-opacity`).\n     * @en Opacity of the highlight background (the `--cds-highlight-opacity` CSS variable).\n     */\n    opacity: [String, Number] as PropType<string | number>,\n    /**\n     * Дополнительный CSS-класс для элемента `<mark>`.\n     * @en Extra CSS class for the `<mark>` element.\n     */\n    markClass: String,\n\n    ...defineTagProps({ tag: 'span' }),\n    ...defineComponentProps()\n  },\n  CdsHighlightConstants.name\n);\n"],"names":[],"mappings":";;;AAMO,MAAM,0BAA0B;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMX,OAAO,CAAC,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAKrB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKT,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAKV,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,IAKZ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,SAAS,CAAC,QAAQ,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAKxB,WAAW;AAAA,IAEX,GAAG,eAAe,EAAE,KAAK,QAAQ;AAAA,IACjC,GAAG,qBAAA;AAAA,EAAqB;AAAA,EAE1B,sBAAsB;AACxB;"}

package/dist/es/src/components/CdsIcon/CdsIcon.css

@@ -1,21 +1,3 @@
-@charset "UTF-8";
-/*
-* Easing component
-* @type Map
-*/
-/*
-* Get the transition-timing-function for a given easing and motion mode
-* @param {String} $type - Can be `ease-in-out`, `ease-in`, or `ease-out`
-* @param {String} $mode [basic] - Can be `basic` or `accent`
-* @param {Map} $easing [$easing] - Easing's map
-* @return {Function} CSS `cubic-bezier()` function
-*/
-/*
-* Set the transition-timing-function for a given easing and motion mode
-* @param {Number} $duration — The dynamic duration in ms
-* @param {String} $type - The name of the easing curve to apply
-* @param {String} $mode - The mode for the easing curve to use
-*/
 @layer cds-components {
   .cds-icon {
     --cds-icon-size-multiplier: 1;

package/dist/es/src/components/CdsIcon/api/CdsIcon.props.js

@@ -7,24 +7,37 @@ import { d as defineSizeProps } from "../../../composables/useSize/useSize.js";
 import { d as defineColorProps } from "../../../composables/useColor/useColor.js";
 const defineCdsIconProps = propsFactory(
   {
-    /** Название иконки или компонент иконки, который будет отображаться */
+    /**
+     * Название иконки или компонент иконки, который будет отображаться
+     * @en Name of the icon or the icon component to render
+     */
     icon: {
       type: [Boolean, String, Function, Object],
       default: void 0
     },
     /**
      * Строковое имя иконки из зарегистрированного набора (алиас для icon)
+     * @en String name of an icon from a registered pack (an alias for icon)
      * @example `<CdsIcon name="add" />`
      */
     name: {
       type: String,
       default: void 0
     },
-    /** Добавляет отступ справа от иконки — для иконки перед текстом */
+    /**
+     * Добавляет отступ справа от иконки — для иконки перед текстом
+     * @en Adds spacing to the right of the icon — for an icon before the text
+     */
     start: Boolean,
-    /** Добавляет отступ слева от иконки — для иконки после текста */
+    /**
+     * Добавляет отступ слева от иконки — для иконки после текста
+     * @en Adds spacing to the left of the icon — for an icon after the text
+     */
     end: Boolean,
-    /** Прозрачность иконки — число от 0 до 1 */
+    /**
+     * Прозрачность иконки — число от 0 до 1
+     * @en Opacity of the icon — a number between 0 and 1
+     */
     opacity: [String, Number],
     ...defineTagProps({ tag: "i" }),
     ...defineColorProps(),

package/dist/es/src/components/CdsIcon/api/CdsIcon.props.js.map

@@ -1 +1 @@
-{"version":3,"file":"CdsIcon.props.js","sources":["../../../../../../src/components/CdsIcon/api/CdsIcon.props.ts"],"sourcesContent":["import { defineColorProps } from '@cds/composables';\nimport { defineDisabledProps } from '@cds/composables/useDisabled/useDisabled';\nimport type { IconValue } from '@cds/composables/useIcons';\nimport { defineSizeProps } from '@cds/composables/useSize';\nimport { defineThemeProps } from '@cds/composables/useTheme';\nimport { defineComponentProps, defineTagProps, propsFactory } from '@cds/core';\nimport type { PropType } from 'vue';\n\nimport { CdsIconConstants } from './CdsIcon.constants';\n\nexport const defineCdsIconProps = propsFactory(\n  {\n    /** Название иконки или компонент иконки, который будет отображаться */\n    icon: {\n      type: [Boolean, String, Function, Object] as PropType<IconValue>,\n      default: undefined\n    },\n    /**\n     * Строковое имя иконки из зарегистрированного набора (алиас для icon)\n     * @example `<CdsIcon name=\"add\" />`\n     */\n    name: {\n      type: String,\n      default: undefined\n    },\n    /** Добавляет отступ справа от иконки — для иконки перед текстом */\n    start: Boolean,\n    /** Добавляет отступ слева от иконки — для иконки после текста */\n    end: Boolean,\n    /** Прозрачность иконки — число от 0 до 1 */\n    opacity: [String, Number],\n\n    ...defineTagProps({ tag: 'i' } as const),\n    ...defineColorProps(),\n    ...defineDisabledProps(),\n    ...defineSizeProps(),\n    ...defineThemeProps(),\n    ...defineComponentProps()\n  },\n  CdsIconConstants.name\n);\n"],"names":[],"mappings":";;;;;;;AAUO,MAAM,qBAAqB;AAAA,EAChC;AAAA;AAAA,IAEE,MAAM;AAAA,MACJ,MAAM,CAAC,SAAS,QAAQ,UAAU,MAAM;AAAA,MACxC,SAAS;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA;AAAA,IAGX,OAAO;AAAA;AAAA,IAEP,KAAK;AAAA;AAAA,IAEL,SAAS,CAAC,QAAQ,MAAM;AAAA,IAExB,GAAG,eAAe,EAAE,KAAK,KAAc;AAAA,IACvC,GAAG,iBAAA;AAAA,IACH,GAAG,oBAAA;AAAA,IACH,GAAG,gBAAA;AAAA,IACH,GAAG,iBAAA;AAAA,IACH,GAAG,qBAAA;AAAA,EAAqB;AAAA,EAE1B,iBAAiB;AACnB;"}
+{"version":3,"file":"CdsIcon.props.js","sources":["../../../../../../src/components/CdsIcon/api/CdsIcon.props.ts"],"sourcesContent":["import { defineColorProps } from '@cds/composables';\nimport { defineDisabledProps } from '@cds/composables/useDisabled/useDisabled';\nimport type { IconValue } from '@cds/composables/useIcons';\nimport { defineSizeProps } from '@cds/composables/useSize';\nimport { defineThemeProps } from '@cds/composables/useTheme';\nimport { defineComponentProps, defineTagProps, propsFactory } from '@cds/core';\nimport type { PropType } from 'vue';\n\nimport { CdsIconConstants } from './CdsIcon.constants';\n\nexport const defineCdsIconProps = propsFactory(\n  {\n    /**\n     * Название иконки или компонент иконки, который будет отображаться\n     * @en Name of the icon or the icon component to render\n     */\n    icon: {\n      type: [Boolean, String, Function, Object] as PropType<IconValue>,\n      default: undefined\n    },\n    /**\n     * Строковое имя иконки из зарегистрированного набора (алиас для icon)\n     * @en String name of an icon from a registered pack (an alias for icon)\n     * @example `<CdsIcon name=\"add\" />`\n     */\n    name: {\n      type: String,\n      default: undefined\n    },\n    /**\n     * Добавляет отступ справа от иконки — для иконки перед текстом\n     * @en Adds spacing to the right of the icon — for an icon before the text\n     */\n    start: Boolean,\n    /**\n     * Добавляет отступ слева от иконки — для иконки после текста\n     * @en Adds spacing to the left of the icon — for an icon after the text\n     */\n    end: Boolean,\n    /**\n     * Прозрачность иконки — число от 0 до 1\n     * @en Opacity of the icon — a number between 0 and 1\n     */\n    opacity: [String, Number],\n\n    ...defineTagProps({ tag: 'i' } as const),\n    ...defineColorProps(),\n    ...defineDisabledProps(),\n    ...defineSizeProps(),\n    ...defineThemeProps(),\n    ...defineComponentProps()\n  },\n  CdsIconConstants.name\n);\n"],"names":[],"mappings":";;;;;;;AAUO,MAAM,qBAAqB;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,MAAM;AAAA,MACJ,MAAM,CAAC,SAAS,QAAQ,UAAU,MAAM;AAAA,MACxC,SAAS;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMX,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,SAAS,CAAC,QAAQ,MAAM;AAAA,IAExB,GAAG,eAAe,EAAE,KAAK,KAAc;AAAA,IACvC,GAAG,iBAAA;AAAA,IACH,GAAG,oBAAA;AAAA,IACH,GAAG,gBAAA;AAAA,IACH,GAAG,iBAAA;AAAA,IACH,GAAG,qBAAA;AAAA,EAAqB;AAAA,EAE1B,iBAAiB;AACnB;"}

package/dist/es/src/components/CdsImage/CdsImage.css

@@ -1,21 +1,3 @@
-@charset "UTF-8";
-/*
-* Easing component
-* @type Map
-*/
-/*
-* Get the transition-timing-function for a given easing and motion mode
-* @param {String} $type - Can be `ease-in-out`, `ease-in`, or `ease-out`
-* @param {String} $mode [basic] - Can be `basic` or `accent`
-* @param {Map} $easing [$easing] - Easing's map
-* @return {Function} CSS `cubic-bezier()` function
-*/
-/*
-* Set the transition-timing-function for a given easing and motion mode
-* @param {Number} $duration — The dynamic duration in ms
-* @param {String} $type - The name of the easing curve to apply
-* @param {String} $mode - The mode for the easing curve to use
-*/
 @layer cds-components {
   .cds-image {
     z-index: 0;

package/dist/es/src/components/CdsImage/CdsImage.vue_vue_type_script_setup_true_lang.js

@@ -248,10 +248,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, null);
     }
     __expose({
+      /**
+       * Фактический адрес загруженного изображения — с учётом `srcset` и выбранной браузером плотности.
+       * @en Actual address of the loaded image — taking `srcset` and the density chosen by the browser into account.
+       */
       currentSrc,
+      /**
+       * Ссылка на DOM-элемент `img`.
+       * @en Reference to the `img` DOM element.
+       */
       image,
+      /**
+       * Состояние загрузки изображения: ожидание, загрузка, успех или ошибка.
+       * @en Loading state of the image: idle, loading, success or error.
+       */
       state,
+      /**
+       * Собственная ширина загруженного изображения в пикселях.
+       * @en Natural width of the loaded image in pixels.
+       */
       naturalWidth,
+      /**
+       * Собственная высота загруженного изображения в пикселях.
+       * @en Natural height of the loaded image in pixels.
+       */
       naturalHeight
     });
     return () => {

package/dist/es/src/components/CdsImage/CdsImage.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"CdsImage.vue_vue_type_script_setup_true_lang.js","sources":["../../../../../src/components/CdsImage/CdsImage.vue"],"sourcesContent":["<script setup lang=\"tsx\">\nimport './CdsImage.scss';\n\nimport { CdsResponsive } from '@cds/components/CdsResponsive';\nimport { useBackgroundColor } from '@cds/composables/useColor';\nimport { provideTheme } from '@cds/composables/useTheme';\nimport { MaybeTransition } from '@cds/composables/useTransition';\nimport { useDefaults } from '@cds/core';\nimport { Intersect } from '@cds/directives';\nimport { classNames, convertToUnit, parseAspectRatio, SUPPORTS_INTERSECTION_OBSERVER } from '@cds/utils';\nimport {\n  computed,\n  getCurrentInstance,\n  nextTick,\n  onBeforeMount,\n  onBeforeUnmount,\n  ref,\n  shallowRef,\n  toRef,\n  unref,\n  vShow,\n  watch,\n  withDirectives\n} from 'vue';\n\nimport { CdsImageConstants } from './api/CdsImage.constants';\nimport { type CdsImageSrcObject, defineCdsImageProps } from './api/CdsImage.props';\nimport type { CdsImageEvents, CdsImageSlots } from './api/CdsImage.types';\n\ndefineOptions({\n  name: CdsImageConstants.name,\n  inheritAttrs: false\n});\n\nconst _props = defineProps({ ...defineCdsImageProps() });\nconst props = useDefaults(_props);\nconst slots = defineSlots<CdsImageSlots>();\nconst emit = defineEmits([\"loadstart\", \"load\", \"error\"]);\n\nconst { themeClasses } = provideTheme(props);\nconst { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => props.color);\nconst vm = getCurrentInstance()!;\n\nconst currentSrc = shallowRef(''); // Устанавливается из srcset\nconst image = ref<HTMLImageElement>();\nconst state = shallowRef<'idle' | 'loading' | 'loaded' | 'error'>(props.eager ? 'loading' : 'idle');\nconst naturalWidth = shallowRef<number>();\nconst naturalHeight = shallowRef<number>();\n\nconst normalisedSrc = computed<CdsImageSrcObject>(() => {\n  return props.src && typeof props.src === 'object'\n    ? {\n        src: props.src.src,\n        srcset: props.srcset || props.src.srcset,\n        lazySrc: props.lazySrc || props.src.lazySrc,\n        aspect: parseAspectRatio(props.aspectRatio || props.src.aspect)\n      }\n    : {\n        src: props.src,\n        srcset: props.srcset,\n        lazySrc: props.lazySrc,\n        aspect: parseAspectRatio(props.aspectRatio)\n      };\n});\nconst aspectRatio = computed(() => {\n  return normalisedSrc.value.aspect || naturalWidth.value! / naturalHeight.value! || 0;\n});\n\nwatch(\n  () => props.src,\n  () => {\n    init(state.value !== 'idle');\n  }\n);\nwatch(aspectRatio, (val, oldVal) => {\n  if (!val && oldVal && image.value) {\n    pollForSize(image.value);\n  }\n});\n\nonBeforeMount(() => init());\n\nfunction init(isIntersecting?: boolean) {\n  if (props.eager && isIntersecting) return;\n  if (SUPPORTS_INTERSECTION_OBSERVER && !isIntersecting && !props.eager) return;\n\n  state.value = 'loading';\n\n  if (normalisedSrc.value.lazySrc) {\n    const lazyImg = new Image();\n    lazyImg.src = normalisedSrc.value.lazySrc;\n    pollForSize(lazyImg, null);\n  }\n\n  if (!normalisedSrc.value.src) return;\n\n  nextTick(() => {\n    emit('loadstart', image.value?.currentSrc || normalisedSrc.value.src);\n\n    setTimeout(() => {\n      if (vm.isUnmounted) return;\n\n      if (image.value?.complete) {\n        if (!image.value.naturalWidth) {\n          onError();\n        }\n\n        if (state.value === 'error') return;\n\n        if (!aspectRatio.value) pollForSize(image.value, null);\n        if (state.value === 'loading') onLoad();\n      } else {\n        if (!aspectRatio.value) pollForSize(image.value!);\n        getSrc();\n      }\n    });\n  });\n}\n\nfunction onLoad() {\n  if (vm.isUnmounted) return;\n\n  getSrc();\n  pollForSize(image.value!);\n  state.value = 'loaded';\n  emit('load', image.value?.currentSrc || normalisedSrc.value.src);\n}\n\nfunction onError() {\n  if (vm.isUnmounted) return;\n\n  state.value = 'error';\n  emit('error', image.value?.currentSrc || normalisedSrc.value.src);\n}\n\nfunction getSrc() {\n  const img = image.value;\n  if (img) currentSrc.value = img.currentSrc || img.src;\n}\n\nlet timer = -1;\n\nonBeforeUnmount(() => {\n  clearTimeout(timer);\n});\n\nfunction pollForSize(img: HTMLImageElement, timeout: number | null = 100) {\n  const poll = () => {\n    clearTimeout(timer);\n    if (vm.isUnmounted) return;\n\n    const { naturalHeight: imgHeight, naturalWidth: imgWidth } = img;\n\n    if (imgHeight || imgWidth) {\n      naturalWidth.value = imgWidth;\n      naturalHeight.value = imgHeight;\n    } else if (!img.complete && state.value === 'loading' && timeout != null) {\n      timer = window.setTimeout(poll, timeout);\n    } else if (img.currentSrc.endsWith('.svg') || img.currentSrc.startsWith('data:image/svg+xml')) {\n      naturalWidth.value = 1;\n      naturalHeight.value = 1;\n    }\n  };\n\n  poll();\n}\n\nconst containClasses = toRef(() => ({\n  [`${CdsImageConstants.rootClass}__img--cover`]: props.cover,\n  [`${CdsImageConstants.rootClass}__img--contain`]: !props.cover\n}));\n\nconst isBooted = shallowRef(false);\n{\n  const stop = watch(aspectRatio, (val) => {\n    if (val) {\n      // С nextTick не работает, причина неясна\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          isBooted.value = true;\n        });\n      });\n      stop();\n    }\n  });\n}\n\nfunction renderImage() {\n  const { rootClass } = CdsImageConstants;\n\n  if (!normalisedSrc.value.src || state.value === 'idle') return null;\n\n  const img = (\n    <img\n      class={classNames(`${rootClass}__img`, unref(containClasses), props.imageClass)}\n      style={{ objectPosition: props.position }}\n      crossorigin={props.crossorigin}\n      src={normalisedSrc.value.src}\n      srcset={normalisedSrc.value.srcset}\n      alt={props.alt}\n      referrerpolicy={props.referrerpolicy}\n      draggable={props.draggable}\n      sizes={props.sizes}\n      ref={image}\n      onLoad={onLoad}\n      onError={onError}\n    />\n  );\n\n  const sources = slots.sources?.();\n\n  return (\n    <MaybeTransition transition={props.transition} appear>\n      {withDirectives(\n        sources ? (\n          <picture class={`${rootClass}__picture`}>\n            {sources}\n            {img}\n          </picture>\n        ) : (\n          img\n        ),\n        [[vShow, state.value === 'loaded']]\n      )}\n    </MaybeTransition>\n  );\n}\n\nfunction renderPreloadImage() {\n  const { rootClass } = CdsImageConstants;\n\n  return (\n    <MaybeTransition transition={props.transition}>\n      {normalisedSrc.value.lazySrc && state.value !== 'loaded' && (\n        <img\n          class={classNames(`${rootClass}__img`, `${rootClass}__img--preload`, unref(containClasses))}\n          style={{ objectPosition: props.position }}\n          crossorigin={props.crossorigin}\n          src={normalisedSrc.value.lazySrc}\n          alt={props.alt}\n          referrerpolicy={props.referrerpolicy}\n          draggable={props.draggable}\n        />\n      )}\n    </MaybeTransition>\n  );\n}\n\nfunction renderPlaceholder() {\n  const { rootClass } = CdsImageConstants;\n\n  if (!slots.placeholder) return null;\n\n  return (\n    <MaybeTransition transition={props.transition} appear>\n      {(state.value === 'loading' || (state.value === 'error' && !slots.error)) && (\n        <div class={`${rootClass}__placeholder`}>{slots.placeholder()}</div>\n      )}\n    </MaybeTransition>\n  );\n}\n\nfunction renderError() {\n  const { rootClass } = CdsImageConstants;\n\n  if (!slots.error) return null;\n\n  return (\n    <MaybeTransition transition={props.transition} appear>\n      {state.value === 'error' && <div class={`${rootClass}__error`}>{slots.error()}</div>}\n    </MaybeTransition>\n  );\n}\n\nfunction renderGradient() {\n  const { rootClass } = CdsImageConstants;\n\n  if (!props.gradient) return null;\n\n  return <div class={`${rootClass}__gradient`} style={{ backgroundImage: `linear-gradient(${props.gradient})` }} />;\n}\n\ndefineRender(() => {\n  const { rootClass } = CdsImageConstants;\n\n  return withDirectives(\n    <CdsResponsive\n      class={classNames(\n        rootClass,\n        {\n          [`${rootClass}--absolute`]: props.absolute,\n          [`${rootClass}--booting`]: !unref(isBooted),\n          [`${rootClass}--fit-content`]: props.width === 'fit-content'\n        },\n        unref(backgroundColorClasses),\n        unref(themeClasses),\n        props.class\n      )}\n      style={[\n        { width: convertToUnit(props.width === 'auto' ? unref(naturalWidth) : props.width) },\n        unref(backgroundColorStyles),\n        props.style\n      ]}\n      aspectRatio={unref(aspectRatio)}\n      contentClass={props.contentClass}\n      inline={props.inline}\n      height={props.height}\n      maxHeight={props.maxHeight}\n      maxWidth={props.maxWidth}\n      minHeight={props.minHeight}\n      minWidth={props.minWidth}\n      aria-label={props.alt}\n      role={props.alt ? 'img' : undefined}\n    >\n      {{\n        additional: () => (\n          <>\n            {renderImage()}\n            {renderPreloadImage()}\n            {renderGradient()}\n            {renderPlaceholder()}\n            {renderError()}\n          </>\n        ),\n        default: slots.default\n      }}\n    </CdsResponsive>,\n    [\n      [\n        Intersect,\n        {\n          handler: init,\n          options: props.options\n        },\n        '',\n        { once: true }\n      ]\n    ]\n  );\n});\n\ndefineExpose({\n  currentSrc,\n  image,\n  state,\n  naturalWidth,\n  naturalHeight\n});\n</script>\n"],"names":["_props","__props","props","useDefaults","slots","_useSlots","emit","__emit","themeClasses","provideTheme","backgroundColorClasses","backgroundColorStyles","useBackgroundColor","color","vm","getCurrentInstance","currentSrc","shallowRef","image","ref","state","eager","naturalWidth","naturalHeight","normalisedSrc","computed","src","srcset","lazySrc","aspect","parseAspectRatio","aspectRatio","value","watch","init","val","oldVal","pollForSize","onBeforeMount","isIntersecting","SUPPORTS_INTERSECTION_OBSERVER","lazyImg","Image","nextTick","setTimeout","isUnmounted","complete","onError","onLoad","getSrc","img","timer","onBeforeUnmount","clearTimeout","timeout","poll","imgHeight","imgWidth","window","endsWith","startsWith","containClasses","toRef","CdsImageConstants","rootClass","cover","isBooted","stop","requestAnimationFrame","renderImage","_createVNode","classNames","unref","imageClass","objectPosition","position","crossorigin","alt","referrerpolicy","draggable","sizes","sources","MaybeTransition","transition","default","withDirectives","vShow","renderPreloadImage","renderPlaceholder","placeholder","error","renderError","renderGradient","gradient","backgroundImage","__expose","CdsResponsive","absolute","width","class","convertToUnit","style","contentClass","inline","height","maxHeight","maxWidth","minHeight","minWidth","undefined","additional","_Fragment","Intersect","handler","options","once"],"mappings":"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"}
+{"version":3,"file":"CdsImage.vue_vue_type_script_setup_true_lang.js","sources":["../../../../../src/components/CdsImage/CdsImage.vue"],"sourcesContent":["<script setup lang=\"tsx\">\nimport './CdsImage.scss';\n\nimport { CdsResponsive } from '@cds/components/CdsResponsive';\nimport { useBackgroundColor } from '@cds/composables/useColor';\nimport { provideTheme } from '@cds/composables/useTheme';\nimport { MaybeTransition } from '@cds/composables/useTransition';\nimport { useDefaults } from '@cds/core';\nimport { Intersect } from '@cds/directives';\nimport { classNames, convertToUnit, parseAspectRatio, SUPPORTS_INTERSECTION_OBSERVER } from '@cds/utils';\nimport {\n  computed,\n  getCurrentInstance,\n  nextTick,\n  onBeforeMount,\n  onBeforeUnmount,\n  ref,\n  shallowRef,\n  toRef,\n  unref,\n  vShow,\n  watch,\n  withDirectives\n} from 'vue';\n\nimport { CdsImageConstants } from './api/CdsImage.constants';\nimport { type CdsImageSrcObject, defineCdsImageProps } from './api/CdsImage.props';\nimport type { CdsImageEvents, CdsImageSlots } from './api/CdsImage.types';\n\ndefineOptions({\n  name: CdsImageConstants.name,\n  inheritAttrs: false\n});\n\nconst _props = defineProps({ ...defineCdsImageProps() });\nconst props = useDefaults(_props);\nconst slots = defineSlots<CdsImageSlots>();\nconst emit = defineEmits([\"loadstart\", \"load\", \"error\"]);\n\nconst { themeClasses } = provideTheme(props);\nconst { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => props.color);\nconst vm = getCurrentInstance()!;\n\nconst currentSrc = shallowRef(''); // Устанавливается из srcset\nconst image = ref<HTMLImageElement>();\nconst state = shallowRef<'idle' | 'loading' | 'loaded' | 'error'>(props.eager ? 'loading' : 'idle');\nconst naturalWidth = shallowRef<number>();\nconst naturalHeight = shallowRef<number>();\n\nconst normalisedSrc = computed<CdsImageSrcObject>(() => {\n  return props.src && typeof props.src === 'object'\n    ? {\n        src: props.src.src,\n        srcset: props.srcset || props.src.srcset,\n        lazySrc: props.lazySrc || props.src.lazySrc,\n        aspect: parseAspectRatio(props.aspectRatio || props.src.aspect)\n      }\n    : {\n        src: props.src,\n        srcset: props.srcset,\n        lazySrc: props.lazySrc,\n        aspect: parseAspectRatio(props.aspectRatio)\n      };\n});\nconst aspectRatio = computed(() => {\n  return normalisedSrc.value.aspect || naturalWidth.value! / naturalHeight.value! || 0;\n});\n\nwatch(\n  () => props.src,\n  () => {\n    init(state.value !== 'idle');\n  }\n);\nwatch(aspectRatio, (val, oldVal) => {\n  if (!val && oldVal && image.value) {\n    pollForSize(image.value);\n  }\n});\n\nonBeforeMount(() => init());\n\nfunction init(isIntersecting?: boolean) {\n  if (props.eager && isIntersecting) return;\n  if (SUPPORTS_INTERSECTION_OBSERVER && !isIntersecting && !props.eager) return;\n\n  state.value = 'loading';\n\n  if (normalisedSrc.value.lazySrc) {\n    const lazyImg = new Image();\n    lazyImg.src = normalisedSrc.value.lazySrc;\n    pollForSize(lazyImg, null);\n  }\n\n  if (!normalisedSrc.value.src) return;\n\n  nextTick(() => {\n    emit('loadstart', image.value?.currentSrc || normalisedSrc.value.src);\n\n    setTimeout(() => {\n      if (vm.isUnmounted) return;\n\n      if (image.value?.complete) {\n        if (!image.value.naturalWidth) {\n          onError();\n        }\n\n        if (state.value === 'error') return;\n\n        if (!aspectRatio.value) pollForSize(image.value, null);\n        if (state.value === 'loading') onLoad();\n      } else {\n        if (!aspectRatio.value) pollForSize(image.value!);\n        getSrc();\n      }\n    });\n  });\n}\n\nfunction onLoad() {\n  if (vm.isUnmounted) return;\n\n  getSrc();\n  pollForSize(image.value!);\n  state.value = 'loaded';\n  emit('load', image.value?.currentSrc || normalisedSrc.value.src);\n}\n\nfunction onError() {\n  if (vm.isUnmounted) return;\n\n  state.value = 'error';\n  emit('error', image.value?.currentSrc || normalisedSrc.value.src);\n}\n\nfunction getSrc() {\n  const img = image.value;\n  if (img) currentSrc.value = img.currentSrc || img.src;\n}\n\nlet timer = -1;\n\nonBeforeUnmount(() => {\n  clearTimeout(timer);\n});\n\nfunction pollForSize(img: HTMLImageElement, timeout: number | null = 100) {\n  const poll = () => {\n    clearTimeout(timer);\n    if (vm.isUnmounted) return;\n\n    const { naturalHeight: imgHeight, naturalWidth: imgWidth } = img;\n\n    if (imgHeight || imgWidth) {\n      naturalWidth.value = imgWidth;\n      naturalHeight.value = imgHeight;\n    } else if (!img.complete && state.value === 'loading' && timeout != null) {\n      timer = window.setTimeout(poll, timeout);\n    } else if (img.currentSrc.endsWith('.svg') || img.currentSrc.startsWith('data:image/svg+xml')) {\n      naturalWidth.value = 1;\n      naturalHeight.value = 1;\n    }\n  };\n\n  poll();\n}\n\nconst containClasses = toRef(() => ({\n  [`${CdsImageConstants.rootClass}__img--cover`]: props.cover,\n  [`${CdsImageConstants.rootClass}__img--contain`]: !props.cover\n}));\n\nconst isBooted = shallowRef(false);\n{\n  const stop = watch(aspectRatio, (val) => {\n    if (val) {\n      // С nextTick не работает, причина неясна\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          isBooted.value = true;\n        });\n      });\n      stop();\n    }\n  });\n}\n\nfunction renderImage() {\n  const { rootClass } = CdsImageConstants;\n\n  if (!normalisedSrc.value.src || state.value === 'idle') return null;\n\n  const img = (\n    <img\n      class={classNames(`${rootClass}__img`, unref(containClasses), props.imageClass)}\n      style={{ objectPosition: props.position }}\n      crossorigin={props.crossorigin}\n      src={normalisedSrc.value.src}\n      srcset={normalisedSrc.value.srcset}\n      alt={props.alt}\n      referrerpolicy={props.referrerpolicy}\n      draggable={props.draggable}\n      sizes={props.sizes}\n      ref={image}\n      onLoad={onLoad}\n      onError={onError}\n    />\n  );\n\n  const sources = slots.sources?.();\n\n  return (\n    <MaybeTransition transition={props.transition} appear>\n      {withDirectives(\n        sources ? (\n          <picture class={`${rootClass}__picture`}>\n            {sources}\n            {img}\n          </picture>\n        ) : (\n          img\n        ),\n        [[vShow, state.value === 'loaded']]\n      )}\n    </MaybeTransition>\n  );\n}\n\nfunction renderPreloadImage() {\n  const { rootClass } = CdsImageConstants;\n\n  return (\n    <MaybeTransition transition={props.transition}>\n      {normalisedSrc.value.lazySrc && state.value !== 'loaded' && (\n        <img\n          class={classNames(`${rootClass}__img`, `${rootClass}__img--preload`, unref(containClasses))}\n          style={{ objectPosition: props.position }}\n          crossorigin={props.crossorigin}\n          src={normalisedSrc.value.lazySrc}\n          alt={props.alt}\n          referrerpolicy={props.referrerpolicy}\n          draggable={props.draggable}\n        />\n      )}\n    </MaybeTransition>\n  );\n}\n\nfunction renderPlaceholder() {\n  const { rootClass } = CdsImageConstants;\n\n  if (!slots.placeholder) return null;\n\n  return (\n    <MaybeTransition transition={props.transition} appear>\n      {(state.value === 'loading' || (state.value === 'error' && !slots.error)) && (\n        <div class={`${rootClass}__placeholder`}>{slots.placeholder()}</div>\n      )}\n    </MaybeTransition>\n  );\n}\n\nfunction renderError() {\n  const { rootClass } = CdsImageConstants;\n\n  if (!slots.error) return null;\n\n  return (\n    <MaybeTransition transition={props.transition} appear>\n      {state.value === 'error' && <div class={`${rootClass}__error`}>{slots.error()}</div>}\n    </MaybeTransition>\n  );\n}\n\nfunction renderGradient() {\n  const { rootClass } = CdsImageConstants;\n\n  if (!props.gradient) return null;\n\n  return <div class={`${rootClass}__gradient`} style={{ backgroundImage: `linear-gradient(${props.gradient})` }} />;\n}\n\ndefineRender(() => {\n  const { rootClass } = CdsImageConstants;\n\n  return withDirectives(\n    <CdsResponsive\n      class={classNames(\n        rootClass,\n        {\n          [`${rootClass}--absolute`]: props.absolute,\n          [`${rootClass}--booting`]: !unref(isBooted),\n          [`${rootClass}--fit-content`]: props.width === 'fit-content'\n        },\n        unref(backgroundColorClasses),\n        unref(themeClasses),\n        props.class\n      )}\n      style={[\n        { width: convertToUnit(props.width === 'auto' ? unref(naturalWidth) : props.width) },\n        unref(backgroundColorStyles),\n        props.style\n      ]}\n      aspectRatio={unref(aspectRatio)}\n      contentClass={props.contentClass}\n      inline={props.inline}\n      height={props.height}\n      maxHeight={props.maxHeight}\n      maxWidth={props.maxWidth}\n      minHeight={props.minHeight}\n      minWidth={props.minWidth}\n      aria-label={props.alt}\n      role={props.alt ? 'img' : undefined}\n    >\n      {{\n        additional: () => (\n          <>\n            {renderImage()}\n            {renderPreloadImage()}\n            {renderGradient()}\n            {renderPlaceholder()}\n            {renderError()}\n          </>\n        ),\n        default: slots.default\n      }}\n    </CdsResponsive>,\n    [\n      [\n        Intersect,\n        {\n          handler: init,\n          options: props.options\n        },\n        '',\n        { once: true }\n      ]\n    ]\n  );\n});\n\ndefineExpose({\n  /**\n   * Фактический адрес загруженного изображения — с учётом `srcset` и выбранной браузером плотности.\n   * @en Actual address of the loaded image — taking `srcset` and the density chosen by the browser into account.\n   */\n  currentSrc,\n  /**\n   * Ссылка на DOM-элемент `img`.\n   * @en Reference to the `img` DOM element.\n   */\n  image,\n  /**\n   * Состояние загрузки изображения: ожидание, загрузка, успех или ошибка.\n   * @en Loading state of the image: idle, loading, success or error.\n   */\n  state,\n  /**\n   * Собственная ширина загруженного изображения в пикселях.\n   * @en Natural width of the loaded image in pixels.\n   */\n  naturalWidth,\n  /**\n   * Собственная высота загруженного изображения в пикселях.\n   * @en Natural height of the loaded image in pixels.\n   */\n  naturalHeight\n});\n</script>\n"],"names":["_props","__props","props","useDefaults","slots","_useSlots","emit","__emit","themeClasses","provideTheme","backgroundColorClasses","backgroundColorStyles","useBackgroundColor","color","vm","getCurrentInstance","currentSrc","shallowRef","image","ref","state","eager","naturalWidth","naturalHeight","normalisedSrc","computed","src","srcset","lazySrc","aspect","parseAspectRatio","aspectRatio","value","watch","init","val","oldVal","pollForSize","onBeforeMount","isIntersecting","SUPPORTS_INTERSECTION_OBSERVER","lazyImg","Image","nextTick","setTimeout","isUnmounted","complete","onError","onLoad","getSrc","img","timer","onBeforeUnmount","clearTimeout","timeout","poll","imgHeight","imgWidth","window","endsWith","startsWith","containClasses","toRef","CdsImageConstants","rootClass","cover","isBooted","stop","requestAnimationFrame","renderImage","_createVNode","classNames","unref","imageClass","objectPosition","position","crossorigin","alt","referrerpolicy","draggable","sizes","sources","MaybeTransition","transition","default","withDirectives","vShow","renderPreloadImage","renderPlaceholder","placeholder","error","renderError","renderGradient","gradient","backgroundImage","__expose","CdsResponsive","absolute","width","class","convertToUnit","style","contentClass","inline","height","maxHeight","maxWidth","minHeight","minWidth","undefined","additional","_Fragment","Intersect","handler","options","once"],"mappings":"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"}

package/dist/es/src/components/CdsImage/api/CdsImage.props.js

@@ -5,28 +5,58 @@ import { C as CdsImageConstants } from "./CdsImage.constants.js";
 import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 const defineCdsImageProps = propsFactory(
   {
-    /** Позиционирует изображение как `position: absolute`, заполняя родителя. */
+    /**
+     * Позиционирует изображение как `position: absolute`, заполняя родителя.
+     * @en Positions the image with `position: absolute`, filling its parent.
+     */
     absolute: Boolean,
-    /** Альтернативный текст изображения (атрибут `alt`). */
+    /**
+     * Альтернативный текст изображения (атрибут `alt`).
+     * @en Alternative text of the image (the `alt` attribute).
+     */
     alt: String,
-    /** Масштабирует изображение, чтобы оно полностью закрывало контейнер (`object-fit: cover`). */
+    /**
+     * Масштабирует изображение, чтобы оно полностью закрывало контейнер (`object-fit: cover`).
+     * @en Scales the image so that it covers the whole container (`object-fit: cover`).
+     */
     cover: Boolean,
-    /** Цвет фона-плейсхолдера, отображаемого во время загрузки. */
+    /**
+     * Цвет фона-плейсхолдера, отображаемого во время загрузки.
+     * @en Background color of the placeholder shown while loading.
+     */
     color: String,
-    /** Управляет возможностью перетаскивания изображения (атрибут `draggable`). */
+    /**
+     * Управляет возможностью перетаскивания изображения (атрибут `draggable`).
+     * @en Controls whether the image can be dragged (the `draggable` attribute).
+     */
     draggable: {
       type: [Boolean, String],
       default: void 0
     },
-    /** Принудительно загружает изображение сразу, не дожидаясь появления в области видимости. */
+    /**
+     * Принудительно загружает изображение сразу, не дожидаясь появления в области видимости.
+     * @en Loads the image immediately instead of waiting for it to enter the viewport.
+     */
     eager: Boolean,
-    /** CSS-градиент, накладываемый поверх изображения. Например `'to top, rgba(0,0,0,.4), transparent'`. */
+    /**
+     * CSS-градиент, накладываемый поверх изображения. Например `'to top, rgba(0,0,0,.4), transparent'`.
+     * @en CSS gradient laid over the image. For example `'to top, rgba(0,0,0,.4), transparent'`.
+     */
     gradient: String,
-    /** CSS-класс, применяемый к внутреннему элементу `<img>`. */
+    /**
+     * CSS-класс, применяемый к внутреннему элементу `<img>`.
+     * @en CSS class applied to the inner `<img>` element.
+     */
     imageClass: [String, Array, Object],
-    /** Источник изображения-заглушки низкого качества, показываемого до загрузки основного. */
+    /**
+     * Источник изображения-заглушки низкого качества, показываемого до загрузки основного.
+     * @en Source of the low-quality placeholder image shown until the main one loads.
+     */
     lazySrc: String,
-    /** Опции `IntersectionObserver` для ленивой загрузки. */
+    /**
+     * Опции `IntersectionObserver` для ленивой загрузки.
+     * @en `IntersectionObserver` options for lazy loading.
+     */
     options: {
       type: Object,
       default: () => ({
@@ -35,20 +65,38 @@ const defineCdsImageProps = propsFactory(
         threshold: void 0
       })
     },
-    /** Значение атрибута `sizes` для адаптивных изображений. */
+    /**
+     * Значение атрибута `sizes` для адаптивных изображений.
+     * @en Value of the `sizes` attribute for responsive images.
+     */
     sizes: String,
-    /** Источник изображения. Строка или объект с `src`/`srcset`/`lazySrc`/`aspect`. */
+    /**
+     * Источник изображения. Строка или объект с `src`/`srcset`/`lazySrc`/`aspect`.
+     * @en Image source. A string or an object with `src`/`srcset`/`lazySrc`/`aspect`.
+     */
     src: {
       type: [String, Object],
       default: ""
     },
-    /** Значение атрибута `crossorigin`. */
+    /**
+     * Значение атрибута `crossorigin`.
+     * @en Value of the `crossorigin` attribute.
+     */
     crossorigin: String,
-    /** Значение атрибута `referrerpolicy`. */
+    /**
+     * Значение атрибута `referrerpolicy`.
+     * @en Value of the `referrerpolicy` attribute.
+     */
     referrerpolicy: String,
-    /** Набор источников изображения для разных разрешений (атрибут `srcset`). */
+    /**
+     * Набор источников изображения для разных разрешений (атрибут `srcset`).
+     * @en Set of image sources for different resolutions (the `srcset` attribute).
+     */
     srcset: String,
-    /** Значение `object-position` для позиционирования изображения внутри контейнера. */
+    /**
+     * Значение `object-position` для позиционирования изображения внутри контейнера.
+     * @en Value of `object-position` that places the image inside the container.
+     */
     position: String,
     ...defineCdsResponsiveProps(),
     ...defineTransitionProps(),

package/dist/es/src/components/CdsImage/api/CdsImage.props.js.map

@@ -1 +1 @@
-{"version":3,"file":"CdsImage.props.js","sources":["../../../../../../src/components/CdsImage/api/CdsImage.props.ts"],"sourcesContent":["import { defineCdsResponsiveProps } from '@cds/components/CdsResponsive/api/CdsResponsive.props';\nimport { defineThemeProps } from '@cds/composables/useTheme';\nimport { defineTransitionProps } from '@cds/composables/useTransition';\nimport { type ClassValue, propsFactory } from '@cds/core';\nimport type { PropType } from 'vue';\n\nimport { CdsImageConstants } from './CdsImage.constants';\n\n/** Объект источника изображения (например, передаётся сборщиком). */\nexport interface CdsImageSrcObject {\n  src?: string;\n  srcset?: string;\n  lazySrc?: string;\n  aspect: number;\n}\n\nexport const defineCdsImageProps = propsFactory(\n  {\n    /** Позиционирует изображение как `position: absolute`, заполняя родителя. */\n    absolute: Boolean,\n    /** Альтернативный текст изображения (атрибут `alt`). */\n    alt: String,\n    /** Масштабирует изображение, чтобы оно полностью закрывало контейнер (`object-fit: cover`). */\n    cover: Boolean,\n    /** Цвет фона-плейсхолдера, отображаемого во время загрузки. */\n    color: String,\n    /** Управляет возможностью перетаскивания изображения (атрибут `draggable`). */\n    draggable: {\n      type: [Boolean, String] as PropType<boolean | 'true' | 'false'>,\n      default: undefined\n    },\n    /** Принудительно загружает изображение сразу, не дожидаясь появления в области видимости. */\n    eager: Boolean,\n    /** CSS-градиент, накладываемый поверх изображения. Например `'to top, rgba(0,0,0,.4), transparent'`. */\n    gradient: String,\n    /** CSS-класс, применяемый к внутреннему элементу `<img>`. */\n    imageClass: [String, Array, Object] as PropType<ClassValue>,\n    /** Источник изображения-заглушки низкого качества, показываемого до загрузки основного. */\n    lazySrc: String,\n    /** Опции `IntersectionObserver` для ленивой загрузки. */\n    options: {\n      type: Object as PropType<IntersectionObserverInit>,\n      default: () => ({\n        root: undefined,\n        rootMargin: undefined,\n        threshold: undefined\n      })\n    },\n    /** Значение атрибута `sizes` для адаптивных изображений. */\n    sizes: String,\n    /** Источник изображения. Строка или объект с `src`/`srcset`/`lazySrc`/`aspect`. */\n    src: {\n      type: [String, Object] as PropType<string | CdsImageSrcObject>,\n      default: ''\n    },\n    /** Значение атрибута `crossorigin`. */\n    crossorigin: String as PropType<'' | 'anonymous' | 'use-credentials'>,\n    /** Значение атрибута `referrerpolicy`. */\n    referrerpolicy: String as PropType<\n      | 'no-referrer'\n      | 'no-referrer-when-downgrade'\n      | 'origin'\n      | 'origin-when-cross-origin'\n      | 'same-origin'\n      | 'strict-origin'\n      | 'strict-origin-when-cross-origin'\n      | 'unsafe-url'\n    >,\n    /** Набор источников изображения для разных разрешений (атрибут `srcset`). */\n    srcset: String,\n    /** Значение `object-position` для позиционирования изображения внутри контейнера. */\n    position: String,\n\n    ...defineCdsResponsiveProps(),\n\n    ...defineTransitionProps(),\n    ...defineThemeProps()\n  },\n  CdsImageConstants.name\n);\n"],"names":[],"mappings":";;;;;AAgBO,MAAM,sBAAsB;AAAA,EACjC;AAAA;AAAA,IAEE,UAAU;AAAA;AAAA,IAEV,KAAK;AAAA;AAAA,IAEL,OAAO;AAAA;AAAA,IAEP,OAAO;AAAA;AAAA,IAEP,WAAW;AAAA,MACT,MAAM,CAAC,SAAS,MAAM;AAAA,MACtB,SAAS;AAAA,IAAA;AAAA;AAAA,IAGX,OAAO;AAAA;AAAA,IAEP,UAAU;AAAA;AAAA,IAEV,YAAY,CAAC,QAAQ,OAAO,MAAM;AAAA;AAAA,IAElC,SAAS;AAAA;AAAA,IAET,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS,OAAO;AAAA,QACd,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,WAAW;AAAA,MAAA;AAAA,IACb;AAAA;AAAA,IAGF,OAAO;AAAA;AAAA,IAEP,KAAK;AAAA,MACH,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IAAA;AAAA;AAAA,IAGX,aAAa;AAAA;AAAA,IAEb,gBAAgB;AAAA;AAAA,IAWhB,QAAQ;AAAA;AAAA,IAER,UAAU;AAAA,IAEV,GAAG,yBAAA;AAAA,IAEH,GAAG,sBAAA;AAAA,IACH,GAAG,iBAAA;AAAA,EAAiB;AAAA,EAEtB,kBAAkB;AACpB;"}
+{"version":3,"file":"CdsImage.props.js","sources":["../../../../../../src/components/CdsImage/api/CdsImage.props.ts"],"sourcesContent":["import { defineCdsResponsiveProps } from '@cds/components/CdsResponsive/api/CdsResponsive.props';\nimport { defineThemeProps } from '@cds/composables/useTheme';\nimport { defineTransitionProps } from '@cds/composables/useTransition';\nimport { type ClassValue, propsFactory } from '@cds/core';\nimport type { PropType } from 'vue';\n\nimport { CdsImageConstants } from './CdsImage.constants';\n\n/**\n * Объект источника изображения (например, передаётся сборщиком).\n * @en Image source object (passed by a bundler, for example).\n */\nexport interface CdsImageSrcObject {\n  src?: string;\n  srcset?: string;\n  lazySrc?: string;\n  aspect: number;\n}\n\nexport const defineCdsImageProps = propsFactory(\n  {\n    /**\n     * Позиционирует изображение как `position: absolute`, заполняя родителя.\n     * @en Positions the image with `position: absolute`, filling its parent.\n     */\n    absolute: Boolean,\n    /**\n     * Альтернативный текст изображения (атрибут `alt`).\n     * @en Alternative text of the image (the `alt` attribute).\n     */\n    alt: String,\n    /**\n     * Масштабирует изображение, чтобы оно полностью закрывало контейнер (`object-fit: cover`).\n     * @en Scales the image so that it covers the whole container (`object-fit: cover`).\n     */\n    cover: Boolean,\n    /**\n     * Цвет фона-плейсхолдера, отображаемого во время загрузки.\n     * @en Background color of the placeholder shown while loading.\n     */\n    color: String,\n    /**\n     * Управляет возможностью перетаскивания изображения (атрибут `draggable`).\n     * @en Controls whether the image can be dragged (the `draggable` attribute).\n     */\n    draggable: {\n      type: [Boolean, String] as PropType<boolean | 'true' | 'false'>,\n      default: undefined\n    },\n    /**\n     * Принудительно загружает изображение сразу, не дожидаясь появления в области видимости.\n     * @en Loads the image immediately instead of waiting for it to enter the viewport.\n     */\n    eager: Boolean,\n    /**\n     * CSS-градиент, накладываемый поверх изображения. Например `'to top, rgba(0,0,0,.4), transparent'`.\n     * @en CSS gradient laid over the image. For example `'to top, rgba(0,0,0,.4), transparent'`.\n     */\n    gradient: String,\n    /**\n     * CSS-класс, применяемый к внутреннему элементу `<img>`.\n     * @en CSS class applied to the inner `<img>` element.\n     */\n    imageClass: [String, Array, Object] as PropType<ClassValue>,\n    /**\n     * Источник изображения-заглушки низкого качества, показываемого до загрузки основного.\n     * @en Source of the low-quality placeholder image shown until the main one loads.\n     */\n    lazySrc: String,\n    /**\n     * Опции `IntersectionObserver` для ленивой загрузки.\n     * @en `IntersectionObserver` options for lazy loading.\n     */\n    options: {\n      type: Object as PropType<IntersectionObserverInit>,\n      default: () => ({\n        root: undefined,\n        rootMargin: undefined,\n        threshold: undefined\n      })\n    },\n    /**\n     * Значение атрибута `sizes` для адаптивных изображений.\n     * @en Value of the `sizes` attribute for responsive images.\n     */\n    sizes: String,\n    /**\n     * Источник изображения. Строка или объект с `src`/`srcset`/`lazySrc`/`aspect`.\n     * @en Image source. A string or an object with `src`/`srcset`/`lazySrc`/`aspect`.\n     */\n    src: {\n      type: [String, Object] as PropType<string | CdsImageSrcObject>,\n      default: ''\n    },\n    /**\n     * Значение атрибута `crossorigin`.\n     * @en Value of the `crossorigin` attribute.\n     */\n    crossorigin: String as PropType<'' | 'anonymous' | 'use-credentials'>,\n    /**\n     * Значение атрибута `referrerpolicy`.\n     * @en Value of the `referrerpolicy` attribute.\n     */\n    referrerpolicy: String as PropType<\n      | 'no-referrer'\n      | 'no-referrer-when-downgrade'\n      | 'origin'\n      | 'origin-when-cross-origin'\n      | 'same-origin'\n      | 'strict-origin'\n      | 'strict-origin-when-cross-origin'\n      | 'unsafe-url'\n    >,\n    /**\n     * Набор источников изображения для разных разрешений (атрибут `srcset`).\n     * @en Set of image sources for different resolutions (the `srcset` attribute).\n     */\n    srcset: String,\n    /**\n     * Значение `object-position` для позиционирования изображения внутри контейнера.\n     * @en Value of `object-position` that places the image inside the container.\n     */\n    position: String,\n\n    ...defineCdsResponsiveProps(),\n\n    ...defineTransitionProps(),\n    ...defineThemeProps()\n  },\n  CdsImageConstants.name\n);\n"],"names":[],"mappings":";;;;;AAmBO,MAAM,sBAAsB;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAKV,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,WAAW;AAAA,MACT,MAAM,CAAC,SAAS,MAAM;AAAA,MACtB,SAAS;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMX,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAKV,YAAY,CAAC,QAAQ,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAKlC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKT,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS,OAAO;AAAA,QACd,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,WAAW;AAAA,MAAA;AAAA,IACb;AAAA;AAAA;AAAA;AAAA;AAAA,IAMF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,KAAK;AAAA,MACH,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMX,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,IAKb,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,IAchB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,IAKR,UAAU;AAAA,IAEV,GAAG,yBAAA;AAAA,IAEH,GAAG,sBAAA;AAAA,IACH,GAAG,iBAAA;AAAA,EAAiB;AAAA,EAEtB,kBAAkB;AACpB;"}

package/dist/es/src/components/CdsInput/CdsInput.css

@@ -1,21 +1,3 @@
-@charset "UTF-8";
-/*
-* Easing component
-* @type Map
-*/
-/*
-* Get the transition-timing-function for a given easing and motion mode
-* @param {String} $type - Can be `ease-in-out`, `ease-in`, or `ease-out`
-* @param {String} $mode [basic] - Can be `basic` or `accent`
-* @param {Map} $easing [$easing] - Easing's map
-* @return {Function} CSS `cubic-bezier()` function
-*/
-/*
-* Set the transition-timing-function for a given easing and motion mode
-* @param {Number} $duration — The dynamic duration in ms
-* @param {String} $type - The name of the easing curve to apply
-* @param {String} $mode - The mode for the easing curve to use
-*/
 @layer cds-components {
   .cds-input {
     display: grid;

package/dist/es/src/components/CdsInput/CdsInput.vue_vue_type_script_setup_true_lang.js

@@ -101,27 +101,60 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       CdsInputIcon
     } = useInputIcon(props);
     __expose({
-      /** ID поля ввода */
+      /**
+       * ID поля ввода
+       * @en ID of the input
+       */
       id,
-      /** Является ли поле ввода "грязным" */
+      /**
+       * Является ли поле ввода "грязным"
+       * @en Whether the input is dirty
+       */
       isDirty,
-      /** Является ли поле ввода заблокированным */
+      /**
+       * Является ли поле ввода заблокированным
+       * @en Whether the input is disabled
+       */
       isDisabled,
-      /** Является ли поле ввода только для чтения */
+      /**
+       * Является ли поле ввода только для чтения
+       * @en Whether the input is read-only
+       */
       isReadonly,
-      /** Является ли поле ввода "чистым" */
+      /**
+       * Является ли поле ввода "чистым"
+       * @en Whether the input is pure
+       */
       isPure,
-      /** Является ли поле ввода валидным */
+      /**
+       * Является ли поле ввода валидным
+       * @en Whether the input is valid
+       */
       isValid,
-      /** Является ли поле ввода в процессе валидации */
+      /**
+       * Является ли поле ввода в процессе валидации
+       * @en Whether the input is being validated
+       */
       isValidating,
-      /** Сообщения об ошибках валидации */
+      /**
+       * Сообщения об ошибках валидации
+       * @en Validation error messages
+       */
       errorMessages,
-      /** Функция сброса поля ввода в исходное состояние */
+      /**
+       * Функция сброса поля ввода в исходное состояние
+       * @en Resets the input to its initial state
+       */
       reset,
-      /** Функция сброса валидации поля ввода */
+      /**
+       * Функция сброса валидации поля ввода
+       * @en Resets the validation of the input
+       */
       resetValidation,
-      /** Функция валидации поля ввода */
+      /**
+       * Функция валидации поля ввода
+       * @en Validates the input
+       */
       validate
     });
     return () => {