comand-component-library 4.1.75 → 4.1.77

package/src/components/CmdListOfImages.vue

@@ -0,0 +1,214 @@
+<template>
+    <div :class="['cmd-list-of-images',
+        {
+            box: styleAsBox
+        }
+    ]">
+        <!-- begin cmd-headline -->
+        <CmdHeadline
+            v-if="cmdHeadline?.headlineText || editModeContext"
+            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>

package/src/components/CmdTable.vue

@@ -2,6 +2,7 @@
     <div
         :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"
@@ -10,6 +11,9 @@
                 <CmdIcon :iconClass="iconToggleWidth.iconClass" :type="iconToggleWidth.iconType"/>
                 <!-- end CmdIcon -->
             </a>
+            <!-- end button to toggle table-width -->
+
+            <!-- begin button to collapse table-content -->
             <a v-if="collapsible" class="button"
                href="#" @click.prevent="showTableData = !showTableData"
                :title="showTableData ? iconCollapse.tooltip : iconExpand.tooltip"
@@ -19,6 +23,7 @@
                          :type="showTableData ? iconCollapse.iconType : iconExpand.iconType"/>
                 <!-- end CmdIcon -->
             </a>
+            <!-- end button to collapse table-content -->
         </div>
         <div class="inner-wrapper" ref="innerWrapper" @scroll="updatePosition">
             <!-- begin CmdSlideButton -->
@@ -31,32 +36,40 @@
 
             <!-- begin table -->
             <table ref="table" :class="{'full-width': fullWidth}">
-                <caption v-if="tableData.caption?.text || caption?.text" :class="{ hidden: hideCaption }">
-                    {{ caption?.text || tableData.caption?.text }}
-                </caption>
-                <thead>
-                <tr>
-                    <th v-for="(tablehead, indexHead) in tableData.thead" :key="indexHead" v-html="tablehead"></th>
-                </tr>
-                </thead>
+                <slot name="table-caption">
+                    <caption v-if="tableData.caption?.text || caption?.text" :class="{ hidden: hideCaption }">
+                        {{ caption?.text || tableData.caption?.text }}
+                    </caption>
+                </slot>
+                <slot name="table-head">
+                    <thead>
+                        <tr>
+                            <th v-for="(tablehead, indexHead) in tableData.thead" :key="indexHead" v-html="tablehead"></th>
+                        </tr>
+                    </thead>
+                </slot>
                 <transition :name="useTransition ? 'fade' : null">
-                    <tbody v-show="showTableData" aria-expanded="true">
-                    <tr :class="{'active' : tableData.rowIndexHighlighted === indexRows}"
-                        v-for="(tablerows, indexRows) in tableData.tbody" :key="indexRows">
-                        <td :class="{'active' : tableData.columnIndexHighlighted === indexData}"
-                            v-for="(tabledata, indexData) in tablerows" :key="indexData" v-html="tabledata">
-                        </td>
-                    </tr>
-                    </tbody>
+                    <slot name="table-body">
+                        <tbody v-show="showTableData" aria-expanded="true">
+                            <tr :class="{'active' : tableData.rowIndexHighlighted === indexRows}"
+                                v-for="(tablerows, indexRows) in tableData.tbody" :key="indexRows">
+                                <td :class="{'active' : tableData.columnIndexHighlighted === indexData}"
+                                    v-for="(tabledata, indexData) in tablerows" :key="indexData" v-html="tabledata">
+                                </td>
+                            </tr>
+                        </tbody>
+                    </slot>
                 </transition>
                 <transition :name="useTransition ? 'fade' : null">
-                    <tfoot v-if="tableData.tfoot && tableData.tfoot.length && showTableData" aria-expanded="true">
-                    <tr>
-                        <td :class="{'active' : tableData.columnIndexHighlighted === indexFoot}"
-                            v-for="(tablefoot, indexFoot) in tableData.tfoot" :key="indexFoot" v-html="tablefoot">
-                        </td>
-                    </tr>
-                    </tfoot>
+                    <slot name="table-foot">
+                        <tfoot v-if="tableData.tfoot && tableData.tfoot.length && showTableData" aria-expanded="true">
+                            <tr>
+                                <td :class="{'active' : tableData.columnIndexHighlighted === indexFoot}"
+                                    v-for="(tablefoot, indexFoot) in tableData.tfoot" :key="indexFoot" v-html="tablefoot">
+                                </td>
+                            </tr>
+                        </tfoot>
+                    </slot>
                 </transition>
             </table>
             <!-- end table -->