@iamproperty/components 3.1.0 → 3.4.4

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