case 4722 - DOMPurify 2.5.9 and Vuetify 2.7.2

DOMPurify 2.3.8 -> 2.5.9 and Vuetify 2.6.6 -> 2.7.2, the latest 2.x of
each; builds on Node 12.22.9. Only these two packages change in the
lockfile (kept in its v2 format).

Vuetify 2.7 calendar eventSummary() returns an element, not an HTML
string, so the six calendar event templates render it with the new
gz-vnodes component instead of v-html.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

ayanova/src/components/dash-today-reminders.vue

@@ -26,11 +26,9 @@
         >
           <template v-slot:event="{ event, eventSummary }">
             <div>
-              <!-- eslint-disable vue/no-v-html -->
-              <span
-                :class="event.textColor + '--text'"
-                v-html="eventSummary()"
-              /><v-icon v-if="!event.editable" x-small :color="event.textColor">
+              <span :class="event.textColor + '--text'"
+                ><gz-vnodes :vnodes="eventSummary()"/></span
+              ><v-icon v-if="!event.editable" x-small :color="event.textColor">
                 $ayiLock</v-icon
               >
             </div>

ayanova/src/components/dash-today-reviews.vue

@@ -25,11 +25,9 @@
         >
           <template v-slot:event="{ event, eventSummary }">
             <div>
-              <!-- eslint-disable vue/no-v-html -->
-              <span
-                :class="event.textColor + '--text'"
-                v-html="eventSummary()"
-              /><v-icon v-if="!event.editable" x-small :color="event.textColor">
+              <span :class="event.textColor + '--text'"
+                ><gz-vnodes :vnodes="eventSummary()"/></span
+              ><v-icon v-if="!event.editable" x-small :color="event.textColor">
                 $ayiLock</v-icon
               >
             </div>

ayanova/src/components/dash-today-scheduled-wo.vue

@@ -26,11 +26,9 @@
         >
           <template v-slot:event="{ event, eventSummary }">
             <div>
-              <!-- eslint-disable vue/no-v-html -->
-              <span
-                :class="event.textColor + '--text'"
-                v-html="eventSummary()"
-              /><v-icon v-if="!event.editable" x-small :color="event.textColor">
+              <span :class="event.textColor + '--text'"
+                ><gz-vnodes :vnodes="eventSummary()"/></span
+              ><v-icon v-if="!event.editable" x-small :color="event.textColor">
                 $ayiLock</v-icon
               >
             </div>

ayanova/src/components/vnodes-control.vue

@@ -0,0 +1,11 @@
+<script>
+//case 4722: renders the element(s) passed in vnodes
+//(Vuetify 2.7 calendar eventSummary() returns an element, not an HTML string)
+export default {
+  functional: true,
+  props: {
+    vnodes: { type: [Object, Array], default: null }
+  },
+  render: (h, ctx) => ctx.props.vnodes
+};
+</script>

ayanova/src/main.js

@@ -59,6 +59,7 @@ import attachmentControl from "./components/attachment-control.vue";
 import chartLineControl from "./components/chart-line-control.vue";
 import chartBarControl from "./components/chart-bar-control.vue";
 import chartBarHorizontalControl from "./components/chart-bar-horizontal-control.vue";
+import vnodesControl from "./components/vnodes-control.vue";
 
 /////////////////////////////////////////////////////////////////
 // LIBS AND GLOBAL ITEMS
@@ -180,6 +181,7 @@ Vue.component("gz-attachments", attachmentControl);
 Vue.component("gz-chart-line", chartLineControl);
 Vue.component("gz-chart-bar", chartBarControl);
 Vue.component("gz-chart-bar-horizontal", chartBarHorizontalControl);
+Vue.component("gz-vnodes", vnodesControl);
 //3rd party components
 Vue.use(VueCurrencyInput);
 /////////////////////////////////////////////////////////////

ayanova/src/views/home-schedule.vue

@@ -103,11 +103,9 @@
             <v-icon small :color="event.textColor" class="mt-n3 mr-1">{{
               iconForEvent(event.type)
             }}</v-icon>
-            <!-- eslint-disable vue/no-v-html -->
-            <span
-              :class="event.textColor + '--text'"
-              v-html="eventSummary()"
-            /><v-icon
+            <span :class="event.textColor + '--text'"
+              ><gz-vnodes :vnodes="eventSummary()"/></span
+            ><v-icon
               v-if="!event.editable"
               x-small
               :color="event.textColor"

ayanova/src/views/svc-schedule-user.vue

@@ -96,11 +96,9 @@
             <v-icon small :color="event.textColor" class="mr-1">{{
               iconForEvent(event.type)
             }}</v-icon>
-            <!-- eslint-disable vue/no-v-html -->
-            <span
-              :class="event.textColor + '--text'"
-              v-html="eventSummary()"
-            /><v-icon
+            <span :class="event.textColor + '--text'"
+              ><gz-vnodes :vnodes="eventSummary()"/></span
+            ><v-icon
               v-if="!event.editable"
               x-small
               :color="event.textColor"

ayanova/src/views/svc-schedule.vue

@@ -132,8 +132,9 @@
 
         <template v-slot:event="{ event, eventSummary }">
           <div class="v-event-draggable">
-            <!-- eslint-disable vue/no-v-html -->
-            <span :class="event.textColor + '--text'" v-html="eventSummary()" />
+            <span :class="event.textColor + '--text'"
+              ><gz-vnodes :vnodes="eventSummary()"
+            /></span>
             <v-icon
               v-if="!event.editable"
               x-small