comand-component-library 4.1.78 → 4.1.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "4.1.78",
+  "version": "4.1.80",
   "license": "GPL-3.0-only",
   "author": "CoManD-UI",
   "private": false,
@@ -26,7 +26,7 @@
   "dependencies": {
     "clickout-event": "^1.1.2",
     "comand-component-library": "^4.1.63",
-    "comand-frontend-framework": "^4.1.25",
+    "comand-frontend-framework": "^4.1.27",
     "comand-ui-iconfonts": "^1.0.14",
     "core-js": "^3.20.1",
     "prismjs": "^1.27.0",

package/src/ComponentLibrary.vue

@@ -1974,6 +1974,10 @@
                     <a href="#" class="button small icon-cog" title="Open Component Settings"
                        @click.prevent="openSettingsSidebar('CmdThumbnailScroller')"></a>
                 </h2>
+                <p> date (YMD/default): {{formatDate('2025-01-28', "", "-")}}</p>
+                <p> date (DMY): {{formatDate('2025-01-28', "dmy")}}</p>
+                <p> date (MDY): {{formatDate('2025-01-28', "mdy", "/")}}</p>
+                <p> date (invalid)): {{formatDate('invalid')}}</p>
                 <div class="inline-size">
                     <CmdThumbnailScroller
                         ref="CmdThumbnailScroller"
@@ -2072,7 +2076,6 @@
             <CmdWidthLimitationWrapper>
                 <h1 class="headline-demopage">Page Overview</h1>
             </CmdWidthLimitationWrapper>
-
             <!-- begin page-overview -->
             <PageOverview/>
             <!-- end page-overview -->
@@ -2175,6 +2178,7 @@ import listOfComponents from "@/assets/data/listOfComponents.json"
 import PageOverview from "@/pages/PageOverview.vue"
 
 // import external functions
+import {formatDate} from "@/utils/date.js"
 import * as functions from "@/mixins/FieldValidation.js"
 import {openFancyBox} from "@/components/CmdFancyBox.vue"
 import {localizedTime} from "./components/CmdOpeningHours.vue"
@@ -2383,6 +2387,7 @@ export default {
         }
     },
     methods: {
+        formatDate,
         updateLanguage(event) {
             this.selectedLanguage = event.iso2
         },

package/src/components/CmdForm.vue

@@ -40,7 +40,7 @@
                 <!-- begin submit-button (inside fieldset) -->
                 <button
                     v-if="submitButtonOptions && (submitButtonOptions.position === 'insideFieldset' || submitButtonOptions.position === null) "
-                    :class="['button stretch-on-small-devices', {primary: submitButtonOptions.primary}]"
+                    :class="['button stretch-on-small-devices', {primary: submitButtonOptions.primary}, {disabled: submitButtonOptions.disabled}]"
                     :type="submitButtonOptions.type"
                 >
                     <span v-if="submitButtonOptions.iconClass" :class="submitButtonOptions.iconClass"></span>
@@ -51,7 +51,7 @@
 
             <div v-if="submitButtonOptions && submitButtonOptions.position === 'belowFieldset'" class="button-wrapper">
                 <!-- begin submit-button (below fieldset) -->
-                <button :class="['button stretch-on-small-devices', {primary: submitButtonOptions.primary}]"
+                <button :class="['button stretch-on-small-devices', {primary: submitButtonOptions.primary}, {disabled: submitButtonOptions.disabled}]"
                         :type="submitButtonOptions.type || 'submit'">
                     <span v-if="submitButtonOptions.iconClass" :class="submitButtonOptions.iconClass"></span>
                     <span v-if="submitButtonOptions.text">{{ submitButtonOptions.text }}</span>

package/src/index.js

@@ -66,9 +66,10 @@ export { default as DirFancybox } from '@/directives/fancybox'
 // export functions
 export { createUuid, createHtmlId } from '@/utils/common'
 export { getFileExtension } from '@/utils/getFileExtension'
-export { capitalize } from '@/utils/string.js'
-export { useScrollspy } from '@/composables/scrollspy.js'
+export { capitalize } from '@/utils/string'
+export { useScrollspy } from '@/composables/scrollspy'
 export { setCookieDisclaimerCookie, getCookieDisclaimerCookie } from '@/utils/cookie'
+export { formatDate } from "@/utils/date"
 
 // export composables
 export { useSequence } from '@/composables/sequence'

package/src/mixins/I18n.js

@@ -1,67 +1,67 @@
 export default {
-  props: {
-    /**
-     * Message properties for internationalization.
-     *
-     * You can either specify an object with key-value-pairs or a function which
-     * takes at least one input parameter (the key) and returns the according
-     * message.
-     *
-     * If key-value-pairs are provided, the value can be either a string or a
-     * function. If it is a function, then it is called with an array of
-     * replacements for placeholders in the message.
-     *
-     * If a function is provided, it is called with two parameters. The first
-     * parameter is the message key and the second parameter is an array of
-     * replacements for placeholders in the message.
-     *
-     * Example:
-     * <pre>
-     * {
-     *   "my.message1": "My {0} test message with {1} placeholders",
-     *   "my.message2": params => "My {0} message".replace("{0}", params[0])
-     * }
-     * </pre>
-     */
-    i18n: {
-      type: [Object, Function],
-      default: () => ({})
-    }
-  },
-  methods: {
-    getMessage(key, ...params) {
-      if (!key) {
-        return ""
-      }
-      let messages = this.i18n
-      if (typeof this.i18n === "function") {
-        messages = this.i18n.call(this, key, params)
-        if (typeof messages !== "object") {
-          return messages
+    props: {
+        /**
+         * Message properties for internationalization.
+         *
+         * You can either specify an object with key-value-pairs or a function which
+         * takes at least one input parameter (the key) and returns the according
+         * message.
+         *
+         * If key-value-pairs are provided, the value can be either a string or a
+         * function. If it is a function, then it is called with an array of
+         * replacements for placeholders in the message.
+         *
+         * If a function is provided, it is called with two parameters. The first
+         * parameter is the message key and the second parameter is an array of
+         * replacements for placeholders in the message.
+         *
+         * Example:
+         * <pre>
+         * {
+         *   "my.message1": "My {0} test message with {1} placeholders",
+         *   "my.message2": params => "My {0} message".replace("{0}", params[0])
+         * }
+         * </pre>
+         */
+        i18n: {
+            type: [Object, Function],
+            default: () => ({})
         }
-      }
-      let message =
-        messages[key] ||
-        this.getDefaultMessageProperty(key) ||
-        key
-      if (typeof message === "function") {
-        return message.call(this, params || []);
-      }
-      if (Array.isArray(params) && params.length) {
-        params.forEach((param, index) => (message = message.replace("{" + index + "}", param)))
-      }
-      return message
     },
-    getDefaultMessageProperty(key) {
-      if (Object.hasOwn(this, "defaultMessageProperties") && this.defaultMessageProperties && this.defaultMessageProperties[key]) {
-        return this.defaultMessageProperties[key]
-      }
-      //const propertyKey = Object.keys(this).find(p => p.slice(-24) === "DefaultMessageProperties")
-      const propertyKey = Object.hasOwn(this, "fieldValidationDefaultMessageProperties") ? "fieldValidationDefaultMessageProperties" : null
-      if (propertyKey && this[propertyKey]?.[key]) {
-        return this[propertyKey][key]
-      }
-      return null
+    methods: {
+        getMessage(key, ...params) {
+            if (!key) {
+                return ""
+            }
+            let messages = this.i18n
+            if (typeof this.i18n === "function") {
+                messages = this.i18n.call(this, key, params)
+                if (typeof messages !== "object") {
+                    return messages
+                }
+            }
+            let message =
+                messages[key] ||
+                this.getDefaultMessageProperty(key) ||
+                key
+            if (typeof message === "function") {
+                return message.call(this, params || []);
+            }
+            if (Array.isArray(params) && params.length) {
+                params.forEach((param, index) => (message = message.replace("{" + index + "}", param)))
+            }
+            return message
+        },
+        getDefaultMessageProperty(key) {
+            if (Object.hasOwn(this, "defaultMessageProperties") && this.defaultMessageProperties && this.defaultMessageProperties[key]) {
+                return this.defaultMessageProperties[key]
+            }
+            //const propertyKey = Object.keys(this).find(p => p.slice(-24) === "DefaultMessageProperties")
+            const propertyKey = Object.hasOwn(this, "fieldValidationDefaultMessageProperties") ? "fieldValidationDefaultMessageProperties" : null
+            if (propertyKey && this[propertyKey]?.[key]) {
+                return this[propertyKey][key]
+            }
+            return null
+        }
     }
-  }
 }

package/src/utils/date.js

@@ -0,0 +1,29 @@
+function formatDate(inputDate, format = "dmy", separator=".") {
+    // Ensure the input is a valid date object or string
+    const date = new Date(inputDate);
+
+    if (isNaN(date)) {
+        console.error("function formatDate received an invalid date as parameter. Provide date in format YYYY-MM-DD");
+    }
+
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are zero-based
+    const day = String(date.getDate()).padStart(2, '0');
+    let dateFormated = ""
+
+    switch (format) {
+        case 'dmy':
+            dateFormated = `${day}${separator}${month}${separator}${year}` // DD-MM-YYYY
+            break
+        case 'mdy':
+            dateFormated = `${month}${separator}${day}${separator}${year}` // MM-DD-YYYY
+            break
+        default:
+            dateFormated = `${year}${separator}${month}${separator}${day}` // YYYY-MM-DD
+
+    }
+
+    return dateFormated
+}
+
+export {formatDate}