@iamproperty/components 3.2.0 → 3.4.5

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 (96) hide show
  1. package/README.md +30 -66
  2. package/assets/css/core.min.css.map +1 -1
  3. package/assets/css/style.min.css.map +1 -1
  4. package/assets/js/main.js +9 -9
  5. package/assets/js/modules/accordion.js +1 -0
  6. package/assets/js/modules/alert.js +37 -53
  7. package/assets/js/modules/carousel.js +74 -100
  8. package/assets/js/modules/chart.js +142 -209
  9. package/assets/js/modules/drawer.js +9 -15
  10. package/assets/js/modules/file-upload.js +30 -45
  11. package/assets/js/modules/form.js +111 -157
  12. package/assets/js/modules/helpers.js +64 -93
  13. package/assets/js/modules/modal.js +67 -88
  14. package/assets/js/modules/nav.js +17 -27
  15. package/assets/js/modules/orderablelist.js +84 -115
  16. package/assets/js/modules/table.js +387 -521
  17. package/assets/js/modules/testimonial.js +61 -80
  18. package/assets/js/modules/youtubevideo.js +104 -135
  19. package/assets/js/scripts.bundle.js +870 -936
  20. package/assets/js/scripts.bundle.js.map +1 -1
  21. package/assets/js/scripts.bundle.min.js +3 -3
  22. package/assets/js/scripts.bundle.min.js.map +1 -1
  23. package/assets/sass/_corefiles.scss +9 -9
  24. package/assets/sass/_forms.scss +1 -1
  25. package/assets/sass/_tests/{sass.spec.js → colours.spec.js} +2 -2
  26. package/assets/sass/_tests/func.spec.js +9 -0
  27. package/assets/sass/_tests/mixins.spec.js +9 -0
  28. package/assets/sass/_tests/typography.spec.js +9 -0
  29. package/assets/ts/main.ts +9 -9
  30. package/assets/ts/modules/accordion.ts +1 -0
  31. package/assets/ts/modules/alert.ts +58 -0
  32. package/assets/ts/modules/carousel.ts +103 -0
  33. package/assets/ts/modules/chart.ts +219 -0
  34. package/assets/ts/modules/drawer.ts +17 -0
  35. package/assets/ts/modules/file-upload.ts +49 -0
  36. package/assets/ts/modules/form.ts +169 -0
  37. package/assets/ts/modules/helpers.ts +120 -0
  38. package/assets/ts/modules/modal.ts +91 -0
  39. package/assets/ts/modules/nav.ts +29 -0
  40. package/assets/ts/modules/orderablelist.ts +123 -0
  41. package/assets/ts/modules/table.ts +586 -0
  42. package/assets/ts/modules/testimonial.ts +84 -0
  43. package/assets/ts/modules/youtubevideo.ts +146 -0
  44. package/dist/components.es.js +671 -750
  45. package/dist/components.umd.js +13 -13
  46. package/dist/style.css +1 -1
  47. package/package.json +54 -38
  48. package/src/components/Accordion/Accordion.vue +1 -1
  49. package/src/components/Alert/Alert.vue +1 -1
  50. package/src/{elements → components}/Card/Card.vue +1 -1
  51. package/src/components/CardDeck/CardDeck.spec.js +1 -1
  52. package/src/components/CardDeck/CardDeck.vue +1 -1
  53. package/src/components/Carousel/Carousel.vue +2 -2
  54. package/src/components/Chart/Chart.vue +2 -2
  55. package/src/{elements → components}/FileUploads/FileUploads.vue +1 -1
  56. package/src/components/Modal/Modal.vue +1 -1
  57. package/src/components/Nav/Nav.vue +2 -2
  58. package/src/components/NoteFeed/NoteFeed.vue +2 -2
  59. package/src/components/PropertySearchbar/PropertySearchbar.vue +1 -1
  60. package/src/{elements → components}/Table/Table.vue +1 -1
  61. package/src/components/Testimonial/Testimonial.vue +1 -1
  62. package/src/foundations/YoutubeVideo/YoutubeVideo.vue +1 -1
  63. package/src/index.js +4 -5
  64. package/assets/.DS_Store +0 -0
  65. package/assets/css/email.min.css +0 -1
  66. package/assets/css/email.min.css.map +0 -1
  67. package/assets/css/error.min.css +0 -1
  68. package/assets/css/error.min.css.map +0 -1
  69. package/assets/sass/components/drawer.scss +0 -47
  70. package/assets/ts/main.js +0 -57
  71. package/assets/ts/main.js.map +0 -1
  72. package/assets/ts/modules/accordion.js +0 -33
  73. package/assets/ts/modules/accordion.js.map +0 -1
  74. package/src/.DS_Store +0 -0
  75. package/src/components/Accordion/Accordion.screenshot.vue +0 -57
  76. package/src/components/Accordion/__screenshots__/win32/laptop/Accordion.png +0 -0
  77. package/src/components/Accordion/__screenshots__/win32/mobile/Accordion.png +0 -0
  78. package/src/components/Accordion/__screenshots__/win32/tablet/Accordion.png +0 -0
  79. package/src/components/Drawer/Drawer.vue +0 -53
  80. package/src/components/Drawer/README.md +0 -23
  81. /package/assets/sass/{elements → components}/buttons.scss +0 -0
  82. /package/assets/sass/{elements → components}/card.scss +0 -0
  83. /package/assets/sass/{elements → components}/container.scss +0 -0
  84. /package/assets/sass/{elements → components}/forms.scss +0 -0
  85. /package/assets/sass/{elements → components}/links.scss +0 -0
  86. /package/assets/sass/{elements → components}/lists.scss +0 -0
  87. /package/assets/sass/{elements → components}/panel.scss +0 -0
  88. /package/assets/sass/{elements → components}/tables.scss +0 -0
  89. /package/assets/sass/{elements → components}/tooltips.scss +0 -0
  90. /package/assets/sass/{elements → foundations}/type.scss +0 -0
  91. /package/src/{elements → components}/Card/README.md +0 -0
  92. /package/src/{elements → components}/FileUploads/README.md +0 -0
  93. /package/src/{elements → components}/Input/Input.vue +0 -0
  94. /package/src/{elements → components}/Input/README.md +0 -0
  95. /package/src/{elements → components}/Table/README.md +0 -0
  96. /package/src/{elements → components}/Table/Table.spec.js +0 -0
package/assets/ts/main.js DELETED
@@ -1,57 +0,0 @@
1
- // Modules
2
- import * as helpers from '../js/modules/helpers';
3
- import nav from '../js/modules/nav';
4
- import table from '../js/modules/table';
5
- import accordion from './modules/accordion';
6
- import testimonial from '../js/modules/testimonial';
7
- import carousel from '../js/modules/carousel';
8
- import form from '../js/modules/form';
9
- import youtubeVideo from '../js/modules/youtubevideo';
10
- import modal from '../js/modules/modal';
11
- // Attach classes to dom elements
12
- document.addEventListener("DOMContentLoaded", function () {
13
- helpers.addBodyClasses(document.body);
14
- helpers.addGlobalEvents(document.body);
15
- helpers.checkElements(document.body);
16
- console.log('test.js');
17
- // ANav
18
- Array.from(document.querySelectorAll('.nav')).forEach((arrayElement, index) => {
19
- nav(arrayElement);
20
- });
21
- // Advanced tables
22
- Array.from(document.querySelectorAll('.table__wrapper')).forEach((arrayElement, index) => {
23
- table(arrayElement);
24
- });
25
- // Accordions
26
- Array.from(document.querySelectorAll('.accordion')).forEach((arrayElement, index) => {
27
- accordion(arrayElement);
28
- });
29
- // Testimonial
30
- Array.from(document.querySelectorAll('.testimonial')).forEach((arrayElement, index) => {
31
- testimonial(arrayElement);
32
- });
33
- // Carousel
34
- Array.from(document.querySelectorAll('.carousel')).forEach((arrayElement, index) => {
35
- carousel(arrayElement);
36
- });
37
- // Form
38
- Array.from(document.querySelectorAll('form')).forEach((arrayElement, index) => {
39
- form(arrayElement);
40
- });
41
- // Modal
42
- Array.from(document.querySelectorAll('.modal')).forEach((arrayElement, index) => {
43
- modal(arrayElement);
44
- });
45
- // YouTube videos
46
- Array.from(document.querySelectorAll('.youtube-embed')).forEach((arrayElement, index) => {
47
- new youtubeVideo(arrayElement);
48
- });
49
- window.addEventListener('hashchange', function () {
50
- const hash = location.hash.replace('#', '');
51
- const label = document.querySelector(`label[for="${hash}"]`);
52
- if (label instanceof HTMLElement) {
53
- label.click();
54
- }
55
- }, false);
56
- });
57
- //# sourceMappingURL=main.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":"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"}
@@ -1,33 +0,0 @@
1
- function accordion(accordionElement) {
2
- // Fetch all the details element.
3
- if (!accordionElement.classList.contains('accordion--keep-open')) {
4
- const details = accordionElement.querySelectorAll(":scope > details");
5
- // Add the onclick listeners.
6
- details.forEach((targetDetail) => {
7
- targetDetail.addEventListener("click", () => {
8
- // Close all the details that are not targetDetail.
9
- details.forEach((detail) => {
10
- if (detail !== targetDetail) {
11
- detail.removeAttribute("open");
12
- }
13
- });
14
- });
15
- });
16
- }
17
- if (window.location.hash && document.querySelector(window.location.hash + ':not([open]) summary')) {
18
- const detail = document.querySelector(window.location.hash + ' summary');
19
- if (detail instanceof HTMLElement) {
20
- detail.click();
21
- }
22
- }
23
- window.addEventListener('hashchange', function () {
24
- if (window.location.hash && document.querySelector(window.location.hash + ' summary')) {
25
- const detail = document.querySelector(window.location.hash + ' summary');
26
- if (detail instanceof HTMLElement) {
27
- detail.click();
28
- }
29
- }
30
- });
31
- }
32
- export default accordion;
33
- //# sourceMappingURL=accordion.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"accordion.js","sourceRoot":"","sources":["accordion.ts"],"names":[],"mappings":"AAAA,SAAS,SAAS,CAAC,gBAAyB;IAE1C,iCAAiC;IACjC,IAAG,CAAC,gBAAgB,CAAC,SAAS,CAAC,QAAQ,CAAC,sBAAsB,CAAC,EAAC;QAE9D,MAAM,OAAO,GAA4B,gBAAgB,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;QAE/F,6BAA6B;QAC7B,OAAO,CAAC,OAAO,CAAC,CAAC,YAAY,EAAE,EAAE;YAC/B,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;gBAC1C,mDAAmD;gBACnD,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;oBACzB,IAAI,MAAM,KAAK,YAAY,EAAE;wBAC3B,MAAM,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;qBAChC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;KACJ;IAGD,IAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAC,sBAAsB,CAAC,EAAE;QAE9F,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAC,UAAU,CAAC,CAAC;QAEvE,IAAI,MAAM,YAAY,WAAW,EAAE;YACjC,MAAM,CAAC,KAAK,EAAE,CAAC;SAChB;KACF;IAED,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE;QACpC,IAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAC,UAAU,CAAC,EAAE;YAElF,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAC,UAAU,CAAC,CAAC;YAEvE,IAAI,MAAM,YAAY,WAAW,EAAE;gBACjC,MAAM,CAAC,KAAK,EAAE,CAAC;aAChB;SACF;IACH,CAAC,CAAC,CAAC;AACL,CAAC;AAED,eAAe,SAAS,CAAA"}
package/src/.DS_Store DELETED
Binary file
@@ -1,57 +0,0 @@
1
- <template>
2
-
3
- <Accordion class="visualtest">
4
-
5
- <AccordionItem title="How long does the auction last?">
6
- <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
7
- </AccordionItem>
8
-
9
- <AccordionItem title="Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat?">
10
- <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
11
- </AccordionItem>
12
-
13
- <button class="btn btn-secondary mx-auto">View all FAQs</button>
14
-
15
- </Accordion>
16
-
17
- <div class="darkmode">
18
- <Accordion class="visualtest">
19
-
20
- <AccordionItem title="How long does the auction last?">
21
- <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
22
- </AccordionItem>
23
-
24
- <AccordionItem title="Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat?">
25
- <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
26
- </AccordionItem>
27
-
28
- <button class="btn btn-secondary mx-auto">View all FAQs</button>
29
-
30
- </Accordion>
31
- </div>
32
- </template>
33
-
34
- <script lang="ts">
35
- import { defineComponent } from "vue";
36
- import Accordion from './Accordion.vue'
37
- import AccordionItem from "./AccordionItem.vue";
38
-
39
- import "../../../assets/sass/main.scss"
40
-
41
- export default defineComponent({
42
- name: "AccordionDarkScreenshot",
43
- components: {
44
- Accordion,
45
- AccordionItem
46
- }
47
- });
48
- </script>
49
-
50
- <style lang="scss">
51
- @use "../../../assets/sass/func" as *;
52
-
53
- .darkmode {
54
- @include invert-colours();
55
- background: var(--colour-primary);
56
- }
57
- </style>
@@ -1,53 +0,0 @@
1
- <template>
2
- <div ref="wrapper">
3
- <input type="checkbox" name="showDrawer" id="showDrawer" class="d-none">
4
- <div class="drawer__btn pb-0">
5
- <div class="container text-end pb-0">
6
- <label for="showDrawer" class="btn btn-secondary me-0">{{label}}</label>
7
- </div>
8
- </div>
9
- <div class="drawer" id="drawer" ref="drawer">
10
- <div class="container text-end pb-0">
11
- <label for="showDrawer" class="btn btn-tertiary mb-0 me-0 py-1 px-2"><span class="visually-hidden">Close</span>&#x2715;</label>
12
- </div>
13
- <slot></slot>
14
- </div>
15
- <hr id="drawer-end" />
16
- </div>
17
- </template>
18
-
19
-
20
- <style lang="scss">
21
- @import "../../../assets/sass/components/drawer.scss";
22
- </style>
23
-
24
- <script>
25
- import drawer from '../../../assets/js/modules/drawer.js'
26
-
27
- export default {
28
- name: 'Header',
29
- props: {
30
- label: {
31
- type: String,
32
- required: true
33
- }
34
- },
35
- mounted(){
36
-
37
- this.$nextTick(function () {
38
-
39
- let element = this.$refs.wrapper;
40
-
41
- const fragment = document.createDocumentFragment();
42
- Array.from(element.childNodes).forEach(child => fragment.appendChild(child));
43
- element.parentNode.insertBefore(fragment, element);
44
- element.parentNode.removeChild(element);
45
-
46
- this.$nextTick(function () {
47
-
48
- drawer(this.$refs.drawer);
49
- })
50
- })
51
- },
52
- }
53
- </script>
@@ -1,23 +0,0 @@
1
- ### Usage
2
-
3
- ```
4
- <Drawer label="Open drawer">
5
- <div class="container">
6
- <h2>Drawer contentent</h2>
7
- </div>
8
- </Drawer>
9
- ```
10
-
11
- ### Properties
12
-
13
- | Option | Type | Default Value | Description |
14
- | ------ | ---- | ------------- | ----------- |
15
- | label | String | - | Required text for the button |
16
-
17
-
18
-
19
- ### Slots
20
-
21
- | Option | Default Value | Description |
22
- | ------ | ------------- | ----------- |
23
- | default | - | Will display within the drawer |
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes