@iamproperty/components 3.0.0 → 3.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +141 -16
- package/assets/.DS_Store +0 -0
- package/assets/css/core.min.css +1 -1
- package/assets/css/core.min.css.map +1 -1
- package/assets/css/email.min.css +1 -1
- package/assets/css/email.min.css.map +1 -1
- package/assets/css/error.min.css +1 -1
- package/assets/css/error.min.css.map +1 -1
- package/assets/css/style.min.css +1 -1
- package/assets/css/style.min.css.map +1 -1
- package/assets/favicons/manifest.json +31 -31
- package/assets/js/main.js +57 -57
- package/assets/js/modules/accordion.js +32 -32
- package/assets/js/modules/alert.js +56 -56
- package/assets/js/modules/carousel.js +101 -101
- package/assets/js/modules/chart.js +218 -218
- package/assets/js/modules/drawer.js +15 -15
- package/assets/js/modules/file-upload.js +48 -0
- package/assets/js/modules/form.js +168 -159
- package/assets/js/modules/helpers.js +119 -119
- package/assets/js/modules/modal.js +89 -89
- package/assets/js/modules/nav.js +28 -28
- package/assets/js/modules/orderablelist.js +122 -0
- package/assets/js/modules/table.js +585 -585
- package/assets/js/modules/testimonial.js +82 -82
- package/assets/js/modules/youtubevideo.js +145 -145
- package/assets/js/scripts.bundle.js +256 -242
- package/assets/js/scripts.bundle.js.map +1 -1
- package/assets/js/scripts.bundle.min.js +2 -2
- package/assets/js/scripts.bundle.min.js.map +1 -1
- package/assets/sass/_components.scss +14 -14
- package/assets/sass/_corefiles.scss +40 -40
- package/assets/sass/_fonts.scss +16 -16
- package/assets/sass/_forms.scss +9 -9
- package/assets/sass/_func.scss +12 -12
- package/assets/sass/_functions/functions.scss +141 -141
- package/assets/sass/_functions/mixins.scss +170 -170
- package/assets/sass/_functions/utilities.scss +143 -250
- package/assets/sass/_functions/variables.scss +467 -467
- package/assets/sass/_print.scss +61 -61
- package/assets/sass/_tests/colours.spec.scss +44 -44
- package/assets/sass/_tests/func.spec.scss +232 -232
- package/assets/sass/_tests/mixins.spec.scss +194 -194
- package/assets/sass/_tests/sass.spec.js +9 -9
- package/assets/sass/_tests/typography.spec.scss +35 -35
- package/assets/sass/components/accordion.scss +197 -197
- package/assets/sass/components/alert.scss +98 -98
- package/assets/sass/components/cardDeck.scss +107 -107
- package/assets/sass/components/carousel.scss +234 -234
- package/assets/sass/components/charts.scss +569 -569
- package/assets/sass/components/drawer.scss +46 -46
- package/assets/sass/components/header.scss +63 -63
- package/assets/sass/components/modal.scss +136 -136
- package/assets/sass/components/nav.scss +960 -918
- package/assets/sass/components/property-searchbar.scss +143 -143
- package/assets/sass/components/snapshot.scss +70 -70
- package/assets/sass/components/stepper.scss +164 -164
- package/assets/sass/components/tabs.scss +87 -87
- package/assets/sass/components/testimonial.scss +132 -132
- package/assets/sass/components/timeline.scss +95 -95
- package/assets/sass/core.scss +6 -6
- package/assets/sass/elements/buttons.scss +251 -209
- package/assets/sass/elements/card.scss +289 -177
- package/assets/sass/elements/container.scss +236 -225
- package/assets/sass/elements/forms.scss +262 -194
- package/assets/sass/elements/links.scss +97 -96
- package/assets/sass/elements/lists.scss +159 -112
- package/assets/sass/elements/panel.scss +161 -161
- package/assets/sass/elements/tables.scss +290 -290
- package/assets/sass/elements/tooltips.scss +84 -84
- package/assets/sass/elements/type.scss +136 -136
- package/assets/sass/email.scss +65 -65
- package/assets/sass/error.scss +4 -4
- package/assets/sass/foundations/brand.scss +76 -72
- package/assets/sass/foundations/circles.scss +74 -74
- package/assets/sass/foundations/icons.scss +80 -72
- package/assets/sass/foundations/media.scss +50 -50
- package/assets/sass/foundations/reboot.scss +130 -130
- package/assets/sass/foundations/root.scss +125 -106
- package/assets/sass/main.scss +7 -7
- package/assets/svg/icons.svg +598 -598
- package/assets/svg/logo.svg +49 -43
- package/assets/ts/main.js +56 -56
- package/assets/ts/main.ts +68 -68
- package/assets/ts/modules/accordion.js +32 -32
- package/assets/ts/modules/accordion.ts +43 -43
- package/dist/components.es.js +393 -379
- package/dist/components.umd.js +16 -16
- package/dist/style.css +1 -1
- package/package.json +96 -108
- package/src/.DS_Store +0 -0
- package/src/components/Accordion/Accordion.screenshot.vue +57 -57
- package/src/components/Accordion/Accordion.spec.js +63 -63
- package/src/components/Accordion/Accordion.vue +22 -22
- package/src/components/Accordion/AccordionItem.vue +52 -52
- package/src/components/Accordion/README.md +34 -34
- package/src/components/Alert/Alert.spec.js +49 -49
- package/src/components/Alert/Alert.vue +39 -39
- package/src/components/Alert/README.md +28 -28
- package/src/components/Banner/Banner.spec.js +28 -28
- package/src/components/Banner/Banner.vue +38 -38
- package/src/components/Banner/README.md +23 -23
- package/src/components/CardDeck/CardDeck.spec.js +99 -99
- package/src/components/CardDeck/CardDeck.vue +77 -77
- package/src/components/CardDeck/README.md +24 -24
- package/src/components/Carousel/Carousel.spec.js +45 -45
- package/src/components/Carousel/Carousel.vue +85 -85
- package/src/components/Carousel/README.md +19 -19
- package/src/components/Chart/Chart.spec.js +201 -201
- package/src/components/Chart/Chart.vue +88 -88
- package/src/components/Chart/README.md +17 -17
- package/src/components/Drawer/Drawer.vue +53 -53
- package/src/components/Drawer/README.md +22 -22
- package/src/components/Header/Header.spec.js +33 -33
- package/src/components/Header/Header.vue +38 -38
- package/src/components/Header/README.md +27 -27
- package/src/components/Modal/Modal.spec.js +22 -22
- package/src/components/Modal/Modal.vue +43 -43
- package/src/components/Modal/README.md +19 -19
- package/src/components/Nav/Nav.spec.js +35 -35
- package/src/components/Nav/Nav.vue +215 -215
- package/src/components/Nav/README.md +22 -22
- package/src/components/NoteFeed/NoteFeed.vue +79 -79
- package/src/components/NoteFeed/README.md +16 -16
- package/src/components/PropertySearchbar/PropertySearchbar.vue +204 -204
- package/src/components/PropertySearchbar/README.md +25 -25
- package/src/components/Snapshot/README.md +20 -20
- package/src/components/Snapshot/Snapshot.vue +32 -32
- package/src/components/Stepper/README.md +32 -32
- package/src/components/Stepper/Step.vue +28 -28
- package/src/components/Stepper/Stepper.spec.js +99 -99
- package/src/components/Stepper/Stepper.vue +33 -33
- package/src/components/Tabs/README.md +27 -27
- package/src/components/Tabs/Tab.vue +32 -32
- package/src/components/Tabs/Tabs.vue +77 -77
- package/src/components/Testimonial/README.md +25 -25
- package/src/components/Testimonial/Testimonial.spec.js +57 -57
- package/src/components/Testimonial/Testimonial.vue +60 -60
- package/src/components/Timeline/README.md +18 -18
- package/src/components/Timeline/Timeline.spec.js +17 -17
- package/src/components/Timeline/Timeline.vue +24 -24
- package/src/elements/Card/Card.vue +122 -113
- package/src/elements/Card/README.md +24 -24
- package/src/elements/FileUploads/FileUploads.vue +48 -48
- package/src/elements/FileUploads/README.md +24 -24
- package/src/elements/Input/Input.vue +272 -268
- package/src/elements/Input/README.md +19 -19
- package/src/elements/Table/README.md +62 -62
- package/src/elements/Table/Table.spec.js +90 -90
- package/src/elements/Table/Table.vue +129 -129
- package/src/foundations/Icon/Icon.spec.js +24 -24
- package/src/foundations/Icon/Icon.vue +24 -24
- package/src/foundations/Icon/README.md +11 -11
- package/src/foundations/Logo/Logo.spec.js +56 -56
- package/src/foundations/Logo/Logo.vue +39 -39
- package/src/foundations/Logo/README.md +20 -20
- package/src/foundations/YoutubeVideo/README.md +11 -11
- package/src/foundations/YoutubeVideo/YoutubeVideo.vue +24 -24
- package/src/helpers/strings.js +12 -12
- package/src/index.js +27 -27
- package/src/vue-shim.d.ts +6 -6
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="modal" :id="id" role="dialog" modal="true" ref="modal">
|
|
3
|
-
<a :href="`#${returnid?returnid:''}`" tabindex="-1"><span class="visually-hidden">Close</span></a>
|
|
4
|
-
<div class="modal__outer">
|
|
5
|
-
<a :href="`#${returnid?returnid:''}`" class="btn btn-tertiary py-1 px-2"><span class="visually-hidden">Close</span>✕</a>
|
|
6
|
-
<div class="modal__inner">
|
|
7
|
-
<slot></slot>
|
|
8
|
-
</div>
|
|
9
|
-
</div>
|
|
10
|
-
<button class="modal__dock--left btn btn-prev" tabindex="-1">Left</button>
|
|
11
|
-
<button class="modal__dock--right btn btn-next" tabindex="-1">Right</button>
|
|
12
|
-
</div>
|
|
13
|
-
</template>
|
|
14
|
-
|
|
15
|
-
<style lang="scss">
|
|
16
|
-
@import "../../../assets/sass/components/modal.scss";
|
|
17
|
-
</style>
|
|
18
|
-
|
|
19
|
-
<script>
|
|
20
|
-
import modal from '../../../assets/js/modules/modal.js'
|
|
21
|
-
|
|
22
|
-
export default {
|
|
23
|
-
name: 'Modal',
|
|
24
|
-
props: {
|
|
25
|
-
id: {
|
|
26
|
-
type: String,
|
|
27
|
-
required: true
|
|
28
|
-
},
|
|
29
|
-
returnid: {
|
|
30
|
-
type: String,
|
|
31
|
-
default: 'close',
|
|
32
|
-
required: false
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
mounted(){
|
|
36
|
-
|
|
37
|
-
this.$nextTick(function () {
|
|
38
|
-
|
|
39
|
-
modal(this.$refs.modal);
|
|
40
|
-
})
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="modal" :id="id" role="dialog" modal="true" ref="modal">
|
|
3
|
+
<a :href="`#${returnid?returnid:''}`" tabindex="-1"><span class="visually-hidden">Close</span></a>
|
|
4
|
+
<div class="modal__outer">
|
|
5
|
+
<a :href="`#${returnid?returnid:''}`" class="btn btn-tertiary py-1 px-2"><span class="visually-hidden">Close</span>✕</a>
|
|
6
|
+
<div class="modal__inner">
|
|
7
|
+
<slot></slot>
|
|
8
|
+
</div>
|
|
9
|
+
</div>
|
|
10
|
+
<button class="modal__dock--left btn btn-prev" tabindex="-1">Left</button>
|
|
11
|
+
<button class="modal__dock--right btn btn-next" tabindex="-1">Right</button>
|
|
12
|
+
</div>
|
|
13
|
+
</template>
|
|
14
|
+
|
|
15
|
+
<style lang="scss">
|
|
16
|
+
@import "../../../assets/sass/components/modal.scss";
|
|
17
|
+
</style>
|
|
18
|
+
|
|
19
|
+
<script>
|
|
20
|
+
import modal from '../../../assets/js/modules/modal.js'
|
|
21
|
+
|
|
22
|
+
export default {
|
|
23
|
+
name: 'Modal',
|
|
24
|
+
props: {
|
|
25
|
+
id: {
|
|
26
|
+
type: String,
|
|
27
|
+
required: true
|
|
28
|
+
},
|
|
29
|
+
returnid: {
|
|
30
|
+
type: String,
|
|
31
|
+
default: 'close',
|
|
32
|
+
required: false
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
mounted(){
|
|
36
|
+
|
|
37
|
+
this.$nextTick(function () {
|
|
38
|
+
|
|
39
|
+
modal(this.$refs.modal);
|
|
40
|
+
})
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
</script>
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
### Usage
|
|
2
|
-
|
|
3
|
-
```
|
|
4
|
-
<Modal id="modal">
|
|
5
|
-
<!-- content -->
|
|
6
|
-
</Modal>
|
|
7
|
-
```
|
|
8
|
-
|
|
9
|
-
### Properties
|
|
10
|
-
|
|
11
|
-
| Option | Type | Default Value | Description |
|
|
12
|
-
| ------ | ---- | ------------- | ----------- |
|
|
13
|
-
| id | String | - | Required |
|
|
14
|
-
| returnid | String | close | Override the default id so that it will anchor to a specific location on the page. |
|
|
15
|
-
|
|
16
|
-
### Slots
|
|
17
|
-
|
|
18
|
-
| Option | Default Value | Description |
|
|
19
|
-
| ------ | ------------- | ----------- |
|
|
1
|
+
### Usage
|
|
2
|
+
|
|
3
|
+
```
|
|
4
|
+
<Modal id="modal">
|
|
5
|
+
<!-- content -->
|
|
6
|
+
</Modal>
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
### Properties
|
|
10
|
+
|
|
11
|
+
| Option | Type | Default Value | Description |
|
|
12
|
+
| ------ | ---- | ------------- | ----------- |
|
|
13
|
+
| id | String | - | Required |
|
|
14
|
+
| returnid | String | close | Override the default id so that it will anchor to a specific location on the page. |
|
|
15
|
+
|
|
16
|
+
### Slots
|
|
17
|
+
|
|
18
|
+
| Option | Default Value | Description |
|
|
19
|
+
| ------ | ------------- | ----------- |
|
|
20
20
|
| default | - | Will display within the modal |
|
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
import { shallowMount } from '@vue/test-utils'
|
|
2
|
-
import Nav from './Nav.vue'
|
|
3
|
-
|
|
4
|
-
describe('Nav component', () => {
|
|
5
|
-
/* Logo */
|
|
6
|
-
it('renders the iam property logo by default', () => {
|
|
7
|
-
const test = shallowMount(Nav, {
|
|
8
|
-
propsData: { }
|
|
9
|
-
})
|
|
10
|
-
|
|
11
|
-
expect(test.html()).toContain('<logo-stub id="property" path=\"/svg/logo.svg\" class=\"pb-0\"></logo-stub>')
|
|
12
|
-
})
|
|
13
|
-
|
|
14
|
-
it('renders the correct logo when a logo id is passed', () => {
|
|
15
|
-
const test = shallowMount(Nav, {
|
|
16
|
-
propsData: {
|
|
17
|
-
logo: 'sold'
|
|
18
|
-
}
|
|
19
|
-
})
|
|
20
|
-
|
|
21
|
-
expect(test.html()).toContain('<logo-stub id="sold" path=\"/svg/logo.svg\" class=\"pb-0\"></logo-stub>')
|
|
22
|
-
})
|
|
23
|
-
|
|
24
|
-
/* Menu button */
|
|
25
|
-
it('renders the iam property logo by default', () => {
|
|
26
|
-
const test = shallowMount(Nav, {
|
|
27
|
-
propsData: { }
|
|
28
|
-
})
|
|
29
|
-
|
|
30
|
-
expect(test.html()).toContain('<label for="showMenu">Menu</label>')
|
|
31
|
-
expect(test.html()).toContain('<input type="checkbox" name="showSearch" id="showSearch" class="d-none">')
|
|
32
|
-
})
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
})
|
|
1
|
+
import { shallowMount } from '@vue/test-utils'
|
|
2
|
+
import Nav from './Nav.vue'
|
|
3
|
+
|
|
4
|
+
describe('Nav component', () => {
|
|
5
|
+
/* Logo */
|
|
6
|
+
it('renders the iam property logo by default', () => {
|
|
7
|
+
const test = shallowMount(Nav, {
|
|
8
|
+
propsData: { }
|
|
9
|
+
})
|
|
10
|
+
|
|
11
|
+
expect(test.html()).toContain('<logo-stub id="property" path=\"/svg/logo.svg\" class=\"pb-0\"></logo-stub>')
|
|
12
|
+
})
|
|
13
|
+
|
|
14
|
+
it('renders the correct logo when a logo id is passed', () => {
|
|
15
|
+
const test = shallowMount(Nav, {
|
|
16
|
+
propsData: {
|
|
17
|
+
logo: 'sold'
|
|
18
|
+
}
|
|
19
|
+
})
|
|
20
|
+
|
|
21
|
+
expect(test.html()).toContain('<logo-stub id="sold" path=\"/svg/logo.svg\" class=\"pb-0\"></logo-stub>')
|
|
22
|
+
})
|
|
23
|
+
|
|
24
|
+
/* Menu button */
|
|
25
|
+
it('renders the iam property logo by default', () => {
|
|
26
|
+
const test = shallowMount(Nav, {
|
|
27
|
+
propsData: { }
|
|
28
|
+
})
|
|
29
|
+
|
|
30
|
+
expect(test.html()).toContain('<label for="showMenu">Menu</label>')
|
|
31
|
+
expect(test.html()).toContain('<input type="checkbox" name="showSearch" id="showSearch" class="d-none">')
|
|
32
|
+
})
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
})
|
|
@@ -1,215 +1,215 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<nav :class="`nav${hasSecondarySlot?` has-secondary`:''}`" ref="wrapper">
|
|
3
|
-
|
|
4
|
-
<input type="checkbox" name="showMenu" id="showMenu" class="d-none" />
|
|
5
|
-
<input type="checkbox" name="showSearch" id="showSearch" class="d-none" />
|
|
6
|
-
<input type="checkbox" name="showAccount" id="showAccount" class="d-none" />
|
|
7
|
-
|
|
8
|
-
<!-- Mobile bar -->
|
|
9
|
-
<div class="nav__mobile-bar">
|
|
10
|
-
<div class="container">
|
|
11
|
-
<div class="row">
|
|
12
|
-
<div class="col mw-md-fit-content nav__logo" v-if="hasLogoSlot">
|
|
13
|
-
<slot name="logo"></slot>
|
|
14
|
-
</div>
|
|
15
|
-
<div class="col mw-md-fit-content nav__logo" v-else>
|
|
16
|
-
<a href="/" class="text-decoration-none mb-0">
|
|
17
|
-
<Logo :id="logo" :path="logopath" :desc="logotext" class="pb-0"></Logo>
|
|
18
|
-
</a>
|
|
19
|
-
</div>
|
|
20
|
-
|
|
21
|
-
<div class="col mw-fit-content d-md-none flex-row align-items-center nav__menu-btn">
|
|
22
|
-
<label for="showMenu">Menu</label>
|
|
23
|
-
</div>
|
|
24
|
-
</div>
|
|
25
|
-
</div>
|
|
26
|
-
</div>
|
|
27
|
-
|
|
28
|
-
<div class="nav__inner">
|
|
29
|
-
<div class="container">
|
|
30
|
-
<div class="row">
|
|
31
|
-
<div class="col mw-md-fit-content nav__logo" v-if="hasLogoSlot">
|
|
32
|
-
<slot name="logo"></slot>
|
|
33
|
-
</div>
|
|
34
|
-
<div class="col mw-md-fit-content nav__logo" v-else>
|
|
35
|
-
<a href="/" class="text-decoration-none mb-0">
|
|
36
|
-
<Logo :id="logo" :path="logopath" :desc="logotext" class="pb-0"></Logo>
|
|
37
|
-
</a>
|
|
38
|
-
</div>
|
|
39
|
-
|
|
40
|
-
<div class="col mw-fit-content nav__search-btn flex-row align-items-center" v-if="hasSearchSlot">
|
|
41
|
-
<label for="showSearch">
|
|
42
|
-
<svg class="icon" viewBox="0 0 32 32">
|
|
43
|
-
<title>Search</title>
|
|
44
|
-
<ellipse cx="14.92" cy="13.81" rx="11.92" ry="11.81" class="icon__outline" />
|
|
45
|
-
<line x1="22.68" y1="22.75" x2="30" y2="30" class="icon__outline" />
|
|
46
|
-
</svg>
|
|
47
|
-
</label>
|
|
48
|
-
</div>
|
|
49
|
-
|
|
50
|
-
<div class="col mw-fit-content d-md-none flex-row align-items-center nav__menu-btn">
|
|
51
|
-
<label for="showMenu">Menu</label>
|
|
52
|
-
</div>
|
|
53
|
-
|
|
54
|
-
<!-- Main menu -->
|
|
55
|
-
<div class="col-12 col-md nav__menu ms-auto flex-row align-items-center">
|
|
56
|
-
<slot></slot>
|
|
57
|
-
</div>
|
|
58
|
-
|
|
59
|
-
<div class="col nav__account-btn flex-row align-items-center" v-if="hasAccountSlot">
|
|
60
|
-
<label for="showAccount">
|
|
61
|
-
|
|
62
|
-
<svg class="icon" viewBox="0 0 28 28">
|
|
63
|
-
<path d="M14,28a13.861,13.861,0,0,1-9.268-3.533l-.023.047-.721-.738L3.62,23.4l.012-.023a14,14,0,1,1,20.735,0l.012.023-.367.377-.722.738-.024-.045A13.855,13.855,0,0,1,14,28Zm0-9.58a10.5,10.5,0,0,0-1.368.092c-.085.012-.17.03-.252.047-.061.013-.124.026-.187.037l-.077.013c-.266.047-.54.095-.8.165-.108.029-.215.065-.318.1-.063.022-.125.043-.188.063l-.08.026c-.223.071-.454.144-.671.234-.125.05-.245.11-.362.168l-.146.072-.045.021c-.208.1-.423.2-.623.312-.131.074-.257.158-.379.239l-.106.07-.068.044c-.176.114-.359.232-.528.359-.137.1-.267.218-.393.327l-.054.047c-.174.15-.355.306-.519.47-.132.134-.258.277-.38.416l-.018.021c-.16.184-.3.35-.437.527-.12.161-.23.33-.337.494-.076.117-.146.238-.214.356a12.495,12.495,0,0,0,17.109,0l-.022-.037c-.061-.1-.125-.212-.192-.315-.1-.156-.214-.333-.338-.5-.141-.188-.293-.363-.436-.526-.113-.13-.253-.292-.4-.438-.161-.162-.337-.314-.517-.468l-.08-.069c-.118-.1-.24-.209-.368-.307-.183-.137-.379-.264-.568-.387l-.026-.017-.106-.07c-.125-.083-.251-.166-.381-.24-.207-.118-.429-.222-.643-.322l-.024-.011-.152-.074c-.116-.057-.235-.116-.356-.165-.214-.087-.438-.159-.656-.229l-.1-.031c-.066-.021-.132-.043-.2-.066-.1-.035-.2-.07-.309-.1-.264-.07-.538-.118-.8-.165l-.078-.014c-.063-.011-.126-.024-.187-.037-.082-.017-.167-.035-.252-.047A10.483,10.483,0,0,0,14,18.421Zm0-1.473a11.871,11.871,0,0,1,1.54.1c.1.013.192.033.284.052.069.014.139.028.209.04.34.058.672.118,1,.2.14.036.278.082.412.127l.151.05c.309.1.587.188.859.3.148.059.293.127.433.194l.13.061c.306.142.553.266.775.389.188.107.368.22.535.328.26.166.489.322.7.478.156.117.316.244.49.389.209.176.412.361.622.567.156.154.3.293.43.443.209.23.4.472.542.657l.051.066c.1.134.21.272.308.416.021.031.045.061.068.09a1.267,1.267,0,0,1,.085.117,12.525,12.525,0,1,0-19.24,0c.026-.04.056-.078.084-.114s.05-.064.073-.1c.1-.141.2-.278.3-.409l.046-.059c.2-.264.378-.478.555-.672.137-.152.281-.3.417-.43.215-.21.422-.4.635-.578.18-.15.332-.271.479-.381.208-.155.433-.31.709-.486.174-.111.346-.219.526-.319.274-.153.55-.285.783-.393l.112-.053c.144-.069.293-.14.445-.2.282-.113.578-.208.864-.3l.159-.052c.132-.044.265-.088.4-.124.331-.087.675-.148,1-.2.068-.012.137-.026.2-.039.094-.019.191-.039.288-.052A11.827,11.827,0,0,1,14,16.948Z" transform="translate(0 -0.001)" />
|
|
64
|
-
<path d="M5.2,10.4a5.2,5.2,0,1,1,5.2-5.2A5.206,5.206,0,0,1,5.2,10.4Zm0-8.915A3.714,3.714,0,1,0,8.915,5.2,3.719,3.719,0,0,0,5.2,1.486Z" transform="translate(8.8 4.8)" />
|
|
65
|
-
|
|
66
|
-
</svg>
|
|
67
|
-
<span>My account</span>
|
|
68
|
-
</label>
|
|
69
|
-
</div>
|
|
70
|
-
|
|
71
|
-
<div class="col-12 col-md nav__btn mw-md-fit-content flex-row align-items-center" v-if="btnlink">
|
|
72
|
-
<a :href="btnlink" class="btn me-0" v-html="btntext"></a>
|
|
73
|
-
</div>
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
</div>
|
|
78
|
-
</div>
|
|
79
|
-
<div class="nav__menu--secondary" v-if="hasSecondarySlot">
|
|
80
|
-
<div class="container">
|
|
81
|
-
<slot name="secondary"></slot>
|
|
82
|
-
</div>
|
|
83
|
-
</div>
|
|
84
|
-
<div class="nav__menu--search" v-if="hasSearchSlot">
|
|
85
|
-
<div class="bg-gradient pt-4">
|
|
86
|
-
<div class="container">
|
|
87
|
-
<slot name="search"></slot>
|
|
88
|
-
</div>
|
|
89
|
-
</div>
|
|
90
|
-
</div>
|
|
91
|
-
</div>
|
|
92
|
-
|
|
93
|
-
<div class="nav__menu--account" v-if="hasAccountSlot">
|
|
94
|
-
<div class="container">
|
|
95
|
-
<div class="row mb-4">
|
|
96
|
-
<div class="col mw-md-fit-content nav__logo" v-if="hasLogoSlot">
|
|
97
|
-
<slot name="logo"></slot>
|
|
98
|
-
</div>
|
|
99
|
-
<div class="col mw-md-fit-content nav__logo" v-else>
|
|
100
|
-
<a href="/" class="text-decoration-none mb-0">
|
|
101
|
-
<Logo :id="logo" :path="logopath" :desc="logotext" class="pb-0"></Logo>
|
|
102
|
-
</a>
|
|
103
|
-
</div>
|
|
104
|
-
|
|
105
|
-
<div class="col mw-fit-content d-md-none flex-row align-items-center nav__menu-btn">
|
|
106
|
-
<label for="showAccount">Account</label>
|
|
107
|
-
</div>
|
|
108
|
-
|
|
109
|
-
</div>
|
|
110
|
-
</div>
|
|
111
|
-
<div class="container">
|
|
112
|
-
<slot name="account"></slot>
|
|
113
|
-
</div>
|
|
114
|
-
|
|
115
|
-
</div>
|
|
116
|
-
|
|
117
|
-
<span class="nav__bg"></span>
|
|
118
|
-
</nav>
|
|
119
|
-
</template>
|
|
120
|
-
|
|
121
|
-
<style lang="scss">
|
|
122
|
-
@import "../../../assets/sass/components/nav.scss";
|
|
123
|
-
</style>
|
|
124
|
-
|
|
125
|
-
<script>
|
|
126
|
-
import nav from '../../../assets/js/modules/nav.js'
|
|
127
|
-
import Logo from '../../foundations/Logo/Logo.vue'
|
|
128
|
-
import Input from '../../elements/Input/Input.vue'
|
|
129
|
-
import Icon from '../../foundations/Icon/Icon.vue'
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
export default {
|
|
133
|
-
components: {
|
|
134
|
-
Input,
|
|
135
|
-
Logo,
|
|
136
|
-
Icon
|
|
137
|
-
},
|
|
138
|
-
name: 'Nav',
|
|
139
|
-
props: {
|
|
140
|
-
logo: {
|
|
141
|
-
type: String,
|
|
142
|
-
required: false
|
|
143
|
-
},
|
|
144
|
-
logotext: {
|
|
145
|
-
type: String,
|
|
146
|
-
required: false
|
|
147
|
-
},
|
|
148
|
-
logopath: {
|
|
149
|
-
type: String,
|
|
150
|
-
required: false
|
|
151
|
-
},
|
|
152
|
-
search: {
|
|
153
|
-
type: String,
|
|
154
|
-
required: false
|
|
155
|
-
},
|
|
156
|
-
btnlink: {
|
|
157
|
-
type: String,
|
|
158
|
-
required: false
|
|
159
|
-
},
|
|
160
|
-
btntext: {
|
|
161
|
-
type: String,
|
|
162
|
-
required: false
|
|
163
|
-
},
|
|
164
|
-
propertylink: {
|
|
165
|
-
type: String,
|
|
166
|
-
required: false
|
|
167
|
-
},
|
|
168
|
-
movebutlerlink: {
|
|
169
|
-
type: String,
|
|
170
|
-
required: false
|
|
171
|
-
},
|
|
172
|
-
iamsoldlink: {
|
|
173
|
-
type: String,
|
|
174
|
-
required: false
|
|
175
|
-
}
|
|
176
|
-
},
|
|
177
|
-
data () {
|
|
178
|
-
return {
|
|
179
|
-
locationSave: ''
|
|
180
|
-
}
|
|
181
|
-
},
|
|
182
|
-
methods: {
|
|
183
|
-
subIsActive (input) {
|
|
184
|
-
const paths = Array.isArray(input) ? input : [input]
|
|
185
|
-
return paths.some(path => {
|
|
186
|
-
return this.$route.path.indexOf(path) === 0 // current path starts with this path string
|
|
187
|
-
})
|
|
188
|
-
}
|
|
189
|
-
},
|
|
190
|
-
computed: {
|
|
191
|
-
hasLogoSlot() {
|
|
192
|
-
return !!this.$slots.logo
|
|
193
|
-
},
|
|
194
|
-
hasSecondarySlot() {
|
|
195
|
-
return !!this.$slots.secondary
|
|
196
|
-
},
|
|
197
|
-
hasSearchSlot() {
|
|
198
|
-
return !!this.$slots.search
|
|
199
|
-
},
|
|
200
|
-
hasAccountSlot() {
|
|
201
|
-
return !!this.$slots.account
|
|
202
|
-
},
|
|
203
|
-
isMarketplace() {
|
|
204
|
-
return false;
|
|
205
|
-
}
|
|
206
|
-
},
|
|
207
|
-
mounted(){
|
|
208
|
-
|
|
209
|
-
this.$nextTick(function () {
|
|
210
|
-
|
|
211
|
-
nav(this.$refs.wrapper);
|
|
212
|
-
})
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<nav :class="`nav${hasSecondarySlot?` has-secondary`:''}`" ref="wrapper">
|
|
3
|
+
|
|
4
|
+
<input type="checkbox" name="showMenu" id="showMenu" class="d-none" />
|
|
5
|
+
<input type="checkbox" name="showSearch" id="showSearch" class="d-none" />
|
|
6
|
+
<input type="checkbox" name="showAccount" id="showAccount" class="d-none" />
|
|
7
|
+
|
|
8
|
+
<!-- Mobile bar -->
|
|
9
|
+
<div class="nav__mobile-bar">
|
|
10
|
+
<div class="container">
|
|
11
|
+
<div class="row">
|
|
12
|
+
<div class="col mw-md-fit-content nav__logo" v-if="hasLogoSlot">
|
|
13
|
+
<slot name="logo"></slot>
|
|
14
|
+
</div>
|
|
15
|
+
<div class="col mw-md-fit-content nav__logo" v-else>
|
|
16
|
+
<a href="/" class="text-decoration-none mb-0">
|
|
17
|
+
<Logo :id="logo" :path="logopath" :desc="logotext" class="pb-0"></Logo>
|
|
18
|
+
</a>
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<div class="col mw-fit-content d-md-none flex-row align-items-center nav__menu-btn">
|
|
22
|
+
<label for="showMenu">Menu</label>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<div class="nav__inner">
|
|
29
|
+
<div class="container">
|
|
30
|
+
<div class="row">
|
|
31
|
+
<div class="col mw-md-fit-content nav__logo" v-if="hasLogoSlot">
|
|
32
|
+
<slot name="logo"></slot>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="col mw-md-fit-content nav__logo" v-else>
|
|
35
|
+
<a href="/" class="text-decoration-none mb-0">
|
|
36
|
+
<Logo :id="logo" :path="logopath" :desc="logotext" class="pb-0"></Logo>
|
|
37
|
+
</a>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<div class="col mw-fit-content nav__search-btn flex-row align-items-center" v-if="hasSearchSlot">
|
|
41
|
+
<label for="showSearch">
|
|
42
|
+
<svg class="icon" viewBox="0 0 32 32">
|
|
43
|
+
<title>Search</title>
|
|
44
|
+
<ellipse cx="14.92" cy="13.81" rx="11.92" ry="11.81" class="icon__outline" />
|
|
45
|
+
<line x1="22.68" y1="22.75" x2="30" y2="30" class="icon__outline" />
|
|
46
|
+
</svg>
|
|
47
|
+
</label>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<div class="col mw-fit-content d-md-none flex-row align-items-center nav__menu-btn">
|
|
51
|
+
<label for="showMenu">Menu</label>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<!-- Main menu -->
|
|
55
|
+
<div class="col-12 col-md nav__menu ms-auto flex-row align-items-center">
|
|
56
|
+
<slot></slot>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
<div class="col nav__account-btn flex-row align-items-center" v-if="hasAccountSlot">
|
|
60
|
+
<label for="showAccount">
|
|
61
|
+
|
|
62
|
+
<svg class="icon" viewBox="0 0 28 28">
|
|
63
|
+
<path d="M14,28a13.861,13.861,0,0,1-9.268-3.533l-.023.047-.721-.738L3.62,23.4l.012-.023a14,14,0,1,1,20.735,0l.012.023-.367.377-.722.738-.024-.045A13.855,13.855,0,0,1,14,28Zm0-9.58a10.5,10.5,0,0,0-1.368.092c-.085.012-.17.03-.252.047-.061.013-.124.026-.187.037l-.077.013c-.266.047-.54.095-.8.165-.108.029-.215.065-.318.1-.063.022-.125.043-.188.063l-.08.026c-.223.071-.454.144-.671.234-.125.05-.245.11-.362.168l-.146.072-.045.021c-.208.1-.423.2-.623.312-.131.074-.257.158-.379.239l-.106.07-.068.044c-.176.114-.359.232-.528.359-.137.1-.267.218-.393.327l-.054.047c-.174.15-.355.306-.519.47-.132.134-.258.277-.38.416l-.018.021c-.16.184-.3.35-.437.527-.12.161-.23.33-.337.494-.076.117-.146.238-.214.356a12.495,12.495,0,0,0,17.109,0l-.022-.037c-.061-.1-.125-.212-.192-.315-.1-.156-.214-.333-.338-.5-.141-.188-.293-.363-.436-.526-.113-.13-.253-.292-.4-.438-.161-.162-.337-.314-.517-.468l-.08-.069c-.118-.1-.24-.209-.368-.307-.183-.137-.379-.264-.568-.387l-.026-.017-.106-.07c-.125-.083-.251-.166-.381-.24-.207-.118-.429-.222-.643-.322l-.024-.011-.152-.074c-.116-.057-.235-.116-.356-.165-.214-.087-.438-.159-.656-.229l-.1-.031c-.066-.021-.132-.043-.2-.066-.1-.035-.2-.07-.309-.1-.264-.07-.538-.118-.8-.165l-.078-.014c-.063-.011-.126-.024-.187-.037-.082-.017-.167-.035-.252-.047A10.483,10.483,0,0,0,14,18.421Zm0-1.473a11.871,11.871,0,0,1,1.54.1c.1.013.192.033.284.052.069.014.139.028.209.04.34.058.672.118,1,.2.14.036.278.082.412.127l.151.05c.309.1.587.188.859.3.148.059.293.127.433.194l.13.061c.306.142.553.266.775.389.188.107.368.22.535.328.26.166.489.322.7.478.156.117.316.244.49.389.209.176.412.361.622.567.156.154.3.293.43.443.209.23.4.472.542.657l.051.066c.1.134.21.272.308.416.021.031.045.061.068.09a1.267,1.267,0,0,1,.085.117,12.525,12.525,0,1,0-19.24,0c.026-.04.056-.078.084-.114s.05-.064.073-.1c.1-.141.2-.278.3-.409l.046-.059c.2-.264.378-.478.555-.672.137-.152.281-.3.417-.43.215-.21.422-.4.635-.578.18-.15.332-.271.479-.381.208-.155.433-.31.709-.486.174-.111.346-.219.526-.319.274-.153.55-.285.783-.393l.112-.053c.144-.069.293-.14.445-.2.282-.113.578-.208.864-.3l.159-.052c.132-.044.265-.088.4-.124.331-.087.675-.148,1-.2.068-.012.137-.026.2-.039.094-.019.191-.039.288-.052A11.827,11.827,0,0,1,14,16.948Z" transform="translate(0 -0.001)" />
|
|
64
|
+
<path d="M5.2,10.4a5.2,5.2,0,1,1,5.2-5.2A5.206,5.206,0,0,1,5.2,10.4Zm0-8.915A3.714,3.714,0,1,0,8.915,5.2,3.719,3.719,0,0,0,5.2,1.486Z" transform="translate(8.8 4.8)" />
|
|
65
|
+
|
|
66
|
+
</svg>
|
|
67
|
+
<span>My account</span>
|
|
68
|
+
</label>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<div class="col-12 col-md nav__btn mw-md-fit-content flex-row align-items-center" v-if="btnlink">
|
|
72
|
+
<a :href="btnlink" class="btn me-0" v-html="btntext"></a>
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
<div class="nav__menu--secondary" v-if="hasSecondarySlot">
|
|
80
|
+
<div class="container">
|
|
81
|
+
<slot name="secondary"></slot>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
<div class="nav__menu--search" v-if="hasSearchSlot">
|
|
85
|
+
<div class="bg-gradient pt-4">
|
|
86
|
+
<div class="container">
|
|
87
|
+
<slot name="search"></slot>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
<div class="nav__menu--account" v-if="hasAccountSlot">
|
|
94
|
+
<div class="container">
|
|
95
|
+
<div class="row mb-4">
|
|
96
|
+
<div class="col mw-md-fit-content nav__logo" v-if="hasLogoSlot">
|
|
97
|
+
<slot name="logo"></slot>
|
|
98
|
+
</div>
|
|
99
|
+
<div class="col mw-md-fit-content nav__logo" v-else>
|
|
100
|
+
<a href="/" class="text-decoration-none mb-0">
|
|
101
|
+
<Logo :id="logo" :path="logopath" :desc="logotext" class="pb-0"></Logo>
|
|
102
|
+
</a>
|
|
103
|
+
</div>
|
|
104
|
+
|
|
105
|
+
<div class="col mw-fit-content d-md-none flex-row align-items-center nav__menu-btn">
|
|
106
|
+
<label for="showAccount">Account</label>
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
<div class="container">
|
|
112
|
+
<slot name="account"></slot>
|
|
113
|
+
</div>
|
|
114
|
+
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
<span class="nav__bg"></span>
|
|
118
|
+
</nav>
|
|
119
|
+
</template>
|
|
120
|
+
|
|
121
|
+
<style lang="scss">
|
|
122
|
+
@import "../../../assets/sass/components/nav.scss";
|
|
123
|
+
</style>
|
|
124
|
+
|
|
125
|
+
<script>
|
|
126
|
+
import nav from '../../../assets/js/modules/nav.js'
|
|
127
|
+
import Logo from '../../foundations/Logo/Logo.vue'
|
|
128
|
+
import Input from '../../elements/Input/Input.vue'
|
|
129
|
+
import Icon from '../../foundations/Icon/Icon.vue'
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
export default {
|
|
133
|
+
components: {
|
|
134
|
+
Input,
|
|
135
|
+
Logo,
|
|
136
|
+
Icon
|
|
137
|
+
},
|
|
138
|
+
name: 'Nav',
|
|
139
|
+
props: {
|
|
140
|
+
logo: {
|
|
141
|
+
type: String,
|
|
142
|
+
required: false
|
|
143
|
+
},
|
|
144
|
+
logotext: {
|
|
145
|
+
type: String,
|
|
146
|
+
required: false
|
|
147
|
+
},
|
|
148
|
+
logopath: {
|
|
149
|
+
type: String,
|
|
150
|
+
required: false
|
|
151
|
+
},
|
|
152
|
+
search: {
|
|
153
|
+
type: String,
|
|
154
|
+
required: false
|
|
155
|
+
},
|
|
156
|
+
btnlink: {
|
|
157
|
+
type: String,
|
|
158
|
+
required: false
|
|
159
|
+
},
|
|
160
|
+
btntext: {
|
|
161
|
+
type: String,
|
|
162
|
+
required: false
|
|
163
|
+
},
|
|
164
|
+
propertylink: {
|
|
165
|
+
type: String,
|
|
166
|
+
required: false
|
|
167
|
+
},
|
|
168
|
+
movebutlerlink: {
|
|
169
|
+
type: String,
|
|
170
|
+
required: false
|
|
171
|
+
},
|
|
172
|
+
iamsoldlink: {
|
|
173
|
+
type: String,
|
|
174
|
+
required: false
|
|
175
|
+
}
|
|
176
|
+
},
|
|
177
|
+
data () {
|
|
178
|
+
return {
|
|
179
|
+
locationSave: ''
|
|
180
|
+
}
|
|
181
|
+
},
|
|
182
|
+
methods: {
|
|
183
|
+
subIsActive (input) {
|
|
184
|
+
const paths = Array.isArray(input) ? input : [input]
|
|
185
|
+
return paths.some(path => {
|
|
186
|
+
return this.$route.path.indexOf(path) === 0 // current path starts with this path string
|
|
187
|
+
})
|
|
188
|
+
}
|
|
189
|
+
},
|
|
190
|
+
computed: {
|
|
191
|
+
hasLogoSlot() {
|
|
192
|
+
return !!this.$slots.logo
|
|
193
|
+
},
|
|
194
|
+
hasSecondarySlot() {
|
|
195
|
+
return !!this.$slots.secondary
|
|
196
|
+
},
|
|
197
|
+
hasSearchSlot() {
|
|
198
|
+
return !!this.$slots.search
|
|
199
|
+
},
|
|
200
|
+
hasAccountSlot() {
|
|
201
|
+
return !!this.$slots.account
|
|
202
|
+
},
|
|
203
|
+
isMarketplace() {
|
|
204
|
+
return false;
|
|
205
|
+
}
|
|
206
|
+
},
|
|
207
|
+
mounted(){
|
|
208
|
+
|
|
209
|
+
this.$nextTick(function () {
|
|
210
|
+
|
|
211
|
+
nav(this.$refs.wrapper);
|
|
212
|
+
})
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
</script>
|