@iamproperty/components 2.7.7 → 2.9.0

package/src/components/Banner/Banner.vue

@@ -1,38 +1,38 @@
-<template>
-  <div class="container">
-    <div :class="'bg-'+background+' mb-4'">
-      <div class="row">
-        <div class="col-sm-6">
-          <div class="pt-5 pb-3 px-4">
-            <h2>{{title}}</h2>
-            <slot></slot>
-          </div>
-        </div>
-        <div class="col-sm-6 col-md-5 ms-auto">
-          <img v-if="image" :src="image" alt="" class="h-100 w-100 object-cover" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Header',
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-    image: {
-      type: String,
-      required: false
-    },
-    background: {
-      type: String,
-      default: 'light',
-      required: false
-    }
-  }
-}
-</script>
+<template>
+  <div class="container">
+    <div :class="'bg-'+background+' mb-4'">
+      <div class="row">
+        <div class="col-sm-6">
+          <div class="pt-5 pb-3 px-4">
+            <h2>{{title}}</h2>
+            <slot></slot>
+          </div>
+        </div>
+        <div class="col-sm-6 col-md-5 ms-auto">
+          <img v-if="image" :src="image" alt="" class="h-100 w-100 object-cover" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Header',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    image: {
+      type: String,
+      required: false
+    },
+    background: {
+      type: String,
+      default: 'light',
+      required: false
+    }
+  }
+}
+</script>

package/src/components/Banner/README.md

@@ -1,24 +1,24 @@
-### Usage
-
-```
-<Banner title="The benefits of buying through auction" :image="require('../../assets/shutterstock_1229155495.webp')">
-  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
-  <a href="/buyers-guide" class="btn">Download our buyers guide</a>
-</Banner>
-```
-
-### Properties
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| title | String | - | Required |
-| image | String | - | Optional image url to display in the background |
-| background | String | light | The background colour can be overwritten if need be |
-
-
-
-### Slots
-
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
+### Usage
+
+```
+<Banner title="The benefits of buying through auction" :image="require('../../assets/shutterstock_1229155495.webp')">
+  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
+  <a href="/buyers-guide" class="btn">Download our buyers guide</a>
+</Banner>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| title | String | - | Required |
+| image | String | - | Optional image url to display in the background |
+| background | String | light | The background colour can be overwritten if need be |
+
+
+
+### Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
 | default | - | Will display underneath the heading |

package/src/components/CardDeck/CardDeck.vue

@@ -1,77 +1,77 @@
-<template>
-  <div class="container card-deck prevent-invert" :data-card-type="cardtype">
-      <slot></slot>
-      <div :class="`row row-cols-${cols} row-cols-sm-${smcols} row-cols-md-${mdcols} ${gap ? `g-${gap}`: ``}`">
-        <div class="col" v-for="(value,index) in items" :key="index">
-          <Card v-bind="value" :class="cardclass" :type="cardtype" :btntype="btntype" :titleclass="titleclass" :ctatext="ctatext" :hidectatext="hidectatext"></Card>
-        </div>
-      </div>
-      <slot name="after"></slot>
-  </div>
-</template>
-
-<style lang="scss">
-@import "../../../assets/sass/components/cardDeck.scss";
-</style>
-
-<script>
-import Card from '../../elements/Card/Card.vue'
-
-export default {
-  components: {
-    Card
-  },
-  name: 'CardDeck',
-  props: {
-    items: {
-      type: Array,
-      required: false
-    },
-    cols: {
-      type: Number,
-      required: false,
-      default: 1
-    },
-    smcols: {
-      type: Number,
-      required: false,
-      default: 1
-    },
-    mdcols: {
-      type: Number,
-      required: false,
-      default: 3
-    },
-    gap: {
-      type: Number,
-      required: false,
-      default: 4
-    },
-    cardtype: {
-      type: String,
-      required: false
-    },
-    cardclass: {
-      type: String,
-      required: false
-    },
-    btntype: {
-      type: String,
-      required: false
-    },
-    titleclass: {
-      type: String,
-      required: false
-    },
-    ctatext: {
-      type: String,
-      required: false
-    },
-    hidectatext: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  }
-}
-</script>
+<template>
+  <div class="container card-deck prevent-invert" :data-card-type="cardtype">
+      <slot></slot>
+      <div :class="`row row-cols-${cols} row-cols-sm-${smcols} row-cols-md-${mdcols} ${gap ? `g-${gap}`: ``}`">
+        <div class="col" v-for="(value,index) in items" :key="index">
+          <Card v-bind="value" :class="cardclass" :type="cardtype" :btntype="btntype" :titleclass="titleclass" :ctatext="ctatext" :hidectatext="hidectatext"></Card>
+        </div>
+      </div>
+      <slot name="after"></slot>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/components/cardDeck.scss";
+</style>
+
+<script>
+import Card from '../../elements/Card/Card.vue'
+
+export default {
+  components: {
+    Card
+  },
+  name: 'CardDeck',
+  props: {
+    items: {
+      type: Array,
+      required: false
+    },
+    cols: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    smcols: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    mdcols: {
+      type: Number,
+      required: false,
+      default: 3
+    },
+    gap: {
+      type: Number,
+      required: false,
+      default: 4
+    },
+    cardtype: {
+      type: String,
+      required: false
+    },
+    cardclass: {
+      type: String,
+      required: false
+    },
+    btntype: {
+      type: String,
+      required: false
+    },
+    titleclass: {
+      type: String,
+      required: false
+    },
+    ctatext: {
+      type: String,
+      required: false
+    },
+    hidectatext: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  }
+}
+</script>

package/src/components/CardDeck/README.md

@@ -1,25 +1,25 @@
-### Usage
-
-```
-<CardDeck :items="items"></CardDeck>
-```
-
-### Properties
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| cols  | Number | 1 | Number of columns on mobile |
-| smcols  | Number | 1 | Number of columns on tablet |
-| mdcols  | Number | 3 | Number of columns on desktop |
-| items  | Array | - | Card data passed (See card component) |
-| cardtype | String | - | Change the type of card (simple,quick) |
-| btntype | String | (See card) | Change the type of button at the bottom of the card (primary,secondary,tertairy, link) |
-| ctatext | String | (See card) | Update the cta text within the button at the bottom of the card |
-| titleclass | String | (See card) | Update the class of the title from being a h2 |
-
-### Slots
-
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
-| default | - | Will display before the cards |
+### Usage
+
+```
+<CardDeck :items="items"></CardDeck>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| cols  | Number | 1 | Number of columns on mobile |
+| smcols  | Number | 1 | Number of columns on tablet |
+| mdcols  | Number | 3 | Number of columns on desktop |
+| items  | Array | - | Card data passed (See card component) |
+| cardtype | String | - | Change the type of card (simple,quick) |
+| btntype | String | (See card) | Change the type of button at the bottom of the card (primary,secondary,tertairy, link) |
+| ctatext | String | (See card) | Update the cta text within the button at the bottom of the card |
+| titleclass | String | (See card) | Update the class of the title from being a h2 |
+
+### Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
+| default | - | Will display before the cards |
 | after | - | Will display underneath the cards |

package/src/components/Carousel/Carousel.vue

@@ -1,85 +1,85 @@
-<template>
-  <div class="container carousel" :id="'carousel'+id" ref="wrapper" :data-cols="cols" :data-sm-cols="smcols" :data-md-cols="mdcols">
-    <slot><!-- Use for titles etc --></slot>
-    <div class="carousel__wrapper">
-      <div class="carousel__inner">
-
-        <div v-if="type == 'card'" :class="`row row-cols-${cols} row-cols-sm-${smcols} row-cols-md-${mdcols} ${gap ? `g-${gap}`: ``}`">
-          <div :class="`col carousel__item${colclass?` ${colclass}`:''}`" v-for="(value,index) in items" :key="index" :id="'carousel'+id+'slide'+(index+1)">
-            <Card v-bind="value" :class="cardclass" :type="cardtype" :btnyype="btntype" :titleclass="titleclass" :ctatext="ctatext" :hidectatext="hidectatext"></Card>
-          </div>
-        </div>
-        <div v-if="type != 'card'" :class="`row row-cols-${cols} row-cols-sm-${smcols} row-cols-md-${mdcols} ${gap ? `g-${gap}`: ``}`">
-          <div :class="`col carousel__item${colclass?` ${colclass}`:''}`" v-for="(value,index) in items" :key="index" v-html="content(value)" :id="'carousel'+id+'slide'+(index+1)"></div>
-        </div>
-        
-      </div>
-
-      <div :class="`carousel__controls cols-${cols} cols-sm-${smcols} cols-md-${mdcols}`">
-        <a v-for="(value,index) in items" :key="index" :href="'\#carousel'+id+'slide'+(index+1)" :class="`control-${index+1}`">Slide {{index+1}}</a>
-      </div>
-      <button class="btn btn-prev" data-go="0" disabled>Prev</button>
-      <button class="btn btn-next" data-go="2">Next</button>
-    </div>
-  </div>
-</template>
-
-
-<style lang="scss">
-@import "../../../assets/sass/components/carousel.scss";
-</style>
-
-
-<script>
-import Card from '../../elements/Card/Card.vue'
-import CardDeck from '../CardDeck/CardDeck.vue'
-import carousel from '../../../assets/js/modules/carousel.js'
-
-// Inherit the card deck props
-let cardDeckProps = CardDeck.props;
-// Update the default values
-cardDeckProps.gap.default = 0
-cardDeckProps.cols.default = 1
-cardDeckProps.smcols.default = 2
-cardDeckProps.mdcols.default = 4
-
-
-export default {
-  components: {
-    Card
-  },
-  name: 'Carousel',
-  data () {
-    return {
-      id: null
-    }
-  },
-  props: {
-    ...cardDeckProps,
-    colclass: {
-      type: String,
-      required: false
-    },
-    type: {
-      type: String,
-      required: false
-    }
-  },
-  computed: {
-    content (){
-      return (value) => {
-        return `${value.image ? `<img src="${value.image}" alt="" />` : ''}${value.content?value.content:''}`;
-      }
-    }
-  },
-  mounted(){
-
-    this.id = this._uid
-
-    this.$nextTick(function () {
-      
-      carousel(this.$refs.wrapper);
-    })
-  }
-}
-</script>
+<template>
+  <div class="container carousel" :id="'carousel'+id" ref="wrapper" :data-cols="cols" :data-sm-cols="smcols" :data-md-cols="mdcols">
+    <slot><!-- Use for titles etc --></slot>
+    <div class="carousel__wrapper">
+      <div class="carousel__inner">
+
+        <div v-if="type == 'card'" :class="`row row-cols-${cols} row-cols-sm-${smcols} row-cols-md-${mdcols} ${gap ? `g-${gap}`: ``}`">
+          <div :class="`col carousel__item${colclass?` ${colclass}`:''}`" v-for="(value,index) in items" :key="index" :id="'carousel'+id+'slide'+(index+1)">
+            <Card v-bind="value" :class="cardclass" :type="cardtype" :btnyype="btntype" :titleclass="titleclass" :ctatext="ctatext" :hidectatext="hidectatext"></Card>
+          </div>
+        </div>
+        <div v-if="type != 'card'" :class="`row row-cols-${cols} row-cols-sm-${smcols} row-cols-md-${mdcols} ${gap ? `g-${gap}`: ``}`">
+          <div :class="`col carousel__item${colclass?` ${colclass}`:''}`" v-for="(value,index) in items" :key="index" v-html="content(value)" :id="'carousel'+id+'slide'+(index+1)"></div>
+        </div>
+        
+      </div>
+
+      <div :class="`carousel__controls cols-${cols} cols-sm-${smcols} cols-md-${mdcols}`">
+        <a v-for="(value,index) in items" :key="index" :href="'\#carousel'+id+'slide'+(index+1)" :class="`control-${index+1}`">Slide {{index+1}}</a>
+      </div>
+      <button class="btn btn-prev" data-go="0" disabled>Prev</button>
+      <button class="btn btn-next" data-go="2">Next</button>
+    </div>
+  </div>
+</template>
+
+
+<style lang="scss">
+@import "../../../assets/sass/components/carousel.scss";
+</style>
+
+
+<script>
+import Card from '../../elements/Card/Card.vue'
+import CardDeck from '../CardDeck/CardDeck.vue'
+import carousel from '../../../assets/js/modules/carousel.js'
+
+// Inherit the card deck props
+let cardDeckProps = CardDeck.props;
+// Update the default values
+cardDeckProps.gap.default = 0
+cardDeckProps.cols.default = 1
+cardDeckProps.smcols.default = 2
+cardDeckProps.mdcols.default = 4
+
+
+export default {
+  components: {
+    Card
+  },
+  name: 'Carousel',
+  data () {
+    return {
+      id: null
+    }
+  },
+  props: {
+    ...cardDeckProps,
+    colclass: {
+      type: String,
+      required: false
+    },
+    type: {
+      type: String,
+      required: false
+    }
+  },
+  computed: {
+    content (){
+      return (value) => {
+        return `${value.image ? `<img src="${value.image}" alt="" />` : ''}${value.content?value.content:''}`;
+      }
+    }
+  },
+  mounted(){
+
+    this.id = this._uid
+
+    this.$nextTick(function () {
+      
+      carousel(this.$refs.wrapper);
+    })
+  }
+}
+</script>

package/src/components/Carousel/README.md

@@ -1,20 +1,20 @@
-### Usage
-
-```
-<Carousel :items="items" type="card"></Carousel>
-```
-
-### Properties
-
-**The carousel props inherit the card deck props** - this is so that when we use cards in the carousel we can still pass the same options.
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| type  | String | - | Can be used to indicate that cards should be displayed in the carousel by giving the value 'card'  |
-| colclass  | String | - | Pass utility classes to the columns in the carousel. For example 'd-flex align-items-center' will align the items n the middle. |
-
-### Slots
-
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
+### Usage
+
+```
+<Carousel :items="items" type="card"></Carousel>
+```
+
+### Properties
+
+**The carousel props inherit the card deck props** - this is so that when we use cards in the carousel we can still pass the same options.
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| type  | String | - | Can be used to indicate that cards should be displayed in the carousel by giving the value 'card'  |
+| colclass  | String | - | Pass utility classes to the columns in the carousel. For example 'd-flex align-items-center' will align the items n the middle. |
+
+### Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
 | default | - | Will display before the carousel |