comand-component-library 3.1.44 → 3.1.47

package/src/assets/data/list-of-links-section-anchors.json

@@ -0,0 +1,23 @@
+[
+  {
+    "iconClass": "icon-user-profile",
+    "type": "href",
+    "text": "Section 1",
+    "path": "#section1",
+    "target": "",
+    "tooltip": "Go to section 1"
+  },
+  {
+    "type": "href",
+    "text": "Section 2",
+    "path": "#section2",
+    "tooltip": "Go to section 2"
+  },
+  {
+    "iconClass": "icon-export",
+    "type": "href",
+    "text": "Section 3",
+    "path": "#section3",
+    "tooltip": "Go to section 3"
+  }
+]

package/src/assets/data/list-of-links-top-header-navigation.json

@@ -0,0 +1,20 @@
+[
+  {
+    "type": "href",
+    "path": "/",
+    "iconClass": "icon-home",
+    "tooltip": "Home"
+  },
+  {
+    "type": "href",
+    "path": "/",
+    "iconClass": "icon-mail",
+    "tooltip": "Contact"
+  },
+  {
+    "type": "href",
+    "path": "/",
+    "iconClass": "icon-user-profile",
+    "tooltip": "Login"
+  }
+]

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

@@ -0,0 +1,42 @@
+[
+  {
+    "iconClass": "icon-user-profile",
+    "type": "href",
+    "text": "",
+    "path": "#",
+    "target": "",
+    "tooltip": "Link without text, but tooltip"
+  },
+  {
+    "type": "href",
+    "text": "Internal link",
+    "path": "/content/fancybox-content.html",
+    "tooltip": "Open local file in fancybox",
+    "fancybox": true
+  },
+  {
+    "iconClass": "icon-export",
+    "type": "href",
+    "text": "External link",
+    "path": "http://www.comand-cms.com",
+    "target": "_blank",
+    "tooltip": "Open CoManD-Website in new tab"
+  },
+  {
+    "type":"router",
+    "text": "Router-link with path",
+    "path": "/"
+  },
+  {
+    "type":"router",
+    "text": "Router-link with name",
+    "tooltip": "Go to homepage",
+    "route": {
+      "name": "home",
+      "params": {
+        "param1": "value",
+        "param2": "value"
+      }
+    }
+  }
+]

package/src/assets/data/main-navigation.json

@@ -0,0 +1,48 @@
+[
+  {
+    "type": "href",
+    "text": "Entry 1",
+    "path": "#",
+    "subentries": []
+  },
+  {
+    "type": "href",
+    "text": "Entry 2",
+    "path": "",
+    "subentries": [
+      {
+        "type": "href",
+        "text": "Entry 2.1",
+        "path": "",
+        "subentries": [
+            {
+              "type": "href",
+              "text": "Entry 2.1.1",
+              "path": "#"
+            },
+            {
+              "type": "href",
+              "text": "Entry 2.1.2",
+              "path": "#"
+            },
+            {
+              "type": "href",
+              "text": "Entry 2.1.3",
+              "path": "#"
+            }
+        ]
+      },
+      {
+        "type": "href",
+        "text": "Entry 2.2",
+        "path": "#"
+      }
+    ]
+  },
+  {
+    "type": "href",
+    "text": "CoManD-CMS",
+    "path": "http://www.comand-cms.com",
+    "target": "comand-website"
+  }
+]

package/src/assets/data/multistep-form-progress-bar.json

@@ -0,0 +1,33 @@
+[
+  {
+    "type": "href",
+    "path": "",
+    "text": "Contact",
+    "tooltip": "This is a tooltip for step 1",
+    "iconClass": "icon-address"
+  },
+  {
+    "type": "href",
+    "path": "",
+    "text": "Settings",
+    "iconClass": "icon-configuration"
+  },
+  {
+    "type": "href",
+    "path": "",
+    "text": "Attachments",
+    "iconClass": "icon-attachment"
+  },
+  {
+    "type": "href",
+    "path": "",
+    "text": "Terms and Conditions",
+    "iconClass": "icon-section-sign"
+  },
+  {
+    "type": "href",
+    "path": "",
+    "text": "Summary",
+    "iconClass": "icon-rows"
+  }
+]

package/src/assets/data/select-options.json

@@ -1,4 +1,8 @@
 [
+  {
+    "text": "Please select",
+    "value": ""
+  },
   {
     "text": "Optionname 1",
     "value": "1"

package/src/assets/data/{share-buttons.json → share-buttons-page-by-json.json}

@@ -2,29 +2,29 @@
   {
     "id": "share-link-facebook",
     "path": "https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdevelopment.comand-cms.com%2Fmodule%2Fteam.html",
-    "tooltip": "Diese Seite auf Facebook teilen",
+    "tooltip": "Share this page on facebook",
     "iconClass": "icon-facebook",
-    "linkName": "Teilen"
+    "linkText": "Share"
   },
   {
     "id": "share-link-twitter",
     "path": "https://twitter.com/home?status=http%3A%2F%2Fdevelopment.comand-cms.com%2Fmodule%2Fteam.html",
-    "tooltip": "Diese Seite auf Twitter teilen",
+    "tooltip": "Share this page on twitter",
     "iconClass": "icon-twitter",
-    "linkName": "Teilen"
+    "linkText": "Share"
   },
   {
     "id": "share-link-xing",
     "path": "https://www.xing.com/spi/shares/new?sc_p=b7910_cb&url=http%3A%2F%2Fdevelopment.comand-cms.com%2Fmodule%2Fteam.html",
-    "tooltip": "Diese Seite auf Xing teilen",
+    "tooltip": "Share this page on xing",
     "iconClass": "icon-xing",
-    "linkName": "Teilen"
+    "linkText": "Share"
   },
   {
     "id": "share-link-linkedin",
     "path": "https://www.linkedin.com/cws/share?url=http%3A%2F%2Fdevelopment.comand-cms.com%2Fmodule%2Fteam.html",
-    "tooltip": "Diese Seite auf linkedin in teilen",
+    "tooltip": "Share this page on linkedin",
     "iconClass": "icon-linkedin",
-    "linkName": "Teilen"
+    "linkText": "Share"
   }
 ]

package/src/assets/data/share-buttons-page-by-property.json

@@ -0,0 +1,30 @@
+[
+  {
+    "id": "share-link-facebook",
+    "path": "https://www.facebook.com/sharer/sharer.php?u=",
+    "tooltip": "Share this page on facebook",
+    "iconClass": "icon-facebook",
+    "linkText": "Share"
+  },
+  {
+    "id": "share-link-twitter",
+    "path": "https://twitter.com/home?status=",
+    "tooltip": "Share this page on twitter",
+    "iconClass": "icon-twitter",
+    "linkText": "Share"
+  },
+  {
+    "id": "share-link-xing",
+    "path": "https://www.xing.com/spi/shares/new?sc_p=b7910_cb&url=",
+    "tooltip": "Share this page on xing",
+    "iconClass": "icon-xing",
+    "linkText": "Share"
+  },
+  {
+    "id": "share-link-linkedin",
+    "path": "https://www.linkedin.com/cws/share?url=",
+    "tooltip": "Share this page on linkedin",
+    "iconClass": "icon-linkedin",
+    "linkText": "Share"
+  }
+]

package/src/assets/data/switch-language.json

@@ -0,0 +1,20 @@
+[
+  {
+    "iso2": "de",
+    "name": "Deutsch",
+    "tooltip": "Sprache zu deutsch wechseln",
+    "link": {
+      "type": "href",
+      "path": "/"
+    }
+  },
+  {
+    "iso2": "en",
+    "name": "English",
+    "tooltip": "Switch language to English",
+    "link": {
+      "type": "href",
+      "path": "/"
+    }
+  }
+]

package/src/assets/data/table-large.json

@@ -1,6 +1,6 @@
 {
   "caption": {
-    "hide": false,
+    "show": false,
     "text": "This is a caption for a large table"
   },
   "rowIndexHighlighted": 3,

package/src/assets/data/table-small.json

@@ -1,6 +1,6 @@
 {
   "caption": {
-    "hide": false,
+    "show": false,
     "text": "This is a caption for a small table"
   },
   "thead": [

package/src/assets/styles/global-styles.scss

@@ -36,23 +36,9 @@ body.avoid-scrolling {
 }
 /* end .avoid-scrolling --------------------------------------------------------------------------------------------------------------------------------------------------- */
 
-/* begin error-styles for form-elements --------------------------------------------------------------------------------------------------------------------------------------------------- */
-label, .label {
-  &.error {
-    color: var(--error-color);
-
-    & + .cmd-tooltip {
-      border-color: var(--error-color);
-      color: var(--error-color);
-    }
-  }
-}
-/* end error-styles for form-elements --------------------------------------------------------------------------------------------------------------------------------------------------- */
-
 /* begin flags --------------------------------------------------------------------------------------------------------------------------------------------------- */
 .flag {
   width: 3rem;
-  height: 2rem;
   background-size: 100% 100%;
   display: block;
 }
@@ -180,6 +166,49 @@ label, .label {
   }
 }
 /* end product-listing --------------------------------------------------------------------------------------------------------------------------------------------------- */
+.cmd-form-element, .cmd-fake-select {
+  & + .cmd-tooltip {
+    border-color: var(--status-color);
+
+    h6:last-of-type {
+      margin-top: 0;
+    }
+
+    .list-of-requirements {
+      .error {
+        color: var(--error-color);
+      }
+
+      .warning {
+        color: var(--warning-color);
+      }
+
+      .success {
+        color: var(--success-color);
+      }
+
+      .info {
+        color: var(--info-color);
+      }
+
+      span[class*="icon"] {
+        font-size: 1.2rem;
+      }
+
+      & ~ a {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        text-decoration: none;
+
+        span[class*="icon"] {
+          font-size: 1.2rem;
+        }
+      }
+    }
+  }
+}
 /* ---------------------------------------------- END COMPONENTS AND GLOBAL STYLES -------------------------------------------------- */
 
 /* ---------------------------------------------- BEGIN MEDIA QUERIES AND BROWSER SPECIFIC STYLES -------------------------------------------------- */

package/src/assets/styles/transitions.scss

@@ -1,3 +1,4 @@
+/* begin fade-transition */
 .fade-enter-active, .fade-leave-active {
   transition: var(--default-transition);
 }
@@ -9,6 +10,7 @@
 .fade-enter-to, .fade-leave-from {
   opacity: 1;
 }
+/* end fade-transition */
 
 .cmd-slideshow {
   .fade-enter-from, .fade-leave-to {
@@ -16,6 +18,24 @@
   }
 }
 
-.slide-move {
+/* begin slide-transition */
+[class^="slide-"][class$="-enter-active"], [class^="slide-"][class$="-enter-active"] {
   transition: transform 1s ease-in-out;
 }
+
+.slide-left-enter-from, .slide-left-leave-to {
+  left: -100%;
+}
+
+.slide-left-enter-to, .slide-left-leave-from {
+  left: 0;
+}
+
+.slide-right-enter-from, .slide-right-leave-to {
+  right: -100%;
+}
+
+.slide-right-enter-to, .slide-right-leave-from {
+  right: 0;
+}
+/* end slide-transition */

package/src/components/CmdAccordion.vue

@@ -1,19 +1,22 @@
 <template>
     <div :class="['cmd-accordion flex-container vertical', {'no-gap' : !gapBetween, 'active' : active}]">
         <div v-for="(accordionContent, index) in accordion" :key="index">
-            <a v-if="!useCustomHeader" href="#" :title="accordionContent.status ? iconOpen.icon.tooltip : iconClosed.icon.tooltip" @click.prevent="toggleContentVisibility(accordionContent)">
+            <a v-if="!useCustomHeader" href="#" :title="accordionContent.status ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility(accordionContent)">
+                <!-- begin slot for headline -->
                 <slot :name="'accordionHeadline' + index">
-                    <component :is="accordionHeadlineLevel">
-                        <span v-if="accordionContent.icon && accordionContent.icon.iconClass" :class="accordionContent.icon.iconClass" :title="accordionContent.icon.tooltip"></span>
-                        <span v-if="accordionContent.headline">{{ accordionContent.headline }}</span>
-                    </component>
+                    <!-- begin CmdCustomHeadline -->
+                    <CmdCustomHeadline
+                        v-if="accordionContent.headlineText && accordionContent.headlineLevel"
+                        :headlineText="accordionContent.headlineText"
+                        :headlineLevel="accordionContent.headlineLevel"
+                        :iconClass="accordionContent.iconClass"
+                    />
+                    <!-- end CmdCustomHeadline -->
                 </slot>
-                <span class="toggle-icon" :class="[accordionContent.status ? iconOpen.icon.iconClass : iconClosed.icon.iconClass]"></span>
-            </a>
-            <a v-else href="#" :title="tooltip" @click.prevent="toggleContentVisibility(accordionContent)">
-                <slot :name="'customHeadline' + index"><p>{{ accordionContent.headline }}</p></slot>
-                <span class="toggle-icon" :class="[accordionContent.status ?  iconOpen.icon.iconClass : iconClosed.icon.iconClass]"></span>
+                <!-- end slot for headline -->
+                <span class="toggle-icon" :class="[accordionContent.status ? iconOpen.iconClass : iconClosed.iconClass]"></span>
             </a>
+            <!-- begin accordion-content -->
             <transition :name="toggleTransition">
                 <div class="accordion-content" v-if="accordionContent.status" aria-expanded="true">
                     <slot :name="'accordionContent' + index">
@@ -21,13 +24,20 @@
                     </slot>
                 </div>
             </transition>
+            <!-- end accordion-content -->
         </div>
     </div>
 </template>
 
 <script>
+// import components
+import CmdCustomHeadline from "./CmdCustomHeadline"
+
 export default {
     name: "CmdAccordion",
+    components: {
+        CmdCustomHeadline
+    },
     data() {
         return {
             accordion: [],
@@ -35,6 +45,13 @@ export default {
         }
     },
     props: {
+        /**
+         * properties for CmdCustomHeadline-component
+         */
+        cmdCustomHeadline: {
+            type: Object,
+            required: false
+        },
         /**
          * use transition to expand accordion-content
          */
@@ -45,7 +62,7 @@ export default {
         /**
          * toggle if mode if only one accordion can be opened (or multiple ones)
          *
-         * values: single, multiple
+         * @allowedValues: single, multiple
          */
         toggleMode: {
             type: String,
@@ -59,29 +76,12 @@ export default {
             default: false
         },
         /**
-         * set if a gap is shown between multiple accordions
+         * set if a gap should be shown between multiple accordions
          */
         gapBetween: {
             type: Boolean,
             default: true
         },
-        /**
-         * headline for accordion-box that is also visible is accordion is collapsed
-         */
-        accordionHeadlineLevel: {
-            type: String,
-            default: "h3",
-            validator(value) {
-                const allowedTags = ["h2", "h3", "h4", "h5", "h6"]
-
-                // check if allowedTags includes given value for this property (if not output warning in console)
-                if (!allowedTags.includes(value)) {
-                    console.warn("Not allowed tag (" + value + ") used for accordionHeadline-property! Allowed tags are: " + allowedTags)
-                    return false
-                }
-                return true
-            }
-        },
         /**
          * all information about the contents in all shown accordions
          */
@@ -91,36 +91,39 @@ export default {
         },
         /**
          * icon to expand an accordion
+         *
+         * @requiredForAccessibility: partial
          */
         iconOpen: {
             type: Object,
             default: function() {
                 return {
-                    icon: {
-                        iconClass: "icon-single-arrow-up",
-                        tooltip: "Close content"
-                    }
+                    iconClass: "icon-single-arrow-up",
+                    tooltip: "Close content"
                 }
             },
         },
         /**
          * icon to collapse an accordion
+         *
+         * @requiredForAccessibility: partial
          */
         iconClosed: {
             type: Object,
             default: function() {
                 return {
-                    icon: {
-                        iconClass: "icon-single-arrow-down",
-                        tooltip: "Show content"
-                    }
+                    iconClass: "icon-single-arrow-down",
+                    tooltip: "Show content"
                 }
             }
         }
     },
     computed: {
         toggleTransition() {
-            return this.useTransition && 'fade'
+            if(this.useTransition) {
+                return "fade"
+            }
+            return ""
         }
     },
     methods: {
@@ -175,8 +178,6 @@ export default {
 <style lang="scss">
 /* begin cmd-accordion ---------------------------------------------------------------------------------------- */
 .cmd-accordion {
-    margin-bottom: var(--default-margin);
-
     > div {
         > a, > div:first-child {
             display: flex;
@@ -196,7 +197,7 @@ export default {
                     border-color: var(--primary-color);
                 }
 
-                > * {
+                * {
                     color: var(--pure-white);
                 }
             }
@@ -205,7 +206,7 @@ export default {
                 margin: 0;
             }
 
-            > h2, > h3, > h4, > h5, > h6 {
+            > h2, > h3, > h4, > h5, > h6, .cmd-custom-headline {
                 margin-bottom: 0;
                 display: flex;
                 align-items: center;