comand-component-library 4.0.29 → 4.0.30
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/comand-component-library.js +2550 -2352
- package/dist/comand-component-library.umd.cjs +6 -6
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/ComponentLibrary.vue +36 -3
- package/src/assets/data/box-user.json +17 -6
- package/src/assets/data/listOfComponents.json +1 -0
- package/src/componentSettingsDataAndControls.vue +25 -2
- package/src/components/CmdBankAccountData.vue +38 -22
- package/src/components/CmdBox.vue +59 -29
- package/src/components/CmdContainer.vue +18 -0
- package/src/components/CmdCookieDisclaimer.vue +134 -119
- package/src/components/CmdLink.vue +108 -0
- package/src/components/CmdSlideshow.vue +7 -6
- package/src/components/CmdSwitchLanguage.vue +1 -1
- package/src/components/CmdThumbnailScroller.vue +1 -1
|
@@ -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"
|
|
19
|
+
<a v-if="currentItem?.link?.href"
|
|
20
|
+
:href="currentItem?.link?.href"
|
|
20
21
|
:title="currentItem?.link?.tooltip">
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
<!-- begin CmdImage -->
|
|
23
|
+
<CmdImage :image="currentItem?.image" :figcaption="currentItem?.figcaption"/>
|
|
24
|
+
<!-- begin CmdImage -->
|
|
25
|
+
</a>
|
|
25
26
|
|
|
26
|
-
|
|
27
|
+
<!-- begin CmdImage -->
|
|
27
28
|
<CmdImage v-else :image="currentItem?.image" :figcaption="currentItem?.figcaption"/>
|
|
28
29
|
<!-- begin CmdImage -->
|
|
29
30
|
</template>
|