Update widget-mixin to composable

bundles/org.openhab.ui/web/eslint.config.js

@@ -41,6 +41,7 @@ const rules = {
     'no-case-declarations': 'off',
     'no-console': 'off',
     'no-debugger': 'off',
+    'no-unsed-vars': 'off',
     'no-irregular-whitespace': 'off',
     // 'es/no-regexp-lookbehind-assertions': 'error', // Supported in Safari  >= 16.4, which breaks iOS 15.x.
     'no-trailing-spaces': 'error',
@@ -72,6 +73,7 @@ const rules = {
     'vue/singleline-html-element-content-newline': 'error',
     'vue/v-on-style': 'error',
     'vue/v-slot-style': 'error',
+    '@typescript-eslint/no-unused-vars': 'warn',
 
     // The following rules should be activated successively. Due to the large amount
     // of required changes, the activations should be clustered in several pull requests.

bundles/org.openhab.ui/web/src/assets/definitions/widgets/home/index.d.ts

@@ -0,0 +1,9 @@
+import { WidgetDefinition } from '../index'
+
+export declare function OhHomePageDefinition(): WidgetDefinition
+export declare function OhLocationsTabParameters(): WidgetDefinition
+export declare function OhEquipmentTabParameters(): WidgetDefinition
+export declare function OhPropertiesTabParameters(): WidgetDefinition
+export declare function OhLocationCardParameters(): WidgetDefinition
+export declare function OhEquipmentCardParameters(): WidgetDefinition
+export declare function OhPropertyCardParameters(): WidgetDefinition

bundles/org.openhab.ui/web/src/assets/definitions/widgets/index.d.ts

@@ -0,0 +1,191 @@
+import * as api from '@/api'
+
+/**
+ * Parameter types supported by widget definitions
+ */
+export type ParameterType = (typeof api.ConfigDescriptionParameter)['type']
+
+/**
+ * Visibility function type
+ * @param value - The current value of the parameter
+ * @param configuration - The full configuration object
+ * @param configDescription - The configuration description
+ * @param parameters - The parameters object
+ * @returns Whether the parameter should be visible
+ */
+export type VisibilityFunction = (value: any, configuration: Record<string, any>, configDescription: any, parameters: any) => boolean
+
+/**
+ * Parameter class for building widget configuration parameters
+ */
+export declare class Parameter implements api.ConfigDescriptionParameter {
+  type: ParameterType
+  name: string
+  label: string
+  description: string
+  advanced?: boolean
+  context?: string
+  groupName?: string
+  multiple?: boolean
+  options?: Array<api.ParameterOption>
+  limitToOptions?: boolean
+  default?: any
+  required?: boolean
+  visible?: VisibilityFunction
+
+  constructor(type: ParameterType, name: string, label: string, description: string)
+
+  /**
+   * Sets the parameter as advanced
+   */
+  a(): this
+
+  /**
+   * Sets the context of the parameter
+   */
+  c(context: string): this
+
+  /**
+   * Sets the groupName of the parameter
+   */
+  g(groupName: string): this
+
+  /**
+   * Sets the parameter as holding multiple values
+   */
+  m(): this
+
+  /**
+   * Sets the options of the parameter
+   * @param opts - The array of options
+   * @param limitToOptions - Whether valid values should be restricted to options
+   * @param multiple - Whether multiple options may be selected
+   */
+  o(opts: api.ParameterOption[], limitToOptions?: boolean, multiple?: boolean): this
+
+  /**
+   * Sets the default value of the parameter
+   * @param value - The default value
+   */
+  d(value: any): this
+
+  /**
+   * Sets the parameter as required
+   */
+  r(): this
+
+  /**
+   * The visibility function
+   * @param vfn - The visibility function
+   */
+  v(vfn: VisibilityFunction): this
+}
+
+/**
+ * Widget definition interface
+ */
+export interface _WidgetDefinition {
+  name: string
+  label: string
+  description: string
+  icon?: string
+  hidden: boolean
+  props: api.ConfigDescription
+}
+
+/**
+ * The widget definition class, describing the widget and its props (config parameters)
+ */
+export declare class WidgetDefinition implements _WidgetDefinition {
+  name: string
+  label: string
+  description: string
+  icon?: string
+  hidden: boolean
+  docLink?: string
+  props: api.ConfigDescription
+
+  constructor(name: string, label: string, description: string, icon?: string, hidden?: boolean)
+
+  /**
+   * Add a parameter group with optional parameters
+   * @param group - The parameter group
+   * @param params - Optional array of parameters
+   * @param advanced - Whether to mark all parameters as advanced
+   */
+  paramGroup(group: api.ConfigDescriptionParameterGroup, params?: Parameter[], advanced?: boolean): this
+
+  /**
+   * Add parameters to the widget
+   * @param p - Array of parameters
+   */
+  params(p: Parameter[]): this
+}
+
+// Helper functions
+
+/**
+ * Builds a parameter
+ * @param type - The type of the parameter
+ * @param name - The name of the parameter
+ * @param label - The untranslated (English) label of the parameter
+ * @param description - The untranslated (English) description of the parameter
+ */
+export declare function p(type: ParameterType, name: string, label: string, description: string): Parameter
+
+/**
+ * Builds a boolean parameter
+ * @param name - The name of the parameter
+ * @param label - The untranslated (English) label of the parameter
+ * @param description - The untranslated (English) description of the parameter
+ */
+export declare function pb(name: string, label: string, description: string): Parameter
+
+/**
+ * Builds a decimal parameter
+ * @param name - The name of the parameter
+ * @param label - The untranslated (English) label of the parameter
+ * @param description - The untranslated (English) description of the parameter
+ */
+export declare function pd(name: string, label: string, description: string): Parameter
+
+/**
+ * Builds a parameter group
+ * @param name - The name of the group
+ * @param label - The untranslated (English) label of the group
+ * @param description - The untranslated (English) description of the group
+ */
+export declare function pg(name: string, label: string, description?: string): api.ConfigDescriptionParameterGroup
+
+/**
+ * Builds an item parameter
+ * @param name - The name of the parameter
+ * @param label - The untranslated (English) label of the parameter
+ * @param description - The untranslated (English) description of the parameter
+ */
+export declare function pi(name: string, label: string, description: string): Parameter
+
+/**
+ * Builds a text parameter with options
+ * @param name - The name of the parameter
+ * @param label - The untranslated (English) label of the parameter
+ * @param description - The untranslated (English) description of the parameter
+ * @param options - An array of options with untranslated (English) labels
+ */
+export declare function po(name: string, label: string, description: string, options: api.ParameterOption[]): Parameter
+
+/**
+ * Builds a numerical (integer) parameter
+ * @param name - The name of the parameter
+ * @param label - The untranslated (English) label of the parameter
+ * @param description - The untranslated (English) description of the parameter
+ */
+export declare function pn(name: string, label: string, description: string): Parameter
+
+/**
+ * Builds a text parameter
+ * @param name - The name of the parameter
+ * @param label - The untranslated (English) label of the parameter
+ * @param description - The untranslated (English) description of the parameter
+ */
+export declare function pt(name: string, label: string, description: string): Parameter

bundles/org.openhab.ui/web/src/assets/definitions/widgets/layout/index.d.ts

@@ -0,0 +1,10 @@
+import { WidgetDefinition } from '../index'
+
+export declare function OhBlockDescription(): WidgetDefinition
+export declare function OhGridRowDefinition(): WidgetDefinition
+export declare function OhGridColDefinition(): WidgetDefinition
+export declare function OhMasonryDefinition(): WidgetDefinition
+export declare function OhGridLayoutDefinition(): WidgetDefinition
+export declare function OhCanvasItemDefinition(): WidgetDefinition
+export declare function OhCanvasLayoutDefinition(): WidgetDefinition
+export declare function OhCanvasLayerDefinition(): WidgetDefinition

bundles/org.openhab.ui/web/src/assets/definitions/widgets/map/index.d.ts

@@ -0,0 +1,5 @@
+import { WidgetDefinition } from '../index'
+
+export declare function OhMapPageDefinition(): WidgetDefinition
+export declare function OhMapMarkerDefinition(): WidgetDefinition
+export declare function OhMapCircleMarkerDefinition(): WidgetDefinition

bundles/org.openhab.ui/web/src/assets/definitions/widgets/plan/index.d.ts

@@ -0,0 +1,4 @@
+import { WidgetDefinition } from '../index'
+
+export declare function OhPlanPageDefinition(): WidgetDefinition
+export declare function OhPlanMarkerDefinition(): WidgetDefinition

bundles/org.openhab.ui/web/src/assets/definitions/widgets/standard/index.d.ts

@@ -0,0 +1,40 @@
+import { WidgetDefinition } from '../index'
+
+// cells
+export declare function OhCellDefinition(): WidgetDefinition
+export declare function OhLabelCellDefinition(): WidgetDefinition
+export declare function OhSliderCellDefinition(): WidgetDefinition
+export declare function OhKnobCellDefinition(): WidgetDefinition
+export declare function OhColorpickerCellDefinition(): WidgetDefinition
+export declare function OhRollershutterCellDefinition(): WidgetDefinition
+
+// cards
+export declare function OhCardDefinition(): WidgetDefinition
+export declare function OhLabelCardDefinition(): WidgetDefinition
+export declare function OhListCardDefinition(): WidgetDefinition
+export declare function OhInputCardDefinition(): WidgetDefinition
+export declare function OhColorpickerCardDefinition(): WidgetDefinition
+export declare function OhPlayerCardDefinition(): WidgetDefinition
+export declare function OhRollershutterCardDefinition(): WidgetDefinition
+export declare function OhSliderCardDefinition(): WidgetDefinition
+export declare function OhGaugeCardDefinition(): WidgetDefinition
+export declare function OhKnobCardDefinition(): WidgetDefinition
+export declare function OhStepperCardDefinition(): WidgetDefinition
+export declare function OhSwiperCardDefinition(): WidgetDefinition
+export declare function OhToggleCardDefinition(): WidgetDefinition
+export declare function OhImageCardDefinition(): WidgetDefinition
+export declare function OhVideoCardDefinition(): WidgetDefinition
+export declare function OhWebFrameCardDefinition(): WidgetDefinition
+export declare function OhClockCardDefinition(): WidgetDefinition
+export declare function OhSIPClientCardDefinition(): WidgetDefinition
+
+// list items
+export declare function OhListItemDefinition(): WidgetDefinition
+export declare function OhLabelItemDefinition(): WidgetDefinition
+export declare function OhInputItemDefinition(): WidgetDefinition
+export declare function OhColorpickerItemDefinition(): WidgetDefinition
+export declare function OhPlayerItemDefinition(): WidgetDefinition
+export declare function OhRollershutterItemDefinition(): WidgetDefinition
+export declare function OhSliderItemDefinition(): WidgetDefinition
+export declare function OhStepperItemDefinition(): WidgetDefinition
+export declare function OhToggleItemDefinition(): WidgetDefinition

bundles/org.openhab.ui/web/src/assets/definitions/widgets/system/index.d.ts

@@ -0,0 +1,25 @@
+import { WidgetDefinition } from '../index'
+
+export declare function OhButtonDefinition(): WidgetDefinition
+export declare function OhChartDefinition(): WidgetDefinition
+export declare function OhColorpickerDefinition(): WidgetDefinition
+export declare function OhContextDefinition(): WidgetDefinition
+export declare function OhGaugeDefinition(): WidgetDefinition
+export declare function OhIconDefinition(): WidgetDefinition
+export declare function OhImageDefinition(): WidgetDefinition
+export declare function OhVideoDefinition(): WidgetDefinition
+export declare function OhInputDefinition(): WidgetDefinition
+export declare function OhKnobDefinition(): WidgetDefinition
+export declare function OhLinkDefinition(): WidgetDefinition
+export declare function OhListDefinition(): WidgetDefinition
+export declare function OhPlayerDefinition(): WidgetDefinition
+export declare function OhRollershutterDefinition(): WidgetDefinition
+export declare function OhSliderDefinition(): WidgetDefinition
+export declare function OhStepperDefinition(): WidgetDefinition
+export declare function OhSwiperDefinition(): WidgetDefinition
+export declare function OhToggleDefinition(): WidgetDefinition
+export declare function OhTrendDefinition(): WidgetDefinition
+export declare function OhWebFrameDefinition(): WidgetDefinition
+export declare function OhRepeaterDefinition(): WidgetDefinition
+export declare function OhClockDefinition(): WidgetDefinition
+export declare function OhSIPClientDefinition(): WidgetDefinition

bundles/org.openhab.ui/web/src/assets/definitions/widgets/tabs/index.d.ts

@@ -0,0 +1,3 @@
+import { WidgetDefinition } from '../index'
+
+export declare function OhTabDefinition(): WidgetDefinition

bundles/org.openhab.ui/web/src/components/cards/card-mixin.js

@@ -1,26 +1,14 @@
-import mixin from '@/components/widgets/widget-mixin'
 import { f7 } from 'framework7-vue'
 
 // TODO: Restore functionality to close card with browser back.
 // This has been removed as the history manipulation caused double-back navigation to the overview page from the analyzer
 export default {
-  mixins: [mixin],
-  props: {
-    type: String,
-    element: Object
-  },
   data() {
     return {
       opened: false,
       cardId: this.title
     }
   },
-  mounted() {
-    // window.addEventListener('popstate', this.back)
-  },
-  beforeUnmount() {
-    // window.removeEventListener('popstate', this.back)
-  },
   computed: {
     title() {
       if (this.config.title) return this.config.title

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

@@ -28,21 +28,28 @@
 </style>
 
 <script>
-import mixin from '@/components/widgets/widget-mixin'
+import { useWidgetContext } from '@/components/widgets/useWidgetContext'
 import { equipmentListComponent } from '@/components/widgets/standard/list/default-list-item'
 import CardMixin from './card-mixin'
 import ModelCard from './model-card.vue'
 
 import { useStatesStore } from '@/js/stores/useStatesStore'
 
 export default {
-  mixins: [mixin, CardMixin],
+  mixins: [CardMixin],
   props: {
-    tabContext: Object
+    context: Object,
+    tabContext: Object,
+    type: String,
+    element: Object
   },
   components: {
     ModelCard
   },
+  setup (props) {
+    const { config, childContext } = useWidgetContext(props.context)
+    return { config, childContext }
+  },
   computed: {
     listContext () {
       const contextLabelDefaults = { contextLabelSource: 'path' }