Support configurable visibility of semantic model cards (#2144)

Closes #2143.

Only render model-card if `visible` computed property is `true`.
Hide divs in model-tabs which do not have a visible model-card.

Signed-off-by: Thomas Wunschel <thomas.wunschel@twistsolutions.de>

bundles/org.openhab.ui/web/src/components/cards/model-card.vue

@@ -1,5 +1,5 @@
 <template>
-  <f7-card expandable ref="card" class="model-card" :class="type + '-card'" :animate="$f7.data.themeOptions.expandableCardAnimation !== 'disabled'" card-tablet-fullscreen @card:opened="cardOpening" @card:closed="cardClosed">
+  <f7-card v-if="visible" expandable ref="card" class="model-card" :class="type + '-card'" :animate="$f7.data.themeOptions.expandableCardAnimation !== 'disabled'" card-tablet-fullscreen @card:opened="cardOpening" @card:closed="cardClosed">
     <f7-card-content :padding="false">
       <div :class="(!backgroundImageUrl) ? `bg-color-${color}` : undefined" :style="{ height: `calc(var(--f7-safe-area-top) + ${headerHeight})` }">
         <f7-card-header :text-color="config.invertText ? 'black' : 'white'" class="display-block card-header" :style="{ height: `calc(var(--f7-safe-area-top) + ${headerHeight})` }">

bundles/org.openhab.ui/web/src/pages/home/model-tab.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="disable-user-select">
+  <div class="disable-user-select model-tab">
     <div v-for="(elements, idx) in groups" :key="idx">
       <f7-block-title medium v-if="elements.length > 0 && elements[0].separator">
         {{ elements[0].separator }}
@@ -19,6 +19,8 @@
 </template>
 
 <style lang="stylus">
+.model-tab > div:not(:has(.model-card))
+  display none
 
 .model-cards-section
   justify-content center