kodadot/nft-gallery

<template>
  <div>
    <BasicNumberInput
      v-model="vRoyalty"
      data-testid="royalty-form-input-percentage"
      :label="$t('mint.royalty.rate')"
      expanded
      :step="0.1"
      :min-step="0.01"
      :min="0"
      :max="99.99"
    />

    <template v-if="Number(vRoyalty)">
      <BasicSwitch
        v-model="isMine"
        :label="isMine ? 'mint.royalty.mine' : 'mint.royalty.custom'"
        data-testid="royalty-form-switch"
      />
      <AddressInput
        v-show="!isMine"
        v-model="vAddress"
        label="mint.royalty.receiver"
        data-testid="royalty-form-custom-address"
        :strict="false"
        empty-on-error
      />
    </template>
  </div>
</template>

<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import BasicSwitch from '@/components/shared/form/BasicSwitch.vue'
import BasicNumberInput from '@/components/shared/form/BasicNumberInput.vue'

const { accountId } = useAuth()

const props = defineProps({
  amount: {
    type: [Number, String],
    required: true,
  },
  address: {
    type: String,
    required: true,
  },
})

const emit = defineEmits(['update:amount', 'update:address'])

const vRoyalty = useVModel(props, 'amount', emit)
const vAddress = useVModel(props, 'address', emit)

const isMine = ref(true)

watch(isMine, () => {
  if (isMine.value) {
    vAddress.value = accountId.value
  }
})
</script>