@iamproperty/components 1.0.14 → 2.3.0

package/src/elements/Input/Input.vue

@@ -0,0 +1,236 @@
+<template>
+  <div :class="wrapperClass()" ref="wrapper">
+    <label v-if="needsLabel()" :class="`form-label${labelclass?` ${labelclass}`:''}`" :for="id" v-html="displayLabel()"></label>
+    
+    <!-- Standard input field -->
+    <input v-if="isInput()" v-model="inputVal" :class="`form-control${size?` form-control-${size}`:``}${inputclass?` ${inputclass}`:``}`" :type="type" :name="name?name:id" :id="id" :pattern="needPattern()" :list="hasOptions()" v-bind="$attrs" v-on:keyup="inputKeyup" />
+    
+    <!-- Textarea -->
+    <textarea v-if="type=='textarea'" v-model="inputVal" :class="`form-control${size?` form-control-${size}`:``}${inputclass?` ${inputclass}`:``}`" :type="type" :name="name?name:id" :id="id" :pattern="needPattern()" v-bind="$attrs"></textarea>
+    
+    <!-- Range -->
+    <div class="input-group" v-if="type=='range'">
+      <input v-model="inputVal" :class="`form-range${inputclass?` ${inputclass}`:``}`" :type="type" :name="name?name:id" :id="id" :pattern="needPattern()" :list="hasOptions()" v-bind="$attrs" oninput="this.nextElementSibling.value=this.value;" />
+      <output class="input-group-text border-0 col-2 col-sm-1 px-0">{{value}}</output>
+    </div>
+    
+    <!-- Color picker -->
+    <div class="input-group" v-if="type=='color'">
+      <input v-model="inputVal" :class="`form-control form-control-color${inputclass?` ${inputclass}`:``}`" :type="type" :name="name?name:id" :id="id" :pattern="needPattern()" :list="hasOptions()" v-bind="$attrs" oninput="this.nextElementSibling.value=this.value;" />
+      <output class="input-group-text flex-fill">{{value?vale:'#000000'}}</output>
+    </div>
+    
+    <!-- Select/dropdown -->
+    <select v-if="type=='select'" v-model="inputVal" :class="`form-select${size?` form-select-${size}`:``}${inputclass?` ${inputclass}`:``}`" :type="type" :name="id" :id="id" :pattern="needPattern()" v-bind="$attrs">
+      <option v-for="(value,index) in options" :key="index" :value="value.value">{{value.display ? value.display : value.value}}</option>
+    </select>
+    
+    <datalist v-if="allowDatalist()" :id="id+'-list'">
+      <option v-for="(value,index) in options" :key="index" :value="value.value">{{value.value}}</option>
+    </datalist>
+
+    <!-- Checkbox -->
+    <input v-if="type=='checkbox'||type=='radio'" class="form-check-input" :type="type" :name="name?name:id" :id="id" v-bind="$attrs" />
+    <label v-if="type=='checkbox'||type=='radio'" :class="`form-label form-check-label${labelclass?` ${labelclass}`:''}`" :for="id" v-html="label"></label>
+
+    <!-- Checkbox Button -->
+    <input v-if="type=='checkbox-btn'||type=='radio-btn'" :class="`btn-check${inputclass?` ${inputclass}`:``}`" :type="type.replace('-btn','')" autocomplete="off" :name="name?name:id" :id="id" v-bind="$attrs" />
+    <label v-if="type=='checkbox-btn'||type=='radio-btn'" :class="`btn${labelclass?` ${labelclass}`:''}`" :for="id" v-html="label" @click="clickEvent"></label>
+
+    <!-- Error message -->
+    <p v-if="errormsg" class="invalid-feedback mb-0" v-html="errormsg"></p>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Input',
+  props: {
+    value: {
+      type: String,
+      required: false
+    },
+    id: {
+      type: String,
+      required: true
+    },
+    name: {
+      type: String,
+      required: false
+    },
+    list: {
+      type: String,
+      required: false
+    },
+    label: {
+      type: String,
+      required: false
+    },
+    labelclass: {
+      type: String,
+      required: false
+    },
+    inputclass: {
+      type: String,
+      required: false
+    },
+    type: {
+      type: String,
+      required: false,
+      default: 'text'
+    },
+    size: {
+      type: String,
+      required: false
+    },
+    errormsg: {
+      type: String,
+      required: false
+    },
+    options: {
+      type: Array,
+      required: false
+    }
+  },
+  computed: {
+    displayLabel() {
+      return () => {
+
+        if(this.$attrs.multiple){
+          return this.label+`<span class="small d-block text-body font-body fw-normal">Hold down the Ctrl (windows) or Command (Mac) button to select multiple options.</span>`
+        }
+
+        return this.label;
+      }
+    },
+    wrapperClass () {
+      return () => {
+        switch(this.type) {
+          case 'radio':
+          case 'checkbox':
+            return 'form-check'
+          case 'radio-btn':
+          case 'checkbox-btn':
+            return false
+          default:
+            return 'form-control__wrapper'
+        }
+      }
+    },
+    needPattern () {
+      return () => {
+
+        if(this.pattern)
+          return this.pattern;
+
+        // Create fallback patterns for input types
+        switch(this.type) {
+          case 'datetime-local':
+            return '[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}'
+        }
+        
+        return false
+      }
+    },
+    needsLabel () {
+      return () => {
+        switch(this.type) {
+          case 'radio':
+          case 'radio-btn':
+          case 'checkbox':
+          case 'checkbox-btn':
+            return false
+          default:
+            return true
+        }
+      }
+    },
+    isInput () {
+      return () => {
+        switch(this.type) {
+          case 'textarea':
+          case 'select':
+          case 'radio':
+          case 'radio-btn':
+          case 'checkbox':
+          case 'checkbox-btn':
+          case 'range':
+          case 'color':
+            return false
+          default:
+            return true
+        }
+      }
+    },
+    allowDatalist () {
+      return () => {
+        switch(this.type) {
+          case 'select':
+          case 'radio':
+          case 'radio-btn':
+          case 'checkbox':
+          case 'checkbox-btn':
+            return false
+          default:
+            return true
+        }
+      }
+    },
+    hasOptions() {
+      return () => {
+
+        if(this.list)
+          return this.list;
+
+        if(this.options) {
+          return this.id+'-list'
+        }
+      }
+    },
+    inputVal: {
+      get() {
+        // Default to the first options if no value set for select field
+        if(this.value == undefined && this.options != undefined && this.type =="select"){
+
+          // Return an empty array if muliple attribute is set
+          if(this.$attrs.multiple){
+            return [];
+          }
+          return this.options[0].value;
+        }
+
+        return this.value;
+      },
+      set(val) {
+        
+        this.$emit('input', val);
+      }
+    }
+  },
+  mounted(){
+
+    this.$nextTick(function () {
+      
+      let element = this.$refs.wrapper;
+      // Remove unnecessary divs that may get in the way of our CSS sibling selectors working
+      if(element.parentNode && element.parentNode.classList.contains('form-check') || element.classList.length == 0){
+
+        const fragment = document.createDocumentFragment();
+      	Array.from(element.childNodes).forEach(child => fragment.appendChild(child));
+        element.parentNode.insertBefore(fragment, element);
+        element.parentNode.removeChild(element);
+      }
+    })
+  },
+  methods: {
+    inputKeyup(event){
+      this.$emit('keyupEvent',event);
+    },
+    clickEvent(){
+      this.$emit('bus');
+    }
+  }
+}
+</script>

package/src/elements/Input/README.md

@@ -0,0 +1,18 @@
+### Usage
+
+```
+<Input id="fieldid" label="Label"></Input>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| id  | String | - | Required |
+| label | String | - | Not required but recommended |
+| labelclass | String | - | Optional way of adding classes to the label, useful for assigning column class to label when usiong inline input fields. |
+| inputclass | String | - | Optional way of adding classes to the input field, useful for assigning column class to label when usiong inline input fields. |
+| type | String | text | Assign different types to the input fields like number, email and date. |
+| size | String | - | Choose from either 'sm' and 'lg' |
+| errormsg | String | - | Error message thats shown when the field fails form validation. |
+| options | Array | - | Used for the select type input field to populate the dropdown. Can also be used to create a datalist when used in conjuction of any other input type than select. |

package/src/elements/Table/README.md

@@ -0,0 +1,55 @@
+### Usage
+
+```
+<Table :fields="fields" :items="items"></Table>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| items  | Array | - | Table row data passed |
+| fields | Array | - | Table header titles  |
+| sort   | string | - | Choose from ascending or descending |
+| sortBy | string | - | Needs to match a column name and will trigger sorting via that column on page load |
+| show | number | - | Limits the number of results shown and will create pagination controls. |
+| page | number | - | Starting page for the pagination. |
+| reorder | bool | - | Create an order column and allow for the table rows to be reordered |
+
+### Class modifiers
+
+- **.table-fullwidth** - Prevents the table from stacking on mobile
+- **.table-striped** - Add zebra-striping to the table
+- **.table-hover** - Enable a hover state on table rows within a &lt;tbody&gt;
+
+### Make columns filterable or sortable
+
+To give a column some extra functionality extra values need to be set in the data.
+
+```
+fields: [
+  { 
+    key: 'name',
+    filterable: true,
+    sortable: true
+  },
+  { key: 'address' }
+]
+```
+
+### Custom JavaScript Events
+
+A custom event can be hooked into when the table gets updated by one of it filters.
+
+```
+this.$el.addEventListener('filtered', function (e) { 
+      
+  console.log('Table filtered')
+}, false);
+
+// Sorted
+this.$el.addEventListener('sorted', function (e) { 
+      
+  console.log('Table sorted')
+}, false);
+```

package/src/elements/Table/Table.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="table__wrapper" ref="wrapper" :data-sortby="sortby" :data-sort="sort" :data-show="show" :data-page="page" :data-reorder="reorder">
+    <table>
+      <thead v-if="fields">
+        <tr>
+          <th v-for="(field) in fields" :key="field.key" :data-sortable="field.sortable" :data-filterable="field.filterable">{{ cellHeading(field.key) }}</th>
+        </tr>
+      </thead>
+      <tbody v-if="items">
+        <tr v-for="(value,index) in items" :key="index">
+          <td :key="cellIndex" v-for="(cellValue,cellIndex) in value" v-html="cellValue" :data-label="cellHeading(cellIndex)" :data-numeric="numericValue(cellValue)"></td>
+        </tr>
+      </tbody>
+    </table>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { ucfirst, unsnake } from '../../helpers/strings'
+import table from '../../../assets/js/modules/table.js'
+
+export default {
+  name: 'Table',
+  props: {
+    reorder: {
+      type: Boolean,
+      required: false
+    },
+    page: {
+      type: Number,
+      required: false
+    },
+    show: {
+      type: Number,
+      required: false
+    },
+    sortby: {
+      type: String,
+      required: false
+    },
+    sort: {
+      type: String,
+      required: false
+    },
+    items: {
+      type: Array,
+      required: true
+    },
+    fields: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    cellHeading () {
+      return (heading) => {
+        return `${ucfirst(unsnake(heading))}`
+      }
+    },
+    numericValue () {
+      return (value) => {
+
+        value = value.replace('£','')
+        value = value.replace('%','')
+
+        if (Number.isNaN(Number.parseFloat(value))) {
+          return 0;
+        }
+
+        return Number.parseFloat(value)
+      }
+    }
+  },
+  mounted(){
+
+    this.$nextTick(function () {
+      
+      table(this.$refs.wrapper);
+
+      // Listen for the event.
+      this.$el.addEventListener('sorted', function (e) { 
+        
+        console.log('Table sorted')
+      }, false);
+
+      this.$el.addEventListener('filtered', function (e) { 
+        
+        console.log('Table filtered')
+      }, false);
+
+    })
+  },
+  updated(){
+    this.$nextTick(function () {
+
+      // If the data gets updated we may need to recreate the tbody as it get detached when sorted in the table.js
+      let tbody = this.$refs.wrapper.querySelector('tbody');
+
+      let tbodyHTML = '';
+      this.items.forEach((row, index) => {
+        tbodyHTML += `<tr>${ Object.keys(row).map(col =>  `<td data-label="${ucfirst(unsnake(col))}">${row[col]}</td>` ).join("") }</tr>`;
+      });
+      tbody.innerHTML = tbodyHTML;
+
+      // Tell the framework that the table has been filtered so that it can re-sort it etc
+      const updatedEvent = new Event('filtered');
+      this.$refs.wrapper.dispatchEvent(updatedEvent);
+    })
+  }
+}
+</script>

package/src/foundations/Icon/Icon.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg class="icon">
+    <title>{{id}}</title>
+    <use :xlink:href="'#icon-'+id+'-bg'" class="icon__bg"></use>
+    <use :xlink:href="'#icon-'+id+'-fill'" class="icon__fill"></use>
+    <use :xlink:href="'#icon-'+id+'-outline'" class="icon__outline"></use>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'Icon',
+  props: {
+    id: {
+      type: String,
+      required: false,
+      default: 'email'
+    }
+  }
+}
+</script>

package/src/foundations/Icon/README.md

@@ -0,0 +1,11 @@
+### Usage
+
+```
+<Icon id="email"></Logo>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| id | String | property | This property declares which icon to choose from. See icon listing. |

package/src/foundations/Logo/Logo.vue

@@ -0,0 +1,39 @@
+<template>
+  <div :class="className">
+    <svg>
+      <title>iam {{id}}</title>
+      <use :xlink:href="path+src"></use>
+    </svg>
+    <span v-if="desc" v-html="desc"></span>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Logo',
+  props: {
+    id: {
+      type: String,
+      required: false,
+      default: 'property'
+    },
+    path: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    desc: {
+      type: String
+    }
+  },
+  computed: {
+    src: function () {
+      // `this` points to the vm instance
+      return '#logo-' + this.id
+    },
+    className: function () {
+      // `this` points to the vm instance
+      return 'brand brand--' + this.id
+    }
+  }
+}
+</script>

package/src/foundations/Logo/README.md

@@ -0,0 +1,20 @@
+### Usage
+
+```
+<Logo id="property" desc="the founders<br/>of iamsold"></Logo>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| id | String | property | This property declares which logo to choose from. |
+| desc | String | | Optional description will be added to the right of logo. For eaxmple 'the founders of iamsold' can be added to the right of the IAM property logo. |
+
+### ID Options
+- property
+- sold
+- medwaylaw
+- compliance
+- movebutler
+- key

package/src/foundations/YoutubeVideo/README.md

@@ -0,0 +1,11 @@
+### Usage
+
+```
+<YoutubeVideo video="lROFZaJcVug" ></YoutubeVideo>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| video | String | property | Video id from youtube |

package/src/foundations/YoutubeVideo/YoutubeVideo.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="youtube-embed ratio ratio-16x9" ref="wrapper">
+      <a :href="`https://www.youtube.com/watch?v=${video}`" target="_blank" title="Investments Video" :data-id="video">
+        <img :src="`https://img.youtube.com/vi/${video}/maxresdefault.jpg`" alt="">
+        <span class="btn btn-secondary">Play Video</span>
+      </a>
+  </div>
+</template>
+<script>
+import youtubeVideo from '../../../assets/js/modules/youtubevideo.js'
+
+export default {
+  name: 'YoutuveVideo',
+  props: {
+    video: {
+      type: String,
+      required: true
+    }
+  },
+  mounted(){
+    new youtubeVideo(this.$refs.wrapper);
+  }
+}
+</script>

package/src/helpers/strings.js

@@ -0,0 +1,12 @@
+export const ucfirst = (str) => str.charAt(0).toUpperCase() + str.slice(1)
+export const ucwords = (str) => str.split(' ').map(s => ucfirst(s)).join(' ')
+export const unsnake = (str) => str.replace(/_/g, ' ')
+export const snake = (str) => str.replace(/ /g, '_')
+export const safeID = function(str){
+
+  str = str.toLowerCase();
+  str = snake(str);
+  str = str.replace(/\W/g,'');
+
+  return str;
+}

package/src/index.js

@@ -1,6 +1,21 @@
-export { default as KeyFact } from './components/KeyFacts/KeyFact.vue'
-export { default as KeyFactGroup } from './components/KeyFacts/KeyFactGroup.vue'
-export { default as KeyInformation } from './components/KeyInformation/KeyInformation.vue'
-export { default as PropertyTaskIntro } from './components/PropertyTaskIntro/PropertyTaskIntro.vue'
-export { default as TaskTitle } from './components/TaskTitle/TaskTitle.vue'
-export { default as VendorTable } from './components/VendorTable/VendorTable.vue'
+// Foundations
+export { default as Icon } from './foundations/Icon/Icon.vue'
+export { default as Logo } from './foundations/Logo/Logo.vue'
+// Elements
+export { default as Table } from './elements/Table/Table.vue'
+export { default as Input } from './elements/Input/Input.vue'
+// Components
+export { default as Accordion } from './components/Accordion/Accordion.vue'
+export { default as Banner } from './components/Banner/Banner.vue'
+export { default as Card } from './components/Card/Card.vue'
+export { default as CardDeck } from './components/CardDeck/CardDeck.vue'
+export { default as Carousel } from './components/Carousel/Carousel.vue'
+export { default as Header } from './components/Header/Header.vue'
+export { default as Testimonial } from './components/Testimonial/Testimonial.vue'
+export { default as PropertySearchbar } from './components/PropertySearchbar/PropertySearchbar.vue'
+export { default as Nav } from './components/Nav/Nav.vue'
+export { default as Drawer } from './components/Drawer/Drawer.vue'
+export { default as Modal } from './components/Modal/Modal.vue'
+
+export { default as Tabs } from './components/Tabs/Tabs.vue'
+export { default as Tab } from './components/Tabs/Tab.vue'