comand-component-library 4.3.22 → 4.3.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "4.3.22",
+  "version": "4.3.23",
   "license": "GPL-3.0-only",
   "author": "CoManD-UI",
   "private": false,
@@ -9,7 +9,7 @@
     "prepublishOnly": "npm run build-lib",
     "dev": "vite",
     "build": "vite build",
-    "build-lib": "vite build && gulp",
+    "build-lib": "vite build",
     "preview": "vite preview"
   },
   "files": [
@@ -28,23 +28,18 @@
     "./us-cities.json": "./src/assets/lists-of-data/us-cities.json"
   },
   "dependencies": {
-    "clickout-event": "^1.1.2",
     "comand-frontend-framework": "^4.3.43",
-    "comand-ui-iconfonts": "^1.0.19",
-    "core-js": "^3.20.1",
-    "prismjs": "^1.27.0",
+    "comand-ui-iconfonts": "^1.0.21",
     "vue": "^3.5.25",
-    "vue-router": "^4.0.12",
-    "vuex": "^4.0.2"
+    "vue-router": "^4.0.12"
   },
   "devDependencies": {
     "@iconify/vue": "^4.0.0",
     "@vitejs/plugin-vue": "^6.0.2",
     "@vue/test-utils": "^2.0.0-0",
     "axios": "^1.7.2",
-    "gulp": "^4.0.2",
     "sass": "^1.54.9",
-    "unplugin-vue-components": "^0.24.0",
+    "unplugin-vue-components": "^31.0.0",
     "vite": "^7.2.4",
     "vue-jest": "^5.0.0-0"
   }

package/src/ComponentLibrary.vue

@@ -2559,7 +2559,7 @@ export default {
 
             .comand-versions {
                 margin: 0;
-                background: var(--color-scheme-background-color);
+                background: var(--color-scheme-background);
 
                 dd {
                     white-space: nowrap;

package/src/components/CmdAccordion.vue

@@ -5,17 +5,9 @@
         :name="generateAccordionName"
     >
         <summary :class="{'writing-mode-vertical' : summaryWritingMode === 'vertical'}">
-            <!--
-            <span :class="[cmdIconClosed.iconClass, 'closed']" :title="cmdIconClosed.tooltip"></span>
-            <span :class="[cmdIconOpen.iconClass, 'open']" :title="cmdIconOpen.tooltip"></span>
-        -->
-            <CmdIcon :iconClass="toggleIconIconClass" :class="toggleIconStatus" :tooltip="toggleIconTooltip" />
+            <CmdIcon :iconClass="toggleIconIconClassClosed" class="closed" :tooltip="cmdIconClosedRowView.tooltip" />
+            <CmdIcon :iconClass="toggleIconIconClassOpen" class="open" :tooltip="cmdIconOpenRowView.tooltip" />
             <CmdHeadline v-bind="cmdHeadlineProperties" />
-            <!--
-            toggleIconStatus: {{ toggleIconStatus }}<br />
-            this.$refs.cmdAccordion?.open: {{ $refs.cmdAccordion?.open }}<br />
-            isOpen: {{ isOpen() }}
-        -->
         </summary>
         <div class="accordion-body">
             <!-- begin slot-content -->
@@ -33,9 +25,6 @@ import {createUuid} from "../utils/common.js"
 
 export default {
     name: "CmdAccordion",
-    mounted() {
-  console.log("this.$refs.cmdAccordion.open:", this.$refs.cmdAccordion?.open)
-},
     props: {
         /**
          * arranges accordion-content in a row
@@ -57,7 +46,7 @@ export default {
             type: String,
             default: "horizontal",
             validator(value) {
-                return value === "horizontal",
+                return value === "horizontal" ||
                 value === "vertical"
             }
         },
@@ -111,7 +100,7 @@ export default {
             type: Object,
             default() {
                 return {
-                    iconClass: "icon-chevron-one-stripe-right",
+                    iconClass: "icon-chevron-one-stripe-left",
                     tooltip: "Collapse accordion"
                 }
             }
@@ -174,31 +163,12 @@ export default {
                 ...this.cmdHeadline
             }
         },
-        toggleIconIconClass() {
-            if(this.rowView) {
-                return this.isOpen ? this.cmdIconOpenRowView?.iconClass : this.cmdIconClosedRowView?.iconClass
-            } else {
-                return this.isOpen ? this.cmdIconOpenColumnView?.iconClass : this.cmdIconClosedColumnView?.iconClass
-            }
-        },
-        toggleIconStatus() {
-            return this.isOpen ? 'open' : 'closed'
+        toggleIconIconClassOpen() {
+            return this.rowView ? this.cmdIconOpenRowView?.iconClass : this.cmdIconOpenColumnView?.iconClass
         },
-        toggleIconTooltip() {
-            if(this.rowView) {
-                return this.isOpen ? this.cmdIconOpenRowView?.tooltip : this.cmdIconClosedRowView?.tooltip
-            } else {
-                return this.isOpen ? this.cmdIconOpenColumnView?.tooltip : this.cmdIconClosedColumnView?.tooltip
-            }
-        }
-    },
-    methods: {
-        isOpen() {
-            return this.$refs.cmdAccordion?.open + "test"
-        }
-    },
-    mounted() {
-        this.isOpen()
+        toggleIconIconClassClosed() {
+            return this.rowView ? this.cmdIconClosedRowView?.iconClass : this.cmdIconClosedColumnView?.iconClass
+        } 
     }
 }
 </script>

package/src/components/CmdAccordionsWrapper.vue

@@ -20,8 +20,6 @@
             ]">
             <slot
                 :collapsingBoxesOpen="collapsingBoxesOpen"
-                :boxToggled="boxToggled"
-                :boxIsOpen="boxIsOpen"
                 :rowView="rowView"
                 :openAccordionHasFullWidth="fullWidth"
                 :summaryWritingMode="summaryWritingMode"
@@ -88,7 +86,7 @@ export default {
             type: String,
             default: "horizontal",
             validator(value) {
-                return value === "horizontal",
+                return value === "horizontal" ||
                 value === "vertical"
             }
         },
@@ -138,7 +136,7 @@ export default {
             default
                 () {
                 return {
-                    iconClass: 'icon-blocks-small',
+                    iconClass: 'icon-columns',
                     tooltip: 'Toggle to row view'
                 }
             }

package/src/components/CmdContainer.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- begin CmdContainer ---------------------------------------------------------------------------------------- -->
-    <div class="cmd-container">
+    <div :class="['cmd-container', {box: styleAsBox}]">
         <!-- begin CmdHeadline -->
         <CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline" />
         <!-- end CmdHeadline -->
@@ -18,6 +18,13 @@
 export default {
     name: "CmdContainer",
     props: {
+        /**
+         * style component as a box
+         */
+        styleAsBox: {
+            type: Boolean,
+            default: false
+        },
         /** define container-type
          *
          * @affectsStyling: true

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}