comand-component-library 4.0.61 → 4.0.63
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/package.json
CHANGED
package/src/ComponentLibrary.vue
CHANGED
|
@@ -1273,12 +1273,13 @@
|
|
|
1273
1273
|
<a href="#" class="icon-cog" title="Open Component Settings"
|
|
1274
1274
|
@click.prevent="openSettingsSidebar('CmdContainer')"></a>
|
|
1275
1275
|
</h2>
|
|
1276
|
+
<h3>Default Container</h3>
|
|
1276
1277
|
<CmdContainer
|
|
1277
1278
|
style="border: 1px dotted gray"
|
|
1278
1279
|
ref="CmdContainer"
|
|
1279
1280
|
v-bind="cmdContainerSettingsData"
|
|
1280
1281
|
/>
|
|
1281
|
-
|
|
1282
|
+
<h3>Container with vertical slots</h3>
|
|
1282
1283
|
<CmdContainer
|
|
1283
1284
|
style="border: 1px dotted gray"
|
|
1284
1285
|
ref="CmdContainer"
|
|
@@ -1288,6 +1289,17 @@
|
|
|
1288
1289
|
<p>Slot-content</p>
|
|
1289
1290
|
<p>Slot-content</p>
|
|
1290
1291
|
</CmdContainer>
|
|
1292
|
+
<h3>Container with horizontal slots</h3>
|
|
1293
|
+
<CmdContainer
|
|
1294
|
+
style="border: 1px dotted gray"
|
|
1295
|
+
ref="CmdContainer"
|
|
1296
|
+
v-bind="cmdContainerSettingsData"
|
|
1297
|
+
contentOrientation="horizontal"
|
|
1298
|
+
innerClass="inner-class"
|
|
1299
|
+
>
|
|
1300
|
+
<div>Slot-Content</div>
|
|
1301
|
+
<div>Slot-Content</div>
|
|
1302
|
+
</CmdContainer>
|
|
1291
1303
|
</CmdWidthLimitationWrapper>
|
|
1292
1304
|
<!-- end container ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1293
1305
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="cmd-container"
|
|
2
|
+
<div class="cmd-container">
|
|
3
3
|
<!-- begin cmd-headline -->
|
|
4
4
|
<CmdHeadline
|
|
5
5
|
v-if="cmdHeadline"
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
<!-- end slot-content (one column/slot-item only) -->
|
|
17
17
|
|
|
18
18
|
<!-- begin grid-/flex-container to wrap multiple columns/items -->
|
|
19
|
-
<div v-else :class="setInnerClass">
|
|
19
|
+
<div v-else :class="[setInnerClass, 'inner-slot-wrapper']">
|
|
20
20
|
<!-- begin slot-content (multiple columns only) -->
|
|
21
21
|
<slot></slot>
|
|
22
22
|
<!-- end slot-content (multiple columns only) -->
|
|
@@ -75,6 +75,13 @@ export default {
|
|
|
75
75
|
value === "vertical"
|
|
76
76
|
}
|
|
77
77
|
},
|
|
78
|
+
/**
|
|
79
|
+
* define a class to set on inner div
|
|
80
|
+
*/
|
|
81
|
+
innerClass: {
|
|
82
|
+
type: String,
|
|
83
|
+
required: false
|
|
84
|
+
},
|
|
78
85
|
/**
|
|
79
86
|
* properties for CmdHeadline-component
|
|
80
87
|
*/
|
|
@@ -101,6 +108,9 @@ export default {
|
|
|
101
108
|
},
|
|
102
109
|
computed: {
|
|
103
110
|
containerClass() {
|
|
111
|
+
|
|
112
|
+
},
|
|
113
|
+
setInnerClass() {
|
|
104
114
|
let htmlClass = null
|
|
105
115
|
switch (this.containerType) {
|
|
106
116
|
case "grid":
|
|
@@ -117,21 +127,7 @@ export default {
|
|
|
117
127
|
htmlClass = null
|
|
118
128
|
break
|
|
119
129
|
}
|
|
120
|
-
return htmlClass
|
|
121
|
-
},
|
|
122
|
-
setInnerClass() {
|
|
123
|
-
if(this.containerType === "grid") {
|
|
124
|
-
return "grid-container-create-columns"
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
if(this.containerType === "flex") {
|
|
128
|
-
if(this.contentOrientation === "horizontal") {
|
|
129
|
-
return "flex-container"
|
|
130
|
-
} else if(this.contentOrientation === "vertical") {
|
|
131
|
-
return "flex-container vertical"
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
return ""
|
|
130
|
+
return htmlClass += " " + this.innerClass
|
|
135
131
|
}
|
|
136
132
|
}
|
|
137
133
|
}
|