comand-component-library 3.3.6 → 3.3.8

package/src/components/CmdTable.vue

@@ -208,7 +208,7 @@ export default {
             min-width: 2rem;
             min-height: 2rem;
 
-            span[class*="icon"] {
+            [class*="icon-"] {
                 font-size: var(--icon-size-small);
             }
         }

package/src/components/CmdTabs.vue

@@ -10,6 +10,7 @@
                 </a>
             </li>
         </ul>
+
         <!-- begin slot -->
         <template v-if="useSlot">
             <div v-show="showTab === index - 1" v-for="index in tabs.length" :key="index" aria-live="assertive">
@@ -19,6 +20,7 @@
             </div>
         </template>
         <!-- end slot -->
+
         <div v-else aria-live="assertive">
             <!-- begin CmdHeadline -->
             <CmdHeadline
@@ -125,37 +127,35 @@ export default {
             list-style-type: none;
             background: var(--color-scheme-background-color);
 
-            &.active {
-                border-color: var(--primary-color);
-            }
-
             a {
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 padding: var(--default-padding);
-                color: var(--color-scheme-text-color);
                 border: var(--default-border);
                 border-bottom: 0;
                 border-top-left-radius: var(--border-radius);
                 border-top-right-radius: var(--border-radius);
                 text-decoration: none;
 
-                &:hover, &:active, &:focus, &.active {
+                &:hover, &:active, &:focus {
                     cursor: pointer;
-                    color: var(--hyperlink-color);
+                    color: var(--hyperlink-color-highlighted);
                     border-color: var(--hyperlink-color);
 
-                    span, span[class*="icon"] {
+                    span, [class*="icon-"] {
                         color: inherit;
                     }
                 }
 
                 &.active {
-                    color: var(--pure-white);
-
                     &:hover, &:active, &:focus {
-                        background: var(--hyperlink-color);
+                        color: var(--hyperlink-color-highlighted);
+                        background: var(--pure-white);
+
+                        span, [class*="icon-"] {
+                            color: inherit;
+                        }
                     }
                 }
             }

package/src/components/CmdThumbnailScroller.vue

@@ -9,13 +9,9 @@
 
         <!-- begin list of images to slide -->
         <transition-group name="slide" tag="ul">
-            <li v-for="(image, index) in thumbnails" :key="image.imgId" :class="{'active' : imgIndex === index}">
+            <li v-for="(image, index) in thumbnails" :key="image.id" :class="{'active' : imgIndex === index}">
                 <a href="#" @click.prevent="showFancyBox(index)" :title="getMessage('cmdthumbnailscroller.tooltip.open_large_image')">
-                    <figure>
-                        <figcaption v-if="figcaption.show && figcaption.position === 'above-image' && image.figcaption.length">{{ image.figcaption }}</figcaption>
-                        <img :src="image.srcImageSmall" :alt="image.alt"/>
-                        <figcaption v-if="figcaption.show && figcaption.position === 'below-image' && image.figcaption.length">{{ image.figcaption }}</figcaption>
-                    </figure>
+                    <CmdImage :image="image.image" :figcaption="image.figcaption" />
                 </a>
             </li>
         </transition-group>
@@ -31,19 +27,21 @@
 </template>
 
 <script>
-// import mixins
-import I18n from "../mixins/I18n"
-import DefaultMessageProperties from "../mixins/CmdThumbnailScroller/DefaultMessageProperties"
-
 // import components
+import CmdImage from "./CmdImage.vue"
 import CmdSlideButton from "./CmdSlideButton.vue"
 
 // import functions
 import {openFancyBox} from './CmdFancyBox.vue'
 
+// import mixins
+import I18n from "../mixins/I18n"
+import DefaultMessageProperties from "../mixins/CmdThumbnailScroller/DefaultMessageProperties"
+
 export default {
     name: "CmdThumbnailScroller",
     components: {
+        CmdImage,
         CmdSlideButton
     },
     mixins: [
@@ -142,13 +140,18 @@ export default {
             if (this.allowOpenFancyBox) {
                 openFancyBox({fancyBoxGallery: this.thumbnails, defaultGalleryIndex: index})
             }
-            this.$emit("click", this.thumbnails[index].imgId)
+            this.$emit("click", this.thumbnails[index].id)
         }
     },
     watch: {
         thumbnailScrollerItems: {
             handler() {
-                this.thumbnails = [...this.thumbnailScrollerItems]
+                // change keys for images to fit CmdImage-properties
+                this.thumbnails = this.thumbnailScrollerItems.map((item) => {
+                    const newItem = {image: {...item.image}, figcaption: {...item.figcaption}}
+                    newItem.image.src = newItem.image.srcImageSmall
+                    return newItem
+                })
             },
             immediate: true
         }

package/src/components/CmdTooltip.vue

@@ -179,7 +179,7 @@ export default {
 .cmd-tooltip {
     padding: .6rem .7rem .4rem .7rem;
     line-height: 100%;
-    font-size: 1.1rem;
+    font-size: var(--font-size-small);
     position: fixed;
     background: var(--color-scheme-background-color);
     z-index: 100;
@@ -196,9 +196,9 @@ export default {
         a {
             margin-left: auto;
 
-            span[class*="icon"] {
+            [class*="icon-"] {
                 padding-left: 1rem;
-                font-size: 1.1rem;
+                font-size: var(--font-size-small);
             }
         }
     }

package/src/components/CmdUploadForm.vue

@@ -1182,32 +1182,32 @@ export default {
     & + .cmd-form-element {
         display: none;
     }
-}
 
-.drop-area {
-    border: var(--default-border);
-    border-style: dashed;
-    background: var(--color-scheme-background-color);
-    padding: (var(--default-padding));
-    text-align: center;
+    .drop-area {
+        border: var(--default-border);
+        border-style: dashed;
+        background: var(--color-scheme-background-color);
+        padding: (var(--default-padding));
+        text-align: center;
 
-    &.allow-drop {
-        border-style: solid;
-    }
+        &.allow-drop {
+            border-style: solid;
+        }
 
-    > span[class*="icon"] {
-        font-size: 5rem;
+        > [class*="icon-"] {
+            font-size: 5rem;
+        }
     }
-}
 
-a.drop-area {
-    display: inline-flex;
-    flex-direction: column;
-    text-decoration: none;
-    background: var(--default-background-color);
+    a.drop-area {
+        display: inline-flex;
+        flex-direction: column;
+        text-decoration: none;
+        background: var(--default-background-color);
 
-    span {
-        margin: 0;
+        span {
+            margin: 0;
+        }
     }
 }
 

package/src/documentation/generated/CmdBoxPropertyDescriptions.json

@@ -68,6 +68,13 @@
             "if false textBody-property must be set"
         ]
     },
+    "image": {
+        "comments": [
+            "image-object for box-body of content-box",
+            "",
+            "src and altText must be set if image is sed"
+        ]
+    },
     "textBody": {
         "comments": [
             "String used as content (placed in a paragraph-tag) for box-body",

package/src/documentation/generated/CmdFancyBoxPropertyDescriptions.json

@@ -14,11 +14,6 @@
             "set if content should be loaded by url"
         ]
     },
-    "figcaption": {
-        "comments": [
-            "figcaption if image is given by url"
-        ]
-    },
     "fancyboxOptions": {
         "comments": [
             "options to show at top (closeIcon, printButtons)"
@@ -64,15 +59,10 @@
             ]
         }
     },
-    "altText": {
+    "cmdImage": {
         "comments": [
-            "alternative text for large image (required for images)"
-        ],
-        "annotations": {
-            "requiredForAccessibility": [
-                "true"
-            ]
-        }
+            "properties for CmdImage-component"
+        ]
     },
     "cmdHeadline": {
         "comments": [

package/src/documentation/generated/CmdHeadlinePropertyDescriptions.json

@@ -18,5 +18,15 @@
         "comments": [
             "icon-class for icon shown left/before headline"
         ]
+    },
+    "textAlign": {
+        "comments": [
+            "text-alignment"
+        ],
+        "annotations": {
+            "allowedValues": [
+                "\"left\", \"center\", \"right\""
+            ]
+        }
     }
 }

package/src/documentation/generated/CmdIconPropertyDescriptions.json

@@ -4,7 +4,7 @@
             "type that defines where the icon is loaded from",
             "'auto' is for letting the component check (by classname) if the icon should be loaded from the local iconfont (class=\"icon-'iconname'\")",
             " or if the icon should be loaded form iconify-api (class='fontprefix':'iconname') (https://iconify.design/)",
-            "'iconify' forces the component to load an iconfify icon (without api) from a local source (which must be defined)"
+            "'iconify' forces the component to load an iconify icon (without api) from a local source (which must be defined)"
         ],
         "annotations": {
             "allowedValues": [

package/src/documentation/generated/CmdImagePropertyDescriptions.json

@@ -0,0 +1,12 @@
+{
+    "image": {
+        "comments": [
+            "image-object including source, alternative text, tooltip (not required)"
+        ]
+    },
+    "figcaption": {
+        "comments": [
+            "figcaption-object including visibility, position (top/bottom), text"
+        ]
+    }
+}

package/src/documentation/generated/CmdImageZoomPropertyDescriptions.json

@@ -1,12 +1,12 @@
 {
-    "smallImageUrl": {
+    "imageSmall": {
         "comments": [
-            "url for small images"
+            "object for small image"
         ]
     },
-    "largeImageUrl": {
+    "imageLarge": {
         "comments": [
-            "url for large image"
+            "object for large image"
         ]
     }
 }

package/src/documentation/generated/CmdPagerPropertyDescriptions.json

@@ -1,7 +1,7 @@
 {
-    "items": {
+    "pages": {
         "comments": [
-            "number of items displayed"
+            "number of pages displayed"
         ]
     },
     "itemsPerPage": {
@@ -9,14 +9,19 @@
             "number of items shown per page"
         ]
     },
-    "showLinksAsButtons": {
+    "linkType": {
         "comments": [
-            "show links as buttons"
-        ]
+            "set type of links"
+        ],
+        "annotations": {
+            "allowedValues": [
+                "\"href\", \"button\""
+            ]
+        }
     },
-    "prevButton": {
+    "prevLink": {
         "comments": [
-            "button to switch to previous page"
+            "link to switch to previous page"
         ],
         "annotations": {
             "requiredForAccessibility": [
@@ -24,9 +29,9 @@
             ]
         }
     },
-    "nextButton": {
+    "nextLink": {
         "comments": [
-            "button to switch to next page"
+            "link to switch to next page"
         ],
         "annotations": {
             "requiredForAccessibility": [

package/src/index.js

@@ -17,6 +17,8 @@ export { default as CmdFormElement } from '@/components/CmdFormElement'
 export { default as CmdFormFilters } from '@/components/CmdFormFilters'
 export { default as CmdGoogleMaps } from '@/components/CmdGoogleMaps'
 export { default as CmdHeadline } from '@/components/CmdHeadline'
+export { default as CmdIcon } from '@/components/CmdIcon'
+export { default as CmdImage } from '@/components/CmdImage'
 export { default as CmdImageGallery } from '@/components/CmdImageGallery'
 export { default as CmdImageZoom } from '@/components/CmdImageZoom'
 export { default as CmdInputGroup } from '@/components/CmdInputGroup'
@@ -47,8 +49,9 @@ export { default as CmdWidthLimitationWrapper } from '@/components/CmdWidthLimit
 export { default as DirFocus } from '@/directives/focus'
 export { default as DirTelephone } from '@/directives/telephone'
 
-// export directives
+// export functions
 export { createUuid, createHtmlId } from '@/utils/common'
+export { getFileExtension } from '@/utils/getFileExtension'
 
 // export composables
 export { useSequence } from '@/composables/sequence'

package/src/mixins/CmdAddressData/DefaultMessageProperties.js

@@ -8,9 +8,12 @@ export default {
         "cmdaddressdata.labeltext.mobile_phone": "Mobile phone:",
         "cmdaddressdata.labeltext.fax": "Fax:",
         "cmdaddressdata.labeltext.email": "Email:",
-        "cmdaddressdata.title.open_address_on_google_maps:": "Open address on GoogleMaps™ in new tab",
+        "cmdaddressdata.labeltext.website": "Web site:",
+        "cmdaddressdata.labeltext.custom": "Custom:",
+        "cmdaddressdata.title.open_address_on_google_maps:": "Open address on GoogleMaps™ (in new tab)",
         "cmdaddressdata.title.call_number": "Call number",
-        "cmdaddressdata.title.send_email": "Send email"
+        "cmdaddressdata.title.send_email": "Send email",
+        "cmdaddressdata.title.visit_website": "Visit web site (in new tab)"
       }
     }
   }

package/src/mixins/CmdBox/DefaultMessageProperties.js

@@ -3,7 +3,9 @@ export default {
     return {
       defaultMessageProperties: {
         "cmdbox.productbox.new": "New",
-        "cmdbox.productbox.article_no": "Article No:"
+        "cmdbox.productbox.article_no": "Article No:",
+        "cmdbox.contentbox.collapse_text": "Collapse text",
+        "cmdbox.contentbox.expand_text": "Expand text"
       }
     }
   }

package/src/mixins/CmdPager/DefaultMessageProperties.js

@@ -0,0 +1,10 @@
+export default {
+  data() {
+    return {
+      defaultMessageProperties: {
+        "cmdpager.tooltip.go_to_page": "Go to page {0}",
+        "cmdpager.tooltip.not_possible": "Not possible (current page is shown already)"
+      }
+    }
+  }
+}