@iamproperty/components 3.1.0 → 3.4.4

package/src/{elements → components}/Card/Card.vue

@@ -1,122 +1,122 @@
-<template>
-  <a :href="link" :class="'card'+(type?' card--'+type:'')+' '+cardClass" :title="ctatext+': '+title+(subtitle ? ' - '+subtitle:'')" :target="target">
-    <div class="card-header__wrapper" v-if="image">
-      <img :src="image" alt="" loading="lazy" class="card-image" />
-      <div class="card-header">
-        <span class="badge bg-primary p-2 me-2" v-if="this.details && this.details.status" v-html="cardStatus()"></span>
-        <span class="badge bg-black bg-opacity-50 p-2 align-self-end" v-if="this.details && (this.details.images || this.details.videos)" v-html="cardMedia()"></span>
-      </div>
-      <img v-if="details && details.logo" :src="details.logo" alt="" loading="lazy" class="card-logo" />
-    </div>
-    <div class="card-body" v-html="cardContent()"></div>
-    <div class="card-footer" v-if="hidectatext == false">
-      <span :class="`${btntype == 'link' ? `link` : `btn btn-${btntype}`} mb-0`">{{ctatext}}<span class="visually-hidden">: {{title}}</span></span>
-    </div>
-  </a>
-</template>
-
-<style lang="scss">
-@import "../../../assets/sass/elements/card.scss";
-</style>
-
-<script>
-export default {
-  name: 'Card',
-  props: {
-    link: {
-      type: String,
-      required: false
-    },
-    cardClass: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    titleclass: {
-      type: String,
-      required: false,
-      default: 'h4'
-    },
-    title: {
-      type: String,
-      required: false
-    },
-    subtitle: {
-      type: String,
-      required: false
-    },
-    content: {
-      type: String,
-      required: false
-    },
-    type: {
-      type: String,
-      required: false
-    },
-    btntype: {
-      type: String,
-      required: false,
-      default: 'secondary'
-    },
-    ctatext: {
-      type: String,
-      required: false,
-      default: 'Find out more'
-    },
-    hidectatext: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    image: {
-      type: String,
-      required: false
-    },
-    target: {
-      type: String,
-      required: false
-    },
-    details: {
-      type: Object,
-      required: false
-    }
-  },
-  computed: {
-    cardStatus (){
-      return () => {
-        return this.details && this.details.status ? `${this.details.status == 'Live now' ? '<span class="text-danger lh-0 fs-1 align-middle">&#8226;</span>&nbsp;&nbsp;': ''}${this.details.status}`: '';
-      }
-    },
-    cardMedia (){
-      return () => {
-        return `<svg xmlns='http://www.w3.org/2000/svg' width='30' height='28' viewBox='0 0 30 28' class="icon text-white"><title>Images </title><path d='M15 10.5c2.484 0 4.5 2.016 4.5 4.5s-2.016 4.5-4.5 4.5-4.5-2.016-4.5-4.5 2.016-4.5 4.5-4.5zM26 4c2.203 0 4 1.797 4 4v14c0 2.203-1.797 4-4 4h-22c-2.203 0-4-1.797-4-4v-14c0-2.203 1.797-4 4-4h3.5l0.797-2.125c0.391-1.031 1.609-1.875 2.703-1.875h8c1.094 0 2.312 0.844 2.703 1.875l0.797 2.125h3.5zM15 22c3.859 0 7-3.141 7-7s-3.141-7-7-7-7 3.141-7 7 3.141 7 7 7z'></path></svg> ${this.details && this.details.images ? `${this.details.images}`: `0`}&nbsp;&nbsp;|&nbsp;&nbsp;<svg xmlns='http://www.w3.org/2000/svg' width='30' height='28' viewBox='0 0 28 28' class="icon text-white ms-0"><title>Videos </title><path d="M11.109 17.625l7.562-3.906-7.562-3.953v7.859zM14 4.156c5.891 0 9.797 0.281 9.797 0.281 0.547 0.063 1.75 0.063 2.812 1.188 0 0 0.859 0.844 1.109 2.781 0.297 2.266 0.281 4.531 0.281 4.531v2.125s0.016 2.266-0.281 4.531c-0.25 1.922-1.109 2.781-1.109 2.781-1.062 1.109-2.266 1.109-2.812 1.172 0 0-3.906 0.297-9.797 0.297v0c-7.281-0.063-9.516-0.281-9.516-0.281-0.625-0.109-2.031-0.078-3.094-1.188 0 0-0.859-0.859-1.109-2.781-0.297-2.266-0.281-4.531-0.281-4.531v-2.125s-0.016-2.266 0.281-4.531c0.25-1.937 1.109-2.781 1.109-2.781 1.062-1.125 2.266-1.125 2.812-1.188 0 0 3.906-0.281 9.797-0.281v0z"></path></svg> ${this.details && this.details.videos ? `${this.details.videos}`: `0`}`;
-      }
-    },
-    cardContent () {
-      return () => {
-        const tagClass = function(tag){
-          switch(tag) {
-            case 'Modern method':
-              return 'bg-secondary text-primary'
-            case 'Freehold':
-              return 'bg-light text-dark'
-            default:
-              return 'bg-body text-white'
-          }
-        }
-
-        const tags = this.details && this.details.tags ? this.details.tags.map(tag =>  `<span class="badge rounded-pill py-2 px-3 mb-3 me-2 ${tagClass(tag)}">${tag}</span>` ).join(""): '';
-        const title = this.title ? `<span class="card-title d-block ${this.titleclass}">${this.title}${this.subtitle ? ` <span class="d-block fw-normal font-body text-body small">${this.subtitle}</span>` : ''}</span>` : ``;
-
-        const details = `
-        ${this.details && this.details.guideprice ? `<span class="d-block h6 text-dark mb-1">Price guide: ${this.details.guideprice}</span>` : ``}
-        ${this.details && this.details.auctiontime ? `<span class="d-block h6 text-primary mb-4">Auction time left: ${this.details.auctiontime}</span>` : ``}
-        ${this.details && this.details.readtime ? `<span class="d-block h6 text-primary mb-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="23" viewBox="0 0 22 23" class="icon ms-0 me-2"><path d="M11 1.63c-5.176 0-9.37 4.194-9.37 9.37 0 5.176 4.194 9.37 9.37 9.37 5.176 0 9.37-4.194 9.37-9.37 0-5.176-4.194-9.37-9.37-9.37M11 0c6.075 0 11 4.925 11 11s-4.925 11-11 11S0 17.075 0 11 4.925 0 11 0" fill="var(--colour-secondary)" /><path d="M9.62 5.39c0-.473.368-.856.82-.856.454 0 .822.383.822.855v6.27l3.25 1.898c.395.23.536.75.314 1.16-.22.412-.72.558-1.115.328l-4.09-2.39V5.39z" fill="var(--colour-primary)"/></svg>${this.details.readtime}</span>` : ``}
-        `;
-
-        return `${tags}${title}${details}${this.content}`;
-      }
-    }
-  }
-}
-</script>
+<template>
+  <a :href="link" :class="'card'+(type?' card--'+type:'')+' '+cardClass" :title="ctatext+': '+title+(subtitle ? ' - '+subtitle:'')" :target="target">
+    <div class="card-header__wrapper" v-if="image">
+      <img :src="image" alt="" loading="lazy" class="card-image" />
+      <div class="card-header">
+        <span class="badge bg-primary p-2 me-2" v-if="this.details && this.details.status" v-html="cardStatus()"></span>
+        <span class="badge bg-black bg-opacity-50 p-2 align-self-end" v-if="this.details && (this.details.images || this.details.videos)" v-html="cardMedia()"></span>
+      </div>
+      <img v-if="details && details.logo" :src="details.logo" alt="" loading="lazy" class="card-logo" />
+    </div>
+    <div class="card-body" v-html="cardContent()"></div>
+    <div class="card-footer" v-if="hidectatext == false">
+      <span :class="`${btntype == 'link' ? `link` : `btn btn-${btntype}`} mb-0`">{{ctatext}}<span class="visually-hidden">: {{title}}</span></span>
+    </div>
+  </a>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/components/card.scss";
+</style>
+
+<script>
+export default {
+  name: 'Card',
+  props: {
+    link: {
+      type: String,
+      required: false
+    },
+    cardClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    titleclass: {
+      type: String,
+      required: false,
+      default: 'h4'
+    },
+    title: {
+      type: String,
+      required: false
+    },
+    subtitle: {
+      type: String,
+      required: false
+    },
+    content: {
+      type: String,
+      required: false
+    },
+    type: {
+      type: String,
+      required: false
+    },
+    btntype: {
+      type: String,
+      required: false,
+      default: 'secondary'
+    },
+    ctatext: {
+      type: String,
+      required: false,
+      default: 'Find out more'
+    },
+    hidectatext: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    image: {
+      type: String,
+      required: false
+    },
+    target: {
+      type: String,
+      required: false
+    },
+    details: {
+      type: Object,
+      required: false
+    }
+  },
+  computed: {
+    cardStatus (){
+      return () => {
+        return this.details && this.details.status ? `${this.details.status == 'Live now' ? '<span class="text-danger lh-0 fs-1 align-middle">&#8226;</span>&nbsp;&nbsp;': ''}${this.details.status}`: '';
+      }
+    },
+    cardMedia (){
+      return () => {
+        return `<svg xmlns='http://www.w3.org/2000/svg' width='30' height='28' viewBox='0 0 30 28' class="icon text-white"><title>Images </title><path d='M15 10.5c2.484 0 4.5 2.016 4.5 4.5s-2.016 4.5-4.5 4.5-4.5-2.016-4.5-4.5 2.016-4.5 4.5-4.5zM26 4c2.203 0 4 1.797 4 4v14c0 2.203-1.797 4-4 4h-22c-2.203 0-4-1.797-4-4v-14c0-2.203 1.797-4 4-4h3.5l0.797-2.125c0.391-1.031 1.609-1.875 2.703-1.875h8c1.094 0 2.312 0.844 2.703 1.875l0.797 2.125h3.5zM15 22c3.859 0 7-3.141 7-7s-3.141-7-7-7-7 3.141-7 7 3.141 7 7 7z'></path></svg> ${this.details && this.details.images ? `${this.details.images}`: `0`}&nbsp;&nbsp;|&nbsp;&nbsp;<svg xmlns='http://www.w3.org/2000/svg' width='30' height='28' viewBox='0 0 28 28' class="icon text-white ms-0"><title>Videos </title><path d="M11.109 17.625l7.562-3.906-7.562-3.953v7.859zM14 4.156c5.891 0 9.797 0.281 9.797 0.281 0.547 0.063 1.75 0.063 2.812 1.188 0 0 0.859 0.844 1.109 2.781 0.297 2.266 0.281 4.531 0.281 4.531v2.125s0.016 2.266-0.281 4.531c-0.25 1.922-1.109 2.781-1.109 2.781-1.062 1.109-2.266 1.109-2.812 1.172 0 0-3.906 0.297-9.797 0.297v0c-7.281-0.063-9.516-0.281-9.516-0.281-0.625-0.109-2.031-0.078-3.094-1.188 0 0-0.859-0.859-1.109-2.781-0.297-2.266-0.281-4.531-0.281-4.531v-2.125s-0.016-2.266 0.281-4.531c0.25-1.937 1.109-2.781 1.109-2.781 1.062-1.125 2.266-1.125 2.812-1.188 0 0 3.906-0.281 9.797-0.281v0z"></path></svg> ${this.details && this.details.videos ? `${this.details.videos}`: `0`}`;
+      }
+    },
+    cardContent () {
+      return () => {
+        const tagClass = function(tag){
+          switch(tag) {
+            case 'Modern method':
+              return 'bg-secondary text-primary'
+            case 'Freehold':
+              return 'bg-light text-dark'
+            default:
+              return 'bg-body text-white'
+          }
+        }
+
+        const tags = this.details && this.details.tags ? this.details.tags.map(tag =>  `<span class="badge rounded-pill py-2 px-3 mb-3 me-2 ${tagClass(tag)}">${tag}</span>` ).join(""): '';
+        const title = this.title ? `<span class="card-title d-block ${this.titleclass}">${this.title}${this.subtitle ? ` <span class="d-block fw-normal font-body text-body small">${this.subtitle}</span>` : ''}</span>` : ``;
+
+        const details = `
+        ${this.details && this.details.guideprice ? `<span class="d-block h6 text-dark mb-1">Price guide: ${this.details.guideprice}</span>` : ``}
+        ${this.details && this.details.auctiontime ? `<span class="d-block h6 text-primary mb-4">Auction time left: ${this.details.auctiontime}</span>` : ``}
+        ${this.details && this.details.readtime ? `<span class="d-block h6 text-primary mb-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="23" viewBox="0 0 22 23" class="icon ms-0 me-2"><path d="M11 1.63c-5.176 0-9.37 4.194-9.37 9.37 0 5.176 4.194 9.37 9.37 9.37 5.176 0 9.37-4.194 9.37-9.37 0-5.176-4.194-9.37-9.37-9.37M11 0c6.075 0 11 4.925 11 11s-4.925 11-11 11S0 17.075 0 11 4.925 0 11 0" fill="var(--colour-secondary)" /><path d="M9.62 5.39c0-.473.368-.856.82-.856.454 0 .822.383.822.855v6.27l3.25 1.898c.395.23.536.75.314 1.16-.22.412-.72.558-1.115.328l-4.09-2.39V5.39z" fill="var(--colour-primary)"/></svg>${this.details.readtime}</span>` : ``}
+        `;
+
+        return `${tags}${title}${details}${this.content}`;
+      }
+    }
+  }
+}
+</script>

package/src/{elements/FileUploads → components/Card}/README.md

@@ -1,24 +1,24 @@
-### Usage
-
-```
-<Card :title="value.title" :content="value.content" :link="value.link"></Card>
-```
-
-### Properties
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| title | String | - | Used for the card heading |
-| titleclass | String | h2 | Update the class of the title from being a h2 |
-| subtitle | String | - | Optional sub heading |
-| content | HTML | - | Card content |
-| link | String | - | Card link |
-| type | String | - | Change the type of card (simple,quick)|
-| btntype | String | secondary | Change the type of button at the bottom of the card (primary,secondary,tertairy, link) |
-| ctatext | String | Find out more | Update the cta text within the button at the bottom of the card |
-| details | Object | - | Build up the card content with pre-defined bits of data |
-| - detail.tags | Array of strings | - | Add tags above the card header |
-| - detail.guideprice | String | - | Property guide price |
-| - detail.auctiontime | String | - | Auction time left |
-| - detail.readtime | String | - | How long it will take to read |
-| - detail.status | String | - | Display a status badge at the top of the card |
+### Usage
+
+```
+<Card :title="value.title" :content="value.content" :link="value.link"></Card>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| title | String | - | Used for the card heading |
+| titleclass | String | h2 | Update the class of the title from being a h2 |
+| subtitle | String | - | Optional sub heading |
+| content | HTML | - | Card content |
+| link | String | - | Card link |
+| type | String | - | Change the type of card (simple,quick)|
+| btntype | String | secondary | Change the type of button at the bottom of the card (primary,secondary,tertairy, link) |
+| ctatext | String | Find out more | Update the cta text within the button at the bottom of the card |
+| details | Object | - | Build up the card content with pre-defined bits of data |
+| - detail.tags | Array of strings | - | Add tags above the card header |
+| - detail.guideprice | String | - | Property guide price |
+| - detail.auctiontime | String | - | Auction time left |
+| - detail.readtime | String | - | How long it will take to read |
+| - detail.status | String | - | Display a status badge at the top of the card |

package/src/components/CardDeck/CardDeck.spec.js

@@ -1,99 +1,99 @@
-import { mount } from '@vue/test-utils'
-import CardDeck from './/CardDeck.vue'
-import Card from '../../elements/Card/Card.vue'
-
-describe('Card Deck component', () => {
-
-  const test = mount(CardDeck, {
-    propsData: {
-      items: [
-        {
-          link: '/components/card-deck',
-          title: 'Card 1',
-          content: `<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages..</p>`
-        },
-        {
-          link: '/components/card-deck',
-          title: 'Card 2',
-          content: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur, tortor eu faucibus facilisis, felis libero blandit dolor.</p>`
-        },
-        {
-          link: '/components/card-deck',
-          title: 'Card 3',
-          content: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur, tortor eu faucibus facilisis, felis libero blandit dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur.</p>`
-        }
-      ]
-    },
-    slots: {
-      default: '<p>Hello</p>',
-      after: '<p>Hello 2</p>'
-    }
-  })
-
-  it('renders the content before the card deck', () => {
-    expect(test.html()).toContain('<p>Hello</p>')
-  })
-
-  it('renders the content after the card deck', () => {
-    expect(test.html()).toContain('<p>Hello 2</p>')
-  })
-
-  it('renders the card title', () => {
-    expect(test.html()).toContain('<span class="card-title d-block h4">Card 1</span>')
-    expect(test.html()).toContain('<span class="card-title d-block h4">Card 2</span>')
-    expect(test.html()).toContain('<span class="card-title d-block h4">Card 3</span>')
-  })
-
-  it('renders the correct number of cards', () => {
-
-    expect(test.findAll('.card').length).toBe(3)
-  })
-})
-
-
-describe('Property Card component', () => {
-
-  const test = mount(CardDeck, {
-    propsData: {
-      items: [
-        {
-          link: '/components/card-deck',
-          content: `<p>Reservation fee applies</p>`,
-          image: 'house.jpg',
-          title: '4 bed semi-detached',
-          subtitle: 'Burt terrace, Newcastle upon tyne',
-          details: {
-            tags: ['Modern method','Freehold'],
-            guideprice: '£90,000.00',
-            auctiontime: '19 days',
-            status: 'Live now',
-            images: 5,
-            videos: 2,
-            logo: 'logo.jpg'
-          }
-        }
-      ]
-    }
-  })
-
-
-  it('renders the property card title', () => {
-    expect(test.html()).toContain('<span class="card-title d-block h4">4 bed semi-detached <span class="d-block fw-normal font-body text-body small">Burt terrace, Newcastle upon tyne</span></span>')
-
-  })
-
-  it('renders the card image', () => {
-
-    expect(test.html()).toContain('<img src="house.jpg" alt="" loading="lazy" class="card-image">')
-  })
-
-  it('renders the card logo', () => {
-
-    expect(test.html()).toContain('<img src="logo.jpg" alt="" loading="lazy" class="card-logo">')
-  })
-
-  it('renders the card tags', () => {
-
-    expect(test.html()).toContain('<span class="badge rounded-pill py-2 px-3 mb-3 me-2 bg-secondary text-primary">Modern method</span>')
-  })
-})
+import { mount } from '@vue/test-utils'
+import CardDeck from './/CardDeck.vue'
+import Card from '../../components/Card/Card.vue'
+
+describe('Card Deck component', () => {
+
+  const test = mount(CardDeck, {
+    propsData: {
+      items: [
+        {
+          link: '/components/card-deck',
+          title: 'Card 1',
+          content: `<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages..</p>`
+        },
+        {
+          link: '/components/card-deck',
+          title: 'Card 2',
+          content: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur, tortor eu faucibus facilisis, felis libero blandit dolor.</p>`
+        },
+        {
+          link: '/components/card-deck',
+          title: 'Card 3',
+          content: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur, tortor eu faucibus facilisis, felis libero blandit dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur.</p>`
+        }
+      ]
+    },
+    slots: {
+      default: '<p>Hello</p>',
+      after: '<p>Hello 2</p>'
+    }
+  })
+
+  it('renders the content before the card deck', () => {
+    expect(test.html()).toContain('<p>Hello</p>')
+  })
+
+  it('renders the content after the card deck', () => {
+    expect(test.html()).toContain('<p>Hello 2</p>')
+  })
+
+  it('renders the card title', () => {
+    expect(test.html()).toContain('<span class="card-title d-block h4">Card 1</span>')
+    expect(test.html()).toContain('<span class="card-title d-block h4">Card 2</span>')
+    expect(test.html()).toContain('<span class="card-title d-block h4">Card 3</span>')
+  })
+
+  it('renders the correct number of cards', () => {
+
+    expect(test.findAll('.card').length).toBe(3)
+  })
+})
+
+
+describe('Property Card component', () => {
+
+  const test = mount(CardDeck, {
+    propsData: {
+      items: [
+        {
+          link: '/components/card-deck',
+          content: `<p>Reservation fee applies</p>`,
+          image: 'house.jpg',
+          title: '4 bed semi-detached',
+          subtitle: 'Burt terrace, Newcastle upon tyne',
+          details: {
+            tags: ['Modern method','Freehold'],
+            guideprice: '£90,000.00',
+            auctiontime: '19 days',
+            status: 'Live now',
+            images: 5,
+            videos: 2,
+            logo: 'logo.jpg'
+          }
+        }
+      ]
+    }
+  })
+
+
+  it('renders the property card title', () => {
+    expect(test.html()).toContain('<span class="card-title d-block h4">4 bed semi-detached <span class="d-block fw-normal font-body text-body small">Burt terrace, Newcastle upon tyne</span></span>')
+
+  })
+
+  it('renders the card image', () => {
+
+    expect(test.html()).toContain('<img src="house.jpg" alt="" loading="lazy" class="card-image">')
+  })
+
+  it('renders the card logo', () => {
+
+    expect(test.html()).toContain('<img src="logo.jpg" alt="" loading="lazy" class="card-logo">')
+  })
+
+  it('renders the card tags', () => {
+
+    expect(test.html()).toContain('<span class="badge rounded-pill py-2 px-3 mb-3 me-2 bg-secondary text-primary">Modern method</span>')
+  })
+})

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="(value.btntype ? value.btntype : btntype )" :titleclass="(value.titleclass ? value.titleclass : titleclass)" :ctatext="value.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="(value.btntype ? value.btntype : btntype )" :titleclass="(value.titleclass ? value.titleclass : titleclass)" :ctatext="value.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 '../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>