openhab · ghys · Oct 11, 2022 · Oct 9, 2022 · Oct 9, 2022 · Oct 5, 2022
@@ -63,17 +63,21 @@
   "dependencies": {
     "@blockly/field-slider": "^2.1.10",
     "@blockly/zoom-to-fit": "^2.0.24",
+    "@jsep-plugin/arrow": "^1.0.5",
+    "@jsep-plugin/object": "^1.2.1",
+    "@jsep-plugin/regex": "^1.0.3",
+    "@jsep-plugin/template": "^1.0.2",
     "blockly": "^6.20210701.0",
     "cronstrue": "^1.100.0",
     "dayjs": "^1.9.6",
     "dom7": "^2.1.5",
     "echarts": "^5.1.2",
     "event-source-polyfill": "^1.0.22",
-    "expression-eval": "^2.1.0",
     "fast-deep-equal": "^3.1.3",
     "framework7": "^5.7.12",
     "framework7-icons": "^3.0.1",
     "framework7-vue": "^5.7.12",
+    "jse-eval": "^1.5.1",
     "jssip": "^3.9.1",
     "leaflet": "^1.7.1",
     "leaflet-providers": "^1.11.0",

@@ -34,7 +34,7 @@
 
 <script>
 import { findEquipment, allEquipmentPoints, findPoints } from '../glance-helpers'
-import expr from 'expression-eval'
+import expr from 'jse-eval'
 
 export default {
   props: ['element', 'type', 'badgeOverrides', 'invertColor', 'store'],
@@ -187,7 +187,7 @@ export default {
     reduce () {
       const ast = this.overrideExpression()
       if (ast) {
-        return this.map.filter((state) => expr.eval(ast, { state: state, Number: Number })).length
+        return this.map.filter((state) => expr.evaluate(ast, { state: state, Number: Number })).length
       }
       switch (this.type) {
         case 'blinds':

@@ -255,7 +255,8 @@ export default {
           'Ctrl-Space': 'autocomplete',
           '\'.\'': autocomplete,
           '\'=\'': autocomplete,
-          'Space': autocomplete
+          'Space': autocomplete,
+          '\'@\'': autocomplete
         }
         cm.state.$oh = this.$oh
         cm.state.originalMode = this.mode

@@ -50,15 +50,15 @@ function getWidgetDefinitions (cm) {
   }
 }
 
-function hintItems (cm, line, replaceAfterColon, addStatePropertySuffix) {
+function hintItems (cm, line, replaceAfterColon, addStatePropertySuffix, addQuotes) {
   const cursor = cm.getCursor()
   const promise = (itemsCache) ? Promise.resolve(itemsCache) : cm.state.$oh.api.get('/rest/items')
   return promise.then((data) => {
     if (!itemsCache) itemsCache = data
     let ret = {
       list: data.map((item) => {
         return {
-          text: item.name + ((addStatePropertySuffix ? '.state' : '')),
+          text: (addQuotes ? '\'' : '') + item.name + ((addStatePropertySuffix ? '.state' : '')) + (addQuotes ? '\'' : ''),
           displayText: item.name,
           description: `${(item.label) ? item.label + ' ' : ''}(${item.type})<br />${item.state}`
         }
@@ -69,6 +69,9 @@ function hintItems (cm, line, replaceAfterColon, addStatePropertySuffix) {
       const colonPos = line.indexOf(':')
       ret.from = { line: cursor.line, ch: colonPos + 2 }
       ret.to = { line: cursor.line, ch: line.length }
+    } else if (addQuotes) {
+      const lastAtOp = line.substring(0, cursor.ch).replace(/@[A-Za-z0-9_-]*$/, '@')
+      ret.to = { line: cursor.line, ch: lastAtOp.length }
     } else {
       const lastDot = line.substring(0, cursor.ch).replace(/\.[A-Za-z0-9_-]*$/, '.')
       ret.to = { line: cursor.line, ch: lastDot.length }
@@ -110,11 +113,16 @@ function hintExpression (cm, line) {
         { text: 'theme', displayText: 'theme', description: 'The current theme: aurora, ios, or md' },
         { text: 'themeOptions', displayText: 'themeOptions', description: 'Object with current theme options' },
         { text: 'device', displayText: 'device', description: 'Object with information about the current device & browser' },
+        { text: 'user', displayText: 'user', description: 'Access the username and roles of the logged in user' },
         { text: 'screen', displayText: 'screen', description: 'Object with information about the screen and available view area' },
         { text: 'dayjs', displayText: 'dayjs', description: 'Access to the Day.js object for date manipulation & formatting' }
       ]
     }
   } else {
+    const lastAtOp = line.substring(0, cursor.ch).replace(/@[A-Za-z0-9_-]*$/, '@')
+    if (lastAtOp.endsWith('@')) {
+      return hintItems(cm, line, false, false, true)
+    }
     const lastDot = line.substring(0, cursor.ch).replace(/\.[A-Za-z0-9_-]*$/, '.')
     if (lastDot.endsWith('items.')) {
       return hintItems(cm, line, false, true)

@@ -31,7 +31,7 @@ export function remove (node) {
 export function filterPartialCompletions (cm, line, completions, property = 'text') {
   const cursor = cm.getCursor()
   const lineBeforeCursor = line.substring(0, cursor.ch)
-  const completionBeginPos = Math.max(lineBeforeCursor.lastIndexOf(' '), lineBeforeCursor.lastIndexOf('.'))
+  const completionBeginPos = Math.max(lineBeforeCursor.lastIndexOf(' '), lineBeforeCursor.lastIndexOf('.'), lineBeforeCursor.lastIndexOf('@'))
   const partialCompletion = lineBeforeCursor.substring(completionBeginPos + 1)
   return completions.filter((c) => c[property] && c[property].toLowerCase().indexOf(partialCompletion.toLowerCase()) >= 0)
 }

@@ -13,10 +13,21 @@
   <div v-else-if="componentType && componentType === 'Label' && visible" :class="config.class" :style="config.style">
     {{ config.text }}
   </div>
+  <fragment v-else-if="componentType && componentType === 'Content'">
+    {{ config.text }}
+  </fragment>
   <pre v-else-if="componentType && componentType === 'Error' && visible" class="text-color-red" style="white-space: pre-wrap">{{ config.error }}</pre>
+  <component v-else-if="visible" :is="componentType" v-bind="config">
+    {{ config.content }}
+    <template v-if="context.component.slots && context.component.slots.default">
+      <generic-widget-component :context="childContext(slotComponent)" v-for="(slotComponent, idx) in context.component.slots.default" :key="'default-' + idx" />
+    </template>
+  </component>
 </template>
 
 <script>
+import { Fragment } from 'vue-fragment'
+
 import mixin from './widget-mixin'
 
 import * as SystemWidgets from './system/index'
@@ -28,6 +39,7 @@ import * as LayoutWidgets from './layout/index'
 export default {
   mixins: [mixin],
   components: {
+    Fragment,
     ...SystemWidgets,
     ...StandardWidgets,
     ...StandardListWidgets,

@@ -1,6 +1,6 @@
 // Import into widget components as a mixin!
 
-import expr from 'expression-eval'
+import expr from 'jse-eval'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import calendar from 'dayjs/plugin/calendar'
@@ -10,6 +10,22 @@ import isToday from 'dayjs/plugin/isToday'
 import isYesterday from 'dayjs/plugin/isYesterday'
 import isTomorrow from 'dayjs/plugin/isTomorrow'
 import scope from 'scope-css'
+import store from '@/js/store'
+
+import jsepRegex from '@jsep-plugin/regex'
+import jsepArrow from '@jsep-plugin/arrow'
+import jsepObject from '@jsep-plugin/object'
+import jsepTemplate from '@jsep-plugin/template'
+expr.jsep.plugins.register(jsepRegex, jsepArrow, jsepObject, jsepTemplate)
+
+expr.addUnaryOp('@', (itemName) => {
+  const itemState = store.getters.trackedItems[itemName]
+  if (itemState.displayState === undefined) return itemState.state
+  return itemState.displayState
+})
+expr.addUnaryOp('@@', (itemName) => {
+  return store.getters.trackedItems[itemName].state
+})
 
 dayjs.extend(relativeTime)
 dayjs.extend(calendar)
@@ -30,7 +46,7 @@ export default {
   },
   computed: {
     componentType () {
-      return this.context.component.component
+      return this.evaluateExpression('type', this.context.component.component)
     },
     childWidgetComponentType () {
       if (!this.componentType.startsWith('widget:')) return null
@@ -112,7 +128,7 @@ export default {
           if (!this.exprAst[key] || ctx.editmode) {
             this.exprAst[key] = expr.parse(value.substring(1))
           }
-          return expr.eval(this.exprAst[key], {
+          return expr.evaluate(this.exprAst[key], {
             items: ctx.store,
             props: this.props,
             vars: ctx.vars,
@@ -124,7 +140,8 @@ export default {
             device: this.$device,
             screen: this.getScreenInfo(),
             JSON: JSON,
-            dayjs: dayjs
+            dayjs: dayjs,
+            user: this.$store.getters.user
           })
         } catch (e) {
           return e