@iamproperty/components 3.0.0 → 3.2.0

package/src/components/Nav/README.md

@@ -1,23 +1,23 @@
-### Usage
-
-```
-<Nav></Nav>
-```
-
-### Properties
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| logo | String | property | Update which logo is shown |
-| logotext | String | - | Optional logo text |
-| btnlink | String | - | Optional button can be added, used mainly for links relating to user accounts. |
-| btntext | String | - | Text used within the above button |
-
-
-### Slots
-
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
-| default | - | Populates the main nav area, use a ul.list-unstyled element  |
-| secondary | - |Populates the secondary nav area (top bar when on desktop), use a ul.list-unstyled element |
+### Usage
+
+```
+<Nav></Nav>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| logo | String | property | Update which logo is shown |
+| logotext | String | - | Optional logo text |
+| btnlink | String | - | Optional button can be added, used mainly for links relating to user accounts. |
+| btntext | String | - | Text used within the above button |
+
+
+### Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
+| default | - | Populates the main nav area, use a ul.list-unstyled element  |
+| secondary | - |Populates the secondary nav area (top bar when on desktop), use a ul.list-unstyled element |
 | search | - | Populates the search featured area area |

package/src/components/NoteFeed/NoteFeed.vue

@@ -1,79 +1,79 @@
-<template>
-  <div class="container note-feed mb-2">
-    <span class="h3" v-html="title" v-if="title"></span>
-
-    <Table :fields="[{ key: 'date_added' },{ key: 'user' },{ key: 'note' }]" :items="itemsData" v-bind="$props" class="mb-0"></Table>
-    <form :action="action" :method="method" @submit.prevent="submitForm(...arguments)">
-      <input type="hidden" :value="user" name="user" />
-      <Input id="addNote" type="textarea" label="Add note" required class="mw-100"></Input>
-      <button class="btn btn-tertiary">Submit note</button>
-    </form>
-  </div>
-</template>
-
-<script>
-import Input from '../../elements/Input/Input.vue'
-import Table from '../../elements/Table/Table.vue'
-let tableProps = Table.props;
-tableProps.fields.required = false;
-
-
-export default {
-  components: {
-    Table,
-    Input
-  },
-  data () {
-    return {
-      itemsData: [...this.items] // Redefine data to avoid bleeding of data to other components
-    }
-  },
-  methods: {
-    submitForm: function(event){
-
-      console.log(this)
-
-      const data = new FormData(event.target);
-
-      let today = new Date();
-      const yyyy = today.getFullYear();
-      let mm = today.getMonth() + 1; // Months start at 0!
-      let dd = today.getDate();
-
-      if (dd < 10) dd = '0' + dd;
-      if (mm < 10) mm = '0' + mm;
-
-      today = dd + '/' + mm + '/' + yyyy;
-
-      this.itemsData.unshift({
-        date_added: today,
-        user: data.get('user'),
-        note: data.get('addNote')
-      });
-
-      this.$emit('formSubmitted',event);
-    }
-  },
-  name: 'NoteFeed',
-  props: {
-    user: {
-      type: String,
-      required: true
-    },
-    ...tableProps,
-    title: {
-      type: String,
-      required: false
-    },
-    method: {
-      type: String,
-      required: false,
-      default: 'post'
-    },
-    action: {
-      type: String,
-      required: false
-    }
-  }
-}
-</script>
+<template>
+  <div class="container note-feed mb-2">
+    <span class="h3" v-html="title" v-if="title"></span>
+
+    <Table :fields="[{ key: 'date_added' },{ key: 'user' },{ key: 'note' }]" :items="itemsData" v-bind="$props" class="mb-0"></Table>
+    <form :action="action" :method="method" @submit.prevent="submitForm(...arguments)">
+      <input type="hidden" :value="user" name="user" />
+      <Input id="addNote" type="textarea" label="Add note" required class="mw-100"></Input>
+      <button class="btn btn-tertiary">Submit note</button>
+    </form>
+  </div>
+</template>
+
+<script>
+import Input from '../../elements/Input/Input.vue'
+import Table from '../../elements/Table/Table.vue'
+let tableProps = Table.props;
+tableProps.fields.required = false;
+
+
+export default {
+  components: {
+    Table,
+    Input
+  },
+  data () {
+    return {
+      itemsData: [...this.items] // Redefine data to avoid bleeding of data to other components
+    }
+  },
+  methods: {
+    submitForm: function(event){
+
+      console.log(this)
+
+      const data = new FormData(event.target);
+
+      let today = new Date();
+      const yyyy = today.getFullYear();
+      let mm = today.getMonth() + 1; // Months start at 0!
+      let dd = today.getDate();
+
+      if (dd < 10) dd = '0' + dd;
+      if (mm < 10) mm = '0' + mm;
+
+      today = dd + '/' + mm + '/' + yyyy;
+
+      this.itemsData.unshift({
+        date_added: today,
+        user: data.get('user'),
+        note: data.get('addNote')
+      });
+
+      this.$emit('formSubmitted',event);
+    }
+  },
+  name: 'NoteFeed',
+  props: {
+    user: {
+      type: String,
+      required: true
+    },
+    ...tableProps,
+    title: {
+      type: String,
+      required: false
+    },
+    method: {
+      type: String,
+      required: false,
+      default: 'post'
+    },
+    action: {
+      type: String,
+      required: false
+    }
+  }
+}
+</script>

package/src/components/NoteFeed/README.md

@@ -1,16 +1,16 @@
-### Usage
-
-```
-<NoteFeed user="User name" :fields="fields" :items="items" :show="3" @formSubmitted="submitForm(...arguments)"></NoteFeed>
-```
-
-### Properties
-
-<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. |
+### Usage
+
+```
+<NoteFeed user="User name" :fields="fields" :items="items" :show="3" @formSubmitted="submitForm(...arguments)"></NoteFeed>
+```
+
+### Properties
+
+<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. |

package/src/components/PropertySearchbar/PropertySearchbar.vue

@@ -1,204 +1,204 @@
-<template>
-  <div class="container" ref="wrapper">
-    <slot></slot>
-    <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 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>
-          </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>
-          </div>
-        </fieldset>
-        <fieldset class="col-12 col-md-2">
-          <Input label="Property type" id="property-type" type="select" :options="propertytypes"></Input>
-        </fieldset>
-        <div class="col-12 col-md mw-md-fit-content d-flex property-searchbar__btn">
-          <button class="btn w-100 me-0" type="submit" value="submit">Search</button>
-        </div>
-      </form>
-    </div>
-    <slot name="after"></slot>
-  </div>
-</template>
-
-<style lang="scss">
-@import "../../../assets/sass/components/property-searchbar.scss";
-</style>
-
-<script>
-import Input from '../../elements/Input/Input.vue'
-
-export default {
-  components: {
-    Input
-  },
-  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'}
-        ];
-      }
-    }
-  },
-  data () {
-    return {
-      locationSave: ''
-    }
-  },
-  methods: {
-    locationKeyup: function(event){
-
-      this.$emit('locationKeyup',event);
-    }
-  },
-  computed: {
-    locationSet: {
-      get() {
-
-        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 [
-          {'value': 'Newcastle'}
-        ];
-      }
-    }
-  }
-}
-</script>
+<template>
+  <div class="container" ref="wrapper">
+    <slot></slot>
+    <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 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>
+          </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>
+          </div>
+        </fieldset>
+        <fieldset class="col-12 col-md-2">
+          <Input label="Property type" id="property-type" type="select" :options="propertytypes"></Input>
+        </fieldset>
+        <div class="col-12 col-md mw-md-fit-content d-flex property-searchbar__btn">
+          <button class="btn w-100 me-0" type="submit" value="submit">Search</button>
+        </div>
+      </form>
+    </div>
+    <slot name="after"></slot>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/components/property-searchbar.scss";
+</style>
+
+<script>
+import Input from '../../elements/Input/Input.vue'
+
+export default {
+  components: {
+    Input
+  },
+  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'}
+        ];
+      }
+    }
+  },
+  data () {
+    return {
+      locationSave: ''
+    }
+  },
+  methods: {
+    locationKeyup: function(event){
+
+      this.$emit('locationKeyup',event);
+    }
+  },
+  computed: {
+    locationSet: {
+      get() {
+
+        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 [
+          {'value': 'Newcastle'}
+        ];
+      }
+    }
+  }
+}
+</script>