comand-component-library 4.2.40 → 4.2.42

package/src/components/CmdLink.vue

@@ -2,31 +2,53 @@
     <!-- begin CmdLink -->
     <!-- begin href -->
     <a v-if="linkType === 'href'"
-       :href="path"
+       :href="!disabled ? path : null"
        :target="target"
-       :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton, 'box': styleAsBox, 'fancybox': fancybox}]"
+       :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton, 'disabled': disabled, 'box': styleAsBox, 'fancybox': fancybox}]"
        @click.prevent="emitClick($event, 'href')"
        :title="icon?.tooltip"
     >
+        <!-- begin CmdInnterLink -->
         <CmdInnerLink :text="text" :icon="icon" :image="image">
+            <!-- begin slot-content of CmdInnterLink -->
             <slot></slot>
+            <!-- end slot-content of CmdInnterLink -->
         </CmdInnerLink>
+        <!-- end CmdInnterLink -->
     </a>
     <!-- end href -->
 
     <!-- begin router-link -->
-    <router-link v-else-if="linkType === 'router'" :to="path" :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton, 'box': styleAsBox, 'fancybox': fancybox}]" @click="emitClick($event, 'router')" :title="icon?.tooltip">
+    <router-link v-else-if="linkType === 'router'" 
+        :to="!disabled ? path : {}" 
+        :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton, 'disabled': disabled, 'box': styleAsBox, 'fancybox': fancybox}]" 
+        @click="emitClick($event, 'router')" 
+        :title="icon?.tooltip">
+        <!-- begin CmdInnterLink -->
         <CmdInnerLink :text="text" :icon="icon" :image="image">
+            <!-- begin slot-content of CmdInnterLink -->
             <slot></slot>
+            <!-- end slot-content of CmdInnterLink -->
         </CmdInnerLink>
+        <!-- end CmdInnterLink -->
     </router-link>
     <!-- end router-link -->
 
     <!-- begin button -->
-    <button v-else-if="linkType === 'button' || linkType === 'submit'" :class="['cmd-link button', {'primary': primaryButton, 'box': styleAsBox, 'fancybox': fancybox}]" type="submit" @click="emitClick($event, 'button')" :title="icon?.tooltip">
+    <button v-else-if="linkType === 'button' || linkType === 'submit'" 
+        :class="['cmd-link button', {'primary': primaryButton, 'disabled': disabled, 'box': styleAsBox, 'fancybox': fancybox}]" 
+        type="submit"
+        :disabled="disabled" 
+        @click="emitClick($event, 'button')" 
+        :title="icon?.tooltip"
+        >
+        <!-- begin CmdInnterLink -->
         <CmdInnerLink :text="text" :icon="icon" :image="image">
+            <!-- begin slot-content of CmdInnterLink -->
             <slot></slot>
+            <!-- end slot-content of CmdInnterLink -->
         </CmdInnerLink>
+        <!-- end CmdInnterLink -->
     </button>
     <!-- end button -->
     <!-- end CmdLink -->
@@ -64,7 +86,7 @@ export default {
         /**
          * set target
          *
-         * linkType must be 'href'
+         * linkType-property must be set to 'href'
          */
         target: {
             type: String,
@@ -109,6 +131,13 @@ export default {
             type: Boolean,
             default: false
         },
+        /**
+         * activate if link/button should be disabled
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
         /**
          * set if path should be opened in fancybox
          */
@@ -116,6 +145,9 @@ export default {
             type: Boolean,
             default: false
         },
+        /**
+         * set image for inner link
+         */
         image: {
             type: Object,
             required: false
@@ -136,7 +168,7 @@ export default {
     gap: var(--icon-and-text-gap);
     align-items: center;
 
-    &.active, &.router-link-active {
+    &.active, &.router-link-active:not(.button) {
         background: var(--button-primary-background-highlighted); /* overwrite background for active links/buttons */
         
         &.button {

package/src/components/CmdMultistepFormProgressBar.vue

@@ -9,6 +9,7 @@
                 :primaryButton="usePrimaryButtons"
                 :path="step.path"
                 :title="step.tooltip"
+                :disabled="step.disabled"
                 @click="clickedStep($event, index)"
             >
                 <span v-if="showStepNumber" class="number">{{ index + 1 }}</span>

package/src/index.js

@@ -72,7 +72,7 @@ export { createUuid, createHtmlId } from '@/utils/common'
 export { getFileExtension } from '@/utils/getFileExtension'
 export { capitalizeFirstLetter, lowercaseFirstLetter, fullName } from '@/utils/string'
 export { setCookieDisclaimerCookie, getCookieDisclaimerCookie } from '@/utils/cookie'
-export { currentDate, currentTime, formatDate, formatTime } from "@/utils/date"
+export { currentDate, currentTime, getDate, getWeekday, formatDate, formatTime } from "@/utils/date"
 
 // export composables
 export { useSequence } from '@/composables/sequence'

package/src/utils/date.js

@@ -25,6 +25,25 @@ function getDate(inputDate, operator = "+", days = 1) {
     return date
 }
 
+function getWeekday(dateString, format = "short") {
+    // Create date object from YYYY-MM-DD string
+    const date = new Date(dateString);
+  
+    // Arrays for codes and full names
+    const codes = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+    const fullNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+  
+    // Decide what to return
+    if (format === "short") {
+      return codes[date.getDay()];
+    } else if (format === "long") {
+      return fullNames[date.getDay()];
+    } else {
+      throw new Error("Invalid format. Use 'short' or 'long'.");
+    }
+}
+  
+
 function formatDate(inputDate, format = "dmy", separator= ".") {
     // Ensure the input is a valid date object or string
     const date = new Date(inputDate)
@@ -77,4 +96,4 @@ function formatTime(timeString = "00:00", format = 24, textAfter = "h") {
     }
 }
 
-export {currentDate, currentTime, formatDate, formatTime}
+export {currentDate, currentTime, getDate, getWeekday, formatDate, formatTime}