comand-component-library 4.0.41 → 4.0.43

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.
Files changed (12) hide show
  1. package/dist/comand-component-library.js +1670 -1736
  2. package/dist/comand-component-library.umd.cjs +9 -6
  3. package/dist/style.css +1 -1
  4. package/package.json +1 -1
  5. package/src/ComponentLibrary.vue +1 -0
  6. package/src/components/CmdBox.vue +1 -1
  7. package/src/components/CmdBoxWrapper.vue +4 -0
  8. package/src/components/CmdFormElement.vue +1 -0
  9. package/src/components/CmdLink.vue +40 -16
  10. package/src/components/CmdListOfLinksItem.vue +14 -35
  11. package/src/components/CmdMultistepFormProgressBar.vue +0 -48
  12. package/src/components/CmdTabs.vue +18 -6
package/src/components/CmdListOfLinksItem.vue CHANGED
@@ -1,35 +1,17 @@
1
1
  <template>
2
2
  <!-- begin default-view -->
3
3
  <li v-if="!editing" class="cmd-list-of-links-item">
4
- <!-- begin use href -->
5
- <a v-if="link.type === 'href' || link.type === undefined"
6
- :href="link.path"
7
- :target="link.target"
8
- @click="executeLink(link, $event)"
9
- :title="link.tooltip && link.tooltip !== undefined ? link.tooltip : undefined">
10
- <!-- begin CmdIcon -->
11
- <CmdIcon v-if="link.iconClass" :iconClass="link.iconClass" :type="link.iconType" />
12
- <!-- end CmdIcon -->
13
- <span v-if="link.text">{{ link.text }}</span>
14
- </a>
15
- <!-- end use href --->
16
-
17
- <!-- begin use router-link -->
18
- <router-link
19
- v-else-if="link.type === 'router'"
20
- :to="getRoute(link)"
21
- :title="link.tooltip">
22
- <!-- begin CmdIcon -->
23
- <CmdIcon v-if="link.iconClass" :iconClass="link.iconClass" :type="link.iconType" />
24
- <!-- end CmdIcon -->
25
- <span v-if="link.text">{{ link.text }}</span>
26
- </router-link>
27
- <!-- end use router-link -->
4
+ <!-- begin CmdLink -->
5
+ <CmdLink
6
+ v-bind="link"
7
+ @click="executeLink()"
8
+ />
9
+ <!-- end CmdLink -->
28
10
 
29
11
  <!-- begin CmdListOfLinksItem for nested children -->
30
12
  <ul v-if="!editModeContext">
31
13
  <CmdListOfLinksItem
32
- v-for="(child, index) in link.children"
14
+ v-for="(child, index) in link?.children"
33
15
  :key="index"
34
16
  :link="child"
35
17
  />
@@ -67,12 +49,12 @@ export default {
67
49
  mixins: [EditMode],
68
50
  data() {
69
51
  return {
70
- editableText: this.link.text
52
+ editableText: this.link?.text
71
53
  }
72
54
  },
73
55
  props: {
74
56
  /**
75
- * single link
57
+ * properties for CmdLink-component
76
58
  */
77
59
  link: {
78
60
  type: Object,
@@ -88,17 +70,14 @@ export default {
88
70
  }
89
71
  })
90
72
  },
91
- getRoute(link) {
92
- return getRoute(link)
93
- },
94
- executeLink(link, event) {
95
- if (link.fancybox) {
73
+ executeLink(event) {
74
+ if (this.link?.fancybox) {
96
75
  event.preventDefault()
97
- openFancyBox({url: link.path, showSubmitButtons: link.showSubmitButtons})
76
+ openFancyBox({url: this.link?.path, showSubmitButtons: this.link?.showSubmitButtons})
98
77
  return
99
78
  }
100
- this.$emit("click", {link, originalEvent: event})
101
- },
79
+ this.$emit("click", event)
80
+ }
102
81
  }
103
82
  }
104
83
  </script>
package/src/components/CmdMultistepFormProgressBar.vue CHANGED
@@ -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>
package/src/components/CmdTabs.vue CHANGED
@@ -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,10 +11,12 @@
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
- <div v-show="showTab === index - 1" v-for="index in tabs.length" :key="index" aria-live="assertive">
19
+ <div v-show="showTab === index - 1" v-for="index in tabs.length" :key="index" aria-live="assertive" :class="{'no-padding': !useDefaultPadding}">
17
20
  <!-- begin slot-content -->
18
21
  <slot :name="'tab-content-' + (index - 1)"></slot>
19
22
  <!-- end slot-content -->
@@ -30,8 +33,10 @@
30
33
  :headlineLevel="tabs[showTab].headlineLevel"
31
34
  />
32
35
  <!-- end CmdHeadline -->
33
- <div v-html="tabs[showTab].htmlContent"></div>
36
+
37
+ <div v-html="tabs[showTab].htmlContent" :class="{'no-padding': !useDefaultPadding}"></div>
34
38
  </div>
39
+ <!-- end tab-content -->
35
40
  </div>
36
41
  </template>
37
42
 
@@ -54,11 +59,11 @@ export default {
54
59
  emits: ["active-tab"],
55
60
  props: {
56
61
  /**
57
- * properties for CmdHeadline-component
62
+ * set if content should use default-padding
58
63
  */
59
- cmdHeadline: {
60
- type: Object,
61
- required: false
64
+ useDefaultPadding: {
65
+ type: Boolean,
66
+ default: true
62
67
  },
63
68
  /**
64
69
  * activate if tabs should be (equally) stretched horizontally over full width of tab-content
@@ -87,6 +92,13 @@ export default {
87
92
  activeTab: {
88
93
  type: Number,
89
94
  default: 0
95
+ },
96
+ /**
97
+ * properties for CmdHeadline-component
98
+ */
99
+ cmdHeadline: {
100
+ type: Object,
101
+ required: false
90
102
  }
91
103
  },
92
104
  methods: {