vueless 0.0.85 → 0.0.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.85",
+  "version": "0.0.87",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.container-page/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div :data-cy="dataCy" v-bind="wrapperAttrs">
     <div v-bind="pageAttrs">
+      <!-- @slot Use it to add something before the header. -->
+      <slot name="header-before" />
+
       <div v-if="isShownHeader" v-bind="headerAttrs">
         <div v-bind="headerLeftAttrs">
           <!-- @slot Use it to add something before left side of the header. -->
@@ -41,11 +44,17 @@
         </div>
       </div>
 
+      <!-- @slot Use it to add something after the header. -->
+      <slot name="header-after" />
+
       <div>
         <!-- @slot Use it to add main content. -->
         <slot />
       </div>
 
+      <!-- @slot Use it to add something before the footer. -->
+      <slot name="footer-before" />
+
       <div v-if="isShownFooterSlot" class="vueless-page-footer" v-bind="footerAttrs">
         <div class="vueless-page-footer-left" v-bind="footerLeftAttrs">
           <!-- @slot Use it to add something to the left side of the footer. -->
@@ -57,6 +66,9 @@
           <slot name="footer-right" />
         </div>
       </div>
+
+      <!-- @slot Use it to add something after the footer. -->
+      <slot name="footer-after" />
     </div>
 
     <div v-if="fixedRounding && !isMobileBreakpoint" v-bind="rightRoundingWrapperAttrs">
@@ -193,9 +205,17 @@ const {
 
 const isShownHeader = computed(() => {
   const isHeaderLeftSlot = hasSlotContent(slots["header-left"]);
-  const isHeaderRightSlot = hasSlotContent(slots["header-left"]);
-
-  return props.title || isHeaderLeftSlot || isHeaderRightSlot;
+  const isHeaderRightSlot = hasSlotContent(slots["header-right"]);
+  const isHeaderLeftBeforeSlot = hasSlotContent(slots["header-left-before"]);
+  const isHeaderLeftAfterSlot = hasSlotContent(slots["header-left-after"]);
+
+  return (
+    props.title ||
+    isHeaderLeftSlot ||
+    isHeaderLeftBeforeSlot ||
+    isHeaderLeftAfterSlot ||
+    isHeaderRightSlot
+  );
 });
 
 const isShownFooterSlot = computed(() => {

package/ui.data-table/index.vue

@@ -184,7 +184,7 @@
                   <slot name="cell-other" :value="value" :row="row" />
                 </template>
 
-                <template v-else-if="value.hasOwnProperty('secondaryRow')">
+                <template v-else-if="value?.hasOwnProperty('secondaryRow')">
                   <div :data-cy="`${dataCy}-${key}-cell`">
                     {{ value.primaryRow || HYPHEN_SYMBOL }}
                   </div>

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.85",
+  "version": "0.0.87",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -5230,6 +5230,10 @@
             }
           ],
           "slots": [
+            {
+              "name": "header-before",
+              "description": "Use it to add something before the header."
+            },
             {
               "name": "header-left-before",
               "description": "Use it to add something before left side of the header."
@@ -5246,10 +5250,18 @@
               "name": "header-right",
               "description": "Use it to customise right side of the header."
             },
+            {
+              "name": "header-after",
+              "description": "Use it to add something after the header."
+            },
             {
               "name": "default",
               "description": "Use it to add main content."
             },
+            {
+              "name": "footer-before",
+              "description": "Use it to add something before the footer."
+            },
             {
               "name": "footer-left",
               "description": "Use it to add something to the left side of the footer."
@@ -5257,6 +5269,10 @@
             {
               "name": "footer-right",
               "description": "Use it to add something to the right side of the footer."
+            },
+            {
+              "name": "footer-after",
+              "description": "Use it to add something after the footer."
             }
           ],
           "source": {