@iamproperty/components 7.0.0 → 7.1.0--beta2

package/src/components/BarChart/BarChart.vue

@@ -5,21 +5,19 @@
 </template>
 
 <script>
-export default {
-  name: 'Barchart',
-  created(){
-
-    this.$nextTick(function () {
-      
-      import(`../../../assets/js/components/barchart/barchart.component.min.js`).then(module => {
-
-        if (!window.customElements.get(`iam-barchart`))
-          window.customElements.define(`iam-barchart`, module.default);
-
-      }).catch((err) => {
-        console.log(err.message);
+  export default {
+    name: 'Barchart',
+    created() {
+      this.$nextTick(function () {
+        import(`../../../assets/js/components/barchart/barchart.component.min.js`)
+          .then((module) => {
+            if (!window.customElements.get(`iam-barchart`))
+              window.customElements.define(`iam-barchart`, module.default);
+          })
+          .catch((err) => {
+            console.log(err.message);
+          });
       });
-    })
-  }
-}
+    },
+  };
 </script>

package/src/components/Card/Card.vue

@@ -5,21 +5,18 @@
 </template>
 
 <script>
-export default {
-  name: 'Card',
-  created(){
-
-    this.$nextTick(function () {
-      
-      import(`../../../assets/js/components/card/card.component.min.js`).then(module => {
-
-        if (!window.customElements.get(`iam-card`))
-          window.customElements.define(`iam-card`, module.default);
-
-      }).catch((err) => {
-        console.log(err.message);
+  export default {
+    name: 'Card',
+    created() {
+      this.$nextTick(function () {
+        import(`../../../assets/js/components/card/card.component.min.js`)
+          .then((module) => {
+            if (!window.customElements.get(`iam-card`)) window.customElements.define(`iam-card`, module.default);
+          })
+          .catch((err) => {
+            console.log(err.message);
+          });
       });
-    })
-  }
-}
+    },
+  };
 </script>

package/src/components/Card/README.md

@@ -10,15 +10,15 @@ The card component needs to be wrapped with a link or a button, this is required
 
 **Properties**
 
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| data-total | Int | - | Optional total number , usually use on the filter card type |
-| data-image | image url | - | Optional image url to create a card header with an image as its background |
+| Option     | Type      | Default Value | Description                                                                |
+| ---------- | --------- | ------------- | -------------------------------------------------------------------------- |
+| data-total | Int       | -             | Optional total number , usually use on the filter card type                |
+| data-image | image url | -             | Optional image url to create a card header with an image as its background |
 
 **Class modifiers**
 
-- Adding a class of **.card--filter** will implement the filter card design. 
-- Adding a class of **.card--record** will implement the record card design. 
-- Adding a class of **.border-o** will remove the box-shadow of the card and make some minor sizing adjustments. 
+- Adding a class of **.card--filter** will implement the filter card design.
+- Adding a class of **.card--record** will implement the record card design.
+- Adding a class of **.border-o** will remove the box-shadow of the card and make some minor sizing adjustments.
 - Adding a class like **.colour-warning** will update the colour of the left berder for the card. The theme colours will be avialable to use.
-- Adding a class of **.card--flag** will add a card to the top right corner. 
+- Adding a class of **.card--flag** will add a card to the top right corner.

package/src/components/Carousel/Carousel.vue

@@ -1,29 +1,26 @@
 <template>
   <!-- Custom element -->
   <iam-carousel>
-    
     <slot></slot>
   </iam-carousel>
 </template>
 
 <script>
-// Load web components
+  // Load web components
 
-export default {
-  name: 'Header',
-  mounted(){
-
-    this.$nextTick(function () {
-      
-      import(`../../../assets/js/components/carousel/carousel.component.min.js`).then(module => {
-
-        if (!window.customElements.get(`iam-carousel`))
-          window.customElements.define(`iam-carousel`, module.default);
-
-      }).catch((err) => {
-        console.log(err.message);
+  export default {
+    name: 'Header',
+    mounted() {
+      this.$nextTick(function () {
+        import(`../../../assets/js/components/carousel/carousel.component.min.js`)
+          .then((module) => {
+            if (!window.customElements.get(`iam-carousel`))
+              window.customElements.define(`iam-carousel`, module.default);
+          })
+          .catch((err) => {
+            console.log(err.message);
+          });
       });
-    })
-  }
-}
+    },
+  };
 </script>

package/src/components/Carousel/README.md

@@ -8,13 +8,13 @@
 
 **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. |
+| 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 |
+| Option  | Default Value | Description                      |
+| ------- | ------------- | -------------------------------- |
+| default | -             | Will display before the carousel |

package/src/components/Chart/Chart.spec.js

@@ -1,8 +1,7 @@
-import { mount } from '@vue/test-utils'
-import Chart from './Chart.vue'
+import { mount } from '@vue/test-utils';
+import Chart from './Chart.vue';
 
 describe('Chart component', () => {
-
   const test = mount(Chart, {
     propsData: {
       max: 100,
@@ -10,80 +9,69 @@ describe('Chart component', () => {
       yaxis: [
         {
           value: 0,
-          display: '£0'
+          display: '£0',
         },
         {
           value: 50,
-          display: '£50'
+          display: '£50',
         },
         {
           value: 100,
-          display: '£100'
-        }
-      ],
-      fields: [
-        { key: 'year' },
-        { key: 'Growth' },
-        { key: 'Growth2' }
+          display: '£100',
+        },
       ],
+      fields: [{ key: 'year' }, { key: 'Growth' }, { key: 'Growth2' }],
       items: [
         {
           year: '2011',
           growth: '£50.0',
-          growth2: '£50.10'
+          growth2: '£50.10',
         },
         {
           year: '2012',
           growth: '£75.00',
-          growth2: '£50.10'
+          growth2: '£50.10',
         },
         {
           year: '2013',
           growth: '£45.00',
-          growth2: '£57.10'
+          growth2: '£57.10',
         },
         {
           year: '2014',
           growth: '£35.00',
-          growth2: '£80.10'
-        }
-      ]
-    }
-  })
+          growth2: '£80.10',
+        },
+      ],
+    },
+  });
 
   // On load render a table
   it('renders a thead', () => {
-
-    expect(test.find('thead').exists()).toBe(true)
-  })
+    expect(test.find('thead').exists()).toBe(true);
+  });
 
   it('renders a tbody', () => {
-
-    expect(test.find('tbody').exists()).toBe(true)
-  })
+    expect(test.find('tbody').exists()).toBe(true);
+  });
 
   // Render a bar chart
   it('renders a y-axis', () => {
-
-    expect(test.find('.chart__yaxis').exists()).toBe(true)
-  })
+    expect(test.find('.chart__yaxis').exists()).toBe(true);
+  });
 
   it('renders guidelines', () => {
-
-    expect(test.find('.chart__guidelines').exists()).toBe(true)
-  })
-
+    expect(test.find('.chart__guidelines').exists()).toBe(true);
+  });
 
   it('Numeric value and percent value is added to the table cells', () => {
-
-    expect(test.html()).toContain('<td data-label="Growth" data-numeric="50" style="--bottom:0%;--percent:50%;"><span data-group="2011" data-label="Growth">£50.0</span></td>')
-  })
-
-})
-
+    expect(test.html()).toContain(
+      '<td data-label="Growth" data-numeric="50" style="--bottom:0%;--percent:50%;"><span data-group="2011" data-label="Growth">£50.0</span></td>'
+    );
+  });
+});
 
 describe('Line Chart component', () => {
-
   const test = mount(Chart, {
     propsData: {
       type: 'line',
@@ -92,57 +80,51 @@ describe('Line Chart component', () => {
       yaxis: [
         {
           value: 0,
-          display: '£0'
+          display: '£0',
         },
         {
           value: 50,
-          display: '£50'
+          display: '£50',
         },
         {
           value: 100,
-          display: '£100'
-        }
-      ],
-      fields: [
-        { key: 'year' },
-        { key: 'Growth' },
-        { key: 'Growth2' }
+          display: '£100',
+        },
       ],
+      fields: [{ key: 'year' }, { key: 'Growth' }, { key: 'Growth2' }],
       items: [
         {
           year: '2011',
           growth: '£50.0',
-          growth2: '£50.10'
+          growth2: '£50.10',
         },
         {
           year: '2012',
           growth: '£75.00',
-          growth2: '£50.10'
+          growth2: '£50.10',
         },
         {
           year: '2013',
           growth: '£45.00',
-          growth2: '£57.10'
+          growth2: '£57.10',
         },
         {
           year: '2014',
           growth: '£35.00',
-          growth2: '£80.10'
-        }
-      ]
-    }
-  })
+          growth2: '£80.10',
+        },
+      ],
+    },
+  });
 
   it('SVG line is created ', () => {
-
-    expect(test.html()).toContain('<path fill="none" d="M 0 50 L 66.66666666666667 25 L 133.33333333333334 55 L 200 65 "></path>')
-  })
-
-
-})
+    expect(test.html()).toContain(
+      '<path fill="none" d="M 0 50 L 66.66666666666667 25 L 133.33333333333334 55 L 200 65 "></path>'
+    );
+  });
+});
 
 describe('Pie Chart component', () => {
-
   const test = mount(Chart, {
     propsData: {
       type: 'pie',
@@ -151,51 +133,46 @@ describe('Pie Chart component', () => {
       yaxis: [
         {
           value: 0,
-          display: '£0'
+          display: '£0',
         },
         {
           value: 50,
-          display: '£50'
+          display: '£50',
         },
         {
           value: 100,
-          display: '£100'
-        }
-      ],
-      fields: [
-        { key: 'year' },
-        { key: 'Growth' },
-        { key: 'Growth2' }
+          display: '£100',
+        },
       ],
+      fields: [{ key: 'year' }, { key: 'Growth' }, { key: 'Growth2' }],
       items: [
         {
           year: '2011',
           growth: '£50.0',
-          growth2: '£50.10'
+          growth2: '£50.10',
         },
         {
           year: '2012',
           growth: '£75.00',
-          growth2: '£50.10'
+          growth2: '£50.10',
         },
         {
           year: '2013',
           growth: '£45.00',
-          growth2: '£57.10'
+          growth2: '£57.10',
         },
         {
           year: '2014',
           growth: '£35.00',
-          growth2: '£80.10'
-        }
-      ]
-    }
-  })
+          growth2: '£80.10',
+        },
+      ],
+    },
+  });
 
   it('SVG pie section is created ', () => {
-
-    expect(test.html()).toContain('<path d="M -100 1.2246467991473532e-14 A 100 100 0 0 1 100 -2.4492935982947064e-14 L 0 0"></path>')
-  })
-
-
-})
+    expect(test.html()).toContain(
+      '<path d="M -100 1.2246467991473532e-14 A 100 100 0 0 1 100 -2.4492935982947064e-14 L 0 0"></path>'
+    );
+  });
+});

package/src/components/Chart/Chart.vue

@@ -4,12 +4,18 @@
     <table v-if="fields">
       <thead>
         <tr>
-          <th v-for="(field) in fields" :key="field.key">{{ cellHeading(field.key) }}</th>
+          <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"></td>
+        <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"
+          ></td>
         </tr>
       </tbody>
     </table>
@@ -17,44 +23,39 @@
 </template>
 
 <script>
-import { ucfirst, unsnake } from '../../helpers/strings'
-//import iamChart from '../../../assets/ts/components/chart/chart.component.ts'
+  import { ucfirst, unsnake } from '../../helpers/strings';
+  //import iamChart from '../../../assets/ts/components/chart/chart.component.ts'
 
-export default {
-  name: 'Chart',
-  components: {
-  },
-  props: {
-    items: {
-      type: Array,
-      required: false
+  export default {
+    name: 'Chart',
+    components: {},
+    props: {
+      items: {
+        type: Array,
+        required: false,
+      },
+      fields: {
+        type: Array,
+        required: false,
+      },
     },
-    fields: {
-      type: Array,
-      required: false
-    }
-  },
-  computed: {
-    cellHeading () {
-      return (heading) => {
-        return `${ucfirst(unsnake(heading))}`
-      }
-    }
-  },
-  mounted(){
-
-    this.$nextTick(function () {
-      
-      import(`../../../assets/js/components/chart/chart.component.js`).then(module => {
-
-        if (!window.customElements.get(`iam-chart`))
-          window.customElements.define(`iam-chart`, module.default);
-
-      }).catch((err) => {
-        console.log(err.message);
+    computed: {
+      cellHeading() {
+        return (heading) => {
+          return `${ucfirst(unsnake(heading))}`;
+        };
+      },
+    },
+    mounted() {
+      this.$nextTick(function () {
+        import(`../../../assets/js/components/chart/chart.component.js`)
+          .then((module) => {
+            if (!window.customElements.get(`iam-chart`)) window.customElements.define(`iam-chart`, module.default);
+          })
+          .catch((err) => {
+            console.log(err.message);
+          });
       });
-
-    })
-  }
-}
+    },
+  };
 </script>

package/src/components/Chart/README.md

@@ -4,15 +4,14 @@
 <Chart :max="100" :min="0" :fields="fields" :items="items" :yaxis="yaxis"></Chart>
 ```
 
-###  Properties
+### 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 |
+| 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/CollapsibleSideMenu/CollapsibleSideMenu.vue

@@ -5,16 +5,14 @@
 </template>
 
 <script>
-import iamCollapsibleSideMenu from '../../../assets/js/components/collapsible-side/collapsible-side.component.js'
+  import iamCollapsibleSideMenu from '../../../assets/js/components/collapsible-side/collapsible-side.component.js';
 
-if (!window.customElements.get('iam-collapsible-side'))
-  window.customElements.define('iam-collapsible-side', iamCollapsibleSideMenu);
+  if (!window.customElements.get('iam-collapsible-side'))
+    window.customElements.define('iam-collapsible-side', iamCollapsibleSideMenu);
 
-export default {
-  name: 'CollapsibleSideMenu',
-  props: {
-  },
-  mounted(){
-  }
-}
+  export default {
+    name: 'CollapsibleSideMenu',
+    props: {},
+    mounted() {},
+  };
 </script>

package/src/components/CollapsibleSideMenu/README.md

@@ -1,6 +1,6 @@
 ```
 <CollapsibleSideMenu data-title="Configuration">
-        
+
   <div slot="menu">
     <label for="test1">Active branch</label>
     <select class="form-select" name="test1" id="test1">