comand-component-library 3.1.43 → 3.1.46

package/src/components/CmdFooterNavigation.vue

@@ -1,71 +0,0 @@
-<template>
-    <div class="cmd-footer-navigation">
-        <h4 v-if="headline">{{ headline }}</h4>
-        <ul class="flex-container">
-            <li v-for="(link, index) in footerNavigation" :key="index">
-                <router-link v-if="link.type === 'router'" :to="getRoute(link)" :title="link.tooltip">
-                    <span v-if="link.iconClass" :class="link.iconClass"></span>
-                    <span v-if="link.linkName">{{ link.linkName }}</span>
-                </router-link>
-                <a v-else :href="link.path" :target="link.target" @click="executeLink(link, $event)"
-                   :title="link.tooltip">
-                    <span v-if="link.iconClass" :class="link.iconClass"></span>
-                    <span v-if="link.linkName">{{ link.linkName }}</span>
-                </a>
-            </li>
-        </ul>
-    </div>
-</template>
-
-<script>
-import {getRoute} from "../utilities.js"
-import {openFancyBox} from "./CmdFancyBox.vue"
-
-export default {
-    name: "CmdFooterNavigation",
-    props: {
-        /**
-         * headlien above links
-         */
-        headline: {
-            type: String,
-            required: false
-        },
-        /**
-         * list of links shown vertically
-         */
-        footerNavigation: {
-            type: Array,
-            required: false
-        }
-    },
-    methods: {
-        getRoute(language) {
-            return getRoute(language)
-        },
-        executeLink(link, event) {
-            if (link.fancybox) {
-                event.preventDefault()
-                openFancyBox({url: link.link.path})
-            }
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-/* begin cmd-footer-navigation ---------------------------------------------------------------------------------------- */
-.cmd-footer-navigation {
-    ul {
-        flex-direction: column;
-        gap: calc(var(--default-gap) / 2);
-
-        li {
-            list-style: none;
-            margin-left: 0;
-        }
-    }
-}
-
-/* end cmd-footer-navigation ------------------------------------------------------------------------------------------ */
-</style>

package/src/components/CmdMainHeadline.vue

@@ -1,75 +0,0 @@
-<template>
-    <header class="cmd-main-headline">
-        <span v-if="iconClass" :class="iconClass"></span>
-        <div v-if="preHeadline">
-            <p>{{ preHeadline }}</p>
-            <h1>{{ mainHeadline }}</h1>
-        </div>
-        <h1 v-else>{{ mainHeadline }}</h1>
-    </header>
-</template>
-
-<script>
-export default {
-    name: "CmdMainHeadline",
-    props: {
-        /**
-         * main/h1-headline
-         */
-        mainHeadline: {
-            type: String,
-            required: true
-        },
-        /**
-         * small pre-headline above main-headline
-         */
-        preHeadline: {
-            type: String,
-            required: false
-        },
-        /**
-         * icon-class for icon shown left/before headline
-         */
-        iconClass: {
-            type: String,
-            required: false
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-@import '../assets/styles/variables';
-
-/* begin cmd-main-headline ------------------------------------------------------------------------------------------ */
-.cmd-main-headline {
-    display: flex;
-    align-items: center;
-    margin-bottom: var(--default-margin);
-    gap: calc(var(--default-gap) / 2);
-
-    p {
-        margin-bottom: 0;
-    }
-
-    h1 {
-        margin: 0;
-        display: flex;
-        align-items: center;
-    }
-
-    [class*="icon"] {
-        font-size: 5rem;
-    }
-
-    @media only screen and ($small-max-width) {
-        flex-direction: column;
-
-        h1 {
-            margin-bottom: calc(var(--default-margin) * 2);
-        }
-    }
-}
-
-/* end cmd-main-headline ------------------------------------------------------------------------------------------ */
-</style>

package/src/components/CmdTopHeaderNavigation.vue

@@ -1,88 +0,0 @@
-<template>
-    <div class="cmd-top-header-navigation">
-        <ul class="flex-container" role="navigation">
-            <li v-for="(link, index) in topHeaderNavigationData" :key="index">
-                <a v-if="link.linkType === 'href'" :href="link.path" :target="link.target" :title="link.icon.tooltip">
-                    <span v-if="link.icon && link.icon.iconClass" :class="link.icon.iconClass"></span>
-                    <span v-if="link.text">{{ link.text }}</span>
-                </a>
-                <router-link v-else-if="link.linkType === 'router'" :to="link.path" :target="link.target" :title="link.icon.tooltip">
-                    <span v-if="link.icon && link.icon.iconClass" :class="link.icon.iconClass"></span>
-                    <span v-if="link.text">{{ link.text }}</span>
-                </router-link>
-            </li>
-        </ul>
-    </div>
-</template>
-
-<script>
-export default {
-    name: "CmdTopHeaderNavigation",
-    props: {
-        /**
-         * list of navigation-entries
-         */
-        topHeaderNavigationData: {
-            type: Array,
-            required: false
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-/* begin cmd-top-header-navigation ------------------------------------------------------------------------------------------ */
-@import '../assets/styles/variables';
-
-.cmd-top-header-navigation {
-    > ul.flex-container {
-        justify-content: flex-end;
-        margin: 0 auto;
-
-        li {
-            flex: none;
-            list-style-type: none;
-            margin: 0;
-
-            a {
-                display: flex;
-                align-items: center;
-                padding-top: calc(var(--default-padding) / 2);
-                padding-bottom: calc(var(--default-padding) / 2);
-                text-decoration: none;
-
-                &:hover, &:focus, &:active {
-                    span:not([class*="icon-"]) {
-                        text-decoration: underline;
-                    }
-                }
-
-                [class*="icon-"] {
-                    font-size: 1.5rem;
-                }
-            }
-        }
-    }
-
-    @media only screen and (max-width: $small-max-width) {
-        > ul.flex-container {
-            justify-content: center;
-            flex-direction: row; /* overwrite default settings from framework.css */
-
-            li {
-                display: table;
-
-                a {
-                    [class*="icon-"] {
-                        & + span {
-                            display: none;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-/* end cmd-top-header-navigation ------------------------------------------------------------------------------------------ */
-</style>