@questwork/vue-q-list-vue3 3.1.3 → 3.1.4

package/dist/q-list.min.js.LICENSE.txt

@@ -1,5 +1,5 @@
 Name: @questwork/q-utilities
-Version: 0.1.16
+Version: 0.1.17
 License: MIT
 Private: false
 Description: Questwork QUtilities

package/lib/helpers/checkIfUsingTemplateCompiler.js

@@ -0,0 +1,9 @@
+
+function checkIfUsingTemplateCompiler(key) {
+  key = key.trim()
+  return (key.indexOf('{{') === 0) || (key.indexOf('<%') === 0)
+}
+
+module.exports = {
+  checkIfUsingTemplateCompiler
+}

package/lib/helpers/index.js

@@ -1,3 +1,4 @@
+const { checkIfUsingTemplateCompiler } = require('./checkIfUsingTemplateCompiler')
 const { getPopupPosition } = require('./getPopupPosition')
 const { getTitle } = require('./getTitle')
 const { getTooltipPosition } = require('./getTooltipPosition')
@@ -5,6 +6,7 @@ const { getValidation } = require('./getValidation')
 const { getValue } = require('./getValue')
 
 module.exports = {
+  checkIfUsingTemplateCompiler,
   getPopupPosition,
   getTitle,
   getTooltipPosition,

package/lib/models/qListButton/qListButton.js

@@ -1,6 +1,7 @@
-// const { getValidation: _getValidation } = require('@questwork/q-utilities')
-const { getValidation } = require('../../helpers')
+const { getValidation, getValue, checkIfUsingTemplateCompiler } = require('../../helpers')
 const { KeyValueObject } = require('../keyValueObject')
+const { TemplateCompiler } = require('@questwork/q-utilities')
+
 class QListButton {
   constructor(options = {}) {
     options = options || {}
@@ -12,7 +13,6 @@ class QListButton {
     this.endpoint = options.endpoint
     this.httpMethod = options.httpMethod
     this.icon = options.icon
-    this.label = options.label
     this.linkTarget = options.linkTarget
     this.onClick = options.onClick
     this.owner = options.owner
@@ -23,6 +23,8 @@ class QListButton {
     this.showLabel = options.showLabel
     this.title = options.title
     this.url = options.url
+    this._templateCompiler = TemplateCompiler.init(this.qRow)
+    this.label = this.getLabel(options.label)
   }
 
   static init(options) {
@@ -77,6 +79,13 @@ class QListButton {
     }
   }
 
+  getLabel(label = '') {
+    if (checkIfUsingTemplateCompiler(label)) {
+      return this._templateCompiler.pipe(label)
+    }
+    return label
+  }
+
   makeCss() {
     return `__q-list-button ${this.css.element || ''}`
   }

package/lib/models/qRow/qRow.js

@@ -84,8 +84,17 @@ class QRow {
         // return this[realKey]
       }
       // check if regular expr
-      if (_useTemplateCompiler(key)) {
-        return this._templateCompiler.pipe(key)
+      if (_hasTemplateDelimiters(key)) {
+        const regex = /(\{\{ \w+\((['"])(.*?)\2\) \}\})|([^{]+)/g
+        const result = key.match(regex)?.filter(Boolean) || [key]
+        return result.reduce((acc, k) => {
+          if (_hasTemplateDelimiters(k)) {
+            acc += this._templateCompiler.pipe(k)
+          } else {
+            acc += k
+          }
+          return acc
+        }, '')
       }
       if (key.includes('.')) {
         const arr = key.split('.')
@@ -227,9 +236,14 @@ function setShouldBeVisible(shouldBeVisible) {
   }
 }
 
-function _useTemplateCompiler(key) {
+function _hasTemplateDelimiters(key) {
   key = key.trim()
-  return (key.indexOf('{{') === 0) || (key.indexOf('<%') === 0)
+  // Check for {{ }} pattern
+  const doubleCurlyRegex = /\{\{.*?\}\}/
+  // Check for <% %> pattern
+  const anglePercentRegex = /<%.*?%>/
+  
+  return doubleCurlyRegex.test(key) || anglePercentRegex.test(key)
 }
 
 module.exports = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@questwork/vue-q-list-vue3",
-  "version": "3.1.3",
+  "version": "3.1.4",
   "description": "Questwork vue component for displaying a list",
   "exports": {
     ".": {