comand-component-library 4.0.29 → 4.0.30

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.
@@ -0,0 +1,108 @@
1
+ <template>
2
+ <!-- begin CmdLink -->
3
+ <!-- begin href -->
4
+ <a v-if="linkType === 'href'" :href="path" :target="target" :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton}]" @click.prevent="emitClick($event, 'href')">
5
+ <span v-if="icon.iconClass && icon.position !== 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
6
+ <span v-if="text">{{ text }}</span>
7
+ <span v-if="icon.iconClass && icon.position === 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
8
+ </a>
9
+ <!-- end href -->
10
+
11
+ <!-- begin router -->
12
+ <router-link v-else-if="linkType === 'router'" :to="path" :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton}]" @click.prevent="emitClick($event, 'router')">
13
+ <span v-if="icon.iconClass && icon.position !== 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
14
+ <span v-if="text">{{ text }}</span>
15
+ <span v-if="icon.iconClass && icon.position === 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
16
+ </router-link>
17
+ <!-- end router -->
18
+
19
+ <!-- begin button -->
20
+ <button v-else-if="linkType === 'button'" :class="['cmd-link button', {'primary': primaryButton}]" type="submit" @click.prevent="emitClick($event, 'button')">
21
+ <span v-if="icon.iconClass && icon.position !== 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
22
+ <span v-if="text">{{ text }}</span>
23
+ <span v-if="icon.iconClass && icon.position === 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
24
+ </button>
25
+ <!-- end button -->
26
+ <!-- end CmdLink -->
27
+ </template>
28
+
29
+ <script>
30
+ export default {
31
+ name: "CmdLink",
32
+ emits: ["click"],
33
+ props: {
34
+ /**
35
+ * set type of link
36
+ * @allowedValues: 'href', 'router', 'button'
37
+ */
38
+ linkType: {
39
+ type: String,
40
+ default: "href"
41
+ },
42
+ /**
43
+ * set path
44
+ *
45
+ * linkType must be 'href', 'router'
46
+ */
47
+ path: {
48
+ type: String,
49
+ default: "#"
50
+ },
51
+ /**
52
+ * set target
53
+ *
54
+ * linkType must be 'href'
55
+ */
56
+ target: {
57
+ type: String,
58
+ default: ""
59
+ },
60
+ /**
61
+ * icon to display
62
+ */
63
+ icon: {
64
+ type: Object,
65
+ default: {}
66
+ },
67
+ /**
68
+ * displayed text
69
+ *
70
+ */
71
+ text: {
72
+ type: String,
73
+ default: ""
74
+ },
75
+ /**
76
+ * toggle if link should be styled as button
77
+ *
78
+ * (type 'button' will always be styles as button)
79
+ */
80
+ styleAsButton: {
81
+ type: Boolean,
82
+ default: false
83
+ },
84
+ /**
85
+ * activate if button should be styled as primary-button
86
+ *
87
+ * (type must be 'button' or styleAsButton-property must be activated)
88
+ */
89
+ primaryButton: {
90
+ type: Boolean,
91
+ default: false
92
+ }
93
+ },
94
+ methods: {
95
+ emitClick(event, linkType) {
96
+ this.$emit('click', {originalEvent: event, linkType: linkType})
97
+ }
98
+ }
99
+ }
100
+ </script>
101
+
102
+ <style>
103
+ .cmd-link {
104
+ span[class*="icon"]:not(:only-child) {
105
+ font-size: 1rem;
106
+ }
107
+ }
108
+ </style>
@@ -16,14 +16,15 @@
16
16
  <template v-if="currentItem">
17
17
  <template v-if="!useSlot">
18
18
  <template v-if="!editModeContext">
19
- <a v-if="currentItem?.link?.href" :href="currentItem?.link?.href"
19
+ <a v-if="currentItem?.link?.href"
20
+ :href="currentItem?.link?.href"
20
21
  :title="currentItem?.link?.tooltip">
21
- <!-- begin CmdImage -->
22
- <CmdImage :image="currentItem?.image" :figcaption="currentItem?.figcaption"/>
23
- <!-- begin CmdImage -->
24
- </a>
22
+ <!-- begin CmdImage -->
23
+ <CmdImage :image="currentItem?.image" :figcaption="currentItem?.figcaption"/>
24
+ <!-- begin CmdImage -->
25
+ </a>
25
26
 
26
- <!-- begin CmdImage -->
27
+ <!-- begin CmdImage -->
27
28
  <CmdImage v-else :image="currentItem?.image" :figcaption="currentItem?.figcaption"/>
28
29
  <!-- begin CmdImage -->
29
30
  </template>
@@ -93,7 +93,7 @@ export default {
93
93
  margin: 0;
94
94
 
95
95
  a:not([class*="active"]) {
96
- filter: contrast(.5);
96
+ filter: contrast(.6);
97
97
 
98
98
  &:hover, &:focus-visible, &:active, &.active, &.router-link-active {
99
99
  filter: none;
@@ -418,7 +418,7 @@ export default {
418
418
  flex: none; /* avoids items to shrink to small on small screens */
419
419
 
420
420
  img {
421
- min-width: 15rem;
421
+ min-width: 5rem;
422
422
  max-height: 10rem;
423
423
  }
424
424