comand-component-library 4.0.41 → 4.0.43

package/src/components/CmdListOfLinksItem.vue

@@ -1,35 +1,17 @@
 <template>
     <!-- begin default-view -->
     <li v-if="!editing" class="cmd-list-of-links-item">
-        <!-- begin use href -->
-        <a v-if="link.type === 'href' || link.type === undefined"
-           :href="link.path"
-           :target="link.target"
-           @click="executeLink(link, $event)"
-           :title="link.tooltip && link.tooltip !== undefined ? link.tooltip : undefined">
-            <!-- begin CmdIcon -->
-            <CmdIcon v-if="link.iconClass" :iconClass="link.iconClass" :type="link.iconType" />
-            <!-- end CmdIcon -->
-            <span v-if="link.text">{{ link.text }}</span>
-        </a>
-        <!-- end use href --->
-
-        <!-- begin use router-link -->
-        <router-link
-            v-else-if="link.type === 'router'"
-            :to="getRoute(link)"
-            :title="link.tooltip">
-            <!-- begin CmdIcon -->
-            <CmdIcon v-if="link.iconClass" :iconClass="link.iconClass" :type="link.iconType" />
-            <!-- end CmdIcon -->
-            <span v-if="link.text">{{ link.text }}</span>
-        </router-link>
-        <!-- end use router-link -->
+        <!-- begin CmdLink -->
+        <CmdLink
+            v-bind="link"
+            @click="executeLink()"
+        />
+        <!-- end CmdLink -->
 
         <!-- begin CmdListOfLinksItem for nested children -->
         <ul v-if="!editModeContext">
             <CmdListOfLinksItem
-                v-for="(child, index) in link.children"
+                v-for="(child, index) in link?.children"
                 :key="index"
                 :link="child"
             />
@@ -67,12 +49,12 @@ export default {
     mixins: [EditMode],
     data() {
         return {
-            editableText: this.link.text
+            editableText: this.link?.text
         }
     },
     props: {
         /**
-         * single link
+         * properties for CmdLink-component
          */
         link: {
             type: Object,
@@ -88,17 +70,14 @@ export default {
                 }
             })
         },
-        getRoute(link) {
-            return getRoute(link)
-        },
-        executeLink(link, event) {
-            if (link.fancybox) {
+        executeLink(event) {
+            if (this.link?.fancybox) {
                 event.preventDefault()
-                openFancyBox({url: link.path, showSubmitButtons: link.showSubmitButtons})
+                openFancyBox({url: this.link?.path, showSubmitButtons: this.link?.showSubmitButtons})
                 return
             }
-            this.$emit("click", {link, originalEvent: event})
-        },
+            this.$emit("click", event)
+        }
     }
 }
 </script>

package/src/components/CmdMultistepFormProgressBar.vue

@@ -16,54 +16,6 @@
                 <span :class="separatorIconClass"></span>
             </CmdLink>
             <!-- end CmdLink -->
-
-            <!-- begin type === href -->
-            <a v-if="step.type === 'href'"
-               :href="step.path" @click.stop.prevent="clickedStep($event, index)"
-               :title="step.tooltip"
-            >
-                <span  v-if="showStepNumber" class="number">{{ index + 1 }}</span>
-                <!-- begin CmdIcon -->
-                <CmdIcon v-if="step.iconClass" :iconClass="step.iconClass" :type="step.iconType" />
-                <!-- end CmdIcon -->
-                <span v-if="step.text">{{ step.text }}</span>
-                <span :class="separatorIconClass"></span>
-            </a>
-            <!-- end type === href -->
-
-            <!-- begin type === router -->
-            <router-link
-                v-if="step.type === 'router'"
-                :to="getRoute(step)"
-                :title="step.tooltip"
-            >
-                <span v-if="showStepNumber" class="number">{{ index + 1 }}</span>
-                <!-- begin CmdIcon -->
-                <CmdIcon v-if="step.iconClass" :iconClass="step.iconClass" :type="step.iconType" />
-                <!-- end CmdIcon -->
-                <span v-if="step.text">{{ step.text }}</span>
-                <span :class="separatorIconClass"></span>
-            </router-link>
-            <!-- end type === router -->
-
-            <!-- begin type === button/submit -->
-            <button
-                v-if="step.type === 'button' || step.type === 'submit'"
-                class="button"
-                :type="step.type"
-                :name="step.name"
-                :title="step.tooltip"
-                :formaction="step.formaction"
-                @click.stop.prevent="clickedStep($event, index)"
-            >
-                <span v-if="showStepNumber" class="number">{{ index + 1 }}</span>
-                <!-- begin CmdIcon -->
-                <CmdIcon v-if="step.iconClass" :iconClass="step.iconClass" :type="step.iconType" />
-                <!-- end CmdIcon -->
-                <span v-if="step.text">{{ step.text }}</span>
-                <span :class="separatorIconClass"></span>
-            </button>
-            <!-- end type === button/submit -->
         </li>
     </ol>
 </template>

package/src/components/CmdTabs.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="cmd-tabs">
+        <!-- being tab-list -->
         <ul :class="{'stretch-tabs' : stretchTabs}" role="tablist">
             <li v-for="(tab, index) in tabs" :class="{active : showTab === index}" :key="index" role="tab">
                 <a href="#" @click.prevent="setActiveTab(index)" :title="!tab.name ? tab.tooltip : undefined">
@@ -10,10 +11,12 @@
                 </a>
             </li>
         </ul>
+        <!-- end tab-list -->
 
+        <!-- being tab-content -->
         <!-- begin slot -->
         <template v-if="useSlot">
-            <div v-show="showTab === index - 1" v-for="index in tabs.length" :key="index" aria-live="assertive">
+            <div v-show="showTab === index - 1" v-for="index in tabs.length" :key="index" aria-live="assertive" :class="{'no-padding': !useDefaultPadding}">
                 <!-- begin slot-content -->
                 <slot :name="'tab-content-' + (index - 1)"></slot>
                 <!-- end slot-content -->
@@ -30,8 +33,10 @@
                :headlineLevel="tabs[showTab].headlineLevel"
             />
             <!-- end CmdHeadline -->
-            <div v-html="tabs[showTab].htmlContent"></div>
+
+            <div v-html="tabs[showTab].htmlContent" :class="{'no-padding': !useDefaultPadding}"></div>
         </div>
+        <!-- end tab-content -->
     </div>
 </template>
 
@@ -54,11 +59,11 @@ export default {
     emits: ["active-tab"],
     props: {
         /**
-         * properties for CmdHeadline-component
+         * set if content should use default-padding
          */
-        cmdHeadline: {
-            type: Object,
-            required: false
+        useDefaultPadding: {
+            type: Boolean,
+            default: true
         },
         /**
          * activate if tabs should be (equally) stretched horizontally over full width of tab-content
@@ -87,6 +92,13 @@ export default {
         activeTab: {
             type: Number,
             default: 0
+        },
+        /**
+         * properties for CmdHeadline-component
+         */
+        cmdHeadline: {
+            type: Object,
+            required: false
         }
     },
     methods: {