Newer
Older
<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";
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">Test</row-entry>
<notification modelValue="text" />
<notification
:modelValue="{ text: 'mehr text', variant: 'danger' }"
/>
<notification v-model="error" />
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<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>