Fix oh-gauge-card action regression & Improve oh-card docs (openhab#2794

)

Fixes openhab#2793.
Regression from openhab#2781.

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>

bundles/org.openhab.ui/doc/components/index.md

@@ -58,6 +58,8 @@ source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.u
 | [`oh-video-card`](./oh-video-card.html) |  [Video Card](./oh-video-card.html) | Display a video (URL or URL from String item) in a card |
 | [`oh-webframe-card`](./oh-webframe-card.html) |  [Web Frame Card](./oh-webframe-card.html) | Display a web page in a card |
 
+All cards are based on the [`oh-card`](./oh-card.html) component and share the same config options for modifying the card's appearance.
+Refer to the [`oh-card` Style](./oh-card.html#style) documentation to learn about card styling options.
 
 ## Standard Widget Library (List Items)
 

bundles/org.openhab.ui/doc/components/oh-card.md

@@ -427,6 +427,7 @@ You need to define either one of these two slots:
 
 - `content`: The default slot for content, which will then be rendered inside a `f7-card-content` element.
 - `content-root`: The slot for content that should be rendered directly inside the card, without any additional wrapping element.
+  If this slot is defined, the `content` slot will be ignored, and you have to implement the handling of `config.contentStyle` and `config.contentClass` yourself.
 
 Optionally, you can define these slots:
 

bundles/org.openhab.ui/web/src/components/widgets/standard/oh-gauge-card.vue

@@ -1,19 +1,34 @@
 <template>
   <oh-card :context="context" :content-class="['oh-gauge-card', 'display-flex', 'justify-content-center']">
-    <template #content>
-      <oh-gauge :context="childContext(context.component)" />
+    <template #content-root>
+      <f7-card-content :style="config.contentStyle" :class="[ ...(Array.isArray(config.contentClass) ? config.contentClass : []), 'oh-gauge-card', 'display-flex', 'justify-content-center']">
+        <f7-link v-if="config.action" class="oh-gauge-link" @click="performAction">
+          <oh-gauge :context="childContext(context.component)" />
+        </f7-link>
+        <oh-gauge v-else :context="childContext(context.component)" />
+      </f7-card-content>
     </template>
   </oh-card>
 </template>
 
+<style lang="stylus">
+.oh-gauge-link
+  position absolute
+  top 0
+  left 0
+  width 100%
+  height 100%
+</style>
+
 <script>
 import mixin from '../widget-mixin'
+import { actionsMixin } from '@/components/widgets/widget-actions'
 import OhCard from '@/components/widgets/standard/oh-card.vue'
 import OhGauge from '../system/oh-gauge.vue'
 import { OhGaugeCardDefinition } from '@/assets/definitions/widgets/standard/cards'
 
 export default {
-  mixins: [mixin],
+  mixins: [mixin, actionsMixin],
   components: {
     OhCard,
     OhGauge