@iamproperty/components 3.4.5 → 3.4.7

package/src/components/Carousel/Carousel.vue

@@ -32,17 +32,8 @@
 
 <script>
 import Card from '../Card/Card.vue'
-import CardDeck from '../CardDeck/CardDeck.vue'
 import carousel from '../../../assets/ts/modules/carousel'
 
-// Inherit the card deck props
-let cardDeckProps = CardDeck.props;
-// Update the default values
-cardDeckProps.gap.default = 0
-cardDeckProps.cols.default = 1
-cardDeckProps.smcols.default = 2
-cardDeckProps.mdcols.default = 4
-
 
 export default {
   components: {
@@ -55,7 +46,55 @@ export default {
     }
   },
   props: {
-    ...cardDeckProps,
+    items: {
+      type: Array,
+      required: false
+    },
+    cols: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    smcols: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    mdcols: {
+      type: Number,
+      required: false,
+      default: 3
+    },
+    gap: {
+      type: Number,
+      required: false,
+      default: 4
+    },
+    cardtype: {
+      type: String,
+      required: false
+    },
+    cardclass: {
+      type: String,
+      required: false
+    },
+    btntype: {
+      type: String,
+      required: false
+    },
+    titleclass: {
+      type: String,
+      required: false
+    },
+    ctatext: {
+      type: String,
+      required: false
+    },
+    hidectatext: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     colclass: {
       type: String,
       required: false

package/src/components/Chart/Chart.vue

@@ -14,14 +14,29 @@
           <span>{{point.display}}</span>
         </div>
       </div>
-      <Table v-bind="$props">
+
+
+      <div class="table__wrapper">
+
+      <table v-if="fields">
+        <thead>
+          <tr>
+            <th v-for="(field) in fields" :key="field.key">{{ 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>
 
         <div class="chart__guidelines" role="presentation">
           <div :key="index" v-for="(point,index) in yaxis" :data-value="point.value" :style="`--percent:${((point.value-min)/(max-min))*100}%;`" class="guideline">
           </div>
         </div>
         <span class="lines" v-if="type == 'line'"></span>
-      </Table>
+      </div>
       <div class="pies" v-if="type == 'pie'"></div>
     </div>
     </figure>
@@ -34,13 +49,26 @@
 
 <script>
 import { ucfirst, unsnake } from '../../helpers/strings'
-import Table from '../../components/Table/Table.vue'
 import chartModule from '../../../assets/ts/modules/chart'
 
+let numericValue = function(value) {
+
+  if(typeof(value) != "string")
+    return value;
+
+  value = value.replace('£','')
+  value = value.replace('%','')
+
+  if (Number.isNaN(Number.parseFloat(value))) {
+    return 0;
+  }
+
+  return Number.parseFloat(value);
+}
+
 export default {
   name: 'Chart',
   components: {
-    Table
   },
   props: {
     type: {
@@ -74,6 +102,20 @@ export default {
       required: true
     }
   },
+  computed: {
+    cellHeading () {
+      return (heading) => {
+        return `${ucfirst(unsnake(heading))}`
+      }
+    },
+    numericValue () {
+      return (value) => {
+
+        value = numericValue(value);
+        return value;
+      }
+    }
+  },
   mounted(){
     this.$nextTick(function () {
 

package/src/components/Filterlist/Filterlist.vue

@@ -0,0 +1,20 @@
+<template>
+  <!-- Custom element -->
+  <iam-filterlist>
+    <slot></slot>
+  </iam-filterlist>
+</template>
+
+<script>
+// Load web components
+import iamFilterlist from '../../../assets/ts/components/filterlist/filterlist.component'
+
+// Register components
+if (!window.customElements.get('iam-filterlist'))
+  window.customElements.define('iam-filterlist', iamFilterlist);
+
+
+export default {
+  name: 'Filter list',
+}
+</script>

package/src/components/Filterlist/README.md

@@ -0,0 +1,17 @@
+```
+<Filterlist>
+<ul>
+  <li>Olivia Anderson</li>
+  <li>Ethan Ramirez</li>
+  <li>Sophia Patel</li>
+  <li>Noah Jenkins</li>
+  <li>Ava Thompson</li>
+</ul>
+</Filterlist>
+```
+
+**Properties**
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| data-max-height | string | '' | Optional choice from small, medium or large control of the height of the list. Giving it a scrollable area. |

package/src/components/Header/Header.spec.js

@@ -1,9 +1,9 @@
-import { shallowMount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Header from './Header.vue'
 
 describe('Header component', () => {
 
-  const test = shallowMount(Header, {
+  const test = mount(Header, {
     propsData: {
       title: 'Page title',
       image: '/img/src/img.png'
@@ -27,7 +27,8 @@ describe('Header component', () => {
   })
 
   it('renders the image', () => {
-    expect(test.html()).toContain('<source srcset="/img/src/img.png" media="(min-width: 62em)">')
-    expect(test.html()).toContain('<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="">')
+
+    expect(test.find('iam-header').wrapperElement.shadowRoot.innerHTML).toContain('<source srcset=\"\" media=\"(min-width: 62em)\">')
+    expect(test.find('iam-header').wrapperElement.shadowRoot.innerHTML).toContain('<img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" lazy=\"\">')
   })
 })

package/src/components/Header/Header.vue

@@ -1,27 +1,21 @@
 <template>
-  <header class="header-banner">
-    <div class="container">
-      <!-- Space for a breadcrumb trail -->
-      <slot name="breadcrumb"></slot>
-      <div class="header-banner__inner">
-        <h1 v-html="title"></h1>
-        <slot></slot>
-      </div>
-    </div>
-    <picture v-if="image">
-      <!-- Actual image only loaded on desktops -->
-      <source :srcset="image" media="(min-width: 62em)">
-      <!-- Placeholder image -->
-      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" />
-    </picture>
-  </header>
+  <!-- Custom element -->
+  <iam-header class="bg-secondary" :image="image">
+    <slot name="breadcrumb"></slot>
+    <h1 v-if="title" v-html="title"></h1>
+    <slot></slot>
+  </iam-header>
 </template>
 
-<style lang="scss">
-@import "../../../assets/sass/components/header.scss";
-</style>
-
 <script>
+// Load web components
+import iamHeader from '../../../assets/ts/components/header/header.component'
+
+// Register components
+if (!window.customElements.get('iam-header'))
+  window.customElements.define('iam-header', iamHeader);
+
+
 export default {
   name: 'Header',
   props: {

package/src/components/Pagination/Pagination.vue

@@ -0,0 +1,30 @@
+<template>
+  <iam-pagination>
+  </iam-pagination>
+</template>
+
+<script>
+import iamPagination from '../../../assets/ts/components/pagination/pagination.component'
+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(){
+    
+  }
+}
+</script>

package/src/components/Pagination/README.md

@@ -0,0 +1,11 @@
+```
+<Pagination data-total="12"></Pagination>
+```
+
+**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 |

package/src/components/Snapshot/Snapshot.vue

@@ -6,7 +6,7 @@
 
       <a :href="value.link" v-if="value.link">View {{value.title}}</a>
       <div :class="`snapshot__item ${value.bg ? 'bg-'+value.bg : ''}`">
-        <span class="h6 snapshot__title">{{value.title}}</span>
+        <span class="lead snapshot__title">{{value.title}}</span>
         <span class="stat">{{value.number}}</span>
       </div>
     </div>

package/src/components/Table/README.md

@@ -1,62 +1,47 @@
-### Usage
-
 ```
 <Table :fields="fields" :items="items"></Table>
 ```
 
-### Properties
+**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. |
+| fields | Array | - | Table header titles |
+| data-show | int | 15 | Update how many rows can be shown per page |
+| data-filterby | string (form ID) | | Give an optional form ID to connect a form to the table and make it act like a filtering system |
+
 
-### Class modifiers
+**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;
+- Adding a class of **.table--cta** to the table component will fix the last column of the table in place (While on tablet or desktop). 
+- Adding a class of **.table--export** to the table component will create a button at the bottom of the table to export its contents out as a CSV file.
+- Adding a class of **.table--fullwidth** to the table component will prevent it from becoming a stacked view on mobile.
+- Adding a class of **.table--mh-small**,**.table--mh-medium** or **.table--mh-large** to the table component will give the table container a max height and the ability to scroll.
 
-### Make columns filterable or sortable
+**Example of items and fields**
 
-To give a column some extra functionality extra values need to be set in the data.
+**fields**
 
 ```
-fields: [
-  { 
-    key: 'name',
-    filterable: true,
-    sortable: true
-  },
-  { key: 'address' }
+[
+  {
+    key: 'col_1',
+    key: 'col_2',
+    key: 'col_3',
+    key: 'col_4',
+  }
 ]
 ```
+**items**
 
-### 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);
 ```
+[
+  {
+    col_1: 'Row content 1',
+    col_2: 'Row content 2',
+    col_3: 'Row content 3',
+    col_4: 'Row content 4',
+  }
+]
+```

package/src/components/Table/Table.spec.js

@@ -6,10 +6,10 @@ describe('Table component', () => {
   const test = mount(Table, {
     propsData: {
       fields: [
-        { key: 'name', filterable: true, sortable: true },
-        { key: 'job', filterable: true, sortable: true },
+        { key: 'name' },
+        { key: 'job' },
         { key: 'address' },
-        { key: 'emergency_contact', filterable: true, sortable: true },
+        { key: 'emergency_contact' },
         { key: 'actions' }
       ],
       items: [
@@ -40,11 +40,6 @@ describe('Table component', () => {
   })
 
   // On load
-  it('renders a div with the class of table wrapper', () => {
-
-    expect(test.classes()).toContain('table__wrapper')
-  })
-
   it('renders a thead', () => {
 
     expect(test.find('thead').exists()).toBe(true)
@@ -55,36 +50,9 @@ describe('Table component', () => {
     expect(test.find('tbody').exists()).toBe(true)
   })
 
-  it('renders a filters form when needed', () => {
-
-    expect(test.find('.table__filters').exists()).toBe(true)
-  })
-
-  it('renders a pagination form when needed', () => {
-
-    expect(test.find('.table__pagination').exists()).toBe(true)
-  })
-
-  // Events
-  it('can be sorted by name', async () => {
-
-    const firstCol = test.find('[data-sortable]')
-    expect(firstCol.html()).toContain('Name')
-
-    await firstCol.trigger('click')
-
-    let firstRowCol = test.find('tbody tr:first-child [data-label="Name"]')
-    expect(firstRowCol.html()).toContain('Andrew')
-  })
-
-  it('can be filtered by name', async () => {
-
-    const searchField = test.find('[type="search"]')
-
-    await searchField.setValue('Andrew')
-    await searchField.trigger('change')
+  it('renders a table heading', () => {
 
-    expect(test.findAll('tbody tr').length).toBe(1)
+    expect(test.find('thead th').exists()).toBe(true)
   })
 
 })

package/src/components/Table/Table.vue

@@ -1,74 +1,35 @@
 <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>
+  <iam-table >
+    <table v-if="fields">
+      <thead>
+        <tr>
+          <th v-for="(field) in fields" :key="field.key">{{ 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>
+          <td :key="cellIndex" v-for="(cellValue,cellIndex) in Object.fromEntries(Object.entries(value).filter(([key]) => key !== 'rowid'))" v-html="cellValue"></td>
         </tr>
       </tbody>
     </table>
-    <slot></slot>
-  </div>
+    <slot v-else></slot>
+  </iam-table>
 </template>
 
 <script>
+import iamTable from '../../../assets/ts/components/table/table.component'
 import { ucfirst, unsnake } from '../../helpers/strings'
-import table from '../../../assets/ts/modules/table'
-
-let numericValue = function(value) {
-
-  if(typeof(value) != "string")
-    return 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
+      required: false
     },
     fields: {
       type: Array,
-      required: true
+      required: false
     }
   },
   computed: {
@@ -76,54 +37,18 @@ export default {
       return (heading) => {
         return `${ucfirst(unsnake(heading))}`
       }
-    },
-    numericValue () {
-      return (value) => {
-
-        value = numericValue(value);
-        return value;
-      }
     }
   },
-  mounted(){
+  created(){
 
     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);
-
+      
+      if (!window.customElements.get('iam-table'))
+        window.customElements.define('iam-table', iamTable);
     })
   },
   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/components/Tabs/README.md

@@ -1,5 +1,3 @@
-### Usage
-
 ```
 <Tabs class="visualtest">
   <Tab title="Tab content 1">

package/src/components/Tabs/Tab.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="tab" v-if="show">
+  <details class="tab">
+    <summary v-html="title"></summary>
     <slot></slot>
-  </div>
+  </details>
 </template>
 
 <script>