comand-component-library 4.0.94 → 4.0.96

package/src/components/CmdLink.vue

@@ -1,7 +1,7 @@
 <template>
     <!-- begin CmdLink -->
     <!-- begin href -->
-    <a v-if="linkType === 'href'" :href="path" :target="target" :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton, 'fancybox': fancybox}]" @click="emitClick($event, 'href')">
+    <a v-if="linkType === 'href'" :href="path" :target="target" :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton, 'box': styleAsBox, 'fancybox': fancybox}]" @click="emitClick($event, 'href')" :title="icon?.tooltip">
         <CmdInnerLink :text="text" :icon="icon">
             <slot></slot>
         </CmdInnerLink>
@@ -9,7 +9,7 @@
     <!-- end href -->
 
     <!-- begin router -->
-    <router-link v-else-if="linkType === 'router'" :to="path" :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton, 'fancybox': fancybox}]" @click="emitClick($event, 'router')">
+    <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">
         <CmdInnerLink :text="text" :icon="icon">
             <slot></slot>
         </CmdInnerLink>
@@ -17,7 +17,7 @@
     <!-- end router -->
 
     <!-- begin button -->
-    <button v-else-if="linkType === 'button'" :class="['cmd-link button', {'primary': primaryButton, 'fancybox': fancybox}]" type="submit" @click="emitClick($event, 'button')">
+    <button v-else-if="linkType === 'button'" :class="['cmd-link button', {'primary': primaryButton, 'box': styleAsBox, 'fancybox': fancybox}]" type="submit" @click="emitClick($event, 'button')" :title="icon?.tooltip">
         <CmdInnerLink :text="text" :icon="icon">
             <slot></slot>
         </CmdInnerLink>
@@ -86,6 +86,13 @@ export default {
             type: Boolean,
             default: false
         },
+        /**
+         * toggle if link should be styled as box
+         */
+        styleAsBox: {
+            type: Boolean,
+            default: false
+        },
         /**
          * activate if button should be styled as primary-button
          *
@@ -112,5 +119,25 @@ export default {
 </script>
 
 <style>
+/* begin cmd-link -------------------------------------------------------------------------------------------- */
+.cmd-link {
+    &.box {
+        display: inline-flex;
+        flex-direction: column;
+        gap: calc(var(--default-gap) / 2);
+        align-items: center;
+        border-color: var(--hyperlink-color);
+        text-decoration: none;
+        border-radius: var(--box-border-radius);
 
+        span[class*="icon"] {
+            font-size: 4rem;
+        }
+
+        &:hover, &:active, &:focus {
+            border-color: var(--hyperlink-color-highlighted)M
+        }
+    }
+}
+/* end cmd-link -------------------------------------------------------------------------------------------- */
 </style>

package/src/components/CmdOpeningHours.vue

@@ -8,7 +8,7 @@
         <!-- end cmd-headline -->
 
         <!-- begin opening-status with link to detail-page -->
-        <template v-if="!editing">
+        <template v-if="!editing && showOpenStatus">
             <template v-if="cmdLink?.path">
                 <CmdLink :linkType="cmdLink.type || 'href'" v-bind="cmdLink" :class="{closed: isClosed}">{{ textOpenClosed }}</CmdLink>
             </template>
@@ -250,6 +250,13 @@ export default {
             type: Number,
             default: 5000
         },
+        /**
+         * toggle display of open-closed-status text above opening hours
+         */
+        showOpenStatus: {
+            type: Boolean,
+            default: true
+        },
         /**
          * properties for CmdLink-component
          */

package/src/documentation/generated/CmdWidthLimitationWrapperPropertyDescriptions.json

@@ -13,8 +13,7 @@
         "comments": [
             "activate if the inner content should be wrapped in inner component tag (recommended)",
             "",
-            "(if deactivated, content will be directly placed inside cmd-width-limitation-wrapper)",
-            ""
+            "(if deactivated, content will be directly placed inside cmd-width-limitation-wrapper)"
         ]
     },
     "sticky": {
@@ -58,11 +57,19 @@
             "set id for (invisible) anchor to enable shortcuts"
         ]
     },
+    "useFullDeviceWidth": {
+        "comments": [
+            "toggle if wrapper should be stretched to full devices width"
+        ]
+    },
+    "useInnerSection": {
+        "comments": [
+            "toggle if a section-tag should be used as inner wrapper (else a div-tag is used)"
+        ]
+    },
     "cmdHeadline": {
         "comments": [
-            "properties for CmdHeadline-component",
-            "",
-            "@requiredForAccessibilty"
+            "properties for CmdHeadline-component"
         ]
     }
 }