@iamproperty/components 7.0.0 → 7.1.0--beta2

package/src/components/NoteFeed/README.md

@@ -8,9 +8,9 @@
 
 <p class="note"><strong>Note:</strong> See the tables documentation for the table props which are inherited here</p>
 
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| user | String | - | Required |
-| title | String | - | Optional as we may want to add the title outside of the note feed. |
-| method | String | post | Form method of posting the data, post or get |
-| action | String| | Optional URL to submit the form too, not really usefull for Vue JS. |
+| Option | Type   | Default Value | Description                                                         |
+| ------ | ------ | ------------- | ------------------------------------------------------------------- |
+| user   | String | -             | Required                                                            |
+| title  | String | -             | Optional as we may want to add the title outside of the note feed.  |
+| method | String | post          | Form method of posting the data, post or get                        |
+| action | String |               | Optional URL to submit the form too, not really usefull for Vue JS. |

package/src/components/Notification/Notification.vue

@@ -5,20 +5,16 @@
 </template>
 
 <script>
-import iamNotification from '../../../assets/js/components/notification/notification.component.js'
+  import iamNotification from '../../../assets/js/components/notification/notification.component.js';
 
-export default {
-  name: 'Notification',
-  props: {
-
-  },
-  created(){
-
-    this.$nextTick(function () {
-      
-      if (!window.customElements.get('iam-notification'))
-        window.customElements.define('iam-notification', iamNotification);
-    })
-  }
-}
+  export default {
+    name: 'Notification',
+    props: {},
+    created() {
+      this.$nextTick(function () {
+        if (!window.customElements.get('iam-notification'))
+          window.customElements.define('iam-notification', iamNotification);
+      });
+    },
+  };
 </script>

package/src/components/Notification/README.md

@@ -18,15 +18,15 @@
 
 **Properties**
 
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| data-status | String | info | Choose from danger,succes and warning. This will change the colour of the notification box and which icon is shown. |
-| data-type | String | inline | Choose from alert and toast. This will change the behavour of the component. |
-| data-dismiss | Boolean | - | Adds a close button which will remove the alert box after clicking it. |
-| data-timeout | Boolean | - | Adds a timer for how long the notification will appear. |
+| Option       | Type    | Default Value | Description                                                                                                         |
+| ------------ | ------- | ------------- | ------------------------------------------------------------------------------------------------------------------- |
+| data-status  | String  | info          | Choose from danger,succes and warning. This will change the colour of the notification box and which icon is shown. |
+| data-type    | String  | inline        | Choose from alert and toast. This will change the behavour of the component.                                        |
+| data-dismiss | Boolean | -             | Adds a close button which will remove the alert box after clicking it.                                              |
+| data-timeout | Boolean | -             | Adds a timer for how long the notification will appear.                                                             |
 
 **Slots**
 
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
-| default | - | This is the content of the notification box |
+| Option  | Default Value | Description                                 |
+| ------- | ------------- | ------------------------------------------- |
+| default | -             | This is the content of the notification box |

package/src/components/Pagination/Pagination.vue

@@ -1,30 +1,20 @@
 <template>
-  <iam-pagination>
-  </iam-pagination>
+  <iam-pagination> </iam-pagination>
 </template>
 
 <script>
-import iamPagination from '../../../assets/js/components/pagination/pagination.component.min.js'
-import { ucfirst, unsnake } from '../../helpers/strings'
+  import iamPagination from '../../../assets/js/components/pagination/pagination.component.min.js';
+  import { ucfirst, unsnake } from '../../helpers/strings';
 
-export default {
-  name: 'Pagination',
-  props: {
-
-  },
-  computed: {
-
-  },
-  created(){
-
-    this.$nextTick(function () {
-      
-      if (!window.customElements.get('iam-pagination'))
-        window.customElements.define('iam-pagination', iamPagination);
-    })
-  },
-  updated(){
-    
-  }
-}
+  export default {
+    name: 'Pagination',
+    props: {},
+    computed: {},
+    created() {
+      this.$nextTick(function () {
+        if (!window.customElements.get('iam-pagination')) window.customElements.define('iam-pagination', iamPagination);
+      });
+    },
+    updated() {},
+  };
 </script>

package/src/components/Pagination/README.md

@@ -4,19 +4,19 @@
 
 **Properties**
 
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| data-total | int | 0 | The total amount is needed to work out how many pagination buttons are needed |
-| data-page | int | 1 | Override the current page value |
-| data-show | int | 15 | Update how many items can be shown per page |
-| data-page-minimal | flag | - | Will display the minimal variant even on mobile | 
-| data-page-jump | flag | - | Adds the page jump dropdown on all viewports | 
-| data-per-page | flag | - | Adds the per page dropdown on tablet and desktop viewports (is hidden on tablet if not enough room availble) | 
-| data-item-count | flag | - | Will add the total count on tablet and desktop viewports | 
+| Option            | Type | Default Value | Description                                                                                                  |
+| ----------------- | ---- | ------------- | ------------------------------------------------------------------------------------------------------------ |
+| data-total        | int  | 0             | The total amount is needed to work out how many pagination buttons are needed                                |
+| data-page         | int  | 1             | Override the current page value                                                                              |
+| data-show         | int  | 15            | Update how many items can be shown per page                                                                  |
+| data-page-minimal | flag | -             | Will display the minimal variant even on mobile                                                              |
+| data-page-jump    | flag | -             | Adds the page jump dropdown on all viewports                                                                 |
+| data-per-page     | flag | -             | Adds the per page dropdown on tablet and desktop viewports (is hidden on tablet if not enough room availble) |
+| data-item-count   | flag | -             | Will add the total count on tablet and desktop viewports                                                     |
 
 **Dispatched events**
 
-| Event | Dispatched when | Details passed|
-| ------ | ------------- | ----------- |
-| update-show | When a user clicks mobile 'Load more' button | { show: $showAmont } |
+| Event       | Dispatched when                                                                     | Details passed        |
+| ----------- | ----------------------------------------------------------------------------------- | --------------------- |
+| update-show | When a user clicks mobile 'Load more' button                                        | { show: $showAmont }  |
 | update-page | When a user changes the page jump select or clicks on the 'Prev' and 'Next' buttons | { page: $pageNumber } |

package/src/components/PropertySearchbar/PropertySearchbar.vue

@@ -4,21 +4,59 @@
     <div class="property-searchbar">
       <form class="row" :action="formaction" :method="formmethod">
         <fieldset class="col-12 col-md-3">
-          <Input inputClass="input--locations" v-model="locationSet" label="Location" id="location" :options="locationsList()" required placeholder="i.e. Newcastle or NE1"  @keyupEvent="locationKeyup(...arguments)" ref="search"></Input>
+          <Input
+            inputClass="input--locations"
+            v-model="locationSet"
+            label="Location"
+            id="location"
+            :options="locationsList()"
+            required
+            placeholder="i.e. Newcastle or NE1"
+            @keyupEvent="locationKeyup(...arguments)"
+            ref="search"
+          ></Input>
           <Input class="select--miles" label="Miles" id="miles" type="select" :options="distances"></Input>
         </fieldset>
         <fieldset class="col-12 col-md">
           <span class="form-label d-none d-md-block">Price range</span>
           <div class="row" data-input-range>
-            <Input class="col-6" label="Minimum price" id="price-min" data-min="true" type="select" :options="pricemin"></Input>
-            <Input class="col-6" label="Maximum price" id="price-max" data-max="true" type="select" :options="pricemax"></Input>
+            <Input
+              class="col-6"
+              label="Minimum price"
+              id="price-min"
+              data-min="true"
+              type="select"
+              :options="pricemin"
+            ></Input>
+            <Input
+              class="col-6"
+              label="Maximum price"
+              id="price-max"
+              data-max="true"
+              type="select"
+              :options="pricemax"
+            ></Input>
           </div>
         </fieldset>
         <fieldset class="col-12 col-md">
           <span class="form-label d-none d-md-block">Number of beds</span>
           <div class="row" data-input-range>
-            <Input class="col-6" label="Minimum beds" id="beds-min" data-min="true" type="select" :options="bedsmin"></Input>
-            <Input class="col-6" label="Maximum beds" id="beds-max" data-max="true" type="select" :options="bedsmax"></Input>
+            <Input
+              class="col-6"
+              label="Minimum beds"
+              id="beds-min"
+              data-min="true"
+              type="select"
+              :options="bedsmin"
+            ></Input>
+            <Input
+              class="col-6"
+              label="Maximum beds"
+              id="beds-max"
+              data-max="true"
+              type="select"
+              :options="bedsmax"
+            ></Input>
           </div>
         </fieldset>
         <fieldset class="col-12 col-md-2">
@@ -34,171 +72,164 @@
 </template>
 
 <style lang="scss">
-@import "../../../assets/sass/components/property-searchbar.scss";
+  @import '../../../assets/sass/components/property-searchbar.scss';
 </style>
 
 <script>
-import Input from '../../components/Input/Input.vue'
+  import Input from '../../components/Input/Input.vue';
 
-export default {
-  components: {
-    Input
-  },
-  name: 'PropertySearchbar',
-  props: {
-    formaction: {
-      type: String,
-      required: false
+  export default {
+    components: {
+      Input,
     },
-    formmethod: {
-      type: String,
-      required: false
-    },
-    location: {
-      type: String,
-      required: false
-    },
-    locations: {
-      type: Array,
-      required: false
-    },
-    distances: {
-      type: Array,
-      required: false,
-      default() {
-        return [
-          {'value':'0.25','display':'+¼ mi'},
-          {'value':'0.5','display':'+½ mi'},
-          {'value':'1','display':'+1 mi'},
-          {'value':'2','display':'+2 mi'},
-          {'value':'3','display':'+3 mi'},
-          {'value':'4','display':'+4 mi'},
-          {'value':'5','display':'+5 mi'}
-        ];
-      } 
-    },
-    pricemin: {
-      type: Array,
-      required: false,
-      default() {
-        return [
-          {'value':'0','display':'No min'},
-          {'value':'50000','display':'£50k min'},
-          {'value':'75000','display':'£75k min'},
-          {'value':'100000','display':'£100k min'},
-          {'value':'150000','display':'£150k min'},
-          {'value':'200000','display':'£200k min'},
-          {'value':'250000','display':'£250k min'}
-        ];
-      }
-    },
-    pricemax: {
-      type: Array,
-      required: false,
-      default() {
-        return [
-          {'value':'any','display':'No max'},
-          {'value':'50000','display':'£50k max'},
-          {'value':'75000','display':'£75k max'},
-          {'value':'100000','display':'£100k max'},
-          {'value':'150000','display':'£150k max'},
-          {'value':'200000','display':'£200k max'},
-          {'value':'250000','display':'£250k max'}
-        ];
-      }
+    name: 'PropertySearchbar',
+    props: {
+      formaction: {
+        type: String,
+        required: false,
+      },
+      formmethod: {
+        type: String,
+        required: false,
+      },
+      location: {
+        type: String,
+        required: false,
+      },
+      locations: {
+        type: Array,
+        required: false,
+      },
+      distances: {
+        type: Array,
+        required: false,
+        default() {
+          return [
+            { value: '0.25', display: '+¼ mi' },
+            { value: '0.5', display: '+½ mi' },
+            { value: '1', display: '+1 mi' },
+            { value: '2', display: '+2 mi' },
+            { value: '3', display: '+3 mi' },
+            { value: '4', display: '+4 mi' },
+            { value: '5', display: '+5 mi' },
+          ];
+        },
+      },
+      pricemin: {
+        type: Array,
+        required: false,
+        default() {
+          return [
+            { value: '0', display: 'No min' },
+            { value: '50000', display: '£50k min' },
+            { value: '75000', display: '£75k min' },
+            { value: '100000', display: '£100k min' },
+            { value: '150000', display: '£150k min' },
+            { value: '200000', display: '£200k min' },
+            { value: '250000', display: '£250k min' },
+          ];
+        },
+      },
+      pricemax: {
+        type: Array,
+        required: false,
+        default() {
+          return [
+            { value: 'any', display: 'No max' },
+            { value: '50000', display: '£50k max' },
+            { value: '75000', display: '£75k max' },
+            { value: '100000', display: '£100k max' },
+            { value: '150000', display: '£150k max' },
+            { value: '200000', display: '£200k max' },
+            { value: '250000', display: '£250k max' },
+          ];
+        },
+      },
+      bedsmin: {
+        type: Array,
+        required: false,
+        default() {
+          return [
+            { value: 'any', display: 'No min' },
+            { value: '0', display: 'Studio min' },
+            { value: '1', display: '1 bed min' },
+            { value: '2', display: '2 beds min' },
+            { value: '3', display: '3 beds min' },
+            { value: '4', display: '4 beds min' },
+            { value: '5', display: '5 beds min' },
+            { value: '6', display: '6 beds min' },
+          ];
+        },
+      },
+      bedsmax: {
+        type: Array,
+        required: false,
+        default() {
+          return [
+            { value: 'any', display: 'No max' },
+            { value: '0', display: 'Studio max' },
+            { value: '1', display: '1 bed max' },
+            { value: '2', display: '2 beds max' },
+            { value: '3', display: '3 beds max' },
+            { value: '4', display: '4 beds max' },
+            { value: '5', display: '5 beds max' },
+            { value: '6', display: '6 beds max' },
+          ];
+        },
+      },
+      propertytypes: {
+        type: Array,
+        required: false,
+        default() {
+          return [
+            { value: 'all', display: 'Show all' },
+            { value: 'Bungalow', display: 'Bungalow' },
+            { value: 'Character Property', display: 'Character Property' },
+            { value: 'Commercial Property', display: 'Commercial Property' },
+            { value: 'Flat / Apartment', display: 'Flat / Apartment' },
+            { value: 'Garage / Parking', display: 'Garage / Parking' },
+            { value: 'Guest House / Hotel', display: 'Guest House / Hotel' },
+            { value: 'House', display: 'House' },
+            { value: 'House / Flat Share', display: 'House / Flat Share' },
+            { value: 'Land', display: 'Land' },
+            { value: 'Mobile / Park Home', display: 'Mobile / Park Home' },
+            { value: 'Private Halls', display: 'Private Halls' },
+            { value: 'Retirement Property', display: 'Retirement Property' },
+          ];
+        },
+      },
     },
-    bedsmin: {
-      type: Array,
-      required: false,
-      default() {
-        return [
-          {'value':'any','display':'No min'},
-          {'value':'0','display':'Studio min'},
-          {'value':'1','display':'1 bed min'},
-          {'value':'2','display':'2 beds min'},
-          {'value':'3','display':'3 beds min'},
-          {'value':'4','display':'4 beds min'},
-          {'value':'5','display':'5 beds min'},
-          {'value':'6','display':'6 beds min'}
-        ];
-      }
+    data() {
+      return {
+        locationSave: '',
+      };
     },
-    bedsmax: {
-      type: Array,
-      required: false,
-      default() {
-        return [
-          {'value':'any','display':'No max'},
-          {'value':'0','display':'Studio max'},
-          {'value':'1','display':'1 bed max'},
-          {'value':'2','display':'2 beds max'},
-          {'value':'3','display':'3 beds max'},
-          {'value':'4','display':'4 beds max'},
-          {'value':'5','display':'5 beds max'},
-          {'value':'6','display':'6 beds max'}
-        ];
-      }
+    methods: {
+      locationKeyup: function (event) {
+        this.$emit('locationKeyup', event);
+      },
     },
-    propertytypes: {
-      type: Array,
-      required: false,
-      default() {
-        return [
-          {'value':'all','display':'Show all'},
-          {'value':'Bungalow','display':'Bungalow'},
-          {'value':'Character Property','display':'Character Property'},
-          {'value':'Commercial Property','display':'Commercial Property'},
-          {'value':'Flat / Apartment','display':'Flat / Apartment'},
-          {'value':'Garage / Parking','display':'Garage / Parking'},
-          {'value':'Guest House / Hotel','display':'Guest House / Hotel'},
-          {'value':'House','display':'House'},
-          {'value':'House / Flat Share','display':'House / Flat Share'},
-          {'value':'Land','display':'Land'},
-          {'value':'Mobile / Park Home','display':'Mobile / Park Home'},
-          {'value':'Private Halls','display':'Private Halls'},
-          {'value':'Retirement Property','display':'Retirement Property'}
-        ];
-      }
-    }
-  },
-  data () {
-    return {
-      locationSave: ''
-    }
-  },
-  methods: {
-    locationKeyup: function(event){
-
-      this.$emit('locationKeyup',event);
-    }
-  },
-  computed: {
-    locationSet: {
-      get() {
+    computed: {
+      locationSet: {
+        get() {
+          if (this.locationSave) return this.locationSave;
 
-        if(this.locationSave)
-          return this.locationSave;
+          return this.location;
+        },
+        set(val) {
+          this.locationSave = val;
+          this.$emit('input', val);
+        },
+      },
+      locationsList() {
+        return () => {
+          if (this.locations) {
+            return this.locations;
+          }
 
-        return this.location;
+          return [{ value: 'Newcastle' }];
+        };
       },
-      set(val) {
-        
-        this.locationSave = val;
-        this.$emit('input', val);
-      }
     },
-    locationsList() {
-      return () => {
-
-        if(this.locations){
-          return this.locations
-        }
-
-        return [
-          {'value': 'Newcastle'}
-        ];
-      }
-    }
-  }
-}
+  };
 </script>

package/src/components/PropertySearchbar/README.md

@@ -6,21 +6,20 @@
 
 ### Properties
 
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| formAction | String | - | Set where the property search submit the form to |
-| formAction | String | - | Sets how the form is submitted, i.e. post or get |
-| distances | Array | See documentation example | Override the default (Not recommened) |
-| priceMin | Array | See documentation example | Override the default (Not recommened) |
-| priceMax | Array | See documentation example | Override the default (Not recommened) |
-| bedsMin | Array | See documentation example | Override the default (Not recommened) |
-| bedsMax | Array | See documentation example | Override the default (Not recommened) |
-| propertyTypes | Array | See documentation example | Override the default (Not recommened) |
-
+| Option        | Type   | Default Value             | Description                                      |
+| ------------- | ------ | ------------------------- | ------------------------------------------------ |
+| formAction    | String | -                         | Set where the property search submit the form to |
+| formAction    | String | -                         | Sets how the form is submitted, i.e. post or get |
+| distances     | Array  | See documentation example | Override the default (Not recommened)            |
+| priceMin      | Array  | See documentation example | Override the default (Not recommened)            |
+| priceMax      | Array  | See documentation example | Override the default (Not recommened)            |
+| bedsMin       | Array  | See documentation example | Override the default (Not recommened)            |
+| bedsMax       | Array  | See documentation example | Override the default (Not recommened)            |
+| propertyTypes | Array  | See documentation example | Override the default (Not recommened)            |
 
 ### Slots
 
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
-| default | - | Will display before the property searchbar  |
-| after | - | Will display after the property searchbar |
+| Option  | Default Value | Description                                |
+| ------- | ------------- | ------------------------------------------ |
+| default | -             | Will display before the property searchbar |
+| after   | -             | Will display after the property searchbar  |

package/src/components/RecordCard/RecordCard.vue

@@ -5,21 +5,19 @@
 </template>
 
 <script>
-export default {
-  name: 'Card',
-  created(){
-
-    this.$nextTick(function () {
-      
-      import(`../../../assets/js/components/record-card/record-card.component.min.js`).then(module => {
-
-        if (!window.customElements.get(`iam-record-card`))
-          window.customElements.define(`iam-record-card`, module.default);
-
-      }).catch((err) => {
-        console.log(err.message);
+  export default {
+    name: 'Card',
+    created() {
+      this.$nextTick(function () {
+        import(`../../../assets/js/components/record-card/record-card.component.min.js`)
+          .then((module) => {
+            if (!window.customElements.get(`iam-record-card`))
+              window.customElements.define(`iam-record-card`, module.default);
+          })
+          .catch((err) => {
+            console.log(err.message);
+          });
       });
-    })
-  }
-}
+    },
+  };
 </script>

package/src/components/Search/README.md

@@ -8,4 +8,4 @@
 </label>
 <datalist id="properties"></datalist>
 </Search>
-```
+```