sfp_front_vue_alugap_owner/src/pages/VersionPage.vue

<template>
  <q-page class="q-pa-md">
    <DefaultHeaderPage />

    <div class="subtitle-1 q-my-md text-dark q-mx-lg">
      Histórico de atualizações
    </div>

    <div class="sub1 q-mt-lg text-dark q-mx-lg">
      Versão atual:
      <span class="body1 text-dark">{{ version.version }}</span>
    </div>

    <q-table
      :columns="columns"
      :pagination="{ rowsPerPage: 0 }"
      :rows="versoes"
      class="q-my-md softpar-table"
      flat
      hide-bottom
    >
      <template #no-data>
        <div class="q-mx-auto q-pa-md body2">Nenhum registro encontrado</div>
      </template>

      <template #body="props">
        <q-tr :props="props" class="body2 text-dark">
          <q-td key="versao" :props="props">
            {{ props.row.versao }}
          </q-td>

          <q-td key="atualizacoes" :props="props">
            <div
              v-for="atualizacao in props.row.atualizacoes"
              :key="atualizacao"
              class="flex q-my-auto q-pt-sm"
            >
              <div v-if="atualizacao.mudancas.length > 0">
                <div
                  class="text-bold bg-dark-4 q-mb-xs"
                  style="
                    height:        20px;
                    width:         fit-content;
                    margin-left:   5px;
                    border-radius: 5px;
                    padding-left:  5px;
                    padding-right: 5px;
                  "
                >
                  {{ atualizacao.tipo }}
                </div>

                <div v-for="mudanca in atualizacao.mudancas" :key="mudanca">
                  <div style="white-space: normal" class="q-mb-xs">
                    - {{ mudanca.descricao }}
                  </div>
                </div>
              </div>
            </div>
          </q-td>

          <q-td key="data" :props="props">
            {{ props.row.data }}
          </q-td>
        </q-tr>
      </template>
    </q-table>
  </q-page>
</template>

<script setup>
import versoes from "src/pages/version/components/version";
import version from "../../package.json";

import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";

const columns = [
  {
    name:  "versao",
    label: "Versão do sistema",
    field: "versao",
    align: "center",
    style: "width: 5%; ",
  },
  {
    name:  "atualizacoes",
    label: "Atualizações",
    field: "atualizacoes",
    align: "left",
    style: "width: 75%;",
  },
  {
    name:  "data",
    label: "Data da atualização",
    field: "data",
    align: "center",
    style: "width: 10%",
  },
];
</script>

<style lang="scss">
@import "src/css/table.scss";
</style>