@iamproperty/components 2.6.2 → 2.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iamproperty/components",
-  "version": "2.6.2",
+  "version": "2.7.1",
   "private": false,
   "description": "Component library for iamproperty",
   "author": {
@@ -14,6 +14,8 @@
     "build:docs": "vue-cli-service build docs/main.js",
     "compile:js": "rollup --environment BUNDLE:true --config rollup.config.js --sourcemap && terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=assets/js/scripts.bundle.js.map,includeSources,url=scripts.bundle.min.js.map\" --output assets/js/scripts.bundle.min.js assets/js/scripts.bundle.js",
     "compile:sass": "sass assets/sass/main.scss assets/css/style.min.css --style=compressed && sass assets/sass/core.scss assets/css/core.min.css --style=compressed",
+    "compile:email": "sass assets/sass/email.scss assets/css/email.min.css --style=compressed && node local_modules/email-css.js",
+    "compile:error": "sass assets/sass/error.scss assets/css/error.min.css --style=compressed && node local_modules/error-css.js",
     "dev": "npm run serve",
     "prepack": "npm run build",
     "pull-request": "npm run test:unit && npm run test:scss && npm run test:approve && npm run compile:sass && npm run compile:js && npm run audit",
@@ -47,6 +49,7 @@
     "@babel/core": "^7.16.5",
     "@babel/eslint-parser": "^7.16.5",
     "@babel/preset-env": "^7.16.5",
+    "@fullhuman/postcss-purgecss": "^4.1.3",
     "@popperjs/core": "^2.11.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^19.0.0",
@@ -72,6 +75,8 @@
     "jest-puppeteer": "^5.0.4",
     "jest-puppeteer-preset": "^5.0.4",
     "markdown-loader": "^6.0.0",
+    "postcss": "^8.4.7",
+    "postcss-css-variables": "^0.18.0",
     "puppeteer": "^10.4.0",
     "rollup": "^2.62.0",
     "rollup-plugin-istanbul": "^3.0.0",

package/src/components/Accordion/Accordion.vue

@@ -5,9 +5,7 @@
 </template>
 
 <style lang="scss">
-@import "../../../assets/sass/_func.scss";
 @import "../../../assets/sass/components/accordion.scss";
-
 </style>
 
 <script>

package/src/components/Alert/Alert.vue

@@ -8,7 +8,6 @@
 </template>
 
 <style lang="scss">
-@import "../../../assets/sass/_func.scss";
 @import "../../../assets/sass/components/alert.scss";
 </style>
 
@@ -19,7 +18,7 @@ export default {
   name: 'Alert',
   props: {
     dismissible: {
-      type: String,
+      type: String|Boolean,
       required: false,
       default: false
     },

package/src/components/CardDeck/CardDeck.vue

@@ -11,12 +11,11 @@
 </template>
 
 <style lang="scss">
-@import "../../../assets/sass/_func.scss";
 @import "../../../assets/sass/components/cardDeck.scss";
 </style>
 
 <script>
-import Card from '../Card/Card.vue'
+import Card from '../../elements/Card/Card.vue'
 
 export default {
   components: {

package/src/components/Carousel/Carousel.vue

@@ -26,13 +26,12 @@
 
 
 <style lang="scss">
-@import "../../../assets/sass/_func.scss";
 @import "../../../assets/sass/components/carousel.scss";
 </style>
 
 
 <script>
-import Card from '../Card/Card.vue'
+import Card from '../../elements/Card/Card.vue'
 import CardDeck from '../CardDeck/CardDeck.vue'
 import carousel from '../../../assets/js/modules/carousel.js'
 

package/src/components/Chart/Chart.vue

@@ -29,7 +29,6 @@
 </template>
 
 <style lang="scss">
-@import "../../../assets/sass/_func.scss";
 @import "../../../assets/sass/components/charts.scss";
 </style>
 

package/src/components/Drawer/Drawer.vue

@@ -18,7 +18,6 @@
 
 
 <style lang="scss">
-@import "../../../assets/sass/_func.scss";
 @import "../../../assets/sass/components/drawer.scss";
 </style>
 

package/src/components/Header/Header.vue

@@ -18,7 +18,6 @@
 </template>
 
 <style lang="scss">
-@import "../../../assets/sass/_func.scss";
 @import "../../../assets/sass/components/header.scss";
 </style>
 

package/src/components/Modal/Modal.vue

@@ -13,7 +13,6 @@
 </template>
 
 <style lang="scss">
-@import "../../../assets/sass/_func.scss";
 @import "../../../assets/sass/components/modal.scss";
 </style>
 

package/src/components/Nav/Nav.vue

@@ -4,10 +4,13 @@
     <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="nav__inner" v-if="isMarketplace === false">
       <div class="container">
         <div class="row">
-          <div class="col mw-md-fit-content nav__logo">
+          <div class="col mw-md-fit-content nav__logo" v-if="hasLogoSlot">
+            <slot name="logo"></slot>
+          </div>
+          <div class="col mw-md-fit-content nav__logo" v-else>
             <a href="/" class="text-decoration-none mb-0">
               <Logo :id="logo" :path="logopath" :desc="logotext" class="pb-0"></Logo>
             </a>
@@ -38,7 +41,7 @@
 
         </div>
       </div>
-      <div class="nav__menu--secondary bg-primary" v-if="hasSecondarySlot">
+      <div class="nav__menu--secondary" v-if="hasSecondarySlot">
         <div class="container">
           <slot name="secondary"></slot>
         </div>
@@ -52,23 +55,127 @@
       </div>
     </div>
 
-    
+    <div class="nav__inner" v-else>
+      <div class="container">
+        <div class="row">
+          <div class="col nav__logo">
+            <a href="/standalone/marketplace" :class="`text-decoration-none mb-0 ${logo=='property'?'current':''}`">
+              <Logo id="property" class="pb-0 pe-0"></Logo>
+            </a>
+
+            <a href="/standalone/movebutler" :class="`text-decoration-none mb-0 ${logo=='movebutler'?'current':''}`">
+              <Logo id="movebutler" class="pb-0 pe-0"></Logo>
+            </a>
+
+            <a href="/standalone/agent" :class="`text-decoration-none mb-0 ${logo=='sold'?'current':''}`">
+              <Logo id="sold" class="pb-0 pe-0"></Logo>
+            </a>
+          </div>
+
+          <div class="col mw-fit-content flex-row align-items-center nav__menu-btn">
+            <label for="showMenu">Menu</label>
+          </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 flex-row">
+        <span class="h6 text-muted">Services</span>
+
+      <a href="/standalone/marketplace" class="text-decoration-none mb-4 d-flex justify-content-between align-items-center">
+        <Logo id="property" class="pb-0 pe-0 fs-2"></Logo>
+        <span class="text-success">Active</span>
+      </a>
+
+      <a href="/standalone/movebutler" class="text-decoration-none mb-4 d-flex justify-content-between align-items-center">
+        <Logo id="movebutler" class="pb-0 pe-0 fs-2"></Logo>
+        <span class="text-success">Active</span>
+      </a>
+
+      <a href="/standalone/agent" class="text-decoration-none mb-5 d-flex justify-content-between align-items-center">
+        <Logo id="sold" class="pb-0 pe-0 fs-2"></Logo>
+        <span class="text-success">Active</span>
+      </a>
+
+      <span class="h6 text-muted">My Branches</span>
+
+      <form>
+      <Input type="select" id="test1" label="Today, you're at" :options="[{display:'Branch 1',value:'1'},{display:'Branch Two',value:'2'},{display:'Create new branch',value:'new'}]" data-value-if="new" data-redirect="/cp/company/branches/create"></Input>
+      </form>
+
+      <span class="h6 text-muted">Menu</span>
+
+      <a href="/" class="nav__featured-link text-decoration-none pb-3 d-block mb-0">
+        <span class="row">
+          <span class="col mw-fit-content"><i class="icon fs-1 fa-user"></i></span>
+          <span class="col">
+            <span Class="h5 mb-1">Control panel</span>
+            <span class="text-muted small">
+              Manage your iamproperty account, branches, staff, billing and invoices
+            </span>
+          </span>
+        </span>
+      </a>
+      
+      <a href="/" class="nav__featured-link text-decoration-none pb-3 border-top pt-3 d-block mb-0">
+        <span class="row">
+          <span class="col mw-fit-content"><Icon id="tick-list" class="fs-1 m-0"></Icon></span>
+          <span class="col">
+            <span Class="h5 mb-1">Quick start guide & FAQ</span>
+            <span class="text-muted small">
+              Download a guide on how to manage your account
+            </span>
+          </span>
+        </span>
+      </a>
+      
+      <a href="/" class="nav__featured-link text-decoration-none pb-3 border-top pt-3 d-block mb-0">
+        <span class="row">
+          <span class="col mw-fit-content"><Icon id="chat" class="fs-1 m-0 p-1"></Icon></span>
+          <span class="col">
+            <span Class="h5 mb-1">Contact us</span>
+            <span class="text-muted small">
+              Get in touch
+            </span>
+          </span>
+        </span>
+      </a>
+
+      <a href="/" class="nav__featured-link text-decoration-none pb-3 border-top pt-3 d-block mb-0">
+        <span class="row">
+          <span class="col mw-fit-content"><i class="icon fs-1 fa-sign-out"></i></span>
+          <span class="col">
+            <span Class="h5 mb-1">Log out</span>
+            <span class="text-muted small">
+              Martin  Critchlow<br> Watson-Clark
+            </span>
+          </span>
+        </span>
+      </a>
+      </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'
+import Input from '../../elements/Input/Input.vue'
+import Icon from '../../foundations/Icon/Icon.vue'
+
 
 export default {
   components: {
-    Logo
+    Input,
+    Logo,
+    Icon
   },
   name: 'Nav',
   props: {
@@ -111,11 +218,17 @@ export default {
     }
   },
   computed: {
+    hasLogoSlot() {
+      return !!this.$slots.logo
+    },
     hasSecondarySlot() {
       return !!this.$slots.secondary
     },
     hasSearchSlot() {
       return !!this.$slots.search
+    },
+    isMarketplace() {
+      return this.$vnode.data.staticClass && this.$vnode.data.staticClass.includes('nav--marketplace') ? true : false;
     }
   },
   mounted(){

package/src/components/NoteFeed/NoteFeed.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="container note-feed mb-2">
+    <span class="h3" v-html="title" v-if="title"></span>
+
+    <Table :fields="[{ key: 'date_added' },{ key: 'user' },{ key: 'note' }]" :items="itemsData" v-bind="$props" class="mb-0"></Table>
+    <form :action="action" :method="method" @submit.prevent="submitForm(...arguments)">
+      <input type="hidden" :value="user" name="user" />
+      <Input id="addNote" type="textarea" label="Add note" required class="mw-100"></Input>
+      <button class="btn btn-tertiary">Submit note</button>
+    </form>
+  </div>
+</template>
+
+<script>
+import Input from '../../elements/Input/Input.vue'
+import Table from '../../elements/Table/Table.vue'
+let tableProps = Table.props;
+tableProps.fields.required = false;
+
+
+export default {
+  components: {
+    Table,
+    Input
+  },
+  data () {
+    return {
+      itemsData: [...this.items] // Redefine data to avoid bleeding of data to other components
+    }
+  },
+  methods: {
+    submitForm: function(event){
+
+      console.log(this)
+
+      const data = new FormData(event.target);
+
+      let today = new Date();
+      const yyyy = today.getFullYear();
+      let mm = today.getMonth() + 1; // Months start at 0!
+      let dd = today.getDate();
+
+      if (dd < 10) dd = '0' + dd;
+      if (mm < 10) mm = '0' + mm;
+
+      today = dd + '/' + mm + '/' + yyyy;
+
+      this.itemsData.unshift({
+        date_added: today,
+        user: data.get('user'),
+        note: data.get('addNote')
+      });
+
+      this.$emit('formSubmitted',event);
+    }
+  },
+  name: 'NoteFeed',
+  props: {
+    user: {
+      type: String,
+      required: true
+    },
+    ...tableProps,
+    title: {
+      type: String,
+      required: false
+    },
+    method: {
+      type: String,
+      required: false,
+      default: 'post'
+    },
+    action: {
+      type: String,
+      required: false
+    }
+  }
+}
+</script>

package/src/components/NoteFeed/README.md

@@ -0,0 +1,16 @@
+### Usage
+
+```
+<NoteFeed user="User name" :fields="fields" :items="items" :show="3" @formSubmitted="submitForm(...arguments)"></NoteFeed>
+```
+
+### Properties
+
+<p class="note"><strong>Note:</strong> See the tables documentation for the table props which are inherited here</p>
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| user | String | - | Required |
+| title | String | - | Optional as we may want to add the title outside of the note feed. |
+| method | String | post | Form method of posting the data, post or get |
+| action | String| | Optional URL to submit the form too, not really usefull for Vue JS. |

package/src/components/PropertySearchbar/PropertySearchbar.vue

@@ -34,9 +34,7 @@
 </template>
 
 <style lang="scss">
-@import "../../../assets/sass/_func.scss";
 @import "../../../assets/sass/components/property-searchbar.scss";
-
 </style>
 
 <script>

package/src/components/Snapshot/Snapshot.vue

@@ -15,7 +15,6 @@
 </template>
 
 <style lang="scss">
-@import "../../../assets/sass/_func.scss";
 @import "../../../assets/sass/components/snapshot.scss";
 </style>
 

package/src/components/Stepper/Stepper.vue

@@ -12,7 +12,6 @@
 
 
 <style lang="scss">
-@import "../../../assets/sass/_func.scss";
 @import "../../../assets/sass/components/stepper.scss";
 </style>
 

package/src/components/Tabs/Tabs.vue

@@ -15,7 +15,6 @@
 </template>
 
 <style lang="scss">
-@import "../../../assets/sass/_func.scss";
 @import "../../../assets/sass/components/tabs.scss";
 </style>
 

package/src/components/Testimonial/Testimonial.vue

@@ -31,7 +31,6 @@
 </template>
 
 <style lang="scss">
-@import "../../../assets/sass/_func.scss";
 @import "../../../assets/sass/components/testimonial.scss";
 </style>
 

package/src/components/Timeline/Timeline.vue

@@ -8,7 +8,6 @@
 </template>
 
 <style lang="scss">
-@import "../../../assets/sass/_func.scss";
 @import "../../../assets/sass/components/timeline.scss";
 </style>
 

package/src/{components → elements}/Card/Card.vue

@@ -16,9 +16,7 @@
 </template>
 
 <style lang="scss">
-@import "../../../assets/sass/_func.scss";
-@import "../../../node_modules/bootstrap/scss/_card";
-@import "../../../assets/sass/components/card";
+@import "../../../assets/sass/elements/card.scss";
 </style>
 
 <script>

package/src/elements/FileUploads/FileUploads.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="multiple-file-uploads mb-4">
+
+    <div class="row">
+      <div :class="`${inputcolclass ? inputcolclass : 'col-12 col-sm-4'}`">
+        <Input type="file" :id="id" :name="`${id}[]`" label="Add new file" labelclass="d-none" class="form-control-inline col" required :data-filesize="maxfilesize"></Input>
+      </div>
+      <div class="col-12 col-md me-auto">
+        <slot></slot>
+      </div>
+      <div class="col mw-fit-content">
+        <button type="button" class="btn btn-tertiary me-0" data-delete>Delete</button>
+      </div>
+    </div>
+
+    <button type="button" class="btn btn-secondary me-0" data-add :data-maxfiles="maxfiles">+ Add file</button>
+    
+  </div>
+</template>
+
+<script>
+import Input from '../../elements/Input/Input.vue'
+
+export default {
+  components: {
+    Input
+  },
+  name: 'FileUploads',
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    inputcolclass: {
+      type: String,
+      required: false
+    },
+    maxfilesize: {
+      type: Number,
+      required: false
+    },
+    maxfiles: {
+      type: Number,
+      required: false
+    }
+  }
+}
+</script>

package/src/elements/FileUploads/README.md

@@ -0,0 +1,24 @@
+### Usage
+
+```
+<Card :title="value.title" :content="value.content" :link="value.link"></Card>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| title | String | - | Used for the card heading |
+| titleclass | String | h2 | Update the class of the title from being a h2 |
+| subtitle | String | - | Optional sub heading |
+| content | HTML | - | Card content |
+| link | String | - | Card link |
+| type | String | - | Change the type of card (simple,quick)|
+| btntype | String | secondary | Change the type of button at the bottom of the card (primary,secondary,tertairy, link) |
+| ctatext | String | Find out more | Update the cta text within the button at the bottom of the card |
+| details | Object | - | Build up the card content with pre-defined bits of data |
+| - detail.tags | Array of strings | - | Add tags above the card header |
+| - detail.guideprice | String | - | Property guide price |
+| - detail.auctiontime | String | - | Auction time left |
+| - detail.readtime | String | - | How long it will take to read |
+| - detail.status | String | - | Display a status badge at the top of the card |

package/src/elements/Input/Input.vue

@@ -1,7 +1,11 @@
 <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()" :title="title"></label>
     
+    <!-- Prefix and Suffix -->
+    <span :class="`prefix ${this.prefixClass} ${size?`prefix-${size}`:''}`" v-html="prefix" v-if="prefix" role="presentation"></span>
+    <span :class="`suffix ${this.suffixClass} ${size?`suffix-${size}`:''}`" v-html="suffix" v-if="suffix" role="presentation"></span>
+
     <!-- 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" />
     
@@ -92,6 +96,30 @@ export default {
     options: {
       type: Array,
       required: false
+    },
+    prefix: {
+      type: String,
+      required: false
+    },
+    prefixClass: {
+      type: String,
+      required: false
+    },
+    suffix: {
+      type: String,
+      required: false
+    },
+    suffixClass: {
+      type: String,
+      required: false
+    },
+    title: {
+      type: String,
+      required: false
+    },
+    hint: {
+      type: String,
+      required: false
     }
   },
   computed: {
@@ -101,6 +129,10 @@ export default {
         if(this.$attrs.multiple){
           return this.label+`<span class="small d-block text-body font-body fw-normal">Hold down the Ctrl (windows) or Command (Mac) button to select multiple options.</span>`
         }
+        
+        if(this.hint){
+          return this.label+`<span class="small d-block text-body font-body fw-normal">${this.hint}</span>`
+        }
 
         return this.label;
       }

package/src/elements/Input/README.md

@@ -16,3 +16,4 @@
 | size | String | - | Choose from either 'sm' and 'lg' |
 | 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. |
+| prefix | String | - | Display a character or two in front of the input field |

package/src/index.js

@@ -4,11 +4,12 @@ export { default as Logo } from './foundations/Logo/Logo.vue'
 // Elements
 export { default as Table } from './elements/Table/Table.vue'
 export { default as Input } from './elements/Input/Input.vue'
+export { default as FileUploads } from './elements/FileUploads/FileUploads.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 Card } from './elements/Card/Card.vue'
 export { default as CardDeck } from './components/CardDeck/CardDeck.vue'
 export { default as Carousel } from './components/Carousel/Carousel.vue'
 export { default as Header } from './components/Header/Header.vue'
@@ -23,3 +24,4 @@ export { default as Step } from './components/Stepper/Step.vue'
 export { default as Tabs } from './components/Tabs/Tabs.vue'
 export { default as Tab } from './components/Tabs/Tab.vue'
 export { default as Alert } from './components/Alert/Alert.vue'
+export { default as NoteFeed } from './components/NoteFeed/NoteFeed.vue'