comand-component-library 3.1.84 → 3.1.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.84",
+  "version": "3.1.87",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/App.vue

@@ -50,6 +50,7 @@
                     <li><a href="#section-tabs">Tabs</a></li>
                     <li><a href="#section-thumbnail-scroller">Thumbnail-Scroller</a></li>
                     <li><a href="#section-toggle-darkmode">ToggleDarkMode</a></li>
+                    <li><a href="#section-tooltip">Tooltip</a></li>
                     <li><a href="#section-upload-form">Upload-Form</a></li>
                 </ul>
             </div>
@@ -459,10 +460,14 @@
                         checkbox with boolean: {{ checkboxValue }}<br/>
                         checkboxes with values: {{ checkboxValues }}
                     </p>
+
                     <h3>Toggle Dark-Mode</h3>
                     <a id="section-toggle-darkmode"></a>
+                    <h4>Toggle Dark-Mode (with label, not styled)</h4>
                     <CmdToggleDarkMode :showLabel="true"/>
+                    <h4>Toggle Dark-Mode (without label, styled)</h4>
                     <CmdToggleDarkMode :showLabel="false" :use-styled-layout="true" />
+
                     <h2>Checkboxes and Radiobuttons</h2>
                     <h3>Checkboxes [native]</h3>
                     <div class="label inline">
@@ -494,6 +499,17 @@
                                             :status="validationStatus"
                                             :disabled="disabledStatus"
                             />
+                            <CmdFormElement element="input"
+                                            v-model="checkboxValues"
+                                            inputValue="checkboxValue3"
+                                            type="checkbox"
+                                            id="checkbox-with-value-3"
+                                            :status="validationStatus"
+                                            :disabled="disabledStatus">
+                                            <template v-slot:labeltext>
+                                                Labeltext with <a href="#">link</a> given by slot
+                                            </template>
+                            </CmdFormElement>
                         </div>
                     </div>
                     <h3>Checkboxes (replaced)</h3>
@@ -1132,9 +1148,7 @@
                             :cmdHeadline="{headlineText: 'List of links', headlineLevel: 6}"
             />
             <CmdOpeningHours :openingHours="openingHoursData"
-                             :closed="true"
                              :cmdHeadline="{headlineText: 'Opening hours', headlineLevel: 6}"
-                             textOpenClosed="Closed right now!"
                              textHolidaysClosed="Closed on holidays"
                              textMiscInfo="Miscellaneous information"
             />
@@ -1243,6 +1257,8 @@ import {openFancyBox} from "@/components/CmdFancyBox"
 // import external functions
 import * as functions from "@/mixins/FieldValidation.js"
 
+import {localizedTime} from "./components/CmdOpeningHours"
+
 export default {
     name: "App",
     components: {
@@ -1417,6 +1433,9 @@ export default {
         }
     },
     methods: {
+        localizedTime(language) {
+            return (h, m) => (localizedTime(language))(h, m).toLowerCase()
+        },
         closeCookieDisclaimer(event) {
             this.fancyBoxCookieDisclaimer = false
             alert(event.join(", "))

package/src/assets/data/address-data.json

@@ -1,6 +1,6 @@
 {
       "company": {
-            "iconClass": "icon-home",
+            "iconClass": "icon-company",
             "value": "Your company name"
       },
       "address": {
@@ -8,6 +8,7 @@
             "streetNo": "Your Street/No",
             "zip": "Your zip",
             "city": "Your city",
+            "miscInfo": "",
             "country": "Your country",
             "longitude": "0.0",
             "latitude": "0.0",

package/src/assets/data/opening-hours.json

@@ -1,29 +1,29 @@
 [
       {
             "day": "Mo",
-            "fromTime": "08:00h",
-            "tillTime": "17:00h"
+            "fromTime": "08:00",
+            "tillTime": "17:00"
       },
       {
             "day": "Tu",
-            "fromTime": "08:00h",
-            "tillTime": "17:00h"
+            "fromTime": "08:00",
+            "tillTime": "17:00"
       },
       {
             "day": "We",
-            "fromTime": "08:00h",
-            "tillTime": "17:30h"
+            "fromTime": "08:00",
+            "tillTime": "17:30"
       },
 
       {
             "day": "Th",
-            "fromTime": "08:00h",
-            "tillTime": "17:00h"
+            "fromTime": "08:00",
+            "tillTime": "17:00"
       },
       {
             "day": "Fr",
-            "fromTime": "08:00h",
-            "tillTime": "15:00h"
+            "fromTime": "08:00",
+            "tillTime": "15:00"
       }
 ]
 

package/src/assets/styles/global-styles.scss

@@ -271,7 +271,7 @@ html {
     --color-scheme-background-inverted: var(--light-mode-background-color);
     --default-background-color-lightness: 20%;
 
-    :where(label, .label) .label-text [class*="icon"] {
+    :where(label, .label) .label-text > [class*="icon"] {
       background: var(--dark-gray);
     }
   }

package/src/components/CmdAddressData.vue

@@ -17,25 +17,28 @@
                 <!-- end company -->
 
                 <!-- begin address -->
-                <dt v-if="addressData.address && addressData.address.length">
-                    <span v-if="addressData.address.iconClass && showLabelIcons" :class="addressData.address.iconClass" :title="getMessage('cmdaddressdata.labeltext.address')"></span>
-                    <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.address')}}</span>
-                </dt>
-                <dd v-if="addressData.address">
-                    <a  v-if="linkGoogleMaps" :href="locateAddress" target="google-maps"
-                       :title="getMessage('cmdaddressdata.title.open_address_on_google_maps')">
-                        <span v-if="addressData.address.streetNo" class="street-address">{{ addressData.address.streetNo }}</span><br/>
-                        <span v-if="addressData.address.zip" class="postal-code">{{ addressData.address.zip }}&nbsp;</span>
-                        <span v-if="addressData.address.city" class="locality">{{ addressData.address.city }}</span><br/>
-                        <span  v-if="addressData.address.country" class="country-name">{{ addressData.address.country }}</span>
-                    </a>
-                    <template v-else>
-                        <span v-if="addressData.address.streetNo" class="street-address">{{addressData.address.streetNo }}</span><br/>
-                        <span v-if="addressData.address.zip" class="postal-code">{{ addressData.address.zip }} </span>
-                        <span v-if="addressData.address.city" class="locality">{{ addressData.address.city }}</span><br/>
-                        <span  v-if="addressData.address.country" class="country-name">{{ addressData.address.country }}</span>
-                    </template>
-                </dd>
+                <template v-if="addressData.address && addressData.address !== undefined">
+                    <dt class="address">
+                        <span v-if="addressData.address.iconClass && showLabelIcons" :class="addressData.address.iconClass" :title="getMessage('cmdaddressdata.labeltext.address')"></span>
+                        <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.address')}}</span>
+                    </dt>
+                    <dd v-if="addressData.address">
+                        <a v-if="linkGoogleMaps" :href="locateAddress" target="google-maps" :title="getMessage('cmdaddressdata.title.open_address_on_google_maps')">
+                            <span v-if="addressData.address.streetNo" class="street-address">{{ addressData.address.streetNo }}</span><br/>
+                            <span v-if="addressData.address.zip" class="postal-code">{{ addressData.address.zip }}&nbsp;</span>
+                            <span v-if="addressData.address.city" class="locality">{{ addressData.address.city }}</span><br/>
+                            <span v-if="addressData.address.miscInfo">{{ addressData.address.miscInfo }}</span><br/>
+                            <span v-if="addressData.address.country" class="country-name">{{ addressData.address.country }}</span>
+                        </a>
+                        <template v-else>
+                            <span v-if="addressData.address.streetNo" class="street-address">{{addressData.address.streetNo }}</span><br/>
+                            <span v-if="addressData.address.zip" class="postal-code">{{ addressData.address.zip }}&nbsp;</span>
+                            <span v-if="addressData.address.city" class="locality">{{ addressData.address.city }}</span><br/>
+                            <span v-if="addressData.address.miscInfo">{{ addressData.address.miscInfo }}</span><br/>
+                            <span v-if="addressData.address.country" class="country-name">{{ addressData.address.country }}</span>
+                        </template>
+                    </dd>
+                </template>
                 <!-- end address -->
 
                 <!-- begin telephone -->
@@ -84,18 +87,19 @@
                     <span class="org">{{ addressData.company.value }}</span>
                 </li>
                 <li>
-                    <a :href="locateAddress" target="google-maps" v-if="linkGoogleMaps"
-                       :title="getMessage('cmdaddressdata.title.open_address_on_google_maps')">
-                        <span class="street-address" v-if="addressData.address.streetNo">{{ addressData.address.streetNo }}</span><br/>
-                        <span class="postal-code" v-if="addressData.address.zip">{{ addressData.address.zip }} </span>
-                        <span class="locality" v-if="addressData.address.city">{{ addressData.address.city }}</span><br/>
-                        <span class="country-name" v-if="addressData.address.country">{{ addressData.address.country }}</span>
+                    <a v-if="linkGoogleMaps" :href="locateAddress" target="google-maps" :title="getMessage('cmdaddressdata.title.open_address_on_google_maps')">
+                        <span v-if="addressData.address.streetNo" class="street-address">{{ addressData.address.streetNo }}</span><br/>
+                        <span v-if="addressData.address.zip" class="postal-code">{{ addressData.address.zip }}&nbsp;</span>
+                        <span v-if="addressData.address.city" class="locality">{{ addressData.address.city }}</span><br/>
+                        <span v-if="addressData.address.miscInfo">{{ addressData.address.miscInfo }}</span><br/>
+                        <span v-if="addressData.address.country" class="country-name">{{ addressData.address.country }}</span>
                     </a>
                     <template v-else>
-                        <span class="street-address" v-if="addressData.address.streetNo">{{ addressData.address.streetNo }}</span><br/>
-                        <span class="postal-code" v-if="addressData.address.zip">{{ addressData.address.zip }} </span>
-                        <span class="locality" v-if="addressData.address.city">{{ addressData.address.city }}</span><br/>
-                        <span class="country-name" v-if="addressData.address.country">{{ addressData.address.country }}</span>
+                        <span  v-if="addressData.address.streetNo" class="street-address">{{ addressData.address.streetNo }}</span><br/>
+                        <span v-if="addressData.address.zip" class="postal-code">{{ addressData.address.zip }}&nbsp;</span>
+                        <span v-if="addressData.address.city" class="locality">{{ addressData.address.city }}</span><br/>
+                        <span v-if="addressData.address.miscInfo">{{ addressData.address.miscInfo }}</span><br/>
+                        <span v-if="addressData.address.country" class="country-name">{{ addressData.address.country }}</span>
                     </template>
                 </li>
                 <li v-if="addressData.telephone?.value">
@@ -189,6 +193,10 @@ export default {
         dt {
             display: flex;
             align-items: center;
+
+            &.address {
+                align-items: flex-start;
+            }
         }
     }
 

package/src/components/CmdFakeSelect.vue

@@ -23,15 +23,11 @@
                 <CmdTooltipForInputElements
                     v-if="useCustomTooltip && (validationStatus === '' || validationStatus === 'error')"
                     ref="tooltip"
-                    :showRequirements="showRequirements"
-                    :inputRequirements="inputRequirements"
                     :validationStatus="validationStatus"
                     :validationMessage="getValidationMessage"
                     :validationTooltip="validationTooltip"
-                    :inputAttributes="$attrs"
-                    :inputModelValue="modelValue"
-                    :helplink="helplink"
                     :relatedId="tooltipId"
+                    :cmdListOfRequirements="listOfRequirements"
                 />
                 <!-- end CmdTooltipForInputElements -->
 
@@ -478,6 +474,10 @@ export default {
                         margin-left: auto;
                         font-size: 1rem;
                     }
+
+                    &:hover, &:active, &:focus {
+                        background: var(--primary-color);
+                    }
                 }
             }
         }
@@ -605,7 +605,7 @@ export default {
                     }
 
                     &:hover, &:active, &:focus {
-                        background: var(--pure-white);
+                        background: var(--color-scheme-background-color);
 
                         span {
                             color: var(--status-color);

package/src/components/CmdFormElement.vue

@@ -22,23 +22,23 @@
         <!-- begin label-text (+ required asterisk) -->
         <span v-if="(labelText || $slots.labeltext) && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
               :class="['label-text', !showLabel ? 'hidden' : undefined]">
-            <span v-if="labelText">{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
-            <slot name="labeltext" />
+            <span>
+                <template v-if="labelText">{{ labelText }}</template>
+                <!-- begin slot 'labeltext' -->
+                <slot v-else name="labeltext" />
+                <!-- end slot 'labeltext' -->
+                <sup v-if="$attrs.required">*</sup>
+            </span>
 
             <!-- begin CmdTooltipForInputElements -->
             <CmdTooltipForInputElements
                 v-if="useCustomTooltip && (validationStatus === '' || validationStatus === 'error')"
                 ref="tooltip"
-                :showRequirements="showRequirements"
-                :inputRequirements="inputRequirements"
                 :validationStatus="validationStatus"
                 :validationMessage="getValidationMessage"
                 :validationTooltip="validationTooltip"
-                :inputAttributes="$attrs"
-                :inputModelValue="modelValue"
-                :helplink="helplink"
                 :relatedId="tooltipId"
-                :labelText="labelText"
+                :cmdListOfRequirements="listOfRequirements"
             />
             <!-- end CmdTooltipForInputElements -->
 
@@ -102,18 +102,26 @@
         <!-- begin checkbox and radiobutton -->
         <template v-else-if="element === 'input' && ($attrs.type === 'checkbox' || $attrs.type === 'radio')">
             <template v-if="!(onLabel && offLabel)">
-                    <input
-                        v-bind="elementAttributes"
-                        @change="onChange"
-                        @blur="onBlur"
-                        :checked="isChecked"
-                        :value="inputValue"
-                        :class="[inputClass, validationStatus, toggleSwitchIconClass, { 'replace-input-type': replaceInputType, 'toggle-switch': toggleSwitch }]"
-                        :id="labelId"
-                        :disabled="$attrs.disabled"
-                        :aria-invalid="validationStatus === 'error'"
-                    />
-                    <span v-if="labelText" :class="['label-text', { hidden: !showLabel }]"><span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span></span>
+                <input
+                    v-bind="elementAttributes"
+                    @change="onChange"
+                    @blur="onBlur"
+                    :checked="isChecked"
+                    :value="inputValue"
+                    :class="[inputClass, validationStatus, toggleSwitchIconClass, { 'replace-input-type': replaceInputType, 'toggle-switch': toggleSwitch }]"
+                    :id="labelId"
+                    :disabled="$attrs.disabled"
+                    :aria-invalid="validationStatus === 'error'"
+                />
+                <span v-if="labelText || $slots.labeltext" :class="['label-text', { hidden: !showLabel }]">
+                    <span>
+                        <template v-if="labelText">{{ labelText }}</template>
+                        <!-- begin slot 'labeltext' -->
+                        <slot v-else name="labeltext" />
+                        <!-- end slot 'labeltext' -->
+                        <sup v-if="$attrs.required">*</sup>
+                    </span>
+                </span>
             </template>
 
             <!-- begin labels for toggle-switch with switch-label -->
@@ -479,7 +487,7 @@ export default {
          * icon for error-validated items in list-of-requirements
          *
          * element-property must me set to 'input'
-         * showRequirements-property must be set to 'true'
+         * showRequirements-subproperty (of CmdListOfRequirements)  must be set to 'true'
          *
          */
         iconHasStateError: {
@@ -496,7 +504,7 @@ export default {
          * icon for warning-validated items in list-of-requirements
          *
          * element-property must me set to 'input'
-         * showRequirements-property must be set to 'true'
+         * showRequirements-subproperty (of CmdListOfRequirements)  must be set to 'true'
          *
          */
         iconHasStateWarning: {
@@ -513,7 +521,7 @@ export default {
          * icon for success-validated items in list-of-requirements
          *
          * element-property must me set to 'input'
-         * showRequirements-property must be set to 'true'
+         * showRequirements-subproperty (of CmdListOfRequirements)  must be set to 'true'
          *
          */
         iconHasStateSuccess: {
@@ -530,7 +538,7 @@ export default {
          * icon for info-validated items in list-of-requirements
          *
          * element-property must me set to 'input'
-         * showRequirements-property must be set to 'true'
+         * showRequirements-subproperty (of CmdListOfRequirements) must be set to 'true'
          *
          */
         iconHasStateInfo: {
@@ -788,7 +796,9 @@ export default {
         },
         closeTooltipOnBlur() {
             // close tooltip by calling function from CmdTooltipForInputElements using $refs
-            this.$refs.tooltip.hideTooltip()
+            if(this.$refs.tooltip) {
+                this.$refs.tooltip.hideTooltip()
+            }
         }
     },
     watch: {

package/src/components/CmdListOfRequirements.vue

@@ -135,7 +135,7 @@ export default {
             type: Object,
             default() {
                 return {
-                    headlineLevel: 4
+                    headlineLevel: 6
                 }
             }
         }

package/src/components/CmdMainNavigation.vue

@@ -1,6 +1,5 @@
 <template>
     <div
-        v-if="navigationEntries.length"
         :class="[
             'cmd-main-navigation main-navigation-wrapper',
             {
@@ -20,7 +19,7 @@
                     </a>
                 </li>
                 <li v-for="(navigationEntry, index) in navigationEntries" :key="index"
-                    :class="{'open' : navigationEntry.open, 'has-subentries': navigationEntry.subentries}">
+                    :class="{'active' : navigationEntry.active, 'open' : navigationEntry.open, 'has-subentries': navigationEntry?.subentries?.length}">
                     <!-- begin type === href -->
                     <a
                        v-if="navigationEntry.type === 'href'"
@@ -31,7 +30,7 @@
                     >
                         <span v-if="navigationEntry.iconClass" :class="navigationEntry.iconClass"></span>
                         <span v-if="navigationEntry.text">{{ navigationEntry.text }}</span>
-                        <span v-if="navigationEntry.subentries && navigationEntry.subentries.length > 0"
+                        <span v-if="navigationEntry?.subentries?.length"
                               :class="subentriesIconClass"
                         ></span>
                     </a>
@@ -53,7 +52,7 @@
                     <!-- end type === router -->
 
                     <!-- begin sub-level 1 -->
-                    <ul v-if="navigationEntry.subentries" aria-expanded="true">
+                    <ul v-if="navigationEntry?.subentries?.length" aria-expanded="true">
                         <li v-for="(navigationSubEntry, subindex) in navigationEntry.subentries" :key="subindex"
                             :class="{'open' : navigationSubEntry.open}">
                             <!-- begin type === href -->
@@ -227,14 +226,16 @@ export default {
     methods: {
         executeLink(event, navigationEntry) {
             if (navigationEntry.target || (navigationEntry.path.length > 1)) {
+                this.showOffcanvas = false
                 return true
             }
             if (navigationEntry.path === '#' || navigationEntry.path === '') {
                 event.preventDefault()
+                this.showOffcanvas = false
                 this.$emit('click', navigationEntry.path)
 
             }
-            if (!(navigationEntry.subentries && navigationEntry.subentries.length > 0)) {
+            if (!(navigationEntry?.subentries?.length)) {
                 this.showOffcanvas = false
             } else {
                 // add entry "open" to navigationEntry-object (will be watched by vue3 automatically)
@@ -439,7 +440,7 @@ export default {
                                     > a {
                                         span {
                                             + span[class*="icon"]::before {
-                                                transform: rotate(90deg);
+
                                             }
                                         }
                                     }
@@ -448,7 +449,7 @@ export default {
                                         > a {
                                             span {
                                                 + span[class*="icon"]::before {
-                                                    transform: rotate(-90deg);
+
                                                 }
                                             }
                                         }

package/src/components/CmdOpeningHours.vue

@@ -6,21 +6,21 @@
 
         <!-- begin opening-status with link to detail-page -->
         <template v-if="link && link?.path && link?.show">
-            <a v-if="link.type === 'href'" :href="link.path" :class="{closed: closed}">{{ textOpenClosed }}</a>
-            <router-link v-if="link.type === 'router'"  :to="link.path" :class="{closed: closed}">{{ textOpenClosed }}</router-link>
-            <button v-if="link.type === 'button'" :class="['button', {closed: closed}]">{{ textOpenClosed }}</button>
+            <a v-if="link.type === 'href'" :href="link.path" :class="{closed: isClosed}">{{ textOpenClosed }}</a>
+            <router-link v-if="link.type === 'router'"  :to="link.path" :class="{closed: isClosed}">{{ textOpenClosed }}</router-link>
+            <button v-if="link.type === 'button'" :class="['button', {closed: isClosed}]">{{ textOpenClosed }}</button>
         </template>
         <!-- end opening-status with link to detail-page -->
 
         <!-- begin opening-status (without link) -->
-        <span v-else :class="{'closed': closed}">{{ textOpenClosed }}</span>
+        <span v-else :class="{'closed': isClosed}">{{ textOpenClosed }}</span>
         <!-- end opening-status (without link) -->
 
         <!-- begin opening-days and -hours -->
         <dl>
-            <template v-for="day in openingHours" :key="day.day">
+            <template v-for="day in openingHoursFormatted" :key="day.day">
                 <dt>{{ day.day }}:</dt>
-                <dd>{{ day.fromTime }}&ndash;{{ day.tillTime }}</dd>
+                <dd>{{ getTime(day.fromTime)}}&ndash;{{ getTime(day.tillTime)}}</dd>
             </template>
         </dl>
         <!-- end opening-days and -hours -->
@@ -40,6 +40,36 @@
 // import components
 import CmdHeadline from "./CmdHeadline"
 
+export function localizedTime(language) {
+    return (hour, minute) => {
+        const now = new Date()
+        now.setHours(hour, minute, 0, 0)
+        return new Intl.DateTimeFormat(language, {timeStyle: "short"}).format(now)
+    }
+}
+
+export function timeFormatting(separator, suffix1, suffix2, hoursLeadingZero = true) {
+    function addLeadingZero(time, addLeadingZero) {
+        if(addLeadingZero && time < 10) {
+            return "0" + time
+        }
+        return time
+    }
+
+    return (hour, minute) => {
+        if(suffix2) {
+            let hour12 = hour
+            let currentSuffix = suffix1
+            if(hour12 > 12) {
+                hour12 -= 12
+                currentSuffix = suffix2
+            }
+            return addLeadingZero(hour12, hoursLeadingZero) + separator + addLeadingZero(minute, true) + currentSuffix
+        }
+        return addLeadingZero(hour, hoursLeadingZero) + separator + addLeadingZero(minute, true) + suffix1
+    }
+}
+
 export default {
     name: "CmdOpeningHours",
     components: {
@@ -63,11 +93,18 @@ export default {
             default: false
         },
         /**
-         * text for open/closed-information
+         * text for 'open'-information
          */
-        textOpenClosed: {
+        textOpen: {
             type: String,
-            required: true
+            default: "Open right now!"
+        },
+        /**
+         * text for 'closed'-information
+         */
+        textClosed: {
+            type: String,
+            default: "Closed right now!"
         },
         /**
          * list of opening-hours
@@ -96,6 +133,77 @@ export default {
         cmdHeadline: {
             type: Object,
             required: false
+        },
+        timeFormatter: {
+            type: Function,
+            required: false
+        },
+        componentHandlesClosedStatus: {
+            type: Boolean,
+            default: true
+        }
+    },
+    computed: {
+        textOpenClosed() {
+            return this.isClosed ? this.textClosed : this.textOpen
+        },
+        openingHoursFormatted() {
+            const weekdays = []
+            for(let i = 0; i < this.openingHours.length; i++) {
+                const openingHours = {}
+                const splitFromTime = this.openingHours[i].fromTime.split(/[:.]/)
+                const splitTillTime = this.openingHours[i].tillTime.split(/[:.]/)
+
+                openingHours.day = this.openingHours[i].day
+                openingHours.fromTime = {
+                    hours: parseInt(splitFromTime[0]),
+                    mins: parseInt(splitFromTime[1])
+                }
+                openingHours.tillTime = {
+                    hours: parseInt(splitTillTime[0]),
+                    mins: parseInt(splitTillTime[1])
+                }
+                weekdays.push(openingHours)
+            }
+            return weekdays
+        },
+        isClosed() {
+            if(!this.componentHandlesClosedStatus) {
+                return this.closed
+            }
+
+            const currentDate = new Date()
+            let currentDay = currentDate.getDay()
+
+            // fix order and check if currentDay equals 0 === sunday. Data are expected to start with monday
+            if (currentDay === 0){
+                currentDay = 6
+            } else {
+                currentDay -= 1
+            }
+
+            const openingHours = this.openingHoursFormatted[currentDay]
+
+            if(this.openingHoursFormatted[currentDay]) {
+                const openingHoursFrom = new Date()
+                openingHoursFrom.setHours(openingHours.fromTime.hours, openingHours.fromTime.mins)
+
+                const openingHoursTill = new Date()
+                openingHoursTill.setHours(openingHours.tillTime.hours, openingHours.tillTime.mins)
+
+                if (openingHoursFrom <= currentDate && currentDate <= openingHoursTill) {
+                    return false
+                }
+            }
+            return true
+        }
+    },
+    methods: {
+        getTime(time) {
+            if(this.timeFormatter) {
+                return this.timeFormatter(time.hours, time.mins)
+            }
+           return timeFormatting(":", " hrs", "", false)(time.hours, time.mins)
         }
     }
 }