Make oh-card available to custom widgets

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

bundles/org.openhab.ui/web/src/assets/definitions/widgets/helpers.js

@@ -159,13 +159,15 @@ export function pt (name, label, description) {
  * @param {string} name the name of the widget (in kebab case)
  * @param {string} label the untranslated (English) name of the widget
  * @param {string} description the untranslated (English) description of the widget
- * @param {string} icon an optional icon to illustrate the widget, used for map/plan markers
+ * @param {string} [icon] an optional icon to illustrate the widget, used for map/plan markers
+ * @param {boolean} [hidden=false] whether the widget is hidden and should not be shown in the widget picker
  */
-export function WidgetDefinition (name, label, description, icon) {
+export function WidgetDefinition (name, label, description, icon, hidden = false) {
   this.name = name
   this.label = label
   this.description = description
   if (icon) this.icon = icon
+  this.hidden = hidden
   this.props = {
     parameterGroups: [],
     parameters: []

bundles/org.openhab.ui/web/src/assets/definitions/widgets/standard/cards.js

@@ -13,6 +13,12 @@ export const CardParameters = () => [
   pb('outline', 'Outline', 'Show the card outline').a()
 ]
 
+// OhCard
+export const OhCardDefinition = () => new WidgetDefinition('oh-card', 'Card', 'The basic structure of all card widgets, providing title and footer and requiring a content slot', undefined, true)
+  .paramGroup(CardParameterGroup(), CardParameters())
+  .paramGroup(actionGroup(), actionParams())
+  .paramGroup(actionGroup('Tap Hold', 'Action performed when tapping and holding card (or calling contextual menu on desktop)', 'taphold'), actionParams(null, 'taphold'), true)
+
 // OhLabelCard
 import TrendParameters from '../system/trend.js'
 export const OhLabelCardDefinition = () => new WidgetDefinition('oh-label-card', 'Label Card', 'Display the state of an item in a card')

bundles/org.openhab.ui/web/src/components/widgets/generic-widget-component.vue

@@ -8,6 +8,12 @@
       <generic-widget-component v-else :context="childContext(slotComponent)" v-for="(slotComponent, idx) in slotComponents" :slot="slotName" :key="slotName + '-' + idx" @command="onCommand" />
     </template>
   </component>
+  <oh-card v-else-if="componentType && componentType === 'oh-card' && visible" :context="context">
+    <!-- eslint-disable-next-line vue/no-unused-vars -->
+    <template v-for="(slotComponents, slotName) in context.component.slots" #[slotName]>
+      <generic-widget-component :context="childContext(slotComponent)" v-for="(slotComponent, idx) in slotComponents" :slot="slotName" :key="slotName + '-' + idx" @command="onCommand" />
+    </template>
+  </oh-card>
   <generic-widget-component v-else-if="componentType && componentType.startsWith('widget:') && visible" :context="childWidgetContext()" @command="onCommand" />
   <component v-else-if="componentType && componentType.startsWith('oh-') && visible" :is="componentType" :context="context" @command="onCommand" />
   <div v-else-if="componentType && componentType === 'Label' && visible" :class="config.class" :style="config.style">

bundles/org.openhab.ui/web/src/components/widgets/standard/index.js

@@ -1,5 +1,6 @@
 /* Add any new widget to this file - the name of the export should be "OhSomething" */
 
+export { default as OhCard } from './oh-card.vue'
 export { default as OhEquipmentCard } from './oh-equipment-card.vue'
 export { default as OhLabelCard } from './oh-label-card.vue'
 export { default as OhToggleCard } from './oh-toggle-card.vue'

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

@@ -26,9 +26,11 @@
 <script>
 import mixin from '../widget-mixin'
 import { actionsMixin } from '@/components/widgets/widget-actions'
+import { OhCardDefinition } from '@/assets/definitions/widgets/standard/cards'
 
 export default {
   mixins: [mixin, actionsMixin],
+  widget: OhCardDefinition,
   props: ['context', 'contentStyle', 'contentClass'],
   slotProps: ['header', 'content', 'content-root', 'footer']
 }

bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue

@@ -230,7 +230,7 @@ export default {
           this.$nextTick(() => actions.destroy())
         }
         const stdWidgets = (isList) ? StandardListWidgets : (isCells) ? StandardCellWidgets : StandardWidgets
-        const standardWidgetOptions = Object.keys(stdWidgets).map((k) => {
+        const standardWidgetOptions = Object.keys(stdWidgets).filter((k) => !stdWidgets[k].widget().hidden).map((k) => {
           return {
             text: stdWidgets[k].widget().label,
             color: 'blue',