comand-component-library 4.2.39 → 4.2.41

package/src/components/CmdSection.vue

@@ -0,0 +1,81 @@
+<template>
+    <section :class="['cmd-section flex-container', {box: styleAsBox, 'vertical': orientation === 'vertical'}]">
+        <!-- begin CmdHeadline -->
+        <CmdHeadline
+            v-if="cmdHeadline?.headlineText"
+            v-bind="cmdHeadlineProperties"
+        />
+        <!-- end CmdHeadline -->
+
+        <!-- begin content provided by property -->
+        <div v-if="content && !useSlot" v-html="content"></div>
+        <!-- end content provided by property -->
+
+        <!-- begin slot -->
+        <slot v-else></slot>
+        <!-- end slot -->
+    </section>
+</template>
+
+<script>
+export default {
+    name: "CmdSection",
+    props: {
+        /**
+         * provide content for section
+         */
+        content: {
+            type: String,
+            required: false
+        },
+        /**
+         * define if (default) slot should be used
+         */
+         useSlot: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * set if section should be styled as box
+         */
+         styleAsBox: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * set orientation for content
+         * 
+         * @allowedValues: horizontal, vertical
+         */
+         orientation: {
+            type: String,
+            default: "vertical"
+        },
+        /**
+         * set properties for CmdHeadline-component
+         * 
+         * @requiredForAccessibility: true
+         */
+        cmdHeadline: {
+            type: Object,
+            default: false
+        }
+    },
+    computed: {
+        cmdHeadlineProperties() {
+            return {
+                headlineLevel: 2,
+                ...this.cmdHeadline
+            }
+        }
+    }
+}
+</script>
+
+<style>
+.cmd-section {
+    &:not(.box) {
+        padding: 0;
+    }
+}
+</style>

package/src/index.js

@@ -34,6 +34,7 @@ export { default as CmdPagination } from '@/components/CmdPagination.vue'
 export { default as CmdPageFooter } from '@/components/CmdPageFooter.vue'
 export { default as CmdPageHeader } from '@/components/CmdPageHeader.vue'
 export { default as CmdProgressBar } from '@/components/CmdProgressBar.vue'
+export { default as CmdSection } from '@/components/CmdSection.vue'
 export { default as CmdSidebar } from '@/components/CmdSidebar.vue'
 export { default as CmdSiteFooter } from '@/components/CmdSiteFooter.vue'
 export { default as CmdSiteHeader } from '@/components/CmdSiteHeader.vue'
@@ -71,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}