<script setup>
import { computed } from 'vue'

/**
 * Spinnerの色を変更する際はcssのstrokeを指定することで変更可能
 * @example stroke: #707070
 */

const props = defineProps({
  /**
   * サイズはsizeDict(下記参照)から指定されたサイズを指定するか、数値で指定する
   * @example `xs, sm, md, lg, xl, 16, 24 etc`
   */
  size: { type: [Number, String], default: '35' },
  thickness: { type: Number, default: 5 },
})
const sizeDict = {
  xs: 18,
  sm: 24,
  md: 32,
  lg: 38,
  xl: 46,
}
const cSize = computed(() =>
  props.size in sizeDict ? `${sizeDict[props.size]}px` : `${props.size}px`
)
</script>

<template>
  <div class="_spinner_contain">
    <svg class="_c_spinner" :width="cSize" :height="cSize" viewBox="25 25 50 50">
      <circle
        class="_path"
        cx="50"
        cy="50"
        r="20"
        fill="none"
        :stroke-width="thickness"
        stroke-miterlimit="10"
      />
    </svg>
  </div>
</template>

<style lang="sass">
._spinner_contain
  border: none
  margin: 0 auto
  width: fit-content
  stroke: #707070


@keyframes c-spin
  0%
    transform: rotate3d(0, 0, 1, 0deg)
  25%
    transform: rotate3d(0, 0, 1, 90deg)
  50%
    transform: rotate3d(0, 0, 1, 180deg)
  75%
    transform: rotate3d(0, 0, 1, 270deg)
  100%
    transform: rotate3d(0, 0, 1, 359deg)

@keyframes c-dash
  0%
    stroke-dasharray: 1, 200
    stroke-dashoffset: 0
  50%
    stroke-dasharray: 89, 200
    stroke-dashoffset: -35px
  100%
    stroke-dasharray: 89, 200
    stroke-dashoffset: -124px

._c_spinner
  animation: c-spin 2s linear infinite
  transform-origin: center center
  ._path
    stroke-dasharray: 1, 200
    stroke-dashoffset: 0
    animation: c-dash 1.5s ease-in-out infinite
</style>
