comand-component-library 4.3.26 → 4.3.28

package/src/components/CmdSystemMessage.vue

@@ -1,39 +1,27 @@
 <template>
     <!-- begin CmdSystemMessage ---------------------------------------------------------------------------------------- -->
     <transition :name="transition">
-        <div
-            v-if="showSystemMessage"
+        <div v-if="showSystemMessage"
             :class="['cmd-system-message', 'system-message', 'flex-container', 'flex-direction-column', { 'full-width': fullWidth }, systemMessageTextAlign, validationStatus]"
-            :role="validationStatus === 'error' ? 'alert' : 'dialog'"
-            :aria-labelledby="ariaId"
-        >
+            :role="validationStatus === 'error' ? 'alert' : 'dialog'" :aria-labelledby="ariaId">
             <!-- begin slot-content -->
             <slot>
                 <!-- begin CmdHeadline -->
-                <CmdHeadline
-                    class="message-headline"
-                    :cmdIcon="headlineIcon"
-                    :headlineText="systemMessage"
-                    :headlineLevel="messageHeadlineLevel"
-                    :textAlign="textAlign"
-                    :id="ariaId"
-                />
+                <CmdHeadline 
+                    class="message-headline" 
+                    v-bind="cmdHeadlineProperties"
+                    :id="ariaId" />
                 <!-- end CmdHeadline -->
             </slot>
             <!-- end slot-content -->
 
             <!-- begin close-icon -->
-            <a
-                v-if="iconClose.show && iconClose.iconClass"
-                href="#"
+            <CmdLink 
+                v-if="cmdLinkCloseIconProperties.show" 
+                v-bind="cmdLinkCloseIconProperties" 
                 class="close-button"
-                @click.prevent="hideSystemMessage"
-                :title="iconClose.tooltip"
-            >
-                <!-- begin CmdIcon -->
-                <CmdIcon :iconClass="iconClose.iconClass" :type="iconClose.iconType" />
-                <!-- end CmdIcon -->
-            </a>
+                @click="hideSystemMessage" 
+            />
             <!-- end close-icon -->
         </div>
     </transition>
@@ -47,13 +35,21 @@ import Identifier from "../mixins/Identifier"
 export default {
     name: "CmdSystemMessage",
     mixins: [Identifier],
+    emits: ["hide-system-message"],
     data() {
         return {
             showSystemMessage: true,
             ariaId: this.ariaReferenceId || this.buildHtmlId("system-message") // mixin requires id to be defined
         }
     },
-    props:  {
+    props: {
+        /**
+         * set if user should be allowed to close the message (by close-icon)
+         */
+        allowUserToCloseMessage: {
+            type: Boolean,
+            default: true
+        },
         /**
          * define the text-align for the system message (will be inherited to CmdHeadline in slot)
          * 
@@ -80,7 +76,7 @@ export default {
          * 
          * @allowedValues: "none", "fade", "scroll" 
          */
-         transition: {
+        transition: {
             type: String,
             default: "fade"
         },
@@ -107,19 +103,6 @@ export default {
             type: Boolean,
             default: true
         },
-        /**
-         * set icon-class for message (will be displayed left from message)
-         */
-        iconMessage: {
-            type: Object,
-            default: function() {
-                return {
-                    show: true,
-                    iconClass: "icon-warning",
-                    type: "auto"
-                }
-            }
-        },
         /**
          * the system-message-text
          */
@@ -128,12 +111,21 @@ export default {
             required: false
         },
         /**
-         * set headline-level for system-message (given to CmdHeadline-component)
+         * properties for CmdHeadline-component
          */
-        messageHeadlineLevel: {
-            type: [Number, String],
+        cmdHeadline: {
+            type: Object,
+            required: false
+        },
+        /**
+         * properties for CmdIcon-component shown before headline
+         */
+         cmdIconWarning: {
+            type: Object,
             default() {
-                return 6
+                return {
+                    iconClass: "icon-warning"
+                }
             }
         },
         /**
@@ -141,26 +133,32 @@ export default {
          *
          * @requiredForAccessibility: partial
          */
-        iconClose: {
+        cmdLinkCloseIcon: {
             type: Object,
-            default() {
-                return {
-                    show: true,
-                    iconClass: "icon-cancel-circle",
-                    tooltip: "Close this message"
-                }
-            }
+            required: false
         }
     },
     computed: {
-        headlineIcon() {
-            if(this.iconMessage.show) {
-                return {
-                    iconClass: this.iconMessage.iconClass,
-                    type: this.iconMessage.type
-                }
+        cmdHeadlineProperties() {
+            return {
+                show: true,
+                headlineText: this.systemMessage,
+                headlineLevel: 4,
+                textAlign: this.textAlign,
+                cmdIcon: this.cmdIconWarning,
+                ...this.cmdHeadline
+            }
+        },
+        cmdLinkCloseIconProperties() {
+            return {
+                show: this.allowUserToCloseMessage,
+                highlightLevel: null,
+                icon: {
+                    iconClass: "icon-cancel-circle",
+                    tooltip: "Close this message"
+                },
+                ...this.cmdLinkCloseIcon
             }
-            return null
         },
         systemMessageTextAlign() {
             if (this.textAlign) {
@@ -173,13 +171,13 @@ export default {
                         return "align-items-flex-start"
                 }
             }
-            return ""
+            return null
         }
     },
     methods: {
         hideSystemMessage(event) {
             this.showSystemMessage = false
-            this.$emit("hideSystemMessage", event)
+            this.$emit("hide-system-message", event)
         }
     },
     watch: {
@@ -195,10 +193,12 @@ export default {
 .cmd-system-message {
     display: inline-flex;
     margin: var(--default-margin) 0;
-    align-self: flex-start; /* if used in flex-container component should not be stretched */
+    align-self: flex-start;
+    /* if used in flex-container component should not be stretched */
 
     .message-headline {
-        margin: 0; /* overwrite default-settings from frontend-framework */
+        margin: 0;
+        /* overwrite default-settings from frontend-framework */
     }
 
     > :last-child {
@@ -214,10 +214,11 @@ export default {
         }
     }
 
-    > a.close-button {
+    >a.close-button {
         display: flex;
         position: absolute;
-        width: auto; /* avoids stretching by flex-containers */
+        width: auto;
+        /* avoids stretching by flex-containers */
         top: .5rem;
         right: .5rem;
         text-decoration: none;
@@ -230,7 +231,9 @@ export default {
             color: var(--default-text-color);
         }
 
-        &:hover, &:active, &:focus {
+        &:hover,
+        &:active,
+        &:focus {
             background: none;
 
             [class*="icon-"] {
@@ -240,14 +243,16 @@ export default {
     }
 
     &.warning {
-        > a.close-button {
+        >a.close-button {
             border-color: var(--default-text-color);
 
             [class*="icon-"] {
                 color: var(--default-text-color);
             }
 
-            &:hover, &:active, &:focus {
+            &:hover,
+            &:active,
+            &:focus {
                 border-color: var(--hyperlink-color);
 
                 [class*="icon-"] {

package/src/components/CmdTable.vue

@@ -4,26 +4,24 @@
         :class="['cmd-table-wrapper', {'collapsed': !showTableData, 'full-width': fullWidth, 'has-caption': hasCaption, 'has-overflow': hasOverflow}]">
         <div v-if="collapsible || userCanToggleWidth" class="button-wrapper">
             <!-- begin button to toggle table-width -->
-            <a v-if="userCanToggleWidth" class="button"
-               href="#" @click.prevent="fullWidth = !fullWidth"
-               :title="iconToggleWidth.tooltip"
-            >
-                <!-- begin CmdIcon -->
-                <CmdIcon :iconClass="iconToggleWidth.iconClass" :type="iconToggleWidth.iconType"/>
-                <!-- end CmdIcon -->
-            </a>
+            <CmdLink 
+                v-if="userCanToggleWidth" 
+                v-bind="cmdLinkToggleWidthProperties"
+                @click="fullWidth = !fullWidth"
+            />
             <!-- end button to toggle table-width -->
 
             <!-- begin button to collapse table-content -->
-            <a v-if="collapsible" class="button"
-               href="#" @click.prevent="showTableData = !showTableData"
+            <CmdLink v-if="collapsible"
+                v-bind="cmdLinkToggleExpandProperties"
+               @click.prevent="showTableData = !showTableData"
                :title="showTableData ? iconCollapse.tooltip : iconExpand.tooltip"
             >
                 <!-- begin CmdIcon -->
                 <CmdIcon :iconClass="showTableData ? iconCollapse.iconClass : iconExpand.iconClass"
                          :type="showTableData ? iconCollapse.iconType : iconExpand.iconType"/>
                 <!-- end CmdIcon -->
-            </a>
+            </CmdLink>
             <!-- end button to collapse table-content -->
         </div>
         <div class="inner-wrapper" ref="innerWrapper" @scroll="updatePosition">
@@ -181,38 +179,58 @@ export default {
             }
         },
         /**
-         * icon to shrink table (horizontally)
+         * icon to stretch table (horizontally)
          *
          * @requiredForAccessibility: partial
          */
-        iconToggleWidth: {
+        iconStretch: {
             type: Object,
             default: function () {
                 return {
-                    iconClass: "icon-toggle-table-width",
-                    tooltip: "Toggle table width"
+                    iconClass: "icon-chevron-one-stripe-right",
+                    tooltip: "Stretch table"
                 }
             }
         },
         /**
-         * icon to stretch table (horizontally)
+         * properties for CmdLink-component to expand/collapse table
+         * 
+         * icon is set separately by iconExpand-property and iconCollapse-property
+         */
+         cmdLinkToggleExpand: {
+            type: Object,
+            required: false
+         },
+        /**
+         * properties for CmdLink-component strtech/shrink table
          *
          * @requiredForAccessibility: partial
          */
-        iconStretch: {
+        cmdLinkToggleWidth: {
             type: Object,
-            default: function () {
-                return {
-                    iconClass: "icon-chevron-one-stripe-right",
-                    tooltip: "Stretch table"
-                }
-            }
-        }
+            required: false
+        },
     },
     mounted() {
         this.hasOverflow = this.$refs.table.clientWidth > this.$refs.innerWrapper.clientWidth
     },
     computed: {
+        cmdLinkToggleWidthProperties() {
+            return {
+                linkType: "button",
+                icon: {
+                    iconClass: "icon-toggle-table-width",
+                    tooltip: "Toggle table width"
+                },
+                ...this.cmdLinkToggleWidth
+            }
+        },
+        cmdLinkToggleExpandProperties() {
+            return {
+                linkType: "button",
+                ...this.cmdLinkToggleExpand
+            }
+        },
         hasCaption() {
             if (this.hideCaption) {
                 return false

package/src/components/CmdTabs.vue

@@ -26,14 +26,11 @@
         <!-- end slot -->
 
         <div v-else aria-live="assertive">
-            <!-- begin CmdHeadline -->
             <CmdHeadline
-               v-if="cmdHeadline"
-               v-bind="cmdHeadline"
+               v-if="cmdHeadlineProperties.show"
+               v-bind="cmdHeadlineProperties"
                :headlineText="tabs[showTab].headlineText"
-               :headlineLevel="tabs[showTab].headlineLevel"
             />
-            <!-- end CmdHeadline -->
 
             <!-- begin html-content -->
             <div v-html="tabs[showTab].htmlContent" :class="{'no-padding': !useDefaultPadding}"></div>
@@ -93,13 +90,13 @@ export default {
         /**
          * set highlight-level for tabs
          * 
-         * @allowedValues: "none", "primary", "secondary", "tertiary"
+         * @allowedValues: null, "primary", "secondary", "tertiary"
          */
          highlightLevel: {
             type: String,
             default: "primary",
             validator(value) {
-                return value === "none" ||
+                return value === null ||
                     value === "primary" ||
                     value === "secondary" ||
                     value === "tertiary"
@@ -114,12 +111,23 @@ export default {
         },
         /**
          * properties for CmdHeadline-component
+         * 
+         * headlineText is provided by tabs-property for each tab
          */
         cmdHeadline: {
             type: Object,
             required: false
         }
     },
+    computed: {
+        cmdHeadlineProperties() {
+            return {
+                show: true,
+                headlineLevel: 3,
+                ...this.cmdHeadline
+            }
+        }
+    },
     methods: {
       setActiveTab(index) {
           this.showTab = index

package/src/components/CmdTag.vue

@@ -3,11 +3,7 @@
     <small v-if="showTag" :class="['cmd-tag tag', highlightLevel]" ref="tag">
         <slot>
             <span>{{ tagText }}</span>
-            <a v-if="removeTagByClick" href="#" @click.prevent="removeTag">
-                <!-- begin CmdIcon -->
-                <CmdIcon v-bind="cmdIcon" />
-                <!-- end CmdIcon -->
-            </a>
+            <CmdLink v-if="userCanRemoveTagByClick" v-bind="cmdLinkRemoveTagProperties" @click="removeTag" />
         </slot>
     </small>
     <!-- end CmdTag ---------------------------------------------------------------------------------------- -->
@@ -26,43 +22,48 @@ export default {
         /**
          * the displayed text of the tag
          */
-         tagText: {
+        tagText: {
             type: String,
             required: true
         },
         /**
          * enable removing the tag by click
          */
-         removeTagByClick: {
+        userCanRemoveTagByClick: {
             type: Boolean,
             default: false
         },
         /**
          * set highlight-level for tag
          * 
-         * @allowedValues: "none", "primary", "secondary", "tertiary"
+         * @allowedValues: null, "primary", "secondary", "tertiary"
          */
-         highlightLevel: {
+        highlightLevel: {
             type: String,
-            default: "none",
+            default: null,
             validator(value) {
-                return value === "none" ||
+                return value === null ||
                     value === "primary" ||
                     value === "secondary" ||
                     value === "tertiary"
             }
         },
         /**
-         * properties for CmdIcon-component
+         * properties for CmdLink-component
          */
-         cmdIcon: {
+        cmdLinkRemoveTag: {
             type: Object,
-            default: function () {
-                return {
+            required: false
+        }
+    },
+    computed: {
+        cmdLinkRemoveTagProperties() {
+            return {
+                icon: {
                     iconClass: "icon-cancel-circle",
-                    tooltip: "Back to top",
-                    iconType: "auto"
-                }
+                    tooltip: "Remove tag",
+                },
+                ...this.cmdLinkRemoveTag
             }
         }
     },
@@ -76,7 +77,7 @@ export default {
             }
 
             this.$emit("click", event)
-            
+
             if (!event.prevented) {
                 this.showTag = false
             }
@@ -88,18 +89,22 @@ export default {
 <style>
 /* begin cmd-tag ------------------------------------------------------------------------------------------ */
 .cmd-tag {
-    align-self: start; /* if used in vertical flex-container */
-    gap: var(--default-gap-half);
+    align-self: start;
+    /* if used in vertical flex-container */
+    gap: var(--gap-small);
 
-    > span:only-child {
+    >span:only-child {
         margin: 0 auto;
     }
 
-    &.primary, &.secondary, &.tertiary {
+    &.primary,
+    &.secondary,
+    &.tertiary {
         span[class*="icon-"] {
             color: var(--color-white);
         }
     }
 }
+
 /* end cmd-tag ------------------------------------------------------------------------------------------ */
 </style>