@iamproperty/components 2.7.7 → 2.9.0

package/src/elements/Table/README.md

@@ -1,62 +1,62 @@
-### 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 |
-| headingclass | string | - | Add a class to the table row within the thead, used to add a background or change test colour. |
-
-### 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);
-
-// Re-ordered via drag and drop
-this.$el.addEventListener('reordered', function (e) { 
-      
-  console.log('Table re-ordered')
-}, false);
-```
+### 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 |
+| headingclass | string | - | Add a class to the table row within the thead, used to add a background or change test colour. |
+
+### 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);
+
+// Re-ordered via drag and drop
+this.$el.addEventListener('reordered', function (e) { 
+      
+  console.log('Table re-ordered')
+}, false);
+```

package/src/elements/Table/Table.vue

@@ -1,116 +1,126 @@
-<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 :class="headingclass">
-          <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" :data-row-id="value['rowid']">
-          <td :key="cellIndex" v-for="(cellValue,cellIndex) in Object.fromEntries(Object.entries(value).filter(([key]) => key !== 'rowid'))" 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
-    },
-    headingclass: {
-      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>
+<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 :class="headingclass">
+          <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" :data-row-id="value['rowid']">
+          <td :key="cellIndex" v-for="(cellValue,cellIndex) in Object.fromEntries(Object.entries(value).filter(([key]) => key !== 'rowid'))" 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'
+
+let numericValue = function(value) {
+
+  value = value.replace('£','')
+  value = value.replace('%','')
+
+  if (Number.isNaN(Number.parseFloat(value))) {
+    return 0;
+  }
+
+  return Number.parseFloat(value)
+}
+
+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
+    },
+    headingclass: {
+      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 = numericValue(value);
+        return 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) => {
+
+        let rowID = row['rowid'] ? row['rowid'] : '';
+        row = Object.fromEntries(Object.entries(row).filter(([key]) => key !== 'rowid'));
+
+        tbodyHTML += `<tr data-row-id="${rowID}">${ Object.keys(row).map(col =>  `<td data-label="${ucfirst(unsnake(col))}" data-numeric="${numericValue(row[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

@@ -1,24 +1,24 @@
-<template>
-  <svg class="icon">
-    <title>{{id}}</title>
-    <use :xlink:href="path+'#icon-'+id"></use>
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'Icon',
-  props: {
-    id: {
-      type: String,
-      required: false,
-      default: 'email'
-    },
-    path: {
-      type: String,
-      required: false,
-      default: '/svg/icons.svg'
-    }
-  }
-}
-</script>
+<template>
+  <svg class="icon">
+    <title>{{id}}</title>
+    <use :xlink:href="path+'#icon-'+id"></use>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'Icon',
+  props: {
+    id: {
+      type: String,
+      required: false,
+      default: 'email'
+    },
+    path: {
+      type: String,
+      required: false,
+      default: '/svg/icons.svg'
+    }
+  }
+}
+</script>

package/src/foundations/Icon/README.md

@@ -1,11 +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. |
+### 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

@@ -1,39 +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: '/svg/logo.svg'
-    },
-    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>
+<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: '/svg/logo.svg'
+    },
+    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

@@ -1,20 +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
+### 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

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

package/src/foundations/YoutubeVideo/YoutubeVideo.vue

@@ -1,24 +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>
+<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

@@ -1,12 +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;
-}
+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;
+}