comand-component-library 4.2.52 → 4.2.53

package/src/components/CmdPagination.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdPagination ---------------------------------------------------------------------------------------- -->
     <div class="cmd-pagination">
         <!-- begin button/link to previous page -->
         <a
@@ -42,6 +43,7 @@
         </a>
         <!-- end button/link to next page -->
     </div>
+    <!-- end CmdPagination ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdParagraph.vue

@@ -0,0 +1,50 @@
+<template>
+    <!-- begin CmdParagraph ---------------------------------------------------------------------------------------- -->
+    <p 
+        :class="['cmd-paragraph', 'text-align-' + textAlign, 'column-count-' + numberOfColumns]" 
+        v-html="content"
+    >
+    </p>
+    <!-- end CmdParagraph ---------------------------------------------------------------------------------------- -->
+</template>
+
+<script>
+export default {
+    name: "CmdParagraph",
+    props: {
+        /**
+         * provide (html-)content
+         */
+        content: {
+            type: String,
+            required: true
+        },
+        /**
+         * set the number of columns
+         *
+         * @affectStyling: true
+         * @allowedValues: 1/"1", 2/"2", 3/"3",
+         */
+        numberOfColumns: {
+            type: [String, Number],
+            default: 1
+        },
+        /**
+         * set text-align
+         * 
+         * @affectStyling: partially
+         * @allowedValues: "left", "center", "right", "justify"
+         */
+        textAlign: {
+            type: String,
+            default: "left",
+            validator(value) {
+                return value === "left" ||
+                    value === "center" ||
+                    value === "right" ||
+                    value === "justify"
+            }
+        }
+    }
+}
+</script>

package/src/components/CmdSection.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdSection ---------------------------------------------------------------------------------------- -->
     <section :class="['cmd-section flex-container', {box: styleAsBox, 'vertical': orientation === 'vertical'}]">
         <!-- begin CmdHeadline -->
         <CmdHeadline
@@ -15,6 +16,7 @@
         <slot v-else></slot>
         <!-- end slot -->
     </section>
+    <!-- end CmdSection ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdSidebar.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdSidebar ---------------------------------------------------------------------------------------- -->
     <aside :class="['cmd-sidebar', wrapperClass, {'box': styledAsBox, 'collapse-to-right': !collapseToLeft}]">
         <!-- begin inner-sidebar-wrapper -->
         <div class="inner-sidebar-wrapper">
@@ -34,6 +35,7 @@
         </a>
         <!-- end column to toggle sidebar open-closed-status -->
     </aside>
+    <!-- end CmdSidebar ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdSiteFooter.vue

@@ -1,9 +1,11 @@
 <template>
+    <!-- begin CmdSiteFooter ---------------------------------------------------------------------------------------- -->
     <div class="cmd-site-footer site-footer">
         <footer :class="['flex-container', {vertical: orientation === 'vertical'}]">
             <slot></slot>
         </footer>
     </div>
+    <!-- end CmdSiteFooter ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdSiteHeader.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdSiteHeader ---------------------------------------------------------------------------------------- -->
     <div
         ref="site-header"
         :class="[
@@ -62,6 +63,7 @@
         />
         <!-- end CmdMainNavigation -->
     </div>
+    <!-- end CmdSiteHeader ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdSiteSearch.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdBoxSiteSearch ---------------------------------------------------------------------------------------- -->
     <fieldset class="cmd-box-site-search flex-container">
         <!-- begin legend -->
         <legend :class="{hidden : !legend.show, 'align-left': legend.align === 'left'}">{{ legend.text }}</legend>
@@ -98,6 +99,7 @@
     <!-- begin CmdFormFilters -->
     <CmdFormFilters v-if="useFilters" v-model="searchFilters" :selectedOptionsName="getOptionName"/>
     <!-- end CmdFormFilters -->
+     <!-- end CmdBoxSiteSearch ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdSlideButton.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdSlideButton ---------------------------------------------------------------------------------------- -->
     <a href="#"
        @click.prevent
        :class="['cmd-slide-button', 'button', 'keep-behavior-on-small-devices', slideButtonType]"
@@ -7,6 +8,7 @@
         <CmdIcon :type="getDirection.iconType || 'auto'" :iconClass="getDirection.iconClass || 'right'" />
         <!-- end CmdIcon -->
     </a>
+    <!-- end CmdSlideButton ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdSocialNetworks.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdSocialNetworks ---------------------------------------------------------------------------------------- -->
     <div :class="['cmd-social-networks', {'stretch': stretchButtons}, alignment]">
         <!-- begin CmdHeadline -->
         <CmdHeadline
@@ -64,6 +65,7 @@
         </button>
         <!-- end list of networks -->
     </div>
+    <!-- end CmdSocialNetworks ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdSocialNetworksItem.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdSocialNetworksItem ---------------------------------------------------------------------------------------- -->
     <li class="cmd-social-networks-item">
         <a
             :key="network.path"
@@ -15,6 +16,7 @@
             <span v-if="network.linkText">{{ network.linkText }}</span>
         </a>
     </li>
+    <!-- end CmdSocialNetworksItem ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdSwitchLanguage.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdSwitchLanguage ---------------------------------------------------------------------------------------- -->
     <div class="cmd-switch-language">
         <ul>
             <li v-for="(language, index) in languages" :key="index">
@@ -25,6 +26,7 @@
             </li>
         </ul>
     </div>
+    <!-- end CmdSwitchLanguage ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdSystemMessage.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdSystemMessage ---------------------------------------------------------------------------------------- -->
     <transition :name="transition">
         <div
             v-if="showSystemMessage"
@@ -35,6 +36,7 @@
             <!-- end slot-content -->
         </div>
     </transition>
+    <!-- end CmdSystemMessage ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdTable.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdTableWrapper ---------------------------------------------------------------------------------------- -->
     <div
         :class="['cmd-table-wrapper', {'collapsed': !showTableData, 'full-width': fullWidth, 'has-caption': hasCaption, 'has-overflow': hasOverflow}]">
         <div v-if="collapsible || userCanToggleWidth" class="button-wrapper">
@@ -82,6 +83,7 @@
             <!-- end CmdSlideButton -->
         </div>
     </div>
+    <!-- end CmdTableWrapper ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdTabs.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdTabs ---------------------------------------------------------------------------------------- -->
     <div :class="['cmd-tabs', highlightLevel]">
         <!-- being tab-list -->
         <ul :class="{'stretch-tabs' : stretchTabs}" role="tablist">
@@ -40,6 +41,7 @@
         </div>
         <!-- end tab-content -->
     </div>
+    <!-- end CmdTabs ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdTag.vue

@@ -0,0 +1,101 @@
+<template>
+    <!-- begin CmdTag ---------------------------------------------------------------------------------------- -->
+    <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>
+        </slot>
+    </small>
+    <!-- end CmdTag ---------------------------------------------------------------------------------------- -->
+</template>
+
+<script>
+export default {
+    name: "CmdTag",
+    emits: ["click"],
+    data() {
+        return {
+            showTag: true
+        }
+    },
+    props: {
+        /**
+         * the displayed text of the tag
+         */
+         tagText: {
+            type: String,
+            required: true
+        },
+        /**
+         * enable removing the tag by click
+         */
+         removeTagByClick: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * set highlight-level for tag
+         * 
+         * @allowedValues: "none", "primary", "secondary", "tertiary"
+         */
+         highlightLevel: {
+            type: Boolean,
+            default: "none",
+            validator(value) {
+                return value === "none" ||
+                    value === "primary" ||
+                    value === "secondary" ||
+                    value === "tertiary"
+            }
+        },
+        /**
+         * properties for CmdIcon-component
+         */
+         cmdIcon: {
+            type: Object,
+            default: function () {
+                return {
+                    iconClass: "icon-cancel-circle",
+                    tooltip: "Back to top",
+                    iconType: "auto"
+                }
+            }
+        }
+    },
+    methods: {
+        removeTag() {
+            const event = {
+                prevented: false,
+                preventDefault() {
+                    this.prevented = true
+                }
+            }
+
+            this.$emit("click", event)
+            
+            if (!event.prevented) {
+                this.showTag = false
+            }
+        }
+    }
+}
+</script>
+
+<style>
+/* begin cmd-tag ------------------------------------------------------------------------------------------ */
+.cmd-tag {
+    align-self: start; /* if used in vertical flex-container */
+    gap: var(--default-gap-half);
+
+    .primary, .secondary, .tertiary {
+        span[class*="icon-"] {
+            color: var(--color-white);
+        }
+    }
+}
+/* end cmd-tag ------------------------------------------------------------------------------------------ */
+</style>

package/src/components/CmdTextImageBlock.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdTextImageBlock ---------------------------------------------------------------------------------------- -->
     <div :class="['cmd-text-image-block flex-container', orientation]">
         <!-- begin cmdHeadline -->
         <CmdHeadline
@@ -57,6 +58,7 @@
         </EditComponentWrapper>
         <!-- end edit-mode -->
     </div>
+    <!-- end CmdTextImageBlock ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdThumbnailScroller.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdThumbnailScroller ---------------------------------------------------------------------------------------- -->
     <div :class="[
         'cmd-thumbnail-scroller',
         {
@@ -89,6 +90,7 @@
             <!-- end CmdSlideButton -->
         </div>
     </div>
+    <!-- end CmdThumbnailScroller ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdToggleDarkMode.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdToggleDarkMode ---------------------------------------------------------------------------------------- -->
     <div :class="['cmd-toggle-dark-mode', {'styled-layout': useStyledLayout, 'dark-mode': darkMode}]">
         <template v-if="!editing">
         <!-- begin button-style -->
@@ -53,6 +54,7 @@
             <!-- end edit-mode -->
         </template>
     </div>
+    <!-- end CmdToggleDarkMode ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdTooltip.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdTooltip ---------------------------------------------------------------------------------------- -->
     <div v-if="tooltipVisibility" :class="['cmd-tooltip', validationStatus]" ref="tooltip">
         <div v-if="cmdHeadline || iconClose.show" class="headline-wrapper">
             <!-- begin CmdHeadline -->
@@ -23,6 +24,7 @@
             {{ tooltipText }}
         </slot>
         <!-- end slot-content -->
+         <!-- end CmdTooltip ---------------------------------------------------------------------------------------- -->
     </div>
 </template>
 

package/src/components/CmdTooltipForFormElements.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdTooltipForFormElements ---------------------------------------------------------------------------------------- -->
     <!-- begin CmdTooltip -->
     <CmdTooltip
         ref="tooltip"
@@ -16,6 +17,7 @@
         <!-- end CmdListOfRequirements -->
     </CmdTooltip>
     <!-- end CmdTooltip -->
+    <!-- end CmdTooltipForFormElements ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdUploadForm.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdUploadForm ---------------------------------------------------------------------------------------- -->
     <!-- begin advanced mode -->
     <fieldset v-if="advancedMode" :class="['cmd-upload-form flex-container vertical', { 'upload-initiated': uploadInitiated }]">
         <legend :class="{hidden : !legend.show, 'align-left': legend.align === 'left'}">{{ legend.text }}</legend>
@@ -347,6 +348,7 @@
         ref="formElement"
     />
     <!-- end CmdFormElement -->
+    <!-- end CmdUploadForm ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdWidthLimitationWrapper.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdWidthLimitationWrapper ---------------------------------------------------------------------------------------- -->
     <div class="cmd-width-limitation-wrapper" :class="{'sticky': sticky}" ref="width-limitation-wrapper">
         <!-- begin slot-content in section -->
         <section v-if="useInnerSection" :class="setInnerClass" :id="anchorId">
@@ -32,6 +33,7 @@
         </template>
         <!-- end slot-content without section -->
     </div>
+    <!-- end CmdWidthLimitationWrapper ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>