@iamproperty/components 2.7.7 → 2.9.0

package/src/components/Nav/Nav.vue

@@ -1,189 +1,212 @@
-<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" v-if="isMarketplace === false">
-      <div class="container">
-        <div class="row">
-          <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>
-          </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" 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>
-
-    <div class="nav__inner" v-else>
-      <div class="container">
-        <div class="row">
-          <div class="col nav__logo">
-            <a :href="propertylink" :class="`text-decoration-none mb-0 ${logo=='property'?'current':''}`">
-              <Logo id="property" :path="logopath" class="pb-0 pe-0"></Logo>
-            </a>
-
-            <a :href="movebutlerlink" :class="`text-decoration-none mb-0 ${logo=='movebutler'?'current':''}`">
-              <Logo id="movebutler" :path="logopath" class="pb-0 pe-0"></Logo>
-            </a>
-
-            <a :href="iamsoldlink" :class="`text-decoration-none mb-0 ${logo=='sold'?'current':''}`">
-              <Logo id="sold" :path="logopath" 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">
-
-        
-          <slot></slot>
-
-
-
-      </div>
-
-    </div>
-  </nav>
-</template>
-
-<style lang="scss">
-@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: {
-    Input,
-    Logo,
-    Icon
-  },
-  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
-    },
-    propertylink: {
-      type: String,
-      required: false
-    },
-    movebutlerlink: {
-      type: String,
-      required: false
-    },
-    iamsoldlink: {
-      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: {
-    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(){
-
-    this.$nextTick(function () {
-      
-      nav(this.$refs.wrapper);
-    })
-  }
-}
-</script>
+<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" />
+    <input type="checkbox" name="showAccount" id="showAccount" class="d-none" />
+
+    <!-- Mobile bar -->
+    <div class="nav__mobile-bar">
+      <div class="container">
+        <div class="row">
+          <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>
+          </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>
+      </div>
+    </div>
+
+    <div class="nav__inner">
+      <div class="container">
+        <div class="row">
+          <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>
+          </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>
+
+          <!-- Main menu -->
+          <div class="col-12 col-md nav__menu ms-auto flex-row align-items-center">
+            <slot></slot>
+          </div>
+
+          <div class="col nav__account-btn flex-row align-items-center" v-if="hasAccountSlot">
+            <label for="showAccount">
+              <svg class="icon" viewBox="0 0 28 28">
+                <use xlink:href="/svg/icons.svg#icon-account"></use>
+              </svg>
+              <span>My account</span>
+            </label>
+          </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" 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>
+
+    <div class="nav__menu--account" v-if="hasAccountSlot">
+      <div class="container">
+        <div class="row mb-4">
+          <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>
+          </div>
+
+          <div class="col mw-fit-content d-md-none flex-row align-items-center nav__menu-btn">
+            <label for="showAccount">Account</label>
+          </div>
+
+        </div>
+      </div>
+      <div class="container">
+        <slot name="account"></slot>
+      </div>
+
+    </div>
+
+    <span class="nav__bg"></span>
+  </nav>
+</template>
+
+<style lang="scss">
+@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: {
+    Input,
+    Logo,
+    Icon
+  },
+  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
+    },
+    propertylink: {
+      type: String,
+      required: false
+    },
+    movebutlerlink: {
+      type: String,
+      required: false
+    },
+    iamsoldlink: {
+      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: {
+    hasLogoSlot() {
+      return !!this.$slots.logo
+    },
+    hasSecondarySlot() {
+      return !!this.$slots.secondary
+    },
+    hasSearchSlot() {
+      return !!this.$slots.search
+    },
+    hasAccountSlot() {
+      return !!this.$slots.account
+    },
+    isMarketplace() {
+      return this.$vnode.data.staticClass && this.$vnode.data.staticClass.includes('nav--marketplace') ? true : false;
+    }
+  },
+  mounted(){
+
+    this.$nextTick(function () {
+
+      nav(this.$refs.wrapper);
+    })
+  }
+}
+</script>

package/src/components/Nav/README.md

@@ -1,23 +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 |
+### 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 |

package/src/components/NoteFeed/NoteFeed.vue

@@ -1,79 +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>
+<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

@@ -1,16 +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. |
+### 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. |