-
-
Notifications
You must be signed in to change notification settings - Fork 243
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Closes #2437, Closes #2148 This PR adds a new component, the oh-context. Similar to the repeater, this component is not rendered, but injects information into the widget at it's tree location. The component allows to inject these three things into the widget: * functions - using the arrow function syntax, named functions can be declared and reused in all subsequent expressions * constants - constants can be defined as either single values, arrays, or objects * variables - variables can be defined with default values. These variables are local in scope to the oh-context and it's descendants and take precedence over other variables of the same name from higher contexts. * Variables are not divided into global vs local explicitly. But a oh-context used as the root component of a widget will have its variables in the context of all the other components on that widget and thus they essentially have a global context within that widget. * In contrast to the basic widget variables, oh-context variables do have bi-directional passage between a main widget and a sub widget. --------- Also-by: Florian Hotze <florianh_dev@icloud.com> Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
- Loading branch information
1 parent
aa4e218
commit 6ceeee3
Showing
20 changed files
with
341 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| --- | ||
| title: oh-context - Widget Context | ||
| component: oh-context | ||
| label: Widget Context | ||
| description: Non-rendered component with functions, constants, and local variables for widgets | ||
| source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-context.md | ||
| prev: /docs/ui/components/ | ||
| --- | ||
|
|
||
| # oh-context - Widget Context | ||
|
|
||
| <!-- Put a screenshot here if relevant: | ||
|  | ||
| --> | ||
|
|
||
| [[toc]] | ||
|
|
||
| <!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead --> | ||
| <!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description --> | ||
| <!-- GENERATED componentDescription --> | ||
| Non-rendered component with functions, constants, and scoped variables for widgets | ||
| <!-- GENERATED /componentDescription --> | ||
|
|
||
| ## Configuration | ||
|
|
||
| <!-- DO NOT REMOVE the following comments --> | ||
| <!-- GENERATED props --> | ||
| ### General | ||
| <div class="props"> | ||
| <PropGroup label="General"> | ||
| <PropBlock type="TEXT" name="functions" label="Widget Functions"> | ||
| <PropDescription> | ||
| Object with key:arrow-function pairs. Functions are available to expressions in all child components via the <code>fn</code> object. | ||
| </PropDescription> | ||
| </PropBlock> | ||
| <PropBlock type="TEXT" name="constants" label="Widget Constants"> | ||
| <PropDescription> | ||
| Object with key:constant pairs. Constants are available to expressions in all child components via the <code>const</code> object. | ||
| </PropDescription> | ||
| </PropBlock> | ||
| <PropBlock type="TEXT" name="variables" label="Widget Variables"> | ||
| <PropDescription> | ||
| Object with key:variable default value pairs. Variables are available to expressions in all child components via the <code>vars</code> object and take precedence over variables with the same name from higher contexts. | ||
| </PropDescription> | ||
| </PropBlock> | ||
| </PropGroup> | ||
| </div> | ||
|
|
||
|
|
||
| <!-- GENERATED /props --> | ||
|
|
||
| <!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.: | ||
| ### Inherited Properties | ||
| --> | ||
|
|
||
| <!-- If applicable describe the slots recognized by the component and what they represent: | ||
| ### Slots | ||
| #### `default` | ||
| The contents of the oh-context. | ||
| --> | ||
|
|
||
| <!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines): | ||
| ## Examples | ||
| ### Example 1 | ||
|  | ||
| ```yaml | ||
| component: oh-context | ||
| config: | ||
| prop1: value1 | ||
| prop2: value2 | ||
| ``` | ||
| ### Example 2 | ||
|  | ||
| ::: details YAML | ||
| ```yaml | ||
| component: oh-context | ||
| config: | ||
| prop1: value1 | ||
| prop2: value2 | ||
| slots | ||
| ``` | ||
| ::: | ||
| --> | ||
|
|
||
| <!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice) | ||
| ## Community Resources | ||
| - [Community Post 1](https://community.openhab.org/t/12345) | ||
| - [Community Post 2](https://community.openhab.org/t/23456) | ||
| --> |
7 changes: 7 additions & 0 deletions
7
bundles/org.openhab.ui/web/src/assets/definitions/widgets/system/context.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import { pt, pb, pi, pn } from '../helpers.js' | ||
|
|
||
| export default () => [ | ||
| pt('functions', 'Widget Functions', 'Object with key:arrow-function pairs. Functions are available to expressions in all child components via the <code>fn</code> object.'), | ||
| pt('constants', 'Widget Constants', 'Object with key:constant pairs. Constants are available to expressions in all child components via the <code>const</code> object.'), | ||
| pt('variables', 'Widget Variables', 'Object with key:variable default value pairs. Variables are available to expressions in all child components via the <code>vars</code> object and take precedence over variables with the same name from higher contexts.') | ||
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
89 changes: 89 additions & 0 deletions
89
bundles/org.openhab.ui/web/src/components/widgets/system/oh-context.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| <template> | ||
| <fragment v-if="(context.component.slots && context.component.slots.default)"> | ||
| <generic-widget-component v-for="(slotComponent, idx) in context.component.slots.default" :key="'default-' + idx" :context="childrenContext(slotComponent)" /> | ||
| </fragment> | ||
| </template> | ||
|
|
||
| <script> | ||
| import mixin from '../widget-mixin' | ||
| import { OhContextDefinition } from '@/assets/definitions/widgets/system' | ||
| import { Fragment } from 'vue-fragment' | ||
| export default { | ||
| mixins: [mixin], | ||
| components: { | ||
| Fragment | ||
| }, | ||
| widget: OhContextDefinition, | ||
| data () { | ||
| return { | ||
| varScope: (this.context.varScope || 'varScope') + '-' + this.$f7.utils.id() | ||
| } | ||
| }, | ||
| computed: { | ||
| fn () { | ||
| if (!this.context || !this.context.component || !this.context.component.config) return {} | ||
| let evalFunc = {} | ||
| const sourceFunc = this.context.component.config.functions || {} | ||
| console.debug('oh-context: sourceFunc =', sourceFunc) | ||
| if (sourceFunc) { | ||
| if (typeof sourceFunc !== 'object') return {} | ||
| for (const key in sourceFunc) { | ||
| evalFunc[key] = this.evaluateExpression(key, sourceFunc[key]) | ||
| } | ||
| } | ||
| console.debug('oh-context: evalFunc =', evalFunc) | ||
| return evalFunc | ||
| } | ||
| }, | ||
| methods: { | ||
| childrenContext (childComp) { | ||
| const ctx = this.childContext(childComp) | ||
| const ctxFunctions = this.fn | ||
| if (this.context.fn) { | ||
| for (const funcKey in this.context.fn) { | ||
| if (!ctxFunctions[funcKey]) this.$set(ctxFunctions, funcKey, this.context.fn[funcKey]) | ||
| } | ||
| } | ||
| this.$set(ctx, 'fn', ctxFunctions) | ||
| const ctxConstants = this.const | ||
| if (this.context.const) { | ||
| for (const constKey in this.context.const) { | ||
| if (!ctxConstants[constKey]) this.$set(ctxConstants, constKey, this.context.const[constKey]) | ||
| } | ||
| } | ||
| this.$set(ctx, 'const', ctxConstants) | ||
| this.$set(ctx.ctxVars, this.varScope, this.ctxVars) | ||
| return ctx | ||
| } | ||
| }, | ||
| beforeMount () { | ||
| const evaluateDefaults = () => { | ||
| if (!this.context || !this.context.component || !this.context.component.config) return | ||
| this.const = {} | ||
| const sourceConst = this.context.component.config.constants || {} | ||
| if (sourceConst) { | ||
| if (typeof sourceConst !== 'object') return | ||
| for (const key in sourceConst) { | ||
| this.$set(this.const, key, this.evaluateExpression(key, sourceConst[key])) | ||
| } | ||
| } | ||
| this.ctxVars = {} | ||
| const sourceCtxVars = this.context.component.config.variables || {} | ||
| if (sourceCtxVars) { | ||
| if (typeof sourceCtxVars !== 'object') return | ||
| for (const key in sourceCtxVars) { | ||
| this.$set(this.ctxVars, key, this.evaluateExpression(key, sourceCtxVars[key])) | ||
| } | ||
| } | ||
| } | ||
| evaluateDefaults() | ||
| } | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.