@iamproperty/components 2.7.7 → 2.9.0

package/src/components/Stepper/Step.vue

@@ -1,28 +1,28 @@
-<template>
-  <li>
-    <a :href="url" :class="`${status?'bg-'+status:''}${typeof current != 'undefined'?'current':''}`" :aria-current="typeof current != 'undefined'?true:false">
-      <span><slot></slot></span>
-      <em class="visually-hidden" v-if="status"> - status: {{status}}</em>
-    </a>
-  </li>
-</template>
-
-<script>
-export default {
-  name: 'Stepper',
-  props: {
-    url: {
-      type: String,
-      required: false
-    },
-    status: {
-      type: String,
-      required: false
-    },
-    current: {
-      type: String,
-      required: false
-    }
-  }
-}
-</script>
+<template>
+  <li>
+    <a :href="url" :class="`${status?'bg-'+status:''}${typeof current != 'undefined'?'current':''}`" :aria-current="typeof current != 'undefined'?true:false">
+      <span><slot></slot></span>
+      <em class="visually-hidden" v-if="status"> - status: {{status}}</em>
+    </a>
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'Stepper',
+  props: {
+    url: {
+      type: String,
+      required: false
+    },
+    status: {
+      type: String,
+      required: false
+    },
+    current: {
+      type: String,
+      required: false
+    }
+  }
+}
+</script>

package/src/components/Stepper/Stepper.vue

@@ -1,33 +1,33 @@
-<template>
-  <div class="container">
-    <nav class="stepper" :aria-label="label?label:'Progress'">
-      <span class="h6 stepper__start" v-if="label">{{label}}</span>
-      <ol class="list-unstyled">
-        <slot><!-- Use for titles etc --></slot>
-      </ol>
-      <span class="h6 stepper__end">{{endlabel}}</span>
-    </nav>
-  </div>
-</template>
-
-
-<style lang="scss">
-@import "../../../assets/sass/components/stepper.scss";
-</style>
-
-<script>
-export default {
-  name: 'Stepper',
-  props: {
-    label: {
-      type: String,
-      required: false
-    },
-    endlabel: {
-      type: String,
-      required: false,
-      default: "Complete"
-    }
-  }
-}
-</script>
+<template>
+  <div class="container">
+    <nav class="stepper" :aria-label="label?label:'Progress'">
+      <span class="h6 stepper__start" v-if="label">{{label}}</span>
+      <ol class="list-unstyled">
+        <slot><!-- Use for titles etc --></slot>
+      </ol>
+      <span class="h6 stepper__end">{{endlabel}}</span>
+    </nav>
+  </div>
+</template>
+
+
+<style lang="scss">
+@import "../../../assets/sass/components/stepper.scss";
+</style>
+
+<script>
+export default {
+  name: 'Stepper',
+  props: {
+    label: {
+      type: String,
+      required: false
+    },
+    endlabel: {
+      type: String,
+      required: false,
+      default: "Complete"
+    }
+  }
+}
+</script>

package/src/components/Tabs/README.md

@@ -1,28 +1,28 @@
-### Usage
-
-```
-<Tabs class="visualtest">
-  <Tab title="Tab content 1">
-    <h2>Tab content 1</h2>
-  </Tab>
-  <Tab title="Tab content 2">
-    <h2>Tab content 2</h2>
-  </Tab>
-  <Tab title="Tab content 3">
-    <h2>Tab content 3</h2>
-  </Tab>
-</Tabs>
-```
-
-### Tab Properties
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| title  | String | - | Used for the heading of the component |
-| lazy  | Boolean | - | If set the content of the tab will not loaded intially and will be loaded after the user has clicked on the tab link. |
-
-### Slots
-
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
+### Usage
+
+```
+<Tabs class="visualtest">
+  <Tab title="Tab content 1">
+    <h2>Tab content 1</h2>
+  </Tab>
+  <Tab title="Tab content 2">
+    <h2>Tab content 2</h2>
+  </Tab>
+  <Tab title="Tab content 3">
+    <h2>Tab content 3</h2>
+  </Tab>
+</Tabs>
+```
+
+### Tab Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| title  | String | - | Used for the heading of the component |
+| lazy  | Boolean | - | If set the content of the tab will not loaded intially and will be loaded after the user has clicked on the tab link. |
+
+### Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
 | default | - | Can be populated with Tab components |

package/src/components/Tabs/Tab.vue

@@ -1,26 +1,26 @@
-<template>
-  <div class="tab" v-if="show">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Tab',
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-    lazy: {
-      type: Boolean,
-      required: false
-    }
-  },
-  data() {
-    return {
-      show: this.lazy ? false : true
-    }
-  }
-}
-</script>
+<template>
+  <div class="tab" v-if="show">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Tab',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    lazy: {
+      type: Boolean,
+      required: false
+    }
+  },
+  data() {
+    return {
+      show: this.lazy ? false : true
+    }
+  }
+}
+</script>

package/src/components/Tabs/Tabs.vue

@@ -1,75 +1,75 @@
-<template>
-  <div class="container tabs__container" ref="wrapper">
-
-    <input type="radio" class="d-none" v-for="(value,index) in tabLinks()" :key="index" :name="value.name" :id="value.id" :checked="index == 0? 'checked':''" />
-
-    <div class="tabs__links">
-      <label v-for="(value,index) in tabLinks()" :key="index" :for="value.id" class="link" v-on:click="openTab(index)">
-        {{value.tabTitle}}
-      </label>
-    </div>
-    <div class="tabs">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-@import "../../../assets/sass/components/tabs.scss";
-</style>
-
-<script>
-export default {
-  name: 'Tabs',
-  data () {
-    return {
-      tabsID: 'tabs_'+Math.random().toString(36).substr(2, 9)
-    }
-  },
-  computed: {
-    tabLinks (){
-      return () => {
-
-        const tabLinks = [];
-        let i = 1;
-
-        for (const [key, value] of Object.entries(this.$slots.default)) {
-          
-          // Check if the value in the object is actually a tab and has the correct data
-          if(value.componentOptions && value.componentOptions.propsData && value.componentOptions.propsData.title){
-            
-            let tabTitle = value.componentOptions.propsData.title;
-            
-            let tab = {
-              name: this.tabsID,
-              id: this.tabsID+"_tab"+i++,
-              tabTitle: tabTitle
-            }
-
-            tabLinks.push(tab);
-          }
-        }
-
-        return tabLinks;
-      }
-    }
-  },
-  methods: {
-    openTab: function (index) {
-      
-      let i = 0;
-      for (const [key, value] of Object.entries(this.$slots.default)) {
-          
-        if(value.componentOptions && value.componentOptions.propsData && value.componentOptions.propsData.title){
-          
-          if(i == index){
-            value.componentInstance._data.show = true;
-          }
-
-          i++;
-        }
-      }
-    }
-  }
-}
-</script>
+<template>
+  <div class="container tabs__container" ref="wrapper">
+
+    <input type="radio" class="tab__input" v-for="(value,index) in tabLinks()" :key="index" :name="value.name" :id="value.id" :checked="index == 0? 'checked':''" />
+
+    <div class="tabs__links">
+      <label v-for="(value,index) in tabLinks()" :key="index" :for="value.id" class="link" v-on:click="openTab(index)">
+        {{value.tabTitle}}
+      </label>
+    </div>
+    <div class="tabs">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/components/tabs.scss";
+</style>
+
+<script>
+export default {
+  name: 'Tabs',
+  data () {
+    return {
+      tabsID: 'tabs_'+Math.random().toString(36).substr(2, 9)
+    }
+  },
+  computed: {
+    tabLinks (){
+      return () => {
+
+        const tabLinks = [];
+        let i = 1;
+
+        for (const [key, value] of Object.entries(this.$slots.default)) {
+          
+          // Check if the value in the object is actually a tab and has the correct data
+          if(value.componentOptions && value.componentOptions.propsData && value.componentOptions.propsData.title){
+            
+            let tabTitle = value.componentOptions.propsData.title;
+            
+            let tab = {
+              name: this.tabsID,
+              id: this.tabsID+"_tab"+i++,
+              tabTitle: tabTitle
+            }
+
+            tabLinks.push(tab);
+          }
+        }
+
+        return tabLinks;
+      }
+    }
+  },
+  methods: {
+    openTab: function (index) {
+      
+      let i = 0;
+      for (const [key, value] of Object.entries(this.$slots.default)) {
+          
+        if(value.componentOptions && value.componentOptions.propsData && value.componentOptions.propsData.title){
+          
+          if(i == index){
+            value.componentInstance._data.show = true;
+          }
+
+          i++;
+        }
+      }
+    }
+  }
+}
+</script>

package/src/components/Testimonial/README.md

@@ -1,26 +1,26 @@
-### Usage
-
-```
-<Testimonial :items="items">
-  <a href="/buying-stories" class="btn">Buying stories</a>
-  <a href="/selling-stories" class="btn">Selling stories</a>
-</Testimonial>
-```
-
-### Properties
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| title  | String | What our customers think… | Used for the heading of the component |
-| items  | Array | - | Testimonial data passed |
-| - item.class | String | - | Optional, this should be used to define the largest testimonial by setting it to 'largest' |
-| - item.cite | String | - | The person who made the quote |
-| - item.quote | HTML | - | The quote content |
-| - item.image | Image | - | The image that sits to the left of the quote. |
-
-
-### Slots
-
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
+### Usage
+
+```
+<Testimonial :items="items">
+  <a href="/buying-stories" class="btn">Buying stories</a>
+  <a href="/selling-stories" class="btn">Selling stories</a>
+</Testimonial>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| title  | String | What our customers think… | Used for the heading of the component |
+| items  | Array | - | Testimonial data passed |
+| - item.class | String | - | Optional, this should be used to define the largest testimonial by setting it to 'largest' |
+| - item.cite | String | - | The person who made the quote |
+| - item.quote | HTML | - | The quote content |
+| - item.image | Image | - | The image that sits to the left of the quote. |
+
+
+### Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
 | default | - | Will display underneath the quotes |

package/src/components/Testimonial/Testimonial.vue

@@ -1,60 +1,60 @@
-<template>
-  <div class="container testimonial mb-5" data-show="1" ref="wrapper">
-    <div :class="'bg-'+background">
-      <div class="row">
-        <div class="col-md-5 position-relative">
-          <div class="testimonial__images">
-            <img v-for="(value,index) in items" :key="index" :src="value.image ? value.image : 'data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=='" alt="" :class="'h-100 w-100 object-cover' + (value.image ? '' : ' opacity-0')" />
-          </div>
-          <div class="testimonial__controls">
-            <button data-go="0" disabled class="btn-prev">Previous</button>
-            <button data-go="2" class="btn-next">Next</button>
-          </div>
-        </div>
-        <div class="col-md-7">
-          <h2>What our customers think…</h2>
-          <div class="testimonial__content">
-
-            <blockquote v-for="(value,index) in items" :key="index" :class="value.class">
-              <div v-html="value.quote"></div>
-              <cite v-html="value.cite"></cite>
-            </blockquote>
-          </div>
-          <div class="testimonial__after">
-            <slot></slot>
-          </div>
-        </div>
-      </div>
-      <span class="circle circle--dots d-none d-md-block"></span>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-@import "../../../assets/sass/components/testimonial.scss";
-</style>
-
-<script>
-import testimonial from '../../../assets/js/modules/testimonial.js'
-
-
-export default {
-  name: 'Testimonial',
-  props: {
-    items: {
-      type: Array,
-      required: true
-    },
-    background: {
-      type: String,
-      default: 'light',
-      required: false
-    }
-  },
-  mounted(){
-
-    testimonial(this.$refs.wrapper);
-
-  }
-}
-</script>
+<template>
+  <div class="container testimonial mb-5" data-show="1" ref="wrapper">
+    <div :class="'bg-'+background">
+      <div class="row">
+        <div class="col-md-5 position-relative">
+          <div class="testimonial__images">
+            <img v-for="(value,index) in items" :key="index" :src="value.image ? value.image : 'data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=='" alt="" :class="'h-100 w-100 object-cover' + (value.image ? '' : ' opacity-0')" />
+          </div>
+          <div class="testimonial__controls">
+            <button data-go="0" disabled class="btn-prev">Previous</button>
+            <button data-go="2" class="btn-next">Next</button>
+          </div>
+        </div>
+        <div class="col-md-7">
+          <h2>What our customers think…</h2>
+          <div class="testimonial__content">
+
+            <blockquote v-for="(value,index) in items" :key="index" :class="value.class">
+              <div v-html="value.quote"></div>
+              <cite v-html="value.cite"></cite>
+            </blockquote>
+          </div>
+          <div class="testimonial__after">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+      <span class="circle circle--dots d-none d-md-block"></span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/components/testimonial.scss";
+</style>
+
+<script>
+import testimonial from '../../../assets/js/modules/testimonial.js'
+
+
+export default {
+  name: 'Testimonial',
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    background: {
+      type: String,
+      default: 'light',
+      required: false
+    }
+  },
+  mounted(){
+
+    testimonial(this.$refs.wrapper);
+
+  }
+}
+</script>

package/src/components/Timeline/README.md

@@ -1,18 +1,18 @@
-<p class="note">The Timeline component represents an individual item within the timeline and not the full timeline itself. These Vue components need to be inside of a div with the class of 'timeline__container'.</p>
-
-### Usage
-
-```
-<div class="timeline__container container">
-  <Timeline :image="require('../../assets/shutterstock_1229155495.webp')">
-    <h2>01 Search</h2>
-    <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, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
-  </Timeline>
-</div>
-```
-
-### Properties
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| image | String | - | Optional image url to display in the background |
+<p class="note">The Timeline component represents an individual item within the timeline and not the full timeline itself. These Vue components need to be inside of a div with the class of 'timeline__container'.</p>
+
+### Usage
+
+```
+<div class="timeline__container container">
+  <Timeline :image="require('../../assets/shutterstock_1229155495.webp')">
+    <h2>01 Search</h2>
+    <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, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
+  </Timeline>
+</div>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| image | String | - | Optional image url to display in the background |

package/src/components/Timeline/Timeline.vue

@@ -1,24 +1,24 @@
-<template>
-  <div class="timeline">
-    <div class="timeline__content">
-      <slot></slot>
-    </div>
-    <img v-if="image" :src="image" alt="" />
-  </div>
-</template>
-
-<style lang="scss">
-@import "../../../assets/sass/components/timeline.scss";
-</style>
-
-<script>
-export default {
-  name: 'Timeline',
-  props: {
-    image: {
-      type: String,
-      required: false
-    }
-  }
-}
-</script>
+<template>
+  <div class="timeline">
+    <div class="timeline__content">
+      <slot></slot>
+    </div>
+    <img v-if="image" :src="image" alt="" />
+  </div>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/components/timeline.scss";
+</style>
+
+<script>
+export default {
+  name: 'Timeline',
+  props: {
+    image: {
+      type: String,
+      required: false
+    }
+  }
+}
+</script>