@worksafevictoria/wcl7.5 1.17.1 → 1.18.0-beta.1

package/src/components/Paragraphs/SelectableCards/index.vue

@@ -7,55 +7,99 @@
     :sub-heading="subHeading"
     :columns-per-row="columns || 4"
     class="selectable-cards"
-    :is-selectable="true"
+    :is-selectable="isSelectable"
     :card-id-prefix="'selectable-cc-card'"
     @selected="selectedCardChangeFocus"
+    @selected-button-role="selectedButtonRole"
   >
-    <template v-slot:cardItem="{ card }">
-      <!-----CONTROL SELECTED CARD START-------->
+    <template v-slot:cardItem="slotProps">
       <card-grid-item
         v-if="cardType === 'control-selectcards'"
         class="control_selectcard"
-        :button-role="'radio'"
-        :glyph-src="card.icon"
+        :button-role="buttonRole"
+        :glyph-src="normalize(slotProps).icon"
         :icon-size="'medium'"
         :show-divider="false"
         :header-size="'medium'"
-        :card-header-title="card.name"
-        :card-padding="'small'"
+        :card-header-title="normalize(slotProps).name"
+        :card-padding="cardPadding"
         :border-type="'dark'"
         :border-on-select-background="'blue'"
         :icon-is-bordered="iconIsBordered"
         :card-text-align="cardTextAlign"
+        :is-selectable="isSelectable"
       >
-        <template v-slot:cardTop>
-          <card-top :card="card" :button-role="'radio'" :is-selectable="true" />
+        <template #cardTop>
+          <card-top
+            v-if="buttonRole !== 'none'"
+            :card="normalize(slotProps)"
+            :button-role="buttonRole"
+            :is-selectable="true"
+            @button-role-clicked="selectedButtonRole"
+          />
         </template>
-        <template v-slot:cardDescription>
-          <card-body :card="card" />
+
+        <template #cardDescription>
+          <card-body :card="normalize(slotProps)" />
         </template>
       </card-grid-item>
-      <!-----CONTROL SELECTED CARD  END-------->
+
       <card-grid-item
         v-else
         class="selectcard"
-        :glyph-src="card.icon"
+        :glyph-src="normalize(slotProps).icon"
         :show-divider="false"
         :header-size="'large'"
-        :card-header-title="card.name"
+        :card-header-title="normalize(slotProps).name"
         :card-padding="'small'"
         :invert-on-select-background="'black'"
         :border-type="'shadow'"
-        :description="card.description"
+        :description="normalize(slotProps).description"
       />
     </template>
-    <template v-slot:cardGridFooter>
-      <slot name="cardGridFooter"></slot>
+
+    <template #cardGridFooter>
+      <slot name="cardGridFooter" />
     </template>
   </card-grid>
+
+  <!-- Reusable modal lives here now -->
+  <BModal
+    v-if="showModalOnButtonRole"
+    v-model="showModal"
+    :size="modalSize"
+    :no-footer="noModalFooter"
+    :scrollable="true"
+    :class="modalClass"
+    @show="$emit('modal-open', modalCard)"
+    @hide="$emit('modal-close')"
+  >
+    <div v-if="modalCard" class="selectable-cards__modal">
+      <!-- Parent can fully control; -->
+      <slot name="modalTitle" :card="modalCard">
+        <h2 class="card-title">{{ modalCard.name }}</h2>
+      </slot>
+
+      <slot name="modalBody" :card="modalCard">
+        <div class="card-body">
+          <p v-if="modalCard.value" class="card-value">{{ modalCard.value }}</p>
+          <div
+            v-if="modalCard.description"
+            class="card-description"
+            v-html="modalCard.description"
+          />
+        </div>
+      </slot>
+
+      <slot name="modalFooter" :card="modalCard">
+        <div />
+      </slot>
+    </div>
+  </BModal>
 </template>
 
 <script>
+import { BModal } from 'bootstrap-vue-next'
 import CardGrid from './../../Common/CardGrid/index.vue'
 import CardGridItem from './../../Common/CardGridItem/index.vue'
 import CardBody from './cardbody.vue'
@@ -63,56 +107,86 @@ import CardTop from './cardtop.vue'
 
 export default {
   name: 'SelectableCards',
-  components: {
-    CardGrid,
-    CardGridItem,
-    CardBody,
-    CardTop,
-  },
+  components: { CardGrid, CardGridItem, CardBody, CardTop, BModal },
   emits: {
     selected: false,
+    'selected-button-role': false,
+    'modal-open': false,
+    'modal-close': false,
   },
   props: {
-    cards: {
-      type: Array,
-      required: true,
-      default: () => [],
-    },
-    title: {
-      type: String,
-      default: null,
-    },
-    headingTag: {
-      type: String,
-      default: 'h2',
-    },
-    subHeading: {
+    cards: { type: Array, required: true, default: () => [] },
+    title: { type: String, default: null },
+    headingTag: { type: String, default: 'h2' },
+    subHeading: { type: String, default: null },
+    iconIsBordered: { type: Boolean, default: true },
+    isSelectable: { type: Boolean, default: true },
+    columns: { type: Number, default: 4 },
+    cardType: { type: String, default: null },
+    cardTextAlign: { type: String, default: null },
+    buttonRole: { type: String, default: 'radio' },
+    cardPadding: {
       type: String,
-      default: null,
+      default: 'small',
+      validator: (value) =>
+        ['none', 'xsmall', 'small', 'medium', 'large'].indexOf(value) >= 0,
     },
-    iconIsBordered: {
+
+    /* New modal controls for reusability */
+    showModalOnButtonRole: {
       type: Boolean,
       default: true,
     },
-    columns: {
-      type: Number,
-      default: 4,
-    },
-    cardType: {
+    modalSize: {
       type: String,
-      default: null,
+      default: 'xl',
     },
-    cardTextAlign: {
+    modalClass: {
       type: String,
-      default: null,
+      default: 'wcl-card-modal__modal',
     },
+    noModalFooter: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      showModal: false,
+      modalCard: null,
+    }
   },
   methods: {
-    selectedCardChangeFocus(card) {
-      this.$emit('selected', card.selectedCard)
+    // Accept various slot shapes and return the raw card
+    normalize(slotProps) {
+      const c =
+        slotProps?.card?.selectedCard ??
+        slotProps?.card ??
+        slotProps?.item ??
+        slotProps?.selectedCard ??
+        slotProps
+      return c || {}
     },
+
+    selectedCardChangeFocus(payload) {
+      // If CardGrid emits { selectedCard }, keep behavior consistent
+      const card = payload?.selectedCard ?? payload
+      this.$emit('selected', card)
+    },
+
+    selectedButtonRole(card) {
+      // Receive raw card from <card-top> and bubble it up as raw object
+      this.$emit('selected-button-role', card)
+
+      // open the reusable modal here
+      if (this.showModalOnButtonRole) {
+        this.modalCard = card
+        this.showModal = true
+      }
+    },
+
     clearCard() {
-      this.$refs.cardgrid.clearCards()
+      this.$refs.cardgrid?.clearCards?.()
     },
   },
 }

package/src/components/Paragraphs/TextMedia/index.vue

@@ -177,6 +177,10 @@ export default {
     }
   }
 
+  &__title {
+    margin-bottom: 24px;
+  }
+
   /* variants */
   &.rtl {
     text-align: left;

package/src/components/SubComponents/Breadcrumb/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="wcl-breadcrumb"
-    :class="{ ['wcl-breadcrumb--rtl']: rtl, ['wcl-breadcrumb--ltr']: !rtl }"
+    :class="{ 'wcl-breadcrumb--rtl': rtl, 'wcl-breadcrumb--ltr': !rtl }"
   >
     <ol class="breadcrumb">
       <li
@@ -9,27 +9,60 @@
         :key="index"
         class="breadcrumb-item"
       >
-        <a v-if="item.href" :href="item.href" target="_self">{{ item.text }}</a>
-        <nuxt-link v-else-if="item.to" :to="item.to">{{ item.text }}</nuxt-link>
+        <!-- Plain anchor -->
+        <a
+          v-if="item.href"
+          :href="item.href"
+          target="_self"
+          @click="onClick(item, index, $event)"
+          >{{ item.text }}</a
+        >
+
+        <!-- NuxtLink (Nuxt 3 / Vue 3) -->
+        <nuxt-link
+          v-else-if="item.to"
+          :to="item.to"
+          @click="onClick(item, index, $event)"
+          >{{ item.text }}</nuxt-link
+        >
+
+        <!-- Fallback (no link) -->
+        <span v-else @click="onClick(item, index, $event)">{{
+          item.text
+        }}</span>
       </li>
     </ol>
   </div>
 </template>
+
 <script>
 export default {
   name: 'Breadcrumb',
   props: {
     breadcrumbItems: {
       type: Array,
-      required: true
+      required: true,
     },
     rtl: {
       type: Boolean,
-      required: false
-    }
-  }
+      required: false,
+    },
+    // If true, prevent default navigation and let the parent handle it.
+    interceptClicks: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['item-click'],
+  methods: {
+    onClick(item, index, event) {
+      this.$emit('item-click', { item, index, event })
+      if (this.interceptClicks) event.preventDefault()
+    },
+  },
 }
 </script>
+
 <style lang="scss" scoped>
 @import '../../../includes/scss/vars/src/colors.scss';
 

package/src/components/SubComponents/FormInstance/models/base-form-element.js

@@ -54,7 +54,7 @@ export class BaseFormElement {
   getLabelPosition() {
     return this.getPosition(
       this.webformElement['#_title_display'] ??
-        this.webformElement['#title_display']
+        this.webformElement['#title_display'],
     )
   }
 
@@ -160,7 +160,7 @@ export class BaseFormElement {
       label: getStyle(this.webformElement['#label_attributes']),
       wrapper: getStyle(this.webformElement['#wrapper_attributes']),
       element: getStyle(this.webformElement['#attributes']),
-      additional: this.getAdditionalStyles(this.getCustomClass())
+      additional: this.getAdditionalStyles(this.getCustomClass()),
     }
     const hasOverride = Object.values(style).some((attr) => !this.isEmpty(attr))
     return hasOverride ? style : undefined
@@ -251,7 +251,8 @@ export class BaseFormElement {
     if (this.isEmpty(this.webformElement['#states'])) {
       return undefined
     } else {
-      return parseElementStates(this.webformElement)
+      // NEW: Pass the current instance (`this`) to the parser.
+      return parseElementStates(this.webformElement, this)
     }
   }
 

package/src/components/SubComponents/FormInstance/services/form-render-parser.js

@@ -3,6 +3,39 @@ import { converFormIOElementToJSON } from './convert-form-element'
 import { updateConditionWithFormReferences } from './logic-linker'
 import { RegisterFactory } from './registry-factory'
 
+function extractWebformKeys(webformObject) {
+  const result = []
+
+  const isElement = (obj) => obj && typeof obj === 'object' && obj['#type']
+
+  const extract = (obj) => {
+    if (!obj || typeof obj !== 'object') return null
+
+    const type = obj['#type']
+
+    const key = obj['#webform_key'] || null
+    const node = key ? { key, children: [], type } : null
+
+    for (const [childKey, val] of Object.entries(obj)) {
+      if (childKey.startsWith('#')) continue
+      if (isElement(val)) {
+        const childNode = extract(val)
+        if (childNode && node) node.children.push(childNode)
+        else if (childNode) return childNode
+      }
+    }
+
+    return node
+  }
+
+  for (const [topKey, val] of Object.entries(webformObject)) {
+    if (typeof val === 'object' && val['#type']) {
+      const topNode = extract(val)
+      if (topNode) result.push(topNode)
+    }
+  }
+  return result
+}
 export class FormRenderParser {
   initialise(contentApiUrl, isPreview) {
     this.formSettingsMeta = { contentApiUrl }
@@ -17,14 +50,16 @@ export class FormRenderParser {
     const formlogicList = []
     try {
       webform = this.preProcessWebForm(webform)
+      const pathTree = extractWebformKeys(webform)
       const formiodefinition = {
         id: webform['#id'],
         components: this.parseFormContainerComponents(
           webform,
           webFormElementTree,
           null,
-          formlogicList
-        )
+          formlogicList,
+          pathTree,
+        ),
       }
 
       options.breadcrumbSettings = { clickable: false }
@@ -35,14 +70,12 @@ export class FormRenderParser {
 
       formiodefinition.display = this.getDisplay(webFormElementTree)
       if (this.isPreview) {
-        console.log('drupal webform', webform)
-        console.log('formio definition', formiodefinition)
       }
       return {
         definition: formiodefinition,
         tree: webFormElementTree,
         options,
-        css
+        css,
       }
     } catch (e) {
       console.error(e)
@@ -54,7 +87,8 @@ export class FormRenderParser {
     container,
     webFormElementTree,
     parent,
-    formlogicList
+    formlogicList,
+    tree,
   ) => {
     return Object.keys(container)
       .filter((i) => !i.startsWith('#'))
@@ -63,11 +97,12 @@ export class FormRenderParser {
         return RegisterFactory.getFormIOElement(
           webFormElement,
           this.formSettingsMeta,
-          parent
+          parent,
+          tree,
         )
       })
       .filter(
-        (formIOElement) => !!formIOElement && formIOElement.isRenderable()
+        (formIOElement) => !!formIOElement && formIOElement.isRenderable(),
       )
       .map((formIOElement) => {
         // nested form logic
@@ -78,11 +113,11 @@ export class FormRenderParser {
               subContainer,
               webFormElementTree,
               formIOElement,
-              formlogicList
-            )
+              formlogicList,
+              tree,
+            ),
           )
         }
-
         return formIOElement
       })
       .map((formIOElement) => {
@@ -90,7 +125,7 @@ export class FormRenderParser {
         webFormElementTree[formIOElement.getKey()] = formIOElement
         const formioElementJSON = converFormIOElementToJSON(
           formIOElement,
-          formlogicList
+          formlogicList,
         ).json
         formIOElement.setFormIOdefinitionForElement(formioElementJSON)
         return formioElementJSON
@@ -103,7 +138,7 @@ export class FormRenderParser {
       webform.actions = {
         '#type': 'webform_actions',
         '#webform_id': 'form--actions',
-        '#webform_key': 'actions'
+        '#webform_key': 'actions',
       }
     }
     return webform
@@ -115,8 +150,8 @@ export class FormRenderParser {
         updateConditionWithFormReferences(
           logic,
           sourceElement,
-          webFormElementTree
-        )
+          webFormElementTree,
+        ),
       )
     })
   }
@@ -146,7 +181,7 @@ export class FormRenderParser {
 
   getDisplay(webFormElementTree) {
     const pageKeys = Object.keys(webFormElementTree).filter((elementKey) =>
-      webFormElementTree[elementKey].isPageComponent()
+      webFormElementTree[elementKey].isPageComponent(),
     )
     if (pageKeys.length > 0) {
       return 'wizard'