@iamproperty/components 1.0.13 → 2.2.0

package/src/components/Carousel/README.md

@@ -0,0 +1,20 @@
+### Usage
+
+```
+<Carousel :items="items" type="card"></Carousel>
+```
+
+### Properties
+
+**The carousel props inherit the card deck props** - this is so that when we use cards in the carousel we can still pass the same options.
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| type  | String | - | Can be used to indicate that cards should be displayed in the carousel by giving the value 'card'  |
+| colclass  | String | - | Pass utility classes to the columns in the carousel. For example 'd-flex align-items-center' will align the items n the middle. |
+
+### Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
+| default | - | Will display before the carousel |

package/src/components/Chart/Chart.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="container" ref="wrapper">
+    <slot></slot>
+    <figure class="chart__wrapper">
+      <figcaption v-html="caption"></figcaption>
+    <div :class="`chart__key chart__key--${type} h5`" role="presentation">
+      <div :key="index" v-for="(item,index) in fields" class="key">{{item.key}}</div>
+    </div>
+
+    <div :class="`chart chart--${type}`" ref="chart">
+      
+      <div class="chart__yaxis" role="presentation">
+        <div :key="index" v-for="(point,index) in yaxis" :style="`--value: ${point.value};--percent:${((point.value-min)/(max-min))*100}%;`" class="axis__point">
+          <span>{{point.display}}</span>
+        </div>
+      </div>
+      <Table v-bind="$props">
+
+        <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 v-html="drawLines()" class="lines" v-if="type == 'line'"></span>
+      </Table>
+      <div v-html="drawPie()" class="pies" v-if="type == 'pie'"></div>
+    </div>
+    </figure>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/_func.scss";
+@import "../../../assets/sass/components/charts.scss";
+</style>
+
+<script>
+import { ucfirst, unsnake } from '../../helpers/strings'
+import Table from '@/elements/Table/Table.vue'
+
+export default {
+  name: 'Tabs',  
+  components: {
+    Table
+  },
+  props: {
+    type: {
+      type: String,
+      required: false,
+      default: 'bar'
+    },
+    caption: {
+      type: String,
+      required: false
+    },
+    max: {
+      type: Number,
+      required: true
+    },
+    min: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    yaxis: {
+      type: Array,
+      required: false
+    },
+    items: {
+      type: Array,
+      required: true
+    },
+    fields: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    drawLines (){
+      return () => {
+        
+        let lines = Array();
+        let spacer = 200/(Object.keys(this.items).length - 1);
+        const max = this.max - this.min;
+        
+        // Creates the lines array from the fields array
+        this.fields.forEach((field, index) => {
+        
+          if(index != 0){
+
+            lines[index-1] = '';
+          }
+        });
+        
+        // populate the lines array from the items array
+        this.items.forEach((item, index) => {
+        
+          Object.keys(item).forEach((key, subindex) => {
+          
+            if(subindex != 0){
+            
+              let value = item[key]
+
+              value = value.replace('£','');
+              value = value.replace('%','');
+              value = Number.parseFloat(value) - this.min;
+
+              const percent = (value/max) * 100;
+              let command = index == 0 ? 'M' : 'L';
+              
+              lines[subindex-1] += `${command} ${spacer * index} ${100-percent} `;
+            }
+          });
+        });
+
+        // Create the line strings
+        let returnString = '';
+
+        lines.forEach((line, index) => {
+        
+          returnString += `
+<svg viewBox="0 0 200 100" class="line" preserveAspectRatio="none">
+  <path fill="none" d="${line}"></path>
+</svg>`
+        });
+
+        return returnString;
+      }
+    },
+    drawPie (){
+      return () => {
+
+        let returnString = '';
+
+
+        this.items.forEach((item, index) => {
+          
+          let paths = '';
+          let tooltips = '';
+
+          let cumulativePercent = 0;
+
+          function getCoordinatesForPercent(percent) {
+            const x = Math.cos(2 * Math.PI * percent);
+            const y = Math.sin(2 * Math.PI * percent);
+            return [x*100, y*100];
+          }
+
+          let total = 0;
+
+          let titleKey = Object.keys(item)[0]
+          let title = item[titleKey]
+
+          Object.keys(item).forEach((key, subindex) => {
+
+            if(subindex != 0){
+              let value = item[key]
+
+              value = value.replace('£','');
+              value = value.replace('%','');
+              value = Number.parseInt(value);
+
+              total += value;
+            }
+          });
+
+          Object.keys(item).forEach((key, subindex) => {
+          
+            
+            if(subindex != 0){
+            
+              let value = item[key]
+
+              value = value.replace('£','');
+              value = value.replace('%','');
+              value = Number.parseInt(value);
+
+              let percent = value/total;
+            
+              //lines[subindex-1] += `${command} ${spacer * index} ${100-percent} `;
+              const [startX, startY] = getCoordinatesForPercent(cumulativePercent);
+                
+                // each slice starts where the last slice ended, so keep a cumulative percent
+                cumulativePercent += percent;
+                
+                const [endX, endY] = getCoordinatesForPercent(cumulativePercent);
+
+                // if the slice is more than 50%, take the large arc (the long way around)
+                const largeArcFlag = percent > .5 ? 1 : 0;
+
+                // create an array and join it just for code readability
+                const pathData = [
+                  `M ${startX} ${startY}`, // Move
+                  `A 100 100 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
+                  `L 0 0`, // Line
+                ].join(' ');
+
+              paths += `<path d="${pathData}"></path>`;
+              tooltips += `<foreignObject x="-70" y="-70" width="140" height="140" style="transform: rotate(90deg)"><div><span class="h5 mb-0">${ucfirst(unsnake(title))}<br/> ${ucfirst(unsnake(key))}<br/> ${item[key]}</span></div></foreignObject>`;
+            }
+          });
+
+          returnString += `<div class="pie"><svg viewBox="-105 -105 210 210" style="transform: rotate(-90deg)" preserveAspectRatio="none">${paths}<foreignObject x="-70" y="-70" width="140" height="140" style="transform: rotate(90deg)"><div><span class="h5 mb-0">${title}</span></div></foreignObject>${tooltips}</svg></div>`
+
+        });
+
+
+        return returnString;
+
+      }
+    }
+  },
+  mounted(){
+    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 chart = this.$refs.chart;
+      const max = this.max - this.min;
+
+      Array.from(chart.querySelectorAll('tbody tr')).forEach((tr, index) => {
+
+        let group = tr.querySelector('td:first-child').innerHTML;
+
+        Array.from(tr.querySelectorAll('td[data-numeric]:not([data-numeric="0"]):not(:first-child)')).forEach((td, index) => {
+          
+          const value = Number.parseFloat(td.getAttribute('data-numeric'));
+          let percent = ((value - this.min)/(max)) * 100;
+          const content = td.innerHTML;
+          const label = td.getAttribute('data-label');
+          let bottom = 0;
+
+          // If the value is negative the position below the 0 line
+          if(this.min < 0){
+            bottom = Math.abs((this.min)/(max)*100);
+            if(value < 0){
+              bottom = bottom - percent;
+            }
+          }
+          td.setAttribute("style",`--bottom:${bottom}%;--percent:${percent}%;`);
+
+          td.innerHTML = `<span data-group="${group}" data-label="${label}">${content}</span>`;
+        });
+      });
+    })
+  }
+}
+</script>

package/src/components/Chart/README.md

@@ -0,0 +1,18 @@
+### Usage
+
+```
+<Chart :max="100" :min="0" :fields="fields" :items="items" :yaxis="yaxis"></Chart>
+```
+
+###  Properties
+
+**The charts props inherit the table props** - As charts are an extension of the tables.
+
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| type  | String | bar | Changes the type of chart shown (bar, line or pie) or by passing none a table is shown. |
+| caption  | String | - | Optional but recommended for accessibility concerns. Describes and summarizes the chart and the data inside it. |
+| max  | Number | - | Required numeric value to be used to work out the size/position of the chart elements. |
+| min  | Number | 0 | Optional (deaults to 0) numeric value to be used to work out the size/position of the chart elements. |
+| yaxis  | Array | - | Array of labels to be shown along the y-axis |

package/src/components/Drawer/Drawer.vue

@@ -0,0 +1,54 @@
+<template>
+  <div ref="wrapper">
+    <input type="checkbox" name="showDrawer" id="showDrawer" class="d-none">
+      <div class="drawer__btn pb-0">
+        <div class="container text-end pb-0">
+          <label for="showDrawer" class="btn btn-secondary me-0">{{label}}</label>
+        </div>
+      </div>
+      <div class="drawer" id="drawer" ref="drawer">
+        <div class="container text-end pb-0">
+          <label for="showDrawer" class="btn btn-tertiary mb-0 me-0 py-1 px-2"><span class="visually-hidden">Close</span>&#x2715;</label>
+        </div>
+        <slot></slot>
+      </div>
+      <hr id="drawer-end" />
+  </div>
+</template>
+
+
+<style lang="scss">
+@import "../../../assets/sass/_func.scss";
+@import "../../../assets/sass/components/drawer.scss";
+</style>
+
+<script>
+import drawer from '../../../assets/js/modules/drawer.js'
+
+export default {
+  name: 'Header',
+  props: {
+    label: {
+      type: String,
+      required: true
+    }
+  },
+  mounted(){
+
+    this.$nextTick(function () {
+      
+      let element = this.$refs.wrapper;
+      
+      const fragment = document.createDocumentFragment();
+      Array.from(element.childNodes).forEach(child => fragment.appendChild(child));
+      element.parentNode.insertBefore(fragment, element);
+      element.parentNode.removeChild(element);
+    
+      this.$nextTick(function () {
+        
+        drawer(this.$refs.drawer);
+      })
+    })
+  },
+}
+</script>

package/src/components/Drawer/README.md

@@ -0,0 +1,23 @@
+### Usage
+
+```
+<Drawer label="Open drawer">
+  <div class="container">
+    <h2>Drawer contentent</h2>
+  </div>
+</Drawer>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| label | String | - | Required text for the button |
+
+
+
+### Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
+| default | - | Will display within the drawer |

package/src/components/Header/Header.vue

@@ -0,0 +1,39 @@
+<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>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/_func.scss";
+@import "../../../assets/sass/components/header.scss";
+</style>
+
+<script>
+export default {
+  name: 'Header',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    image: {
+      type: String,
+      required: false
+    }
+  }
+}
+</script>

package/src/components/Header/README.md

@@ -0,0 +1,28 @@
+### Usage
+
+```
+<Header title="Page title" :image="require('../../assets/code.jpeg')">
+  <template v-slot:breadcrumb>
+    <ul class="breadcrumb">
+      <li><a href="/">Home</a></li>
+      <li><a href="/top">Top level</a></li>
+    </ul>
+  </template>
+  <p>Page description</p>
+</Header>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| title | String | - | Required |
+| image | String | - | Optional image url to display in the background |
+
+
+### Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
+| default | - | Will display underneath the heading inside of the white box |
+| breadcrumb | - | An optional space to add a breadcrumb trail list. |

package/src/components/Modal/Modal.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="modal" :id="id" role="dialog" modal="true" ref="modal">
+    <a :href="`#${returnid?returnid:''}`" tabindex="-1"><span class="visually-hidden">Close</span></a>
+    <div class="modal__outer">
+      <a :href="`#${returnid?returnid:''}`" class="btn btn-tertiary py-1 px-2"><span class="visually-hidden">Close</span>✕</a>
+      <div class="modal__inner">
+        <slot></slot>
+      </div>
+    </div>
+    <button class="modal__dock--left btn btn-prev" tabindex="-1">Left</button>
+    <button class="modal__dock--right btn btn-next" tabindex="-1">Right</button>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/_func.scss";
+@import "../../../assets/sass/components/modal.scss";
+</style>
+
+<script>
+import modal from '../../../assets/js/modules/modal.js'
+
+export default {
+  name: 'Modal',
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    returnid: {
+      type: String,
+      default: 'close',
+      required: false
+    }
+  },
+  mounted(){
+
+    this.$nextTick(function () {
+      
+      modal(this.$refs.modal);
+    })
+  }
+}
+</script>

package/src/components/Modal/README.md

@@ -0,0 +1,20 @@
+### Usage
+
+```
+<Modal id="modal">
+  <!-- content -->
+</Modal>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| id | String | - | Required |
+| returnid | String | close | Override the default id so that it will anchor to a specific location on the page. |
+
+### Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
+| default | - | Will display within the modal |

package/src/components/Nav/Nav.vue

@@ -0,0 +1,129 @@
+<template>
+  <nav :class="`nav${hasSecondarySlot?` has-secondary`:''}`" ref="wrapper">
+
+    <input type="checkbox" name="showMenu" id="showMenu" class="d-none" />
+    <input type="checkbox" name="showSearch" id="showSearch" class="d-none" />
+
+    <div class="nav__inner">
+      <div class="container">
+        <div class="row">
+          <div class="col mw-md-fit-content nav__logo">
+            <a href="/" class="text-decoration-none mb-0">
+              <Logo :id="logo" :path="logopath" :desc="logotext" class="pb-0"></Logo>
+            </a>
+          </div>
+
+          <div class="col mw-fit-content nav__search-btn flex-row align-items-center" v-if="hasSearchSlot">
+            <label for="showSearch">
+              <svg class="icon" viewBox="0 0 32 32">
+                <title>Search</title>
+                <ellipse cx="14.92" cy="13.81" rx="11.92" ry="11.81" class="icon__outline" />
+                <line x1="22.68" y1="22.75" x2="30" y2="30" class="icon__outline" />
+              </svg>
+            </label>
+          </div>
+
+          <div class="col mw-fit-content d-md-none flex-row align-items-center nav__menu-btn">
+            <label for="showMenu">Menu</label>
+          </div>
+
+          <div class="col-12 col-md nav__menu ms-auto flex-row align-items-center">
+            <slot></slot>
+          </div>
+
+          <div class="col-12 col-md nav__btn mw-md-fit-content flex-row align-items-center" v-if="btnlink">
+            <a :href="btnlink" class="btn me-0" v-html="btntext"></a>
+          </div>
+
+
+        </div>
+      </div>
+      <div class="nav__menu--secondary bg-primary" v-if="hasSecondarySlot">
+        <div class="container">
+          <slot name="secondary"></slot>
+        </div>
+      </div>
+      <div class="nav__menu--search" v-if="hasSearchSlot">
+        <div class="bg-gradient pt-4">
+          <div class="container">
+            <slot name="search"></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    
+  </nav>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/_func.scss";
+//@import "../../../node_modules/bootstrap/scss/nav";
+@import "../../../assets/sass/components/nav.scss";
+</style>
+
+<script>
+import nav from '../../../assets/js/modules/nav.js'
+import Logo from '../../foundations/Logo/Logo.vue'
+
+export default {
+  components: {
+    Logo
+  },
+  name: 'Nav',
+  props: {
+    logo: {
+      type: String,
+      required: false
+    },
+    logotext: {
+      type: String,
+      required: false
+    },
+    logopath: {
+      type: String,
+      required: false
+    },
+    search: {
+      type: String,
+      required: false
+    },
+    btnlink: {
+      type: String,
+      required: false
+    },
+    btntext: {
+      type: String,
+      required: false
+    }
+  },
+  data () {
+    return {
+      locationSave: ''
+    }
+  },
+  methods: {
+    subIsActive (input) {
+      const paths = Array.isArray(input) ? input : [input]
+      return paths.some(path => {
+        return this.$route.path.indexOf(path) === 0 // current path starts with this path string
+      })
+    }
+  },
+  computed: {
+    hasSecondarySlot() {
+      return !!this.$slots.secondary
+    },
+    hasSearchSlot() {
+      return !!this.$slots.search
+    }
+  },
+  mounted(){
+
+    this.$nextTick(function () {
+      
+      nav(this.$refs.wrapper);
+    })
+  }
+}
+</script>

package/src/components/Nav/README.md

@@ -0,0 +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 |
+| search | - | Populates the search featured area area |