Skip to content

Commit a64d684

Browse files
author
Pooya Parsa
committed
move components to lib + mixins
1 parent e34ce2d commit a64d684

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+154
-132
lines changed

‎components/index.js

Lines changed: 0 additions & 80 deletions
This file was deleted.

‎docs/pages/play.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@
109109
import Vue from 'vue/dist/vue.common';
110110
import {debounce} from 'lodash';
111111
import layout from '../layouts/site.vue';
112-
import * as Components from '../../components';
112+
import * as Components from '../../lib/components';
113113
114114
const exampleHTML = `
115115
<b-btn class="mb-4" @click="clicked">Change progress</b-btn>

‎docs/plugins/bootstrap-vue.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Vue from 'vue';
2-
import BootstrapVue from '../../index';
1+
import Vue from "vue";
2+
import BootstrapVue from "../../lib";
33

44
Vue.use(BootstrapVue);

‎examples/dropdown/demo.html

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,35 @@
11
<div id="app" class="text-center">
22
<b-dropdown text="Dropdown Button sm" size="sm" class="m-md-2">
3-
<a class="dropdown-item">Action</a>
4-
<a class="dropdown-item">Another action</a>
5-
<a class="dropdown-item">Something else here</a>
3+
<b-dropdown-item href="#">Action</b-dropdown-item>
4+
<b-dropdown-item href="#">Another action</b-dropdown-item>
5+
<b-dropdown-item href="#">Something else here</b-dropdown-item>
66
</b-dropdown>
77

88
<br>
99
<br>
1010

1111
<b-dropdown text="Split Dropdown Button" variant="success" split class="m-md-2">
12-
<a class="dropdown-item">Action</a>
13-
<a class="dropdown-item">Another action</a>
14-
<a class="dropdown-item">Something else here...</a>
12+
<b-dropdown-item href="#">Action</b-dropdown-item>
13+
<b-dropdown-item href="#">Another action</b-dropdown-item>
14+
<b-dropdown-item href="#">Something else here...</b-dropdown-item>
1515
</b-dropdown>
1616

1717
<br>
1818
<br>
1919

2020
<b-dropdown text="Right align" variant="warning" right class="m-md-2">
21-
<a class="dropdown-item">Action</a>
22-
<a class="dropdown-item">Another action</a>
23-
<a class="dropdown-item">Something else here</a>
21+
<b-dropdown-item href="#">Action</b-dropdown-item>
22+
<b-dropdown-item href="#">Another action</b-dropdown-item>
23+
<b-dropdown-item href="#">Something else here</b-dropdown-item>
2424
</b-dropdown>
2525

2626
<br>
2727
<br>
2828

2929
<b-dropdown text="Drop-Up" dropup variant="info" class="m-md-2">
30-
<a class="dropdown-item">Action</a>
31-
<a class="dropdown-item">Another action</a>
32-
<a class="dropdown-item">Something else here</a>
30+
<b-dropdown-item href="#">Action</b-dropdown-item>
31+
<b-dropdown-item href="#">Another action</b-dropdown-item>
32+
<b-dropdown-item href="#">Something else here</b-dropdown-item>
3333
</b-dropdown>
3434

3535
</div>

‎components/alert.vue renamed to ‎lib/components/alert.vue

File renamed without changes.

‎components/badge.vue renamed to ‎lib/components/badge.vue

File renamed without changes.

‎components/breadcrumb.vue renamed to ‎lib/components/breadcrumb.vue

File renamed without changes.

‎components/button-checkbox.vue renamed to ‎lib/components/button-checkbox.vue

File renamed without changes.

‎components/button-group.vue renamed to ‎lib/components/button-group.vue

File renamed without changes.

‎components/button-radio.vue renamed to ‎lib/components/button-radio.vue

File renamed without changes.

‎components/button.vue renamed to ‎lib/components/button.vue

File renamed without changes.

‎components/card-group.vue renamed to ‎lib/components/card-group.vue

File renamed without changes.

‎components/card.vue renamed to ‎lib/components/card.vue

File renamed without changes.

‎components/carousel-slide.vue renamed to ‎lib/components/carousel-slide.vue

File renamed without changes.

‎components/carousel.vue renamed to ‎lib/components/carousel.vue

File renamed without changes.

‎components/collapse.vue renamed to ‎lib/components/collapse.vue

File renamed without changes.

‎lib/components/dropdown-item.vue

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<a :is="componentType" class="dropdown-item" :to="toObject" :href="hrefString">
3+
<slot></slot>
4+
</a>
5+
</template>
6+
7+
<script>
8+
import Link from './link.vue';
9+
10+
export default {
11+
extends: Link
12+
};
13+
</script>

‎components/dropdown-select.vue renamed to ‎lib/components/dropdown-select.vue

File renamed without changes.

‎components/dropdown.vue renamed to ‎lib/components/dropdown.vue

Lines changed: 21 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
<template>
2-
<div :class="['btn-group',show?'show':'',dropup?'dropup':'']">
2+
<div :class="['dropdown','btn-group',visible?'show':'',dropup?'dropup':'']">
33

44
<b-button :class="[split?'':'dropdown-toggle']"
5-
id="dropdownMenuButton"
65
@click="click"
76
aria-haspopup="true"
8-
:aria-expanded="show"
7+
:aria-expanded="visible"
98
:variant="variant"
109
:size="size"
1110
:disabled="disabled">
12-
<slot name="text">
13-
{{text}}
14-
15-
</slot>
11+
<slot name="text">{{text}}</slot>
1612
</b-button>
1713

1814
<b-button class="dropdown-toggle dropdown-toggle-split"
@@ -25,7 +21,7 @@
2521
<span class="sr-only">Toggle Dropdown</span>
2622
</b-button>
2723

28-
<div :class="['dropdown-menu',right?'dropdown-menu-right':'']" v-if="show">
24+
<div :class="['dropdown-menu',right?'dropdown-menu-right':'']">
2925
<slot></slot>
3026
</div>
3127

@@ -34,14 +30,18 @@
3430

3531
<script>
3632
import bButton from './button.vue';
33+
import clickOut from '../mixins/clickout';
3734
3835
export default {
36+
mixins: [
37+
clickOut
38+
],
3939
components: {
4040
bButton
4141
},
4242
data() {
4343
return {
44-
show: false
44+
visible: false
4545
};
4646
},
4747
props: {
@@ -74,41 +74,32 @@
7474
default: false
7575
}
7676
},
77-
mounted() {
78-
if (typeof document !== 'undefined') {
79-
document.documentElement.addEventListener('click', this.clickOut);
80-
}
81-
},
82-
destroyed() {
83-
if (typeof document !== 'undefined') {
84-
document.removeEventListener('click', this.clickOut);
85-
}
86-
},
8777
created() {
8878
this.$root.$on('shown::dropdown', el => {
8979
if (el !== this) {
90-
this.clickOut();
80+
this.visible = false;
9181
}
9282
});
9383
},
94-
methods: {
95-
toggle() {
96-
this.setShow(!this.show);
97-
},
98-
setShow(state) {
99-
if (this.show === state) {
84+
watch: {
85+
visible(state, old) {
86+
if (state === old) {
10087
return; // Avoid duplicated emits
10188
}
102-
this.show = state;
10389
104-
if (this.show) {
90+
if (state) {
10591
this.$root.$emit('shown::dropdown', this);
10692
} else {
10793
this.$root.$emit('hidden::dropdown', this);
10894
}
95+
}
96+
},
97+
methods: {
98+
toggle() {
99+
this.visible = !this.visible;
109100
},
110-
clickOut() {
111-
this.setShow(false);
101+
clickOutListener() {
102+
this.visible = false;
112103
},
113104
click() {
114105
if (this.split) {

‎components/form-checkbox.vue renamed to ‎lib/components/form-checkbox.vue

File renamed without changes.

‎components/form-fieldset.vue renamed to ‎lib/components/form-fieldset.vue

File renamed without changes.

‎components/form-input.vue renamed to ‎lib/components/form-input.vue

File renamed without changes.

‎components/form-radio.vue renamed to ‎lib/components/form-radio.vue

File renamed without changes.

‎components/form-select.vue renamed to ‎lib/components/form-select.vue

File renamed without changes.

‎components/form.vue renamed to ‎lib/components/form.vue

File renamed without changes.

‎lib/components/index.js

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import bAlert from "./alert.vue";
2+
import bBreadcrumb from "./breadcrumb.vue";
3+
import bButtonCheckbox from "./button-checkbox.vue";
4+
import bButtonGroup from "./button-group.vue";
5+
import bButtonRadio from "./button-radio.vue";
6+
import bButton from "./button.vue";
7+
import bCard from "./card.vue";
8+
import bCardGroup from "./card-group.vue";
9+
import bCarousel from "./carousel.vue";
10+
import bCarouselSlide from "./carousel-slide.vue";
11+
import bCollapse from "./collapse.vue";
12+
import bDropdown from "./dropdown.vue";
13+
import bDropdownItem from "./dropdown-item.vue";
14+
import bDropdownSelect from "./dropdown-select.vue";
15+
import bForm from "./form.vue";
16+
import bFormFieldset from "./form-fieldset.vue";
17+
import bFormCheckbox from "./form-checkbox.vue";
18+
import bFormRadio from "./form-radio.vue";
19+
import bFormInput from "./form-input.vue";
20+
import bFormSelect from "./form-select.vue";
21+
import bJumbotron from "./jumbotron.vue";
22+
import bBadge from "./badge.vue";
23+
import bListGroup from "./list-group.vue";
24+
import bListGroupItem from "./list-group-item.vue";
25+
import bMedia from "./media.vue";
26+
import bModal from "./modal.vue";
27+
import bNav from "./nav.vue";
28+
import bNavItem from "./nav-item.vue";
29+
import bNavItemDropdown from "./nav-item-dropdown.vue";
30+
import bNavToggle from "./nav-toggle.vue";
31+
import bNavbar from "./navbar.vue";
32+
import bPagination from "./pagination.vue";
33+
import bPopover from "./popover.vue";
34+
import bProgress from "./progress.vue";
35+
import bTable from "./table.vue";
36+
import bTabs from "./tabs.vue";
37+
import bTab from "./tab.vue";
38+
import bTooltip from "./tooltip.vue";
39+
import bLink from "./link.vue";
40+
41+
export {
42+
bAlert,
43+
bBreadcrumb,
44+
bButtonCheckbox,
45+
bButtonGroup,
46+
bButtonRadio,
47+
bButton,
48+
bButton as bBtn,
49+
bCard,
50+
bCardGroup,
51+
bDropdown,
52+
bDropdownItem,
53+
bDropdownSelect,
54+
bForm,
55+
bFormCheckbox,
56+
bFormFieldset,
57+
bFormRadio,
58+
bFormInput,
59+
bFormSelect,
60+
bJumbotron,
61+
bBadge,
62+
bMedia,
63+
bModal,
64+
bNavbar,
65+
bPagination,
66+
bPopover,
67+
bProgress,
68+
bTable,
69+
bTooltip,
70+
bTab,
71+
bTabs,
72+
bNav,
73+
bNavItem,
74+
bNavItemDropdown,
75+
bNavToggle,
76+
bListGroupItem,
77+
bListGroup,
78+
bCarouselSlide as bSlide,
79+
bCarousel,
80+
bCollapse,
81+
bLink
82+
};

‎components/jumbotron.vue renamed to ‎lib/components/jumbotron.vue

File renamed without changes.

‎components/link.vue renamed to ‎lib/components/link.vue

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
<template>
2-
<a
3-
:href="hrefString"
4-
:is="componentType"
5-
:active-class="activeClass"
6-
:to="toObject"
7-
>
2+
<a :is="componentType" :active-class="activeClass" :to="toObject" :href="hrefString">
83
<slot></slot>
94
</a>
105
</template>

‎components/list-group-item.vue renamed to ‎lib/components/list-group-item.vue

File renamed without changes.

‎components/list-group.vue renamed to ‎lib/components/list-group.vue

File renamed without changes.

‎components/media.vue renamed to ‎lib/components/media.vue

File renamed without changes.

‎components/modal.vue renamed to ‎lib/components/modal.vue

File renamed without changes.

‎components/nav-item-dropdown.vue renamed to ‎lib/components/nav-item-dropdown.vue

File renamed without changes.

‎components/nav-item.vue renamed to ‎lib/components/nav-item.vue

File renamed without changes.

‎components/nav-toggle.vue renamed to ‎lib/components/nav-toggle.vue

File renamed without changes.

‎components/nav.vue renamed to ‎lib/components/nav.vue

File renamed without changes.

‎components/navbar.vue renamed to ‎lib/components/navbar.vue

File renamed without changes.

‎components/pagination.vue renamed to ‎lib/components/pagination.vue

File renamed without changes.

‎components/popover.vue renamed to ‎lib/components/popover.vue

File renamed without changes.

‎components/progress.vue renamed to ‎lib/components/progress.vue

File renamed without changes.

‎components/tab.vue renamed to ‎lib/components/tab.vue

File renamed without changes.

‎components/table.vue renamed to ‎lib/components/table.vue

File renamed without changes.

‎components/tabs.vue renamed to ‎lib/components/tabs.vue

File renamed without changes.

‎components/tooltip.vue renamed to ‎lib/components/tooltip.vue

File renamed without changes.

‎index.js renamed to ‎lib/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import * as components from './components';
1+
import * as components from "./components";
22

33
/* eslint-disable no-var, no-undef, guard-for-in, object-shorthand */
44

‎lib/mixins/clickout.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
export default {
2+
mounted() {
3+
if (typeof document !== 'undefined') {
4+
document.documentElement.addEventListener('click', this._clickOutListener);
5+
}
6+
},
7+
destroyed() {
8+
if (typeof document !== 'undefined') {
9+
document.removeEventListener('click', this._clickOutListener);
10+
}
11+
},
12+
methods: {
13+
_clickOutListener(e) {
14+
if (!this.$el.contains(e.target)) {
15+
if (this.clickOutListener) {
16+
this.clickOutListener();
17+
}
18+
}
19+
},
20+
}
21+
};

‎utils/helpers.js renamed to ‎lib/utils/helpers.js

File renamed without changes.

‎utils/index.js renamed to ‎lib/utils/index.js

File renamed without changes.

0 commit comments

Comments
 (0)