comand-component-library 4.0.60 → 4.0.62
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,16 @@
|
|
|
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
|
+
>
|
|
1299
|
+
<div>Slot-Content</div>
|
|
1300
|
+
<div>Slot-Content</div>
|
|
1301
|
+
</CmdContainer>
|
|
1291
1302
|
</CmdWidthLimitationWrapper>
|
|
1292
1303
|
<!-- end container ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1293
1304
|
|
|
@@ -63,6 +63,8 @@ export default {
|
|
|
63
63
|
/**
|
|
64
64
|
* define content-orientation
|
|
65
65
|
*
|
|
66
|
+
* containerType-property must be set to "flex"
|
|
67
|
+
*
|
|
66
68
|
* @allowedValues: "vertical", "horizontal"
|
|
67
69
|
*/
|
|
68
70
|
contentOrientation: {
|
|
@@ -99,33 +101,26 @@ export default {
|
|
|
99
101
|
},
|
|
100
102
|
computed: {
|
|
101
103
|
containerClass() {
|
|
104
|
+
|
|
105
|
+
},
|
|
106
|
+
setInnerClass() {
|
|
102
107
|
let htmlClass = null
|
|
103
108
|
switch (this.containerType) {
|
|
104
109
|
case "grid":
|
|
105
110
|
htmlClass = "grid-container-create-columns"
|
|
106
111
|
break
|
|
107
112
|
case "flex":
|
|
108
|
-
|
|
113
|
+
if(this.contentOrientation === "horizontal") {
|
|
114
|
+
htmlClass = "flex-container"
|
|
115
|
+
} else if(this.contentOrientation === "vertical") {
|
|
116
|
+
htmlClass = "flex-container vertical"
|
|
117
|
+
}
|
|
109
118
|
break
|
|
110
119
|
default:
|
|
111
120
|
htmlClass = null
|
|
112
121
|
break
|
|
113
122
|
}
|
|
114
123
|
return htmlClass
|
|
115
|
-
},
|
|
116
|
-
setInnerClass() {
|
|
117
|
-
if(this.containerType === "grid") {
|
|
118
|
-
return "grid-container-create-columns"
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
if(this.containerType === "flex") {
|
|
122
|
-
if(this.contentOrientation === "horizontal") {
|
|
123
|
-
return "flex-container"
|
|
124
|
-
} else if(this.contentOrientation === "vertical") {
|
|
125
|
-
return "flex-container vertical"
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
return ""
|
|
129
124
|
}
|
|
130
125
|
}
|
|
131
126
|
}
|