feat: use computed for matrix col/row available prop

adamberecz · adamberecz · commit e75ec4c4d5b2 · 2025-07-18T18:56:43.000+02:00
diff --git a/src/composables/elements/useCells.js b/src/composables/elements/useCells.js
@@ -100,7 +100,12 @@ const base = function(props, context, dependencies)
         : row
     })
     .map(r => ({ ...r, label: form$.value.$vueform.sanitize(localize(r.label, config$.value, form$.value)) }))
-    .map(r => ({ ...r, available: !r.conditions || !r.conditions.some((condition) => !form$.value.$vueform.services.condition.check(condition, path.value, form$.value, el$.value)) }))
+    .map(r => ({
+      ...r,
+      available: computed(() => !r.conditions || !r.conditions.some((condition) => 
+        !form$.value.$vueform.services.condition.check(condition, path.value, form$.value, el$.value)
+      )) 
+    }))
   })
   
   /**
@@ -123,7 +128,12 @@ const base = function(props, context, dependencies)
         : col
     })
     .map(r => ({ ...r, label: form$.value.$vueform.sanitize(localize(r.label, config$.value, form$.value)) }))
-    .map(r => ({ ...r, available: !r.conditions || !r.conditions.some((condition) => !form$.value.$vueform.services.condition.check(condition, path.value, form$.value, el$.value)) }))
+    .map(r => ({
+      ...r,
+      available: computed(() => !r.conditions || !r.conditions.some((condition) => 
+        !form$.value.$vueform.services.condition.check(condition, path.value, form$.value, el$.value)
+      )) 
+    }))
   })
 
   /**
diff --git a/src/composables/elements/useMatrix.js b/src/composables/elements/useMatrix.js
@@ -125,7 +125,7 @@ const base = function(props, context, dependencies)
       const min = resolveWidth(minWidth.value, 'min-content')
       const max = resolveWidth(maxWidth.value, '1fr')
 
-      el$.value.resolvedColumns.filter(c => c.available).forEach((col, i) => {
+      el$.value.resolvedColumns.filter(c => c.available.value).forEach((col, i) => {
         const colMin = resolveWidth(col.minWidth, min)
         const colMax = resolveWidth(col.maxWidth, max)
 
diff --git a/themes/blank/templates/elements/MatrixElement.vue b/themes/blank/templates/elements/MatrixElement.vue
@@ -11,18 +11,18 @@
         <div v-if="rowsVisible && colsVisible" :class="classes.headerFirst" />
         <!-- Column headers -->
         <template v-for="(col, c) in resolvedColumns">
-          <div v-if="colsVisible" v-show="col.available" v-html="col.label" :class="classes.header" />
+          <div v-if="colsVisible" v-show="col.available.value" v-html="col.label" :class="classes.header" />
         </template>
         <!-- Remove column -->
         <div v-if="allowRemove && colsVisible" :class="classes.headerRemove" />
 
         <!-- Content rows -->
         <template v-for="(row, r) in resolvedRows">
           <!-- Row label -->
-          <div v-if="rowsVisible" v-show="row.available" v-html="row.label" :class="classes.rowLabel" />
+          <div v-if="rowsVisible" v-show="row.available.value" v-html="row.label" :class="classes.rowLabel" />
           <!-- Input cells -->
           <template v-for="(col, c) in resolvedColumns">
-            <div v-show="row.available && col.available" :class="classes.cell">
+            <div v-show="row.available.value && col.available.value" :class="classes.cell">
               <div :class="classes.cellWrapper(resolveColType(col), resolveComponentName(r, c))">
                 <component
                   :is="resolveComponentType(col)"
