<commit_before><template>
  <div
    v-if="ratio"
    :style="ratioObject"
    :class="style[ratioClass]"
  >
    <img
      :style="cropObject"
      :class="mapClasses(style,
                         baseClass,
                         modifierClass,
                         radiusClass,
                         coverWrapperClass,
                         cropClass,
                         coverClass,
      )"
      :src="src"
      :alt="alt"
      v-bind="$attrs"
    >
  </div>
  <img
    v-else
    :class="mapClasses(style,
                       baseClass,
                       modifierClass,
                       radiusClass,
    )"
    :src="src"
    :alt="alt"
    v-bind="$attrs"
  >
</template>
<script>
// use normal <script> to declare options
export default {
  inheritAttrs: false
}
</script>
<script setup>
import { useCssModule, computed } from 'vue';
import mapClasses from '../../utils/mapClasses.js';
import propValidator from '../../utils/propValidator.js';
const props = defineProps({
  /**
   * Required. Image source url.
   */
  src: {
    type: String,
    required: true,
  },
  /**
   * Required. Image alt text.
   */
  alt: {
    type: String,
    default: '',
  },
  /**
   * Aspect ratio of the media container. {auto, square, 1-2, 2-3, 3-4, 9-16, 2-1, 3-2, 4-3, 16-9}
   */
  ratio: {
    type: String,
    validator: (value) => ([
      'auto',
      'square',
      '1-2',
      '2-3',
      '3-4',
      '9-16',
      '2-1',
      '3-2',
      '4-3',
      '16-9'].indexOf(value) >= 0) || false,
  },
  /**
   * Requires a `ratio`. Area to crop the image overflow to. {left, center, right} {top, center, bottom}
   */
  crop: {
    type: String,
  },
  /**
   * Requires a `ratio`. Scale the image to be as large as possible to fill the area (background-position: cover;)
   */
  cover: {
    type: Boolean,
  },
  /**
   * Sets a border radius to an element {square, top, right, bottom, left}
   */
  radius: {
    type: String,<commit_msg>feat(image): adds containerClass prop to allow a consumer to pass a custom class to the ratio div<commit_after><template>
  <div
    v-if="ratio"
    :style="ratioObject"
    :class="[style[ratioClass], containerClass]"
  >
    <img
      :style="cropObject"
      :class="mapClasses(style,
                         baseClass,
                         modifierClass,
                         radiusClass,
                         coverWrapperClass,
                         cropClass,
                         coverClass,
      )"
      :src="src"
      :alt="alt"
      v-bind="$attrs"
    >
  </div>
  <img
    v-else
    :class="mapClasses(style,
                       baseClass,
                       modifierClass,
                       radiusClass,
    )"
    :src="src"
    :alt="alt"
    v-bind="$attrs"
  >
</template>
<script>
// use normal <script> to declare options
export default {
  inheritAttrs: false
}
</script>
<script setup>
import { useCssModule, computed } from 'vue';
import mapClasses from '../../utils/mapClasses.js';
import propValidator from '../../utils/propValidator.js';
const props = defineProps({
  /**
   * Required. Image source url.
   */
  src: {
    type: String,
    required: true,
  },
  /**
   * Required. Image alt text.
   */
  alt: {
    type: String,
    default: '',
  },
  /**
   * Aspect ratio of the media container. {auto, square, 1-2, 2-3, 3-4, 9-16, 2-1, 3-2, 4-3, 16-9}
   */
  ratio: {
    type: String,
    validator: (value) => ([
      'auto',
      'square',
      '1-2',
      '2-3',
      '3-4',
      '9-16',
      '2-1',
      '3-2',
      '4-3',
      '16-9'].indexOf(value) >= 0) || false,
  },
  /**
   * Requires a `ratio`. Area to crop the image overflow to. {left, center, right} {top, center, bottom}
   */
  crop: {
    type: String,
  },
  /**
   * Requires a `ratio`. Scale the image to be as large as possible to fill the area (background-position: cover;)
   */
  cover: {
    type: Boolean,
  },
    /**
   * Adds a custom class to the cdr-img__ratio container div
   */
  containerClass: String,
  /**
   * Sets a border radius to an element {square, top, right, bottom, left}
   */
  radius: {
    type: String,
{'fraction_non_alphanumeric': 0.15195022732711175, 'fraction_numerical': 0.017707585546781528, 'mean_word_length': 1.7125243348475017, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '498648', 'n_tokens_mistral': 1396, 'n_tokens_neox': 1345, 'n_words': 353}