comand-component-library 4.1.20 → 4.1.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "comand-component-library",
3
- "version": "4.1.20",
3
+ "version": "4.1.22",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "license": "GPL-3.0-only",
@@ -19,7 +19,8 @@
19
19
  "exports": {
20
20
  ".": "./dist/comand-component-library.js",
21
21
  "./css.js": "./src/css.js",
22
- "./style.css": "./dist/style.css"
22
+ "./style.css": "./dist/style.css",
23
+ "./variables.scss": "./src/assets/styles/variables.scss"
23
24
  },
24
25
  "dependencies": {
25
26
  "clickout-event": "^1.1.2",
@@ -73,7 +73,7 @@
73
73
  <div v-else-if="fancyBoxElements" class="content" ref="elements"></div>
74
74
  <div v-else-if="fancyBoxGallery" class="content">
75
75
  <!-- begin CmdSlideButton -->
76
- <CmdSlideButton @click.prevent="showPrevItem" slideButtonType="prev"/>
76
+ <CmdSlideButton @click.prevent="showPrevItem" slideButtonType="left"/>
77
77
  <!-- end CmdSlideButton -->
78
78
 
79
79
  <!-- begin enlarged image -->
@@ -4,27 +4,31 @@
4
4
  :class="['cmd-slide-button', 'button', 'keep-behavior-on-small-devices', slideButtonType]"
5
5
  :title="getDirection.tooltip">
6
6
  <!-- begin CmdIcon -->
7
- <CmdIcon :type="getDirection.iconType || 'auto'" :iconClass="getDirection.iconClass || 'next'" />
7
+ <CmdIcon :type="getDirection.iconType || 'auto'" :iconClass="getDirection.iconClass || 'right'" />
8
8
  <!-- end CmdIcon -->
9
9
  </a>
10
10
  </template>
11
11
 
12
12
  <script>
13
+ import I18n from "../mixins/I18n.js"
14
+ import DefaultMessageProperties from "../mixins/CmdSlideButton/DefaultMessageProperties.js"
15
+
13
16
  export default {
14
17
  name: "CmdSlideButton",
18
+ mixins: [I18n, DefaultMessageProperties],
15
19
  props: {
16
20
  /**
17
21
  * set slide-button-type
18
22
  *
19
- * @allowedValues: next, prev, up, down
23
+ * @allowedValues: right, left, up, down
20
24
  * @affectsStyling: true
21
25
  */
22
26
  slideButtonType: {
23
27
  type: String,
24
- default: "next",
28
+ default: "right",
25
29
  validator(value) {
26
- return value === "next" ||
27
- value === "prev" ||
30
+ return value === "right" ||
31
+ value === "left" ||
28
32
  value === "up" ||
29
33
  value === "down"
30
34
  }
@@ -36,32 +40,33 @@ export default {
36
40
  */
37
41
  slideButtons: {
38
42
  type: Object,
39
- default: function() {
40
- return {
41
- prev: {
42
- iconClass: "icon-chevron-one-stripe-left",
43
- tooltip: "Previous"
44
- },
45
- next: {
46
- iconClass: "icon-chevron-one-stripe-right",
47
- tooltip: "Next"
48
- },
49
- up: {
50
- iconClass: "icon-chevron-one-stripe-up",
51
- tooltip: "Previous"
52
- },
53
- down: {
54
- iconClass: "icon-chevron-one-stripe-down",
55
- tooltip: "Next"
56
- }
57
- }
58
- }
43
+ required: false
59
44
  }
60
45
  },
61
46
  computed: {
47
+ slideButtonsDefault() {
48
+ return {
49
+ left: {
50
+ iconClass: this.slideButtons?.left?.iconClass || "icon-chevron-one-stripe-left",
51
+ tooltip: this.getMessage('slide_buttons.tooltip.left') || "Previous"
52
+ },
53
+ right: {
54
+ iconClass: this.slideButtons?.right?.iconClass || "icon-chevron-one-stripe-right",
55
+ tooltip: this.getMessage('slide_buttons.tooltip.right') || "Next"
56
+ },
57
+ up: {
58
+ iconClass: this.slideButtons?.up?.iconClass || "icon-chevron-one-stripe-up",
59
+ tooltip: this.getMessage('slide_buttons.tooltip.up') || "Previous"
60
+ },
61
+ down: {
62
+ iconClass: this.slideButtons?.down?.iconClass || "icon-chevron-one-stripe-down",
63
+ tooltip: this.getMessage('slide_buttons.tooltip.down') || "Next"
64
+ }
65
+ }
66
+ },
62
67
  getDirection() {
63
- if(this.slideButtons[this.slideButtonType]) {
64
- return this.slideButtons[this.slideButtonType]
68
+ if(this.slideButtonsDefault[this.slideButtonType]) {
69
+ return this.slideButtonsDefault[this.slideButtonType]
65
70
  }
66
71
  console.warn("Property 'slideButtonType' does not match slideButtons-key")
67
72
  return {}
@@ -5,7 +5,7 @@
5
5
  <CmdSlideButton
6
6
  v-if="showSlideButtons"
7
7
  @click.prevent="showPrevItem"
8
- slideButtonType="prev"
8
+ slideButtonType="left"
9
9
  :class="{'disabled': slideshowItemEditing}"
10
10
  v-bind="tooltipForSlidebuttons"
11
11
  />
@@ -153,7 +153,7 @@ export default {
153
153
  default: false
154
154
  },
155
155
  /**
156
- * properties for CmdSlideButtons-component
156
+ * properties for CmdSlideButton-component
157
157
  *
158
158
  * showSlideButtons-property must be activated
159
159
  *
@@ -25,7 +25,7 @@
25
25
  <CmdSlideButton
26
26
  v-if="showSlideButtons"
27
27
  @click.prevent="scrollLeft"
28
- slideButtonType="prev"
28
+ slideButtonType="left"
29
29
  />
30
30
  <!-- end CmdSlideButton -->
31
31
 
@@ -21,7 +21,7 @@
21
21
  <CmdSlideButton
22
22
  v-if="showSlidebuttons"
23
23
  @click.prevent="showPrevItem"
24
- slideButtonType="prev"
24
+ slideButtonType="left"
25
25
  />
26
26
  <!-- end CmdSlideButton -->
27
27
 
@@ -219,7 +219,7 @@ export default {
219
219
  required: false
220
220
  },
221
221
  /**
222
- * properties for CmdSlideButtons-component
222
+ * properties for CmdSlideButton-component
223
223
  *
224
224
  * @requiredForAccessibility: partial
225
225
  */
@@ -0,0 +1,12 @@
1
+ export default {
2
+ data() {
3
+ return {
4
+ defaultMessageProperties: {
5
+ "slide_buttons.tooltip.left": "Previous",
6
+ "slide_buttons.tooltip.right": "Next",
7
+ "slide_buttons.tooltip.up": "Previous",
8
+ "slide_buttons.tooltip.down": "Next"
9
+ }
10
+ }
11
+ }
12
+ }