<commit_before>import { Component, Prop, Vue } from 'vue-property-decorator'
import { Value, Styles, Position, TooltipProp, TooltipFormatter } from './typings'

import './styles/dot.scss'

@Component({ name: 'VueSliderDot' })
export default class VueSliderDot extends Vue {
  $refs!: {
    dot: HTMLDivElement
  }

  @Prop({ default: 0 })
  value!: Value

  @Prop() tooltip!: TooltipProp

  @Prop() dotStyle?: Styles

  @Prop() tooltipStyle?: Styles

  @Prop({
    type: String,
    validator: (val: string) => ['top', 'right', 'bottom', 'left'].indexOf(val) > -1,
    required: true,
  })
  tooltipPlacement!: Position

  @Prop({ type: [String, Function] })
  tooltipFormatter?: TooltipFormatter

  @Prop({ type: Boolean, default: false })
  focus!: boolean

  @Prop({ default: false })
  disabled!: boolean

  get dotClasses() {
    return [
      'vue-slider-dot',
      {
        'vue-slider-dot-hover': this.tooltip === 'hover' || this.tooltip === 'active',
        'vue-slider-dot-disabled': this.disabled,
        'vue-slider-dot-focus': this.focus,
      },
    ]
  }

  get handleClasses() {
    return [
      'vue-slider-dot-handle',
      {
        'vue-slider-dot-handle-disabled': this.disabled,
        'vue-slider-dot-handle-focus': this.focus,
      },
    ]
  }

  get tooltipClasses() {
    return [
      'vue-slider-dot-tooltip',
      [`vue-slider-dot-tooltip-${this.tooltipPlacement}`],
      {
        'vue-slider-dot-tooltip-show': this.showTooltip,
      },
    ]
  }

  get tooltipInnerClasses() {
    return [
      'vue-slider-dot-tooltip-inner',
      [`vue-slider-dot-tooltip-inner-${this.tooltipPlacement}`],
      {
        'vue-slider-dot-tooltip-inner-disabled': this.disabled,
        'vue-slider-dot-tooltip-inner-focus': this.focus,
      },
    ]
  }

  get showTooltip(): boolean {
    switch (this.tooltip) {
      case 'always':
        return true
      case 'none':
        return false
      case 'focus':
      case 'active':
        return !!this.focus
      default:
        return false
    }
  }

  get tooltipValue(): Value {
    if (this.tooltipFormatter) {
      return typeof this.tooltipFormatter === 'string'
        ? this.tooltipFormatter.replace(/\{value\}/, String(this.value))
        : this.tooltipFormatter(this.value)
    } else {
      return this.value
    }
  }

  dragStart(e: MouseEvent | TouchEvent) {
    if (this.disabled) {
      return false
    }

    this.$emit('drag-start')
  }

  render() {
    return (
      <div
        ref="dot"
        class={this.dotClasses}
        aria-valuetext={this.tooltipValue?.toString()}
        onMousedown={this.dragStart}
        onTouchstart={this.dragStart}
      >
        {this.$slots.dot || <div class={this.handleClasses} style={this.dotStyle} />}
        {this.tooltip !== 'none' ? (
          <div class={this.tooltipClasses}>
            {this.$slots.tooltip || (
              <div class={this.tooltipInnerClasses} style={this.tooltipStyle}>
                <span class={'vue-slider-dot-tooltip-text'}>{this.tooltipValue}</span>
              </div>
            )}<commit_msg>fix: toString error<commit_after>import { Component, Prop, Vue } from 'vue-property-decorator'
import { Value, Styles, Position, TooltipProp, TooltipFormatter } from './typings'

import './styles/dot.scss'

@Component({ name: 'VueSliderDot' })
export default class VueSliderDot extends Vue {
  $refs!: {
    dot: HTMLDivElement
  }

  @Prop({ default: 0 })
  value!: Value

  @Prop() tooltip!: TooltipProp

  @Prop() dotStyle?: Styles

  @Prop() tooltipStyle?: Styles

  @Prop({
    type: String,
    validator: (val: string) => ['top', 'right', 'bottom', 'left'].indexOf(val) > -1,
    required: true,
  })
  tooltipPlacement!: Position

  @Prop({ type: [String, Function] })
  tooltipFormatter?: TooltipFormatter

  @Prop({ type: Boolean, default: false })
  focus!: boolean

  @Prop({ default: false })
  disabled!: boolean

  get dotClasses() {
    return [
      'vue-slider-dot',
      {
        'vue-slider-dot-hover': this.tooltip === 'hover' || this.tooltip === 'active',
        'vue-slider-dot-disabled': this.disabled,
        'vue-slider-dot-focus': this.focus,
      },
    ]
  }

  get handleClasses() {
    return [
      'vue-slider-dot-handle',
      {
        'vue-slider-dot-handle-disabled': this.disabled,
        'vue-slider-dot-handle-focus': this.focus,
      },
    ]
  }

  get tooltipClasses() {
    return [
      'vue-slider-dot-tooltip',
      [`vue-slider-dot-tooltip-${this.tooltipPlacement}`],
      {
        'vue-slider-dot-tooltip-show': this.showTooltip,
      },
    ]
  }

  get tooltipInnerClasses() {
    return [
      'vue-slider-dot-tooltip-inner',
      [`vue-slider-dot-tooltip-inner-${this.tooltipPlacement}`],
      {
        'vue-slider-dot-tooltip-inner-disabled': this.disabled,
        'vue-slider-dot-tooltip-inner-focus': this.focus,
      },
    ]
  }

  get showTooltip(): boolean {
    switch (this.tooltip) {
      case 'always':
        return true
      case 'none':
        return false
      case 'focus':
      case 'active':
        return !!this.focus
      default:
        return false
    }
  }

  get tooltipValue(): Value {
    if (this.tooltipFormatter) {
      return typeof this.tooltipFormatter === 'string'
        ? this.tooltipFormatter.replace(/\{value\}/, String(this.value))
        : this.tooltipFormatter(this.value)
    } else {
      return this.value
    }
  }

  dragStart(e: MouseEvent | TouchEvent) {
    if (this.disabled) {
      return false
    }

    this.$emit('drag-start')
  }

  render() {
    return (
      <div
        ref="dot"
        class={this.dotClasses}
        aria-valuetext={this.tooltipValue ? this.tooltipValue.toString() : ''}
        onMousedown={this.dragStart}
        onTouchstart={this.dragStart}
      >
        {this.$slots.dot || <div class={this.handleClasses} style={this.dotStyle} />}
        {this.tooltip !== 'none' ? (
          <div class={this.tooltipClasses}>
            {this.$slots.tooltip || (
              <div class={this.tooltipInnerClasses} style={this.tooltipStyle}>
                <span class={'vue-slider-dot-tooltip-text'}>{this.tooltipValue}</span>
              </div>
            )}
{'fraction_non_alphanumeric': 0.15682182985553772, 'fraction_numerical': 0.0006420545746388443, 'mean_word_length': 2.375406283856988, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 21, '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': '5683326', 'n_tokens_mistral': 1998, 'n_tokens_neox': 1965, 'n_words': 363}