jws-frontend/src/pages/08_request-list/FormDuty.vue

<script setup lang="ts">
const duty = defineModel<boolean>('duty', { required: true });
const dutyCost = defineModel<number>('dutyCost', { required: false });

defineProps<{
  readonly?: boolean;
  cost?: boolean;
}>();
</script>
<template>
  <div class="row items-center q-px-md q-py-xs">
    <q-radio
      v-model="duty"
      :val="false"
      :label="$t('duty.notInclude')"
      :disable="readonly"
      class="col"
    />
    <q-radio
      v-model="duty"
      :val="true"
      :label="$t('duty.include')"
      :disable="readonly"
      class="col"
    />
    <q-select
      :options="[30]"
      :disable="!duty"
      :label="$t('duty.cost')"
      :readonly
      :hide-dropdown-icon="readonly"
      :model-value="dutyCost || 0"
      @update:model-value="(value) => (dutyCost = value)"
      v-if="dutyCost !== undefined || cost"
      class="col"
      dense
      outlined
      use-input
    />
    <!-- NOTE: For spacing only -->
    <div v-else class="col"></div>
    <div class="offset-md-7"></div>
  </div>
</template>