serve.vue

<script>
import { defineComponent } from "vue";
import DashboardLayout from "../src/lib-components/DashboardLayout.vue";
import KeycloakDashboardHeader from "../src/lib-components/KeycloakDashboardHeader.vue";
import KeycloakDashboardSidebar from "../src/lib-components/KeycloakDashboardSidebar.vue";

export default defineComponent({
  components: {
    DashboardLayout,
    KeycloakDashboardHeader,
    KeycloakDashboardSidebar,
  },
  data: function() {
    return {
      text: "",
      results: [],
    };
  },
  methods: {
    lookupTaxonomy: function(input, result) {
      window
        .fetch(
          "https://www.ebi.ac.uk/ena/taxonomy/rest/suggest-for-search/" + input
        )
        .then((r) => r.json())
        .then((j) => {
          result(
            j.map((x) => ({ value: x.scientificName, label: x.scientificName }))
          );
        });
    },
  },
  name: "ServeDev",
});
</script>

<template>
  <div id="app">
    <dashboard-layout>
      <template v-slot:header>
        <keycloak-dashboard-header
          appName="Test"
          :noKeycloak="true"
        ></keycloak-dashboard-header>
      </template>
      <template v-slot:sidebar>
        <keycloak-dashboard-sidebar
          :noKeycloak="true"
        ></keycloak-dashboard-sidebar>
      </template>
      <template v-slot:default>
        <h1>Component examples</h1>
        <loading-panel>Loading...</loading-panel>
        <row-entry label="Something">Test</row-entry>
        <form-group-text-box v-model="text" label="Input data" :maxChars="12" />
        <form-group-text-field
          v-model="text"
          label="Input data"
          :maxChars="12"
        />
        <info-panel heading="Heading" title="Panel-Title"
          >Some content</info-panel
        >
        <info-panel heading="Heading" title="Panel-Title" type="secondary">
          Some content
        </info-panel>
        <duration-input />
        <currency-input />
        <remote-typeahead
          placeholder="Taxon search"
          :suggestionLookup="lookupTaxonomy"
          v-model="text"
        />
      </template>
    </dashboard-layout>
    <div></div>
  </div>
</template>