@iamproperty/components 2.0.1 → 2.3.1

package/src/elements/Input/Input.vue

@@ -1,27 +1,27 @@
 <template>
   <div :class="wrapperClass()" ref="wrapper">
-    <label v-if="needsLabel()" :class="`form-label${labelClass?` ${labelClass}`:''}`" :for="id" v-html="displayLabel()"></label>
+    <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" />
+    <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>
+    <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;" />
+      <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;" />
+      <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">
+    <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>
     
@@ -31,14 +31,14 @@
 
     <!-- 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>
+    <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>
+    <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>
+    <p v-if="errormsg" class="invalid-feedback mb-0" v-html="errormsg"></p>
     <slot></slot>
   </div>
 </template>
@@ -66,13 +66,13 @@ export default {
     },
     label: {
       type: String,
-      required: true
+      required: false
     },
-    labelClass: {
+    labelclass: {
       type: String,
       required: false
     },
-    inputClass: {
+    inputclass: {
       type: String,
       required: false
     },
@@ -85,7 +85,7 @@ export default {
       type: String,
       required: false
     },
-    errorMsg: {
+    errormsg: {
       type: String,
       required: false
     },
@@ -215,7 +215,7 @@ export default {
       
       let element = this.$refs.wrapper;
       // Remove unnecessary divs that may get in the way of our CSS sibling selectors working
-      if(element.parentNode.classList.contains('form-check') || element.classList.length == 0){
+      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));

package/src/elements/Input/README.md

@@ -9,10 +9,10 @@
 | Option | Type | Default Value | Description |
 | ------ | ---- | ------------- | ----------- |
 | id  | String | - | Required |
-| label | String | - | Required |
-| 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. |
+| 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. |
+| 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/Table.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="table__wrapper" ref="wrapper" :data-sortBy="sortBy" :data-sort="sort" :data-show="show" :data-page="page" :data-reorder="reorder">
+  <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>
@@ -8,10 +8,11 @@
       </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)"></td>
+          <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>
 
@@ -34,7 +35,7 @@ export default {
       type: Number,
       required: false
     },
-    sortBy: {
+    sortby: {
       type: String,
       required: false
     },
@@ -56,6 +57,19 @@ export default {
       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(){

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/index.js

@@ -6,6 +6,7 @@ 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 AccordionItem } from './components/Accordion/AccordionItem.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'

package/assets/sass/elements/media.scss

@@ -1,3 +0,0 @@
-img {
-  max-width: 100%;
-}