comand-component-library 4.0.41 → 4.0.42
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
|