comand-component-library 4.1.20 → 4.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "4.1.20",
+  "version": "4.1.22",
   "private": false,
   "type": "module",
   "license": "GPL-3.0-only",
@@ -19,7 +19,8 @@
   "exports": {
     ".": "./dist/comand-component-library.js",
     "./css.js": "./src/css.js",
-    "./style.css": "./dist/style.css"
+    "./style.css": "./dist/style.css",
+    "./variables.scss": "./src/assets/styles/variables.scss"
   },
   "dependencies": {
     "clickout-event": "^1.1.2",

package/src/components/CmdFancyBox.vue

@@ -73,7 +73,7 @@
             <div v-else-if="fancyBoxElements" class="content" ref="elements"></div>
             <div v-else-if="fancyBoxGallery" class="content">
                 <!-- begin CmdSlideButton -->
-                <CmdSlideButton @click.prevent="showPrevItem" slideButtonType="prev"/>
+                <CmdSlideButton @click.prevent="showPrevItem" slideButtonType="left"/>
                 <!-- end CmdSlideButton -->
 
                 <!-- begin enlarged image -->

package/src/components/CmdSlideButton.vue

@@ -4,27 +4,31 @@
        :class="['cmd-slide-button', 'button', 'keep-behavior-on-small-devices', slideButtonType]"
        :title="getDirection.tooltip">
         <!-- begin CmdIcon -->
-        <CmdIcon :type="getDirection.iconType || 'auto'" :iconClass="getDirection.iconClass || 'next'" />
+        <CmdIcon :type="getDirection.iconType || 'auto'" :iconClass="getDirection.iconClass || 'right'" />
         <!-- end CmdIcon -->
     </a>
 </template>
 
 <script>
+import I18n from "../mixins/I18n.js"
+import DefaultMessageProperties from "../mixins/CmdSlideButton/DefaultMessageProperties.js"
+
 export default {
     name: "CmdSlideButton",
+    mixins: [I18n, DefaultMessageProperties],
     props: {
         /**
          * set slide-button-type
          *
-         * @allowedValues: next, prev, up, down
+         * @allowedValues: right, left, up, down
          * @affectsStyling: true
          */
         slideButtonType: {
           type: String,
-          default: "next",
+          default: "right",
             validator(value) {
-                return value === "next" ||
-                    value === "prev" ||
+                return value === "right" ||
+                    value === "left" ||
                     value === "up" ||
                     value === "down"
             }
@@ -36,32 +40,33 @@ export default {
          */
         slideButtons: {
             type: Object,
-            default: function() {
-                return {
-                    prev: {
-                        iconClass: "icon-chevron-one-stripe-left",
-                        tooltip: "Previous"
-                    },
-                    next: {
-                        iconClass: "icon-chevron-one-stripe-right",
-                        tooltip: "Next"
-                    },
-                    up: {
-                        iconClass: "icon-chevron-one-stripe-up",
-                        tooltip: "Previous"
-                    },
-                    down: {
-                        iconClass: "icon-chevron-one-stripe-down",
-                        tooltip: "Next"
-                    }
-                }
-            }
+            required: false
         }
     },
     computed: {
+        slideButtonsDefault() {
+            return {
+                left: {
+                    iconClass: this.slideButtons?.left?.iconClass || "icon-chevron-one-stripe-left",
+                    tooltip: this.getMessage('slide_buttons.tooltip.left') || "Previous"
+                },
+                right: {
+                    iconClass: this.slideButtons?.right?.iconClass || "icon-chevron-one-stripe-right",
+                    tooltip: this.getMessage('slide_buttons.tooltip.right') || "Next"
+                },
+                up: {
+                    iconClass: this.slideButtons?.up?.iconClass || "icon-chevron-one-stripe-up",
+                    tooltip: this.getMessage('slide_buttons.tooltip.up') || "Previous"
+                },
+                down: {
+                    iconClass: this.slideButtons?.down?.iconClass || "icon-chevron-one-stripe-down",
+                    tooltip: this.getMessage('slide_buttons.tooltip.down') || "Next"
+                }
+            }
+        },
         getDirection() {
-            if(this.slideButtons[this.slideButtonType]) {
-                return this.slideButtons[this.slideButtonType]
+            if(this.slideButtonsDefault[this.slideButtonType]) {
+                return this.slideButtonsDefault[this.slideButtonType]
             }
             console.warn("Property 'slideButtonType' does not match slideButtons-key")
             return {}

package/src/components/CmdSlideshow.vue

@@ -5,7 +5,7 @@
             <CmdSlideButton
                 v-if="showSlideButtons"
                 @click.prevent="showPrevItem"
-                slideButtonType="prev"
+                slideButtonType="left"
                 :class="{'disabled': slideshowItemEditing}"
                 v-bind="tooltipForSlidebuttons"
             />
@@ -153,7 +153,7 @@ export default {
             default: false
         },
         /**
-         * properties for CmdSlideButtons-component
+         * properties for CmdSlideButton-component
          *
          * showSlideButtons-property must be activated
          *

package/src/components/CmdTable.vue

@@ -25,7 +25,7 @@
             <CmdSlideButton
                 v-if="showSlideButtons"
                 @click.prevent="scrollLeft"
-                slideButtonType="prev"
+                slideButtonType="left"
             />
             <!-- end CmdSlideButton -->
 

package/src/components/CmdThumbnailScroller.vue

@@ -21,7 +21,7 @@
             <CmdSlideButton
                 v-if="showSlidebuttons"
                 @click.prevent="showPrevItem"
-                slideButtonType="prev"
+                slideButtonType="left"
             />
             <!-- end CmdSlideButton -->
 
@@ -219,7 +219,7 @@ export default {
             required: false
         },
         /**
-         * properties for CmdSlideButtons-component
+         * properties for CmdSlideButton-component
          *
          * @requiredForAccessibility: partial
          */

package/src/mixins/CmdSlideButton/DefaultMessageProperties.js

@@ -0,0 +1,12 @@
+export default {
+  data() {
+    return {
+      defaultMessageProperties: {
+        "slide_buttons.tooltip.left": "Previous",
+        "slide_buttons.tooltip.right": "Next",
+        "slide_buttons.tooltip.up": "Previous",
+        "slide_buttons.tooltip.down": "Next"
+      }
+    }
+  }
+}