<div v-if="!offline">
<!-- Optional messages -->
<Message :item="config.message" />
<!-- Horizontal layout -->
<div v-if="!vlayout || filter" class="columns is-multiline">
<div v-if="!offline">
<!-- Optional messages -->
<Message :item="config.message" />
<!-- Horizontal layout -->
<div v-if="!vlayout || filter" class="columns is-multiline">
- <template v-for="group in services">
- <h2 v-if="group.name" class="column is-full group-title">
+ <template v-for="(group, groupIndex) in services">
+ <h2
+ v-if="group.name"
+ class="column is-full group-title"
+ :key="`header-${groupIndex}`"
+ >
<i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
<div v-else-if="group.logo" class="group-logo media-left">
<figure class="image is-48x48">
<i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
<div v-else-if="group.logo" class="group-logo media-left">
<figure class="image is-48x48">
>
<h2 v-if="group.name" class="group-title">
<i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
>
<h2 v-if="group.name" class="group-title">
<i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
import ConnectivityChecker from "./components/ConnectivityChecker.vue";
import Service from "./components/Service.vue";
import Message from "./components/Message.vue";
import ConnectivityChecker from "./components/ConnectivityChecker.vue";
import Service from "./components/Service.vue";
import Message from "./components/Message.vue";
}
this.config = merge(defaults, config);
this.services = this.config.services;
}
this.config = merge(defaults, config);
this.services = this.config.services;
return (
item.name.toLowerCase().includes(this.filter) ||
(item.subtitle && item.subtitle.toLowerCase().includes(this.filter)) ||
return (
item.name.toLowerCase().includes(this.filter) ||
(item.subtitle && item.subtitle.toLowerCase().includes(this.filter)) ||