comand-component-library 4.0.41 → 4.0.42
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/dist/comand-component-library.js +1399 -1449
- package/dist/comand-component-library.umd.cjs +9 -6
- package/package.json +1 -1
- package/src/components/CmdFormElement.vue +1 -0
- package/src/components/CmdLink.vue +40 -16
- package/src/components/CmdListOfLinksItem.vue +2 -0
- package/src/components/CmdMultistepFormProgressBar.vue +0 -48
- package/src/components/CmdTabs.vue +4 -0
package/package.json
CHANGED
|
@@ -1,38 +1,62 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<!-- begin CmdLink -->
|
|
3
3
|
<!-- begin href -->
|
|
4
|
-
<a v-if="linkType === 'href'" :href="path" :target="target" :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton}]" @click
|
|
5
|
-
<
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
<slot></slot>
|
|
4
|
+
<a v-if="linkType === 'href'" :href="path" :target="target" :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton}]" @click="emitClick($event, 'href')">
|
|
5
|
+
<InnerLink :text="text" :icon="icon">
|
|
6
|
+
<slot></slot>
|
|
7
|
+
</InnerLink>
|
|
9
8
|
</a>
|
|
10
9
|
<!-- end href -->
|
|
11
10
|
|
|
12
11
|
<!-- begin router -->
|
|
13
|
-
<router-link v-else-if="linkType === 'router'" :to="path" :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton}]" @click
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
<slot></slot>
|
|
12
|
+
<router-link v-else-if="linkType === 'router'" :to="path" :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton}]" @click="emitClick($event, 'router')">
|
|
13
|
+
<InnerLink :text="text" :icon="icon">
|
|
14
|
+
<slot></slot>
|
|
15
|
+
</InnerLink>
|
|
18
16
|
</router-link>
|
|
19
17
|
<!-- end router -->
|
|
20
18
|
|
|
21
19
|
<!-- begin button -->
|
|
22
|
-
<button v-else-if="linkType === 'button'" :class="['cmd-link button', {'primary': primaryButton}]" type="submit" @click
|
|
23
|
-
<
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
<slot></slot>
|
|
20
|
+
<button v-else-if="linkType === 'button'" :class="['cmd-link button', {'primary': primaryButton}]" type="submit" @click="emitClick($event, 'button')">
|
|
21
|
+
<InnerLink :text="text" :icon="icon">
|
|
22
|
+
<slot></slot>
|
|
23
|
+
</InnerLink>
|
|
27
24
|
</button>
|
|
28
25
|
<!-- end button -->
|
|
29
26
|
<!-- end CmdLink -->
|
|
30
27
|
</template>
|
|
31
28
|
|
|
32
29
|
<script>
|
|
30
|
+
import { defineComponent } from "vue"
|
|
31
|
+
const InnerLink = defineComponent({
|
|
32
|
+
template: `<span v-if="icon.iconClass && icon.position !== 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
|
|
33
|
+
<span v-if="text">{{ text }}</span>
|
|
34
|
+
<span v-if="icon.iconClass && icon.position === 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
|
|
35
|
+
<slot></slot>`,
|
|
36
|
+
props: {
|
|
37
|
+
/**
|
|
38
|
+
* icon to display
|
|
39
|
+
*/
|
|
40
|
+
icon: {
|
|
41
|
+
type: Object,
|
|
42
|
+
default: {}
|
|
43
|
+
},
|
|
44
|
+
/**
|
|
45
|
+
* displayed text
|
|
46
|
+
*/
|
|
47
|
+
text: {
|
|
48
|
+
type: String,
|
|
49
|
+
default: ""
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
})
|
|
53
|
+
|
|
33
54
|
export default {
|
|
34
55
|
name: "CmdLink",
|
|
35
56
|
emits: ["click"],
|
|
57
|
+
components: {
|
|
58
|
+
InnerLink
|
|
59
|
+
},
|
|
36
60
|
props: {
|
|
37
61
|
/**
|
|
38
62
|
* set type of link
|
|
@@ -54,7 +78,7 @@ export default {
|
|
|
54
78
|
* linkType-property must be 'href', 'router'
|
|
55
79
|
*/
|
|
56
80
|
path: {
|
|
57
|
-
type: String,
|
|
81
|
+
type: [String, Object],
|
|
58
82
|
default: "#"
|
|
59
83
|
},
|
|
60
84
|
/**
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
<!-- end CmdIcon -->
|
|
13
13
|
<span v-if="link.text">{{ link.text }}</span>
|
|
14
14
|
</a>
|
|
15
|
+
<!--CmdLink @click="executeLink()" /-->
|
|
15
16
|
<!-- end use href --->
|
|
16
17
|
|
|
17
18
|
<!-- begin use router-link -->
|
|
@@ -24,6 +25,7 @@
|
|
|
24
25
|
<!-- end CmdIcon -->
|
|
25
26
|
<span v-if="link.text">{{ link.text }}</span>
|
|
26
27
|
</router-link>
|
|
28
|
+
<!--CmdLink :path="getRoute(link)" /-->
|
|
27
29
|
<!-- end use router-link -->
|
|
28
30
|
|
|
29
31
|
<!-- begin CmdListOfLinksItem for nested children -->
|
|
@@ -16,54 +16,6 @@
|
|
|
16
16
|
<span :class="separatorIconClass"></span>
|
|
17
17
|
</CmdLink>
|
|
18
18
|
<!-- end CmdLink -->
|
|
19
|
-
|
|
20
|
-
<!-- begin type === href -->
|
|
21
|
-
<a v-if="step.type === 'href'"
|
|
22
|
-
:href="step.path" @click.stop.prevent="clickedStep($event, index)"
|
|
23
|
-
:title="step.tooltip"
|
|
24
|
-
>
|
|
25
|
-
<span v-if="showStepNumber" class="number">{{ index + 1 }}</span>
|
|
26
|
-
<!-- begin CmdIcon -->
|
|
27
|
-
<CmdIcon v-if="step.iconClass" :iconClass="step.iconClass" :type="step.iconType" />
|
|
28
|
-
<!-- end CmdIcon -->
|
|
29
|
-
<span v-if="step.text">{{ step.text }}</span>
|
|
30
|
-
<span :class="separatorIconClass"></span>
|
|
31
|
-
</a>
|
|
32
|
-
<!-- end type === href -->
|
|
33
|
-
|
|
34
|
-
<!-- begin type === router -->
|
|
35
|
-
<router-link
|
|
36
|
-
v-if="step.type === 'router'"
|
|
37
|
-
:to="getRoute(step)"
|
|
38
|
-
:title="step.tooltip"
|
|
39
|
-
>
|
|
40
|
-
<span v-if="showStepNumber" class="number">{{ index + 1 }}</span>
|
|
41
|
-
<!-- begin CmdIcon -->
|
|
42
|
-
<CmdIcon v-if="step.iconClass" :iconClass="step.iconClass" :type="step.iconType" />
|
|
43
|
-
<!-- end CmdIcon -->
|
|
44
|
-
<span v-if="step.text">{{ step.text }}</span>
|
|
45
|
-
<span :class="separatorIconClass"></span>
|
|
46
|
-
</router-link>
|
|
47
|
-
<!-- end type === router -->
|
|
48
|
-
|
|
49
|
-
<!-- begin type === button/submit -->
|
|
50
|
-
<button
|
|
51
|
-
v-if="step.type === 'button' || step.type === 'submit'"
|
|
52
|
-
class="button"
|
|
53
|
-
:type="step.type"
|
|
54
|
-
:name="step.name"
|
|
55
|
-
:title="step.tooltip"
|
|
56
|
-
:formaction="step.formaction"
|
|
57
|
-
@click.stop.prevent="clickedStep($event, index)"
|
|
58
|
-
>
|
|
59
|
-
<span v-if="showStepNumber" class="number">{{ index + 1 }}</span>
|
|
60
|
-
<!-- begin CmdIcon -->
|
|
61
|
-
<CmdIcon v-if="step.iconClass" :iconClass="step.iconClass" :type="step.iconType" />
|
|
62
|
-
<!-- end CmdIcon -->
|
|
63
|
-
<span v-if="step.text">{{ step.text }}</span>
|
|
64
|
-
<span :class="separatorIconClass"></span>
|
|
65
|
-
</button>
|
|
66
|
-
<!-- end type === button/submit -->
|
|
67
19
|
</li>
|
|
68
20
|
</ol>
|
|
69
21
|
</template>
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="cmd-tabs">
|
|
3
|
+
<!-- being tab-list -->
|
|
3
4
|
<ul :class="{'stretch-tabs' : stretchTabs}" role="tablist">
|
|
4
5
|
<li v-for="(tab, index) in tabs" :class="{active : showTab === index}" :key="index" role="tab">
|
|
5
6
|
<a href="#" @click.prevent="setActiveTab(index)" :title="!tab.name ? tab.tooltip : undefined">
|
|
@@ -10,7 +11,9 @@
|
|
|
10
11
|
</a>
|
|
11
12
|
</li>
|
|
12
13
|
</ul>
|
|
14
|
+
<!-- end tab-list -->
|
|
13
15
|
|
|
16
|
+
<!-- being tab-content -->
|
|
14
17
|
<!-- begin slot -->
|
|
15
18
|
<template v-if="useSlot">
|
|
16
19
|
<div v-show="showTab === index - 1" v-for="index in tabs.length" :key="index" aria-live="assertive">
|
|
@@ -32,6 +35,7 @@
|
|
|
32
35
|
<!-- end CmdHeadline -->
|
|
33
36
|
<div v-html="tabs[showTab].htmlContent"></div>
|
|
34
37
|
</div>
|
|
38
|
+
<!-- end tab-content -->
|
|
35
39
|
</div>
|
|
36
40
|
</template>
|
|
37
41
|
|