comand-component-library 4.0.95 → 4.0.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "4.0.95",
+  "version": "4.0.97",
   "private": false,
   "type": "module",
   "license": "GPL-3.0-only",

package/src/ComponentLibrary.vue

@@ -1418,6 +1418,18 @@
                     ref="CmdHeadline"
                     v-bind="cmdHeadlineSettingsData"
                 />
+                <CmdHeadline
+                    ref="CmdHeadline"
+                    headlineLevel="3"
+                    headlineText="Headline text<br /> with html given by property"
+                />
+                <CmdHeadline
+                    ref="CmdHeadline"
+                    headlineLevel="3"
+                >
+                    Headline text<br /> with html given by slot
+                </CmdHeadline>
+
             </CmdWidthLimitationWrapper>
             <!-- end headlines ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
@@ -1646,6 +1658,15 @@
                     v-bind="cmdOpeningHoursSettingsData"
                     :openingHours="openingHoursData"
                     :checkInterval="0"
+                    abbreviationTextAm="h"
+                    abbreviationTextPm="h"
+                />
+                <CmdOpeningHours
+                    ref="CmdOpeningHours"
+                    v-bind="cmdOpeningHoursSettingsData"
+                    :openingHours="openingHoursData"
+                    :checkInterval="0"
+                    :use24HoursFormat="false"
                 />
             </CmdWidthLimitationWrapper>
             <!-- end opening-hours ------------------------------------------------------------------------------------------------------------------------------------------------------->

package/src/components/CmdHeadline.vue

@@ -6,7 +6,7 @@
         <template v-if="preHeadlineText">
             <component v-if="headlineText" :is="headlineTag">
                 <!-- begin CmdIcon -->
-                <CmdIcon v-if="cmdIcon" v-bind="cmdIcon" />
+                <CmdIcon v-if="cmdIcon" v-bind="cmdIcon"/>
                 <!-- end CmdIcon -->
 
                 <span class="pre-headline-text-wrapper">
@@ -14,11 +14,17 @@
                     <span class="pre-headline-text" v-html="preHeadlineText"></span>
                     <!-- end pre-headline-text -->
 
-                    <span>
+                    <!-- begin default headline-text without slot -->
+                    <span v-if="headlineText" v-html="headlineText"></span>
+                    <!-- end default headline-text without slot -->
+
+                    <!-- begin headline-text with slot -->
+                    <span v-else>
                         <!-- begin slot -->
-                         <slot>{{ headlineText }}</slot>
-                         <!-- end slot -->
+                        <slot></slot>
+                        <!-- end slot -->
                     </span>
+                    <!-- end headline-text with slot -->
                 </span>
             </component>
         </template>
@@ -27,14 +33,20 @@
         <!-- begin headline without pre-headline-text -->
         <component v-else :is="headlineTag">
             <!-- begin CmdIcon -->
-            <CmdIcon v-if="cmdIcon" v-bind="cmdIcon" />
+            <CmdIcon v-if="cmdIcon" v-bind="cmdIcon"/>
             <!-- end CmdIcon -->
 
-            <span>
+            <!-- begin default headline-text without slot -->
+            <span v-if="headlineText" v-html="headlineText"></span>
+            <!-- end default headline-text without slot -->
+
+            <!-- begin headline-text with slot -->
+            <span v-else>
                 <!-- begin slot -->
-                <slot>{{ headlineText }}</slot>
+                <slot></slot>
                 <!-- end slot -->
             </span>
+            <!-- end headline-text with slot -->
         </component>
         <!-- end headline without pre-headline-text -->
     </div>
@@ -67,15 +79,15 @@
             <!-- end CmdFormElement -->
 
             <template v-else-if="headlineText"
-                 :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': cmdIcon?.iconClass}, headlineTextAlign]">
+                      :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': cmdIcon?.iconClass}, headlineTextAlign]">
                 <!-- begin CmdIcon -->
-                <CmdIcon v-if="cmdIcon" v-bind="cmdIcon" />
+                <CmdIcon v-if="cmdIcon" v-bind="cmdIcon"/>
                 <!-- end CmdIcon -->
 
                 <template v-if="preHeadlineText">
                     <component v-if="headlineText" :is="headlineTag">
                         <!-- begin CmdIcon -->
-                        <CmdIcon v-if="cmdIcon" v-bind="cmdIcon" />
+                        <CmdIcon v-if="cmdIcon" v-bind="cmdIcon"/>
                         <!-- end CmdIcon -->
 
                         <!-- begin pre-headline-text -->

package/src/components/CmdOpeningHours.vue

@@ -49,6 +49,7 @@
                 :separator="separator"
                 :abbreviationTextAm="abbreviationTextAm"
                 :abbreviationTextPm="abbreviationTextPm"
+                :use24HoursFormat="use24HoursFormat"
             />
         </dl>
         <!-- end default view -->
@@ -78,6 +79,7 @@
                         :separator="separator"
                         :abbreviationTextAm="abbreviationTextAm"
                         :abbreviationTextPm="abbreviationTextPm"
+                        :use24HoursFormat="use24HoursFormat"
                     />
                 </dl>
             </EditComponentWrapper>
@@ -257,6 +259,13 @@ export default {
             type: Boolean,
             default: true
         },
+        /**
+         * toggle 24- and 12-hours format
+         */
+        use24HoursFormat: {
+            type: Boolean,
+            default: true
+        },
         /**
          * properties for CmdLink-component
          */

package/src/components/CmdOpeningHoursItem.vue

@@ -126,7 +126,7 @@
 import EditMode from "../mixins/EditMode.vue"
 import {updateHandlerProvider} from "../utils/editmode.js"
 
-function timeFormatting(separator, suffix1, suffix2, hoursLeadingZero = true) {
+function timeFormatting(separator, suffix1, suffix2, hoursLeadingZero = true, use24HoursFormat = true) {
     function addLeadingZero(time, addLeadingZero) {
         if (addLeadingZero && time < 10) {
             return "0" + time
@@ -139,7 +139,9 @@ function timeFormatting(separator, suffix1, suffix2, hoursLeadingZero = true) {
             let hour12 = hour
             let currentSuffix = suffix1
             if (hour12 > 12) {
-                hour12 -= 12
+                if(!use24HoursFormat) {
+                    hour12 -= 12
+                }
                 currentSuffix = suffix2
             }
             return addLeadingZero(hour12, hoursLeadingZero) + separator + addLeadingZero(minute, true) + currentSuffix
@@ -157,6 +159,13 @@ export default {
         }
     },
     props: {
+        /**
+         * toggle 24- and 12-hours format
+         */
+        use24HoursFormat: {
+            type: Boolean,
+            required: false
+        },
         /**
          * list of opening-hours
          */
@@ -202,7 +211,7 @@ export default {
                 return this.timeFormatter(time.hours, time.mins)
             }
 
-            return timeFormatting(":", " " + this.abbreviationTextAm, " " + this.abbreviationTextPm, false)(time.hours, time.mins)
+            return timeFormatting(":", " " + this.abbreviationTextAm, " " + this.abbreviationTextPm, false, this.use24HoursFormat)(time.hours, time.mins)
         },
         updateHandlerProvider() {
             const data = this.editableDay
@@ -228,7 +237,7 @@ export default {
     watch: {
         day: {
             handler() {
-                const timeFormatter = timeFormatting(":", "", "", true)
+                const timeFormatter = timeFormatting(":", "", "", true, this.use24HoursFormat)
                 this.editableDay = {
                     day: this.day.day,
                     amFrom: timeFormatter(this.day.am.fromTime.hours, this.day.am.fromTime.mins),

package/src/documentation/generated/CmdBoxPropertyDescriptions.json

@@ -44,7 +44,7 @@
     },
     "collapsible": {
         "comments": [
-            "activate if box should be collapsible"
+            "activate2 if box should be collapsible"
         ]
     },
     "cutoffTextLines": {

package/src/documentation/generated/CmdOpeningHoursPropertyDescriptions.json

@@ -1,5 +1,5 @@
 {
-    "link": {
+    "cmdLink": {
         "comments": [
             "set a link to a detail page"
         ]

package/src/documentation/generated/CmdTextImageBlockPropertyDescriptions.json

@@ -19,18 +19,23 @@
             ]
         }
     },
+    "editModeContextData": {
+        "comments": [
+            "data for edit-mode"
+        ]
+    },
     "htmlContent": {
         "comments": [
             "define html-content for box-body"
         ]
     },
-    "toggle orientation for content": {
+    "orientation": {
         "comments": [
-            "define html-content for box-body"
+            "set orientation for inner-content"
         ],
         "annotations": {
             "allowedValues": [
-                "horizontal, vertical"
+                "vertical, horizontal"
             ]
         }
     },

package/src/documentation/generated/CmdThumbnailScrollerPropertyDescriptions.json

@@ -4,6 +4,11 @@
             "properties for CmdHeadline-component"
         ]
     },
+    "activeItemIndex": {
+        "comments": [
+            "set active (highlighted) item"
+        ]
+    },
     "contentType": {
         "comments": [
             "define content Type"