@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.
Files changed (161) hide show
  1. package/README.md +141 -16
  2. package/assets/.DS_Store +0 -0
  3. package/assets/css/core.min.css +1 -1
  4. package/assets/css/core.min.css.map +1 -1
  5. package/assets/css/email.min.css +1 -1
  6. package/assets/css/email.min.css.map +1 -1
  7. package/assets/css/error.min.css +1 -1
  8. package/assets/css/error.min.css.map +1 -1
  9. package/assets/css/style.min.css +1 -1
  10. package/assets/css/style.min.css.map +1 -1
  11. package/assets/favicons/manifest.json +31 -31
  12. package/assets/js/main.js +57 -57
  13. package/assets/js/modules/accordion.js +32 -32
  14. package/assets/js/modules/alert.js +56 -56
  15. package/assets/js/modules/carousel.js +101 -101
  16. package/assets/js/modules/chart.js +218 -218
  17. package/assets/js/modules/drawer.js +15 -15
  18. package/assets/js/modules/file-upload.js +48 -0
  19. package/assets/js/modules/form.js +168 -159
  20. package/assets/js/modules/helpers.js +119 -119
  21. package/assets/js/modules/modal.js +89 -89
  22. package/assets/js/modules/nav.js +28 -28
  23. package/assets/js/modules/orderablelist.js +122 -0
  24. package/assets/js/modules/table.js +585 -585
  25. package/assets/js/modules/testimonial.js +82 -82
  26. package/assets/js/modules/youtubevideo.js +145 -145
  27. package/assets/js/scripts.bundle.js +256 -242
  28. package/assets/js/scripts.bundle.js.map +1 -1
  29. package/assets/js/scripts.bundle.min.js +2 -2
  30. package/assets/js/scripts.bundle.min.js.map +1 -1
  31. package/assets/sass/_components.scss +14 -14
  32. package/assets/sass/_corefiles.scss +40 -40
  33. package/assets/sass/_fonts.scss +16 -16
  34. package/assets/sass/_forms.scss +9 -9
  35. package/assets/sass/_func.scss +12 -12
  36. package/assets/sass/_functions/functions.scss +141 -141
  37. package/assets/sass/_functions/mixins.scss +170 -170
  38. package/assets/sass/_functions/utilities.scss +143 -250
  39. package/assets/sass/_functions/variables.scss +467 -467
  40. package/assets/sass/_print.scss +61 -61
  41. package/assets/sass/_tests/colours.spec.scss +44 -44
  42. package/assets/sass/_tests/func.spec.scss +232 -232
  43. package/assets/sass/_tests/mixins.spec.scss +194 -194
  44. package/assets/sass/_tests/sass.spec.js +9 -9
  45. package/assets/sass/_tests/typography.spec.scss +35 -35
  46. package/assets/sass/components/accordion.scss +197 -197
  47. package/assets/sass/components/alert.scss +98 -98
  48. package/assets/sass/components/cardDeck.scss +107 -107
  49. package/assets/sass/components/carousel.scss +234 -234
  50. package/assets/sass/components/charts.scss +569 -569
  51. package/assets/sass/components/drawer.scss +46 -46
  52. package/assets/sass/components/header.scss +63 -63
  53. package/assets/sass/components/modal.scss +136 -136
  54. package/assets/sass/components/nav.scss +960 -918
  55. package/assets/sass/components/property-searchbar.scss +143 -143
  56. package/assets/sass/components/snapshot.scss +70 -70
  57. package/assets/sass/components/stepper.scss +164 -164
  58. package/assets/sass/components/tabs.scss +87 -87
  59. package/assets/sass/components/testimonial.scss +132 -132
  60. package/assets/sass/components/timeline.scss +95 -95
  61. package/assets/sass/core.scss +6 -6
  62. package/assets/sass/elements/buttons.scss +251 -209
  63. package/assets/sass/elements/card.scss +289 -177
  64. package/assets/sass/elements/container.scss +236 -225
  65. package/assets/sass/elements/forms.scss +262 -194
  66. package/assets/sass/elements/links.scss +97 -96
  67. package/assets/sass/elements/lists.scss +159 -112
  68. package/assets/sass/elements/panel.scss +161 -161
  69. package/assets/sass/elements/tables.scss +290 -290
  70. package/assets/sass/elements/tooltips.scss +84 -84
  71. package/assets/sass/elements/type.scss +136 -136
  72. package/assets/sass/email.scss +65 -65
  73. package/assets/sass/error.scss +4 -4
  74. package/assets/sass/foundations/brand.scss +76 -72
  75. package/assets/sass/foundations/circles.scss +74 -74
  76. package/assets/sass/foundations/icons.scss +80 -72
  77. package/assets/sass/foundations/media.scss +50 -50
  78. package/assets/sass/foundations/reboot.scss +130 -130
  79. package/assets/sass/foundations/root.scss +125 -106
  80. package/assets/sass/main.scss +7 -7
  81. package/assets/svg/icons.svg +598 -598
  82. package/assets/svg/logo.svg +49 -43
  83. package/assets/ts/main.js +56 -56
  84. package/assets/ts/main.ts +68 -68
  85. package/assets/ts/modules/accordion.js +32 -32
  86. package/assets/ts/modules/accordion.ts +43 -43
  87. package/dist/components.es.js +393 -379
  88. package/dist/components.umd.js +16 -16
  89. package/dist/style.css +1 -1
  90. package/package.json +96 -108
  91. package/src/.DS_Store +0 -0
  92. package/src/components/Accordion/Accordion.screenshot.vue +57 -57
  93. package/src/components/Accordion/Accordion.spec.js +63 -63
  94. package/src/components/Accordion/Accordion.vue +22 -22
  95. package/src/components/Accordion/AccordionItem.vue +52 -52
  96. package/src/components/Accordion/README.md +34 -34
  97. package/src/components/Alert/Alert.spec.js +49 -49
  98. package/src/components/Alert/Alert.vue +39 -39
  99. package/src/components/Alert/README.md +28 -28
  100. package/src/components/Banner/Banner.spec.js +28 -28
  101. package/src/components/Banner/Banner.vue +38 -38
  102. package/src/components/Banner/README.md +23 -23
  103. package/src/components/CardDeck/CardDeck.spec.js +99 -99
  104. package/src/components/CardDeck/CardDeck.vue +77 -77
  105. package/src/components/CardDeck/README.md +24 -24
  106. package/src/components/Carousel/Carousel.spec.js +45 -45
  107. package/src/components/Carousel/Carousel.vue +85 -85
  108. package/src/components/Carousel/README.md +19 -19
  109. package/src/components/Chart/Chart.spec.js +201 -201
  110. package/src/components/Chart/Chart.vue +88 -88
  111. package/src/components/Chart/README.md +17 -17
  112. package/src/components/Drawer/Drawer.vue +53 -53
  113. package/src/components/Drawer/README.md +22 -22
  114. package/src/components/Header/Header.spec.js +33 -33
  115. package/src/components/Header/Header.vue +38 -38
  116. package/src/components/Header/README.md +27 -27
  117. package/src/components/Modal/Modal.spec.js +22 -22
  118. package/src/components/Modal/Modal.vue +43 -43
  119. package/src/components/Modal/README.md +19 -19
  120. package/src/components/Nav/Nav.spec.js +35 -35
  121. package/src/components/Nav/Nav.vue +215 -215
  122. package/src/components/Nav/README.md +22 -22
  123. package/src/components/NoteFeed/NoteFeed.vue +79 -79
  124. package/src/components/NoteFeed/README.md +16 -16
  125. package/src/components/PropertySearchbar/PropertySearchbar.vue +204 -204
  126. package/src/components/PropertySearchbar/README.md +25 -25
  127. package/src/components/Snapshot/README.md +20 -20
  128. package/src/components/Snapshot/Snapshot.vue +32 -32
  129. package/src/components/Stepper/README.md +32 -32
  130. package/src/components/Stepper/Step.vue +28 -28
  131. package/src/components/Stepper/Stepper.spec.js +99 -99
  132. package/src/components/Stepper/Stepper.vue +33 -33
  133. package/src/components/Tabs/README.md +27 -27
  134. package/src/components/Tabs/Tab.vue +32 -32
  135. package/src/components/Tabs/Tabs.vue +77 -77
  136. package/src/components/Testimonial/README.md +25 -25
  137. package/src/components/Testimonial/Testimonial.spec.js +57 -57
  138. package/src/components/Testimonial/Testimonial.vue +60 -60
  139. package/src/components/Timeline/README.md +18 -18
  140. package/src/components/Timeline/Timeline.spec.js +17 -17
  141. package/src/components/Timeline/Timeline.vue +24 -24
  142. package/src/elements/Card/Card.vue +122 -113
  143. package/src/elements/Card/README.md +24 -24
  144. package/src/elements/FileUploads/FileUploads.vue +48 -48
  145. package/src/elements/FileUploads/README.md +24 -24
  146. package/src/elements/Input/Input.vue +272 -268
  147. package/src/elements/Input/README.md +19 -19
  148. package/src/elements/Table/README.md +62 -62
  149. package/src/elements/Table/Table.spec.js +90 -90
  150. package/src/elements/Table/Table.vue +129 -129
  151. package/src/foundations/Icon/Icon.spec.js +24 -24
  152. package/src/foundations/Icon/Icon.vue +24 -24
  153. package/src/foundations/Icon/README.md +11 -11
  154. package/src/foundations/Logo/Logo.spec.js +56 -56
  155. package/src/foundations/Logo/Logo.vue +39 -39
  156. package/src/foundations/Logo/README.md +20 -20
  157. package/src/foundations/YoutubeVideo/README.md +11 -11
  158. package/src/foundations/YoutubeVideo/YoutubeVideo.vue +24 -24
  159. package/src/helpers/strings.js +12 -12
  160. package/src/index.js +27 -27
  161. 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>