comand-component-library 4.2.18 → 4.2.19

package/src/assets/data/list-of-tags.json

@@ -0,0 +1,3 @@
+[
+  "tag 1", "tag 2", "tag 3"
+]

package/src/assets/data/listOfComponents.json

@@ -18,8 +18,7 @@
   "ImageGallery",
   "ImageZoom",
   "Link",
-  "ListOfImages",
-  "ListOfLinks",
+  "List",
   "LoginForm",
   "MailTool",
   "MainNavigation",

package/src/componentSettingsDataAndControls.vue

@@ -397,23 +397,7 @@ data() {
                 }
             ]
         },
-        cmdListOfImagesSettingsData: {
-            styleAsBox: false,
-            orientation: "vertical"
-        },
-        cmdListOfImagesSettingsControls: {
-            orientation: [
-                {
-                    text: "Vertical",
-                    value: "vertical"
-                },
-                {
-                    text: "Horizontal (default)",
-                    value: "horizontal"
-                }
-            ]
-        },
-        cmdListOfLinksSettingsData: {
+        cmdListSettingsData: {
             useGap: true,
             styleAsBox: false,
             largeIcons: false,
@@ -422,7 +406,21 @@ data() {
             align: "left",
             showListStyleItems: false
         },
-        cmdListOfLinksSettingsControls: {
+        cmdListSettingsControls: {
+            listType: [
+                {
+                    text: "Links",
+                    value: "links"
+                },
+                {
+                    text: "Images",
+                    value: "images"
+                },
+                {
+                    text: "Tags",
+                    value: "tags"
+                }
+            ],
             align: [
                 {
                     text: "Left (default)",

package/src/components/CmdBox.vue

@@ -232,7 +232,7 @@
 
         <!-- begin box-footer -->
         <div v-if="user.links && user.links.length" class="box-footer">
-            <CmdListOfLinks :links="user.links" orientation="horizontal" :useGap="false"/>
+            <CmdList :links="user.links" orientation="horizontal" :useGap="false"/>
         </div>
         <!-- end box-footer -->
     </div>

package/src/components/{CmdListOfLinks.vue → CmdList.vue}

@@ -1,11 +1,12 @@
 <template>
-    <div :class="['cmd-list-of-links',
+    <div :class="['cmd-list',
         {
-            box: styleAsBox, horizontal: orientation === 'horizontal',
+            box: styleAsBox,
             'section-anchors': sectionAnchors,
             'large-icons': largeIcons,
-            'show-list-style-items': showListStyleItems
-        }
+            'show-list-style-items': showListStyleItems,
+        },
+        'list-type-' + listType
     ]">
         <!-- begin cmd-headline -->
         <CmdHeadline
@@ -15,46 +16,72 @@
         <!-- end cmd-headline -->
 
         <!-- begin list of links -->
-        <ul :class="['flex-container', {'no-gap': !useGap}, 'align-' + align, setStretchClass]">
-            <!-- begin CmdListOfLinksItem-->
-            <CmdListOfLinksItem
-                v-if="!editModeContext"
-                v-for="(link, index) in links"
-                :key="index"
-                :class="{'active': sectionAnchors && activeSection === index}"
-                :link="link"
-                @click="emitClick($event, linkType)"
-            />
-            <!-- end CmdListOfLinksItem-->
+        <ul :class="['flex-container', {'no-gap': !useGap}, 'align-' + align, setStretchClass, {horizontal: orientation === 'horizontal'}]">
+            <template v-if="listType === 'links'">
+                <!-- begin CmdListOfLinksItem-->
+                <CmdListOfLinksItem
+                    v-if="!editModeContext"
+                    v-for="(link, index) in items"
+                    :key="index"
+                    :class="{'active': sectionAnchors && activeSection === index}"
+                    :link="link"
+                    @click="emitClick($event, linkType)"
+                />
+                <!-- end CmdListOfLinksItem-->
+
+                <!-- begin edit-mode -->
+                <li v-else>
+                    <EditComponentWrapper
+                        v-for="(link, index) in links"
+                        :key="'x' + index"
+                        class="edit-items"
+                        :showComponentName="false"
+                        componentTag="ul"
+                        componentName="CmdLinkItem"
+                        :componentProps="link"
+                        :allowedComponentTypes="[]"
+                        :componentPath="['props', 'links', index]"
+                        :itemProvider="itemProvider"
+                    >
+                        <!-- begin CmdListOfLinksItem-->
+                        <CmdListOfLinksItem
+                            :class="{'active': sectionAnchors && activeSection === index}"
+                            :link="link"
+                        />
+                        <!-- end CmdListOfLinksItem-->
+                    </EditComponentWrapper>
 
-            <!-- begin edit-mode -->
-            <li v-else>
-                <EditComponentWrapper
-                    v-for="(link, index) in links"
-                    :key="'x' + index"
-                    class="edit-items"
-                    :showComponentName="false"
-                    componentTag="ul"
-                    componentName="CmdLinkItem"
-                    :componentProps="link"
-                    :allowedComponentTypes="[]"
-                    :componentPath="['props', 'links', index]"
-                    :itemProvider="itemProvider"
-                >
-                    <!-- begin CmdListOfLinksItem-->
-                    <CmdListOfLinksItem
-                        :class="{'active': sectionAnchors && activeSection === index}"
-                        :link="link"
-                    />
-                    <!-- end CmdListOfLinksItem-->
-                </EditComponentWrapper>
+                    <button v-if="links.length === 0" type="button" class="button confirm small" @click="onAddItem">
+                        <span class="icon-plus"></span>
+                        <span>Add new entry</span>
+                    </button>
+                </li>
+                <!-- end edit-mode -->
+            </template>
 
-                <button v-if="links.length === 0" type="button" class="button confirm small" @click="onAddItem">
-                    <span class="icon-plus"></span>
-                    <span>Add new entry</span>
-                </button>
-            </li>
-            <!-- end edit-mode -->
+            <!-- begin list of images -->
+            <template v-if="listType === 'images'">
+                <li v-for="(image, index) in items" :key="index">
+                    <!-- begin CmdImage with link-->
+                    <a v-if="image.image.url" :href="image.image.url">
+                        <CmdImage v-bind="image"/>
+                    </a>
+                    <!-- end CmdImage with link-->
+
+                    <!-- begin CmdImage without link-->
+                    <CmdImage v-else v-bind="image"/>
+                    <!-- end CmdImage without link-->
+                </li>
+            </template>
+            <!-- end list of images -->
+
+            <!-- begin tags -->
+            <template v-if="listType === 'tags'">
+                <li v-for="(tag, index) in items" :key="index">
+                    <small class="tag">{{ tag }}</small>
+                </li>
+            </template>
+            <!-- end tags -->
         </ul>
         <!-- end list of links -->
     </div>
@@ -72,6 +99,20 @@ export default {
     emits: ["click"],
     mixins: [EditMode],
     props: {
+        /**
+         * set list-type
+         *
+         * @allowedValues: links, images, tags
+         */
+        listType: {
+            typ: String,
+            default: "links",
+            validator(value) {
+                return value === "links" ||
+                    value === "images" ||
+                    value === "tags"
+            }
+        },
         /**
          * toggle gab between links
          */
@@ -139,9 +180,9 @@ export default {
             }
         },
         /**
-         * list of displayed links
+         * list of displayed items
          */
-        links: {
+        items: {
             type: Array,
             required: false
         },
@@ -168,7 +209,7 @@ export default {
     },
     computed: {
         setStretchClass() {
-            if(this.largeIcons && this.orientation === "horizontal") {
+            if (this.largeIcons && this.orientation === "horizontal") {
                 return "stretch"
             }
             return null
@@ -197,7 +238,7 @@ export default {
                     if (cmdHeadlineUpdateHandler) {
                         props.cmdHeadline = props.cmdHeadline || {}
                         cmdHeadlineUpdateHandler.update(props.cmdHeadline)
-            }
+                    }
                 }
             })
         },
@@ -209,8 +250,8 @@ export default {
 </script>
 
 <style>
-/* begin cmd-list-of-links ---------------------------------------------------------------------------------------- */
-.cmd-list-of-links {
+/* begin cmd-list ---------------------------------------------------------------------------------------- */
+.cmd-list {
     > ul {
         flex-direction: column;
         gap: calc(var(--default-gap) / 2);
@@ -243,26 +284,24 @@ export default {
         }
     }
 
-    &.horizontal {
-        > ul {
-            gap: var(--default-gap);
-            flex-direction: row;
-
-            > li {
-                flex: none;
-                display: flex;
-                flex-direction: column;
-            }
+    .horizontal {
+        gap: var(--default-gap);
+        flex-direction: row;
 
-            &.align-right {
-                justify-content: flex-end;
-            }
+        > li {
+            flex: none;
+            display: flex;
+            flex-direction: column;
+            max-width: 100%; /* avoid li to be stretched by large content */
+        }
 
-            &.stretch {
-                justify-content: space-around;
-            }
+        &.align-right {
+            justify-content: flex-end;
         }
 
+        &.stretch {
+            justify-content: space-around;
+        }
     }
 
     &.large-icons {
@@ -294,7 +333,7 @@ export default {
 @import '../assets/styles/variables';
 
 @media only screen and (max-width: $medium-max-width) {
-    .cmd-list-of-links {
+    .cmd-list {
         > ul {
             ul {
                 gap: calc(var(--default-gap) / 2);
@@ -306,5 +345,6 @@ export default {
         }
     }
 }
-/* end cmd-list-of-links------------------------------------------------------------------------------------------ */
+
+/* end cmd-list ------------------------------------------------------------------------------------------ */
 </style>

package/src/components/CmdListOfLinksItem.vue

@@ -1,32 +1,32 @@
 <template>
     <!-- begin default-view -->
     <li v-if="!editing" class="cmd-list-of-links-item">
-        <!-- begin CmdLink -->
-        <!-- do not use v-bind to avoid unnecessary props to be provided for CmdLink causing warnings -->
-        <CmdLink
-            :linkType="link?.linkType"
-            :text="link?.text"
-            :path="link?.path"
-            :target="link?.target"
-            :icon="link?.icon"
-            :fancybox="link?.fancybox"
-            :tooltip="link?.tooltip"
-            :styleAsButton="link?.styleAsButton"
-            :primaryButton="link?.primaryButton"
-            :styleAsBox="link?.styleAsBox"
-            @click="emitClick($event, link)"
-        />
-        <!-- end CmdLink -->
-
-        <!-- begin CmdListOfLinksItem for nested children -->
-        <ul v-if="link?.children?.length">
-            <CmdListOfLinksItem
-                v-for="(child, index) in link?.children"
-                :key="index"
-                :link="child"
+            <!-- begin CmdLink -->
+            <!-- do not use v-bind to avoid unnecessary props to be provided for CmdLink causing warnings -->
+            <CmdLink
+                :linkType="link?.linkType"
+                :text="link?.text"
+                :path="link?.path"
+                :target="link?.target"
+                :icon="link?.icon"
+                :fancybox="link?.fancybox"
+                :tooltip="link?.tooltip"
+                :styleAsButton="link?.styleAsButton"
+                :primaryButton="link?.primaryButton"
+                :styleAsBox="link?.styleAsBox"
+                @click="emitClick($event, link)"
             />
-        </ul>
-        <!-- end CmdListOfLinksItem for nested children -->
+            <!-- end CmdLink -->
+
+            <!-- begin CmdListOfLinksItem for nested children -->
+            <ul v-if="link?.children?.length">
+                <CmdListOfLinksItem
+                    v-for="(child, index) in link?.children"
+                    :key="index"
+                    :link="child"
+                />
+            </ul>
+            <!-- end CmdListOfLinksItem for nested children -->
     </li>
     <!-- end default-view -->
 

package/src/index.js

@@ -24,8 +24,7 @@ export { default as CmdImageGallery } from '@/components/CmdImageGallery.vue'
 export { default as CmdImageZoom } from '@/components/CmdImageZoom.vue'
 export { default as CmdInputGroup } from '@/components/CmdInputGroup.vue'
 export { default as CmdLink } from '@/components/CmdLink.vue'
-export { default as CmdListOfImages } from '@/components/CmdListOfImages.vue'
-export { default as CmdListOfLinks } from '@/components/CmdListOfLinks.vue'
+export { default as CmdList } from '@/components/CmdList.vue'
 export { default as CmdLoginForm } from '@/components/CmdLoginForm.vue'
 export { default as CmdMainNavigation } from '@/components/CmdMainNavigation.vue'
 export { default as CmdMultistepFormProgressBar } from '@/components/CmdMultistepFormProgressBar.vue'

package/src/pages/MultipleListsOfLinks.vue

@@ -1,14 +1,14 @@
 <template>
     <div class="cmd-page-multiple-lists-of-links flex-container vertical">
         <template v-for="(segment, index) in segments" :key="index">
-            <!-- begin CmdListOfLinks -->
-            <CmdListOfLinks
+            <!-- begin CmdList -->
+            <CmdList
                 :links="segment.links"
                 :orientation="segment.orientation"
                 :largeIcons="segment.largeIcons"
                 :cmdHeadline="segment.headline"
             />
-            <!-- end CmdListOfLinks -->
+            <!-- end CmdList -->
 
             <!-- begin slot-content -->
             <slot name="multiple-lists-of-links-slot-${index}"></slot>

package/src/components/CmdListOfImages.vue

@@ -1,214 +0,0 @@
-<template>
-    <div :class="['cmd-list-of-images',
-        {
-            box: styleAsBox
-        }
-    ]">
-        <!-- begin cmd-headline -->
-        <CmdHeadline
-            v-if="cmdHeadline?.headlineText"
-            v-bind="cmdHeadline"
-        />
-        <!-- end cmd-headline -->
-
-        <!-- begin list of images -->
-        <ul :class="['list-of-images', {vertical: orientation === 'vertical'}]">
-            <li v-for="(image, index) in images" :key="index">
-                <!-- begin CmdImage with link-->
-                <a v-if="image.image.url" href="#">
-                    <CmdImage v-bind="image" />
-                </a>
-                <!-- end CmdImage with link-->
-
-                <!-- begin CmdImage without link-->
-                <CmdImage v-else v-bind="image" />
-                <!-- end CmdImage without link-->
-            </li>
-            <!-- end edit-mode -->
-        </ul>
-        <!-- end list of links -->
-    </div>
-</template>
-
-<script>
-// import mixins (editMode only)
-import EditMode from "../mixins/EditMode.vue"
-
-// import utils (editMode only)
-// import {buildComponentPath, updateHandlerProvider} from "../utils/editmode.js"
-
-export default {
-    name: "CmdListOfImages",
-    emits: ["click"],
-    //mixins: [EditMode],
-    props: {
-        /**
-         * style component like a box
-         *
-         * @affectsStyling: true
-         */
-        styleAsBox: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         * list of displayed images
-         */
-        images: {
-            type: Array,
-            required: false
-        },
-        /**
-         * toggle orientation of list
-         *
-         * @allowedValues: horizontal, vertical
-         */
-        orientation: {
-            type: String,
-            default: "vertical",
-            validator(value) {
-                return value === "horizontal" ||
-                    value === "vertical"
-            }
-        },
-        /**
-         * properties for CmdHeadline-component
-         */
-        cmdHeadline: {
-            type: Object,
-            required: false
-        }
-    },
-    methods: {
-/*
-        onAddItem() {
-            this.editModeContext.content.addContent(
-                buildComponentPath(this, 'props', 'links', -1),
-                this.itemProvider)
-        },
-        itemProvider() {
-            return {
-                "iconClass": "icon-user-profile",
-                "type": "href",
-                "text": "Linktext",
-                "path": "#",
-                "tooltip": "Tooltip",
-                "target": "_blank"
-            }
-        },
-        updateHandlerProvider() {
-            return updateHandlerProvider(this, {
-                update(props, childUpdateHandlers) {
-                    const cmdHeadlineUpdateHandler = childUpdateHandlers?.find(handler => handler.name === "CmdHeadline")
-                    if (cmdHeadlineUpdateHandler) {
-                        props.cmdHeadline = props.cmdHeadline || {}
-                        cmdHeadlineUpdateHandler.update(props.cmdHeadline)
-            }
-                }
-            })
-        }
-*/
-    }
-}
-</script>
-
-<style>
-/* begin cmd-list-of-links ---------------------------------------------------------------------------------------- */
-.cmd-list-of-links {
-    > ul {
-        flex-direction: column;
-        gap: calc(var(--default-gap) / 2);
-        margin: 0;
-
-        li {
-            list-style: none;
-            margin-left: 0 !important; /* overwrite default-settings from frontend-framework */
-        }
-
-        &.align-center {
-            justify-content: center;
-        }
-
-        &.align-right li {
-            text-align: right;
-        }
-
-        ul {
-            display: flex;
-            flex-direction: column;
-            margin-left: calc(var(--default-padding) * 2);
-        }
-    }
-
-    &.show-list-style-items {
-        li {
-            list-style-type: disc;
-            margin-left: 1.7rem;
-        }
-    }
-
-    &.horizontal {
-        > ul {
-            gap: var(--default-gap);
-            flex-direction: row;
-
-            > li {
-                flex: none;
-                display: flex;
-                flex-direction: column;
-            }
-
-            &.align-right {
-                justify-content: flex-end;
-            }
-
-            &.stretch {
-                justify-content: space-around;
-            }
-        }
-
-    }
-
-    &.large-icons {
-        li {
-            list-style-type: none;
-
-            a {
-                display: flex;
-                flex-direction: column;
-                gap: calc(var(--default-gap) / 4);
-                text-decoration: none;
-                align-items: center;
-                justify-content: center;
-
-                span {
-                    margin: 0;
-                }
-
-                [class*="icon-"] {
-                    font-size: 5rem;
-                }
-            }
-        }
-    }
-}
-</style>
-
-<style lang="scss">
-@import '../assets/styles/variables';
-
-@media only screen and (max-width: $medium-max-width) {
-    .cmd-list-of-links {
-        > ul {
-            ul {
-                gap: calc(var(--default-gap) / 2);
-
-                > li:first-child {
-                    margin-top: calc(var(--default-gap) / 2);
-                }
-            }
-        }
-    }
-}
-/* end cmd-list-of-links------------------------------------------------------------------------------------------ */
-</style>