<script setup>
// import MDIcon from '../MDIcon/MDIcon.vue'
defineProps({
  /**
   * ボタン内のテキストを設定
   * @example p_Label: '登録完了'
   */
  p_Label: {
    type: String,
    default: '',
  },
  /**
   * ボタンの有効無効の切り替え
   * @example disabled: false
   */
  disabled: {
    type: Boolean,
    default: false,
  },
  /**
   * ボタンのtype指定（ボタンの色が個別で持てないため、classを複数作成して対応）
   * typeを追加する際はp_BtnTypeのvalidatorにクラス名を追加し、同名のクラスを作成した上で使用すること
   * 使用するプロジェクトにて
   * :root{
   *  --q-primary(p_BtnTypeの選択肢から選ぶ):背景;
   * }
   * の形で表記して色を指定する。
   *
   * ※複数ファイルで同名のカスタムプロパティを宣言すると環境によっては不具合になるので注意
   * @example p_BtnType: primary, secondary, negative, positive
   */
  p_BtnType: {
    type: String,
    default: 'primary',
    validator: (val) =>
      [
        'primary',
        'secondary',
        'negative',
        'positive',
        'accent',
        'dark',
        'negative',
        'info',
      ].includes(val),
  },
  p_Icon: {
    type: String,
    default: '',
  },
})
</script>

<!-- HTML構成 -->
<template>
  <button :class="`_btn_design _type_${p_BtnType}`" :disabled="disabled">
    <slot></slot> {{ p_Label }}
  </button>
</template>

<style lang="sass" scoped>

// ---------------------------------------------------------------------------
// カスタムプロパティ
// ---------------------------------------------------------------------------
._type_primary
  background: var(--q-primary, #3c4d58)

._type_secondary
  background: var(--q-secondary, #3c4d58)

._type_positive
  background: var(--q-positive, #3c4d58)

._type_negative
  background: var(--q-negative, #3c4d58)

._type_accent
  background: var(--q-accent, #f2961c)
._type_dark
  background: var(--q-dark, #f2961c)
._type_negative
  background: var(--q-negative, #f2961c)
._type_info
  background: var(--q-info, #f2961c)


// ---------------------------------------------------------------------------
// ボタンの基本的なデザイン
// ---------------------------------------------------------------------------
._btn_design
  width: 100%
  height: 40px
  font: 14px "Noto Sans Jp", sans-serif
  line-height: 1.715em
  font-weight: 500
  border: none
  border-radius: 28px
  box-shadow: none
  overflow: hidden
  color: #ffffff
  cursor: pointer
  display: flex
  align-items: center
  justify-content: center
  user-select: none

// ---------------------------------------------------------------------------
// 疑似クラス（hover,activなど）
// ---------------------------------------------------------------------------
._btn_design:focus-visible,
._btn_design:hover
  opacity: 0.7

._btn_design:active
  opacity: 0.6

._btn_design:disabled
  opacity: 0.7
  cursor: not-allowed
</style>
