@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.
- package/README.md +30 -66
- package/assets/css/core.min.css.map +1 -1
- package/assets/css/style.min.css.map +1 -1
- package/assets/js/main.js +9 -9
- package/assets/js/modules/accordion.js +1 -0
- package/assets/js/modules/alert.js +37 -53
- package/assets/js/modules/carousel.js +74 -100
- package/assets/js/modules/chart.js +142 -209
- package/assets/js/modules/drawer.js +9 -15
- package/assets/js/modules/file-upload.js +30 -45
- package/assets/js/modules/form.js +111 -157
- package/assets/js/modules/helpers.js +64 -93
- package/assets/js/modules/modal.js +67 -88
- package/assets/js/modules/nav.js +17 -27
- package/assets/js/modules/orderablelist.js +84 -115
- package/assets/js/modules/table.js +387 -521
- package/assets/js/modules/testimonial.js +61 -80
- package/assets/js/modules/youtubevideo.js +104 -135
- package/assets/js/scripts.bundle.js +870 -936
- package/assets/js/scripts.bundle.js.map +1 -1
- package/assets/js/scripts.bundle.min.js +3 -3
- package/assets/js/scripts.bundle.min.js.map +1 -1
- package/assets/sass/_corefiles.scss +9 -9
- package/assets/sass/_forms.scss +1 -1
- package/assets/sass/_tests/{sass.spec.js → colours.spec.js} +2 -2
- package/assets/sass/_tests/func.spec.js +9 -0
- package/assets/sass/_tests/mixins.spec.js +9 -0
- package/assets/sass/_tests/typography.spec.js +9 -0
- package/assets/ts/main.ts +9 -9
- package/assets/ts/modules/accordion.ts +1 -0
- package/assets/ts/modules/alert.ts +58 -0
- package/assets/ts/modules/carousel.ts +103 -0
- package/assets/ts/modules/chart.ts +219 -0
- package/assets/ts/modules/drawer.ts +17 -0
- package/assets/ts/modules/file-upload.ts +49 -0
- package/assets/ts/modules/form.ts +169 -0
- package/assets/ts/modules/helpers.ts +120 -0
- package/assets/ts/modules/modal.ts +91 -0
- package/assets/ts/modules/nav.ts +29 -0
- package/assets/ts/modules/orderablelist.ts +123 -0
- package/assets/ts/modules/table.ts +586 -0
- package/assets/ts/modules/testimonial.ts +84 -0
- package/assets/ts/modules/youtubevideo.ts +146 -0
- package/dist/components.es.js +671 -750
- package/dist/components.umd.js +13 -13
- package/dist/style.css +1 -1
- package/package.json +54 -38
- package/src/components/Accordion/Accordion.vue +1 -1
- package/src/components/Alert/Alert.vue +1 -1
- package/src/{elements → components}/Card/Card.vue +1 -1
- package/src/components/CardDeck/CardDeck.spec.js +1 -1
- package/src/components/CardDeck/CardDeck.vue +1 -1
- package/src/components/Carousel/Carousel.vue +2 -2
- package/src/components/Chart/Chart.vue +2 -2
- package/src/{elements → components}/FileUploads/FileUploads.vue +1 -1
- package/src/components/Modal/Modal.vue +1 -1
- package/src/components/Nav/Nav.vue +2 -2
- package/src/components/NoteFeed/NoteFeed.vue +2 -2
- package/src/components/PropertySearchbar/PropertySearchbar.vue +1 -1
- package/src/{elements → components}/Table/Table.vue +1 -1
- package/src/components/Testimonial/Testimonial.vue +1 -1
- package/src/foundations/YoutubeVideo/YoutubeVideo.vue +1 -1
- package/src/index.js +4 -5
- package/assets/.DS_Store +0 -0
- package/assets/css/email.min.css +0 -1
- package/assets/css/email.min.css.map +0 -1
- package/assets/css/error.min.css +0 -1
- package/assets/css/error.min.css.map +0 -1
- package/assets/sass/components/drawer.scss +0 -47
- package/assets/ts/main.js +0 -57
- package/assets/ts/main.js.map +0 -1
- package/assets/ts/modules/accordion.js +0 -33
- package/assets/ts/modules/accordion.js.map +0 -1
- package/src/.DS_Store +0 -0
- package/src/components/Accordion/Accordion.screenshot.vue +0 -57
- package/src/components/Accordion/__screenshots__/win32/laptop/Accordion.png +0 -0
- package/src/components/Accordion/__screenshots__/win32/mobile/Accordion.png +0 -0
- package/src/components/Accordion/__screenshots__/win32/tablet/Accordion.png +0 -0
- package/src/components/Drawer/Drawer.vue +0 -53
- package/src/components/Drawer/README.md +0 -23
- /package/assets/sass/{elements → components}/buttons.scss +0 -0
- /package/assets/sass/{elements → components}/card.scss +0 -0
- /package/assets/sass/{elements → components}/container.scss +0 -0
- /package/assets/sass/{elements → components}/forms.scss +0 -0
- /package/assets/sass/{elements → components}/links.scss +0 -0
- /package/assets/sass/{elements → components}/lists.scss +0 -0
- /package/assets/sass/{elements → components}/panel.scss +0 -0
- /package/assets/sass/{elements → components}/tables.scss +0 -0
- /package/assets/sass/{elements → components}/tooltips.scss +0 -0
- /package/assets/sass/{elements → foundations}/type.scss +0 -0
- /package/src/{elements → components}/Card/README.md +0 -0
- /package/src/{elements → components}/FileUploads/README.md +0 -0
- /package/src/{elements → components}/Input/Input.vue +0 -0
- /package/src/{elements → components}/Input/README.md +0 -0
- /package/src/{elements → components}/Table/README.md +0 -0
- /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
|
package/assets/ts/main.js.map
DELETED
|
@@ -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>
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -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>✕</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
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|