@iamproperty/components 1.0.13 → 2.2.0

package/package.json

@@ -1,57 +1,88 @@
-{
-  "name": "@iamproperty/components",
-  "version": "1.0.13",
-  "private": false,
-  "description": "Component library for iamproperty",
-  "author": {
-    "name": "Michael White"
-  },
-  "license": "UNLICENSED",
-  "scripts": {
-    "serve": "vue-cli-service serve docs/main.js",
-    "build": "vue-cli-service build --target lib src/index.js",
-    "build:docs": "vue-cli-service build docs/main.js",
-    "test:unit": "vue-cli-service test:unit",
-    "lint": "vue-cli-service lint",
-    "compile:sass": "node-sass assets/sass/main.scss assets/css/style.css -w",
-    "prepack": "npm run build"
-  },
-  "main": "dist/components.umd.js",
-  "dependencies": {
-    "bootstrap": "^4.5.3",
-    "bootstrap-vue": "^2.17.3",
-    "core-js": "^3.6.5",
-    "vue": "^2.6.12",
-    "vue-highlightjs": "^1.3.3",
-    "vue-router": "^3.4.6"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.7",
-    "@vue/cli-plugin-eslint": "^4.5.7",
-    "@vue/cli-plugin-router": "^4.5.7",
-    "@vue/cli-plugin-unit-jest": "^4.5.7",
-    "@vue/cli-service": "^4.5.7",
-    "@vue/eslint-config-standard": "^5.1.2",
-    "@vue/test-utils": "^1.1.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.0",
-    "eslint-plugin-vue": "^6.2.2",
-    "node-sass": "^4.14.1",
-    "sass": "^1.27.0",
-    "sass-loader": "^10.0.2",
-    "vue-template-compiler": "^2.6.11"
-  },
-  "_id": "iamp-component-library@1.0.0",
-  "repository": {
-    "type": "git",
-    "url": "git@codebasehq.com:isg/isg-marketplace-intelligent-compliance/iamp-component-library.git"
-  },
-  "files": [
-    "dist/*",
-    "src/*"
-  ]
-}
+{
+  "name": "@iamproperty/components",
+  "version": "2.2.0",
+  "private": false,
+  "description": "Component library for iamproperty",
+  "author": {
+    "name": "iamproperty"
+  },
+  "license": "UNLICENSED",
+  "scripts": {
+    "dev": "npm run serve",
+    "serve": "vue-cli-service serve docs/main.js",
+    "build": "vue-cli-service build --target lib src/index.js",
+    "build:docs": "vue-cli-service build docs/main.js",
+    "test:unit": "vue-cli-service test:unit",
+    "test:visual": "cross-env TEST_MODE=visual vue-cli-service test:unit --forceExit --detectOpenHandles",
+    "test:approve": "cross-env TEST_MODE=visual vue-cli-service test:unit --forceExit --detectOpenHandles --updateSnapshot",
+    "test": "npm run test:unit && npm run test:visual",
+    "lint": "vue-cli-service lint",
+    "compile:sass": "sass assets/sass/main.scss assets/css/style.min.css --style=compressed && sass assets/sass/core.scss assets/css/core.min.css --style=compressed",
+    "compile:js": "rollup --environment BUNDLE:true --config rollup.config.js --sourcemap && terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=assets/js/scripts.bundle.js.map,includeSources,url=scripts.bundle.min.js.map\" --output assets/js/scripts.bundle.min.js assets/js/scripts.bundle.js",
+    "prepack": "npm run build",
+    "audit": "node local_modules/audit.js",
+    "pull-request": "npm run test:unit && npm run test:approve && npm run compile:sass && npm run compile:js && npm run audit"
+  },
+  "main": "dist/components.umd.js",
+  "dependencies": {
+    "@vue/eslint-config-standard": "^6.1.0",
+    "bootstrap": "^5.1.3",
+    "glob": "^7.2.0",
+    "sass": "^1.45.1",
+    "sass-loader": "^10.2.0",
+    "vue": "^2.6.14",
+    "vue-markdown-loader": "^2.5.0",
+    "vue-router": "^3.5.3"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.16.0",
+    "@babel/core": "^7.16.5",
+    "@babel/eslint-parser": "^7.16.5",
+    "@babel/preset-env": "^7.16.5",
+    "@popperjs/core": "^2.11.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^19.0.0",
+    "@rollup/plugin-node-resolve": "^13.1.1",
+    "@rollup/plugin-replace": "^2.4.2",
+    "@vue/cli-plugin-babel": "^4.5.15",
+    "@vue/cli-plugin-eslint": "^4.5.15",
+    "@vue/cli-plugin-router": "^4.5.15",
+    "@vue/cli-plugin-unit-jest": "^4.5.15",
+    "@vue/cli-service": "^4.5.15",
+    "@vue/test-utils": "^1.3.0",
+    "babel-jest": "^27.4.5",
+    "cross-env": "^7.0.3",
+    "eslint": "^7.32.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^5.2.0",
+    "eslint-plugin-standard": "^4.1.0",
+    "eslint-plugin-vue": "^7.20.0",
+    "html-loader": "^2.1.2",
+    "jest-environment-puppeteer": "^5.0.4",
+    "jest-image-snapshot": "^4.5.1",
+    "jest-puppeteer": "^5.0.4",
+    "jest-puppeteer-preset": "^5.0.4",
+    "markdown-loader": "^6.0.0",
+    "puppeteer": "^10.4.0",
+    "rollup": "^2.62.0",
+    "rollup-plugin-istanbul": "^3.0.0",
+    "sass-true": "^6.0.1",
+    "serve": "^12.0.1",
+    "terser": "5.1.0",
+    "vue-loader": "^15.9.8",
+    "vue-svg-loader": "^0.16.0",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "registry-url": "https://registry.npmjs.com",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/iamproperty/iamproperty-vue-component-library.git"
+  },
+  "files": [
+    "assets/*",
+    "dist/*",
+    "src/*"
+  ],
+  "localURL": "http://localhost:8080"
+}

package/src/components/Accordion/Accordion.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="container accordion" ref="wrapper">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/_func.scss";
+@import "../../../assets/sass/components/accordion.scss";
+
+</style>
+
+<script>
+import accordion from '../../../assets/js/modules/accordion.js'
+
+export default {
+  name: 'Accordion',
+  props: {
+  },
+  mounted(){
+    accordion(this.$refs.wrapper);
+  }
+}
+</script>

package/src/components/Accordion/AccordionItem.vue

@@ -0,0 +1,43 @@
+<template>
+
+  <details class="accordion-item" :id="createID(title)">
+    <summary :class="`${titlecolour?`bg-${titlecolour}`:''}`"><span class="accordion-header accordion-button h4">{{title}}<span v-if="badge" :class="`badge bg-${badgecolour}`">{{badge}}</span></span></summary>
+    <div class="accordion-body">
+      <slot></slot>
+    </div>
+  </details>
+</template>
+
+<script>
+import { safeID } from '../../helpers/strings'
+
+export default {
+  name: 'Accordion',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    titlecolour: {
+      type: String,
+      required: false
+    },
+    badge: {
+      type: String,
+      required: false
+    },
+    badgecolour: {
+      type: String,
+      required: false,
+      default: 'light'
+    }
+  },
+  computed: {
+    createID () {
+      return (summary) => {
+        return `${safeID(summary)}`
+      }
+    }
+  }
+}
+</script>

package/src/components/Accordion/README.md

@@ -0,0 +1,34 @@
+### Usage
+
+```
+<Accordion>
+  <AccordionItem title="Question 1">
+    <p>Accordion item content</p>
+  </AccordionItem>
+  <AccordionItem title="Question 2">
+    <p>Accordion item content</p>
+  </AccordionItem>
+</Accordion>
+```
+
+### Class modifiers
+
+- Adding a class of **.accordion--keep-open** to the accordion will stop the items from closing when another one is opened.
+- Adding a class of **.accordion--straight** to the accordion will remove the slight indentation of the accordion.
+
+
+### Accordion item Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| title | String | - | A question or statement |
+| titlecolour | String | - | Apply a colour the the accordion item title |
+| badge | String | - | Add a highlighted badge/tag to the accordion item title |
+| badgecolour | String | light | Apply a colour the badge |
+
+
+### Accordion item Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
+| default | - | This is the content of the accordion item |

package/src/components/Banner/Banner.vue

@@ -0,0 +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>

package/src/components/Banner/README.md

@@ -0,0 +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 |
+| ------ | ------------- | ----------- |
+| default | - | Will display underneath the heading |

package/src/components/Card/Card.vue

@@ -0,0 +1,115 @@
+<template>
+  <a :href="link" :class="'card'+(type?' card--'+type:'')" :title="'Find out more: '+title+(subtitle ? ' - '+subtitle:'')">
+    <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"> about {{title}}</span></span>
+    </div>
+  </a>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/_func.scss";
+@import "../../../node_modules/bootstrap/scss/_card";
+@import "../../../assets/sass/components/card";
+</style>
+
+<script>
+export default {
+  name: 'Card',
+  props: {
+    link: {
+      type: String,
+      required: false
+    },
+    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
+    },
+    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/components/Card/README.md

@@ -0,0 +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 |

package/src/components/CardDeck/CardDeck.vue

@@ -0,0 +1,78 @@
+<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/_func.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>

package/src/components/CardDeck/README.md

@@ -0,0 +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 |
+| after | - | Will display underneath the cards |

package/src/components/Carousel/Carousel.vue

@@ -0,0 +1,86 @@
+<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/_func.scss";
+@import "../../../assets/sass/components/carousel.scss";
+</style>
+
+
+<script>
+import Card from '../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>