comand-component-library 4.3.21 → 4.3.23

package/src/components/CmdSection.vue

@@ -62,7 +62,7 @@ export default {
          */
         cmdHeadline: {
             type: Object,
-            default: false
+            required: false
         }
     },
     computed: {

package/src/index.js

@@ -76,6 +76,7 @@ export { default as DirFancybox } from '@/directives/fancybox'
 export { createUuid, createHtmlId } from '@/utils/common'
 export { getFileExtension } from '@/utils/getFileExtension'
 export { capitalizeFirstLetter, lowercaseFirstLetter, fullName } from '@/utils/string'
+export { responsiveBodyClasses } from '@/utils/dom'
 export { setCookieDisclaimerCookie, getCookieDisclaimerCookie } from '@/utils/cookie'
 export { currentDate, currentTime, getDate, getWeekday, formatDate, formatTime } from "@/utils/date"
 

package/src/main.js

@@ -5,9 +5,6 @@ import { createApp } from "vue"
 
 import ComponentLibrary from "./ComponentLibrary.vue"
 
-//import { createRouter, createWebHistory } from "vue-router"
-import "clickout-event"
-
 /* begin import directives ---------------------------------------------------------------------------------------- */
 // directive to format telephone- and fax-number
 import directiveTelephone from "./directives/telephone"

package/src/utils/dom.js

@@ -5,4 +5,31 @@ function getOffsetTop(el) {
     return el.offsetTop
 }
 
-export {getOffsetTop}
+function responsiveBodyClasses() {
+    // function to detect device width and add appropriate class
+    function updateBodyClass() {
+        const body = document.body
+
+        // Remove any previous width-based classes
+        body.classList.remove('device-width-large', 'device-width-medium', 'device-width-small')
+
+        // Add class based on width
+        if (window.innerWidth <= 600) {
+            body.classList.add('device-width-small')
+        } else if (window.innerWidth <= 1024) {
+            body.classList.add('device-width-medium')
+        } else {
+            body.classList.add('device-width-large')
+        }
+    }
+
+    // initial class assignment
+    updateBodyClass()
+
+    // update the class on window resize
+    window.addEventListener('resize', function() {
+        updateBodyClass()
+    });
+}
+
+export {responsiveBodyClasses, getOffsetTop}