<commit_before><template>
  <div
    v-show="hidden === false"
    class="z-shape is-extension"
    :class="[componentType, activated, shape]"
    :style="responsive === true ? styles.main : zpos.main">
    <div
      class="z-outer-point" :class="[shape]"
      :style="responsive === true ? styles.plate : zpos.plate">
    </div>
  </div>
</template>

<script>
export default {
  name: 'z-pagination',
  props: {
    distance: {
      type: Number,
      default: 100
    },
    angle: {
      type: Number,
      default: 0
    },
    size: {
      type: String,
      default: 'xs'
    },
    index: {
      type: Number,
      default: 0
    },
    active: {
      type: Number,
      default: 0
    }
  },
  inject: ['view'],
  data () {
    return {
      componentType: this.$options.name,
      hidden: false,
      zpos: {}
    }
  },
  computed: {
    responsive () {
      if (this.view === this.$zircle.getCurrentViewName()) {
        // eslint-disable-next-line
        this.zpos = this.styles
        return true
      } else {
        return false
      }
    },
    position () {
      return this.$zircle.calcPosition(this)
    },
    activated () {
      return {
        active: this.active === this.index,
        deactive: this.active < this.index || this.active > this.index
      }
    },
    shape () {
      if (this.circle) {
        return 'is-circle'
      } else if (this.square) {
        return 'is-square'
      }
      return ''
    },
    styles () {
      const zwidth = this.$zircle.getComponentWidth(this.size) / 2
      return {
        main: {
          width: zwidth + 'px',
          height: zwidth + 'px',
          margin: this.$zircle.getThemeShape() === 'square' ? '' : -(zwidth / 2) + 'px 0 0 ' + -(zwidth / 2) + 'px',
          transform: this.$zircle.getThemeShape() === 'square' ? '' : 'translate3d(' + this.position.X + 'px, ' + this.position.Y + 'px, 0px)'
        },
        plate: {
          width: zwidth + 12 + 'px',
          height: zwidth + 12 + 'px',
          margin: this.$zircle.getThemeShape() === 'square' ? '' : -((zwidth + 12) / 2) + 'px 0 0 ' + -((zwidth + 12) / 2) + 'px'
        }
      }
    }
  },
  mounted () {
    this.zpos = this.styles
    console.log(this.$zircle.getComponentWidth(this.$parent.size) + this.$zircle.getComponentWidth(this.size))
  }
}
</script><commit_msg>style: delete console.log<commit_after><template>
  <div
    v-show="hidden === false"
    class="z-shape is-extension"
    :class="[componentType, activated, shape]"
    :style="responsive === true ? styles.main : zpos.main">
    <div
      class="z-outer-point" :class="[shape]"
      :style="responsive === true ? styles.plate : zpos.plate">
    </div>
  </div>
</template>

<script>
export default {
  name: 'z-pagination',
  props: {
    distance: {
      type: Number,
      default: 100
    },
    angle: {
      type: Number,
      default: 0
    },
    size: {
      type: String,
      default: 'xs'
    },
    index: {
      type: Number,
      default: 0
    },
    active: {
      type: Number,
      default: 0
    }
  },
  inject: ['view'],
  data () {
    return {
      componentType: this.$options.name,
      hidden: false,
      zpos: {}
    }
  },
  computed: {
    responsive () {
      if (this.view === this.$zircle.getCurrentViewName()) {
        // eslint-disable-next-line
        this.zpos = this.styles
        return true
      } else {
        return false
      }
    },
    position () {
      return this.$zircle.calcPosition(this)
    },
    activated () {
      return {
        active: this.active === this.index,
        deactive: this.active < this.index || this.active > this.index
      }
    },
    shape () {
      if (this.circle) {
        return 'is-circle'
      } else if (this.square) {
        return 'is-square'
      }
      return ''
    },
    styles () {
      const zwidth = this.$zircle.getComponentWidth(this.size) / 2
      return {
        main: {
          width: zwidth + 'px',
          height: zwidth + 'px',
          margin: this.$zircle.getThemeShape() === 'square' ? '' : -(zwidth / 2) + 'px 0 0 ' + -(zwidth / 2) + 'px',
          transform: this.$zircle.getThemeShape() === 'square' ? '' : 'translate3d(' + this.position.X + 'px, ' + this.position.Y + 'px, 0px)'
        },
        plate: {
          width: zwidth + 12 + 'px',
          height: zwidth + 12 + 'px',
          margin: this.$zircle.getThemeShape() === 'square' ? '' : -((zwidth + 12) / 2) + 'px 0 0 ' + -((zwidth + 12) / 2) + 'px'
        }
      }
    }
  },
  mounted () {
    this.zpos = this.styles
  }
}
</script>
{'fraction_non_alphanumeric': 0.1711183496199783, 'fraction_numerical': 0.010857763300760043, 'mean_word_length': 1.8240343347639485, 'pattern_counts': {'":': 0, '<': 21, '<?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': '6979960', 'n_tokens_mistral': 1600, 'n_tokens_neox': 1537, 'n_words': 321}