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";
import SidebarButton from "../src/lib-components/SidebarButton.vue";
import SidebarHeading from "../src/lib-components/SidebarHeading.vue";

export default defineComponent({
  components: {
    DashboardLayout,
    KeycloakDashboardHeader,
    KeycloakDashboardSidebar,
    SidebarHeading,
    SidebarButton,
  },
  data: function() {
    return {
      text: "",
      results: [],
      error: {
        text: "mehr text",
        variant: "danger",
        dismissible: true,
      },
    };
  },
  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 }))
          );
        });
    },

    doSomething: function(evt) {
      console.log(evt);
    },
  },
  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>
        <panel-with-sidebox sideboxWidth="200px">
          <template v-slot:default>
            <h1>Component examples</h1>

            <row-entry label="Something long long long long" class="mb-1">
              Test Test Test Test Test Test Test Test Test Test Test Test Test
              Test Test Test Test Test Test Test Test Test Test Test Test Test
              Test Test Test Test Test Test Test Test Test Test Test Test Test
              Test Test Test Test Test
            </row-entry>
            <row-entry label="Something" class="mb-1">Test </row-entry>
            <notification modelValue="text" />
            <notification
              :modelValue="{ text: 'mehr text', variant: 'danger' }"
            />
            <notification v-model="error" />
            <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>
          <template v-slot:sidebar>
            <sidebar-heading label="Title" />
            <sidebar-list>
              <sidebar-button
                icon="file"
                :action="doSomething"
                label="sometext"
              />
            </sidebar-list>
          </template>
        </panel-with-sidebox>
      </template>
    </dashboard-layout>
    <div></div>
  </div>
</template>