<commit_before><script setup>
import { useCssModule, computed } from 'vue';

import propValidator from '../../utils/propValidator.js';

const props = defineProps({
  /**
     * Tag accepts a user defined element and expects either: 'ul' = Unordered List or 'ol' = Ordered List.
     */
  tag: {
    type: String,
    default: 'ul',
    validator: (value) => propValidator(value, ['ul', 'ol']),
  },
  modifier: {
    type: String,
    default: '',
    validator: (value) => propValidator(value, ['', 'ordered', 'unordered', 'compact', 'inline']),
  },
});
const baseClass = 'cdr-list';
const style = useCssModule();
const modifierClasses = computed(() => {
  const modifiers = props.modifier.split(' ');
  return modifiers.map((mod) => style[`${baseClass}--${mod}`]);
});
</script>

<template>
  <component
    :is="props.tag"
    :class="[style[baseClass], modifierClasses]"
  >
    <slot />
  </component>
</template>

<style lang="scss" module src="./styles/CdrList.module.scss">
</style>
<commit_msg>refactor(list): remove script setup<commit_after><script>
import { defineComponent, useCssModule, computed } from 'vue';
import propValidator from '../../utils/propValidator';

export default defineComponent({
  name: 'CdrList',
  props: {
    /**
     * Tag accepts a user defined element and expects either: 'ul' = Unordered List or 'ol' = Ordered List.
     */
    tag: {
      type: String,
      default: 'ul',
      validator: (value) => propValidator(value, ['ul', 'ol']),
    },
    modifier: {
      type: String,
      default: '',
      validator: (value) => propValidator(value, ['', 'ordered', 'unordered', 'compact', 'inline']),
    },
  },

  setup(props) {
    const baseClass = 'cdr-list';
    const style = useCssModule();
    const modifierClasses = computed(() => {
      const modifiers = props.modifier.split(' ');
      return modifiers.map((mod) => style[`${baseClass}--${mod}`]);
    });
    return {
      style,
      baseClass,
      modifierClasses,
    };
  },
});
</script>

<template>
  <component
    :is="tag"
    :class="[style[baseClass], modifierClasses]"
  >
    <slot />
  </component>
</template>

<style lang="scss" module src="./styles/CdrList.module.scss">
</style>

{'fraction_non_alphanumeric': 0.18617261635788523, 'fraction_numerical': 0.0, 'mean_word_length': 3.349705304518664, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 29, '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': '2623889', 'n_tokens_mistral': 720, 'n_tokens_neox': 714, 'n_words': 171}