@iamproperty/components 2.5.1 → 2.6.0

package/assets/sass/_corefiles.scss

@@ -1,5 +1,4 @@
 // Foundations and elements
-@import "foundations/fonts.scss";
 //@import "../../node_modules/bootstrap/scss/root";
 @import "foundations/root.scss";
 @import "../../node_modules/bootstrap/scss/reboot";

package/assets/sass/_functions/mixins.scss

@@ -1,3 +1,13 @@
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @media screen and (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
 
 // Example: @include prefix(transition, transform 1.5s, webkit ms o);
 @mixin prefix($property, $value, $prefixes: (webkit ms o))

package/assets/sass/_print.scss

@@ -0,0 +1,60 @@
+$printMedia: print!default;
+@media #{$printMedia} {
+  :root {
+  --content-max-width: 100%;
+  }
+  html {
+    font-size: 11pt;
+    padding-left: 10px;
+    padding-right: 10px;
+
+    body {
+      background: white;
+      height: auto;
+      min-height: 100%;
+    }
+  }
+  .container {
+    padding-left: 0;
+    padding-right: 0;
+    overflow: hidden;
+  }
+  .print-header {
+    background-image: linear-gradient(45deg, var(--colour-secondary) 0%, transparent 80%) !important;
+  }
+  p a[href^=http]:after,
+  p a[href^=mailto]:after,
+  a.youtube-embed:after {
+    content: " (" attr(href) ")";
+    display: inline!important;
+    color: inherit;
+    mask: none;
+    -webkit-mask: none;
+    background: none;
+  }
+
+  // Nav fixes 
+  .nav {
+    position: relative;
+    box-shadow: none!important;
+  }
+  .nav [class*="col"]:not(.nav__logo){
+    display: none;
+  }
+  nav + main > *:first-child {
+    padding-top: 0;
+  }
+}
+@media print {
+  
+  html {
+    padding: 0;
+  }
+  
+  tr, img, svg, li {
+    break-inside: avoid;
+  }
+  [class*="bg-"]:not(.print-header) {
+    background: none!important;
+  }
+}

package/assets/sass/components/nav.scss

@@ -7,7 +7,6 @@
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
-    overflow: auto;
 
     > .container {
 
@@ -258,6 +257,7 @@ nav + main > *:first-child {
 #showMenu:checked ~ .nav__inner {
 
   height: 100vh;
+  overflow: auto;
 }
 
 #showMenu:checked ~ div .nav__menu,

package/assets/sass/core.scss

@@ -1,4 +1,6 @@
 @charset "UTF-8";
 
+@import "_fonts";
 @import "_func";
-@import "_corefiles";
+@import "_corefiles";
+@import "_print";

package/assets/sass/elements/tables.scss

@@ -1,5 +1,7 @@
 // #region Default table
 table {
+  --border-width: 2px;
+  --inner-border-width: 1px;
   width: 100%;
   font-size: rem(16);
   border: none;
@@ -27,18 +29,18 @@ th {
 }
 
 tr {
-  border-bottom: 1px solid currentColor;
+  border-bottom: var(--inner-border-width) solid currentColor;
   @include var(border-color,--colour-border);
 
   &:last-child {
-    border-bottom: 2px solid currentColor;
+    border-bottom: var(--border-width) solid currentColor;
     @include var(border-color,--colour-border);
   }
 }
 
 thead {
   tr:first-child {
-    border-top: 2px solid currentColor;
+    border-top: var(--border-width) solid currentColor;
     @include var(border-color,--colour-border);
   }
 
@@ -50,20 +52,28 @@ thead {
     @include media-breakpoint-up(sm) {
   
       font-size: rem(18);
+      white-space: nowrap;
     }
 
     font-weight: bold;
     vertical-align: bottom;
-    white-space: nowrap;
   }
 }
 
 tbody:first-child{
   tr:first-child {
-    border-top: 2px solid currentColor;
+    border-top: var(--border-width) solid currentColor;
     @include var(border-color,--colour-border);
   }
 }
+
+.table__wrapper.border-0 table,
+table.border-0 {
+
+  --border-width: 0px;
+  --inner-border-width: 0px;
+}
+
 // #endregion
 
 // #region Table wrapper - Add via JS if needed, provides a safe space to scroll
@@ -85,7 +95,7 @@ tbody:first-child{
 // #endregion
 
 // #region Tables are only stacked on mobile
-@media (max-width: 36em) {
+@media screen and (max-width: 36em) {
   .table__wrapper:not(.table-fullwidth) {
     thead {
       display: none;

package/assets/sass/elements/type.scss

@@ -44,7 +44,7 @@ h6,
 // #endregion
 
 p {
-  max-width: $content-max-width;
+  max-width: var(--content-max-width);
 }
 
 p + p {

package/assets/sass/foundations/reboot.scss

@@ -18,6 +18,10 @@ html {
   @media (min-width: #{em(1440)}) {
       font-size: 100%;
   }
+
+  @media print {
+    font-size: 16px;
+  }
   
   /*
   @media (min-width: #{em(1440)}) {

package/assets/sass/foundations/root.scss

@@ -14,32 +14,34 @@
   --colour-heading: var(--colour-primary);
   --alpha: var(--bs-bg-opacity);
   --#{$variable-prefix}gradient: #{$gradient};
+  --content-max-width: #{$content-max-width};
 }
 
+@media screen {
+  /* Override the colours when on a drark background */
+  .bg-primary:not(.prevent-invert),
+  .bg-dark:not(.prevent-invert),
+  .bg-danger:not(.prevent-invert),
+  .invert-colours {
+    > * {
 
-/* Override the colours when on a drark background */
-.bg-primary:not(.prevent-invert),
-.bg-dark:not(.prevent-invert),
-.bg-danger:not(.prevent-invert),
-.invert-colours {
-  > * {
-
-    --colour-secondary-rgb: 255,255,255;
-    --colour-primary-rgb: 255,255,255;
-    --colour-secondary: white;
-    --colour-primary: white;
+      --colour-secondary-rgb: 255,255,255;
+      --colour-primary-rgb: 255,255,255;
+      --colour-secondary: white;
+      --colour-primary: white;
+    }
+    --colour-body: white;
+    --colour-link: white;
+    --colour-hover: white;
+    --colour-active: white;
+    --colour-heading: white;
+    --colour-underline: white;
+    --colour-border: white;
+    color: white;
   }
-  --colour-body: white;
-  --colour-link: white;
-  --colour-hover: white;
-  --colour-active: white;
-  --colour-heading: white;
-  --colour-underline: white;
-  --colour-border: white;
-  color: white;
-}
 
-.bg-light:not(.prevent-invert) {
-  --colour-heading: var(--colour-dark);
-  color: var(--colour-dark);
-}
+  .bg-light:not(.prevent-invert) {
+    --colour-heading: var(--colour-dark);
+    color: var(--colour-dark);
+  }
+}

package/assets/sass/main.scss

@@ -1,5 +1,7 @@
 @charset "UTF-8";
 
+@import "_fonts";
 @import "_func";
 @import "_corefiles";
 @import "_components";
+@import "_print";

package/dist/components.common.js

@@ -696,16 +696,16 @@ var Logo_component = normalizeComponent(
 )
 
 /* harmony default export */ var Logo = (Logo_component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"5b04c7e2-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/elements/Table/Table.vue?vue&type=template&id=d350a2a6&
-var Tablevue_type_template_id_d350a2a6_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"wrapper",staticClass:"table__wrapper",attrs:{"data-sortby":_vm.sortby,"data-sort":_vm.sort,"data-show":_vm.show,"data-page":_vm.page,"data-reorder":_vm.reorder}},[_c('table',[(_vm.fields)?_c('thead',[_c('tr',_vm._l((_vm.fields),function(field){return _c('th',{key:field.key,attrs:{"data-sortable":field.sortable,"data-filterable":field.filterable}},[_vm._v(_vm._s(_vm.cellHeading(field.key)))])}),0)]):_vm._e(),(_vm.items)?_c('tbody',_vm._l((_vm.items),function(value,index){return _c('tr',{key:index,attrs:{"data-row-id":value['rowid']}},_vm._l((Object.fromEntries(Object.entries(value).filter(function (ref) {
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"5b04c7e2-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/elements/Table/Table.vue?vue&type=template&id=4b6328a7&
+var Tablevue_type_template_id_4b6328a7_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"wrapper",staticClass:"table__wrapper",attrs:{"data-sortby":_vm.sortby,"data-sort":_vm.sort,"data-show":_vm.show,"data-page":_vm.page,"data-reorder":_vm.reorder}},[_c('table',[(_vm.fields)?_c('thead',[_c('tr',{class:_vm.headingclass},_vm._l((_vm.fields),function(field){return _c('th',{key:field.key,attrs:{"data-sortable":field.sortable,"data-filterable":field.filterable}},[_vm._v(_vm._s(_vm.cellHeading(field.key)))])}),0)]):_vm._e(),(_vm.items)?_c('tbody',_vm._l((_vm.items),function(value,index){return _c('tr',{key:index,attrs:{"data-row-id":value['rowid']}},_vm._l((Object.fromEntries(Object.entries(value).filter(function (ref) {
 	var key = ref[0];
 
 	return key !== 'rowid';
 }))),function(cellValue,cellIndex){return _c('td',{key:cellIndex,attrs:{"data-label":_vm.cellHeading(cellIndex),"data-numeric":_vm.numericValue(cellValue)},domProps:{"innerHTML":_vm._s(cellValue)}})}),0)}),0):_vm._e()]),_vm._t("default")],2)}
-var Tablevue_type_template_id_d350a2a6_staticRenderFns = []
+var Tablevue_type_template_id_4b6328a7_staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/elements/Table/Table.vue?vue&type=template&id=d350a2a6&
+// CONCATENATED MODULE: ./src/elements/Table/Table.vue?vue&type=template&id=4b6328a7&
 
 // CONCATENATED MODULE: ./src/helpers/strings.js
 var ucfirst = str => str.charAt(0).toUpperCase() + str.slice(1);
@@ -1263,6 +1263,10 @@ function table(tableElement) {
       type: String,
       required: false
     },
+    headingclass: {
+      type: String,
+      required: false
+    },
     items: {
       type: Array,
       required: true
@@ -1335,8 +1339,8 @@ function table(tableElement) {
 
 var Table_component = normalizeComponent(
   Table_Tablevue_type_script_lang_js_,
-  Tablevue_type_template_id_d350a2a6_render,
-  Tablevue_type_template_id_d350a2a6_staticRenderFns,
+  Tablevue_type_template_id_4b6328a7_render,
+  Tablevue_type_template_id_4b6328a7_staticRenderFns,
   false,
   null,
   null,