@vue-interface/btn-dropdown 2.0.0-beta.5 → 2.0.0-beta.9
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/dist/{btn-dropdown.es.js → btn-dropdown.js} +477 -394
- package/dist/{btn-dropdown.umd.js → btn-dropdown.umd.cjs} +2 -2
- package/{index.js → dist/index.d.ts} +1 -4
- package/dist/src/BtnDropdown.vue.d.ts +9 -0
- package/dist/src/BtnDropdownAction.vue.d.ts +43 -0
- package/dist/src/BtnDropdownSingle.vue.d.ts +236 -0
- package/dist/src/BtnDropdownSplit.vue.d.ts +238 -0
- package/dist/src/DropdownHandler.d.ts +463 -0
- package/package.json +20 -13
- package/src/BtnDropdown.vue +0 -121
- package/src/BtnDropdownAction.vue +0 -38
- package/src/BtnDropdownSingle.vue +0 -45
- package/src/BtnDropdownSplit.vue +0 -79
- package/src/DropdownHandler.js +0 -458
- /package/dist/{btn-dropdown.css → style.css} +0 -0
package/package.json
CHANGED
|
@@ -1,14 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vue-interface/btn-dropdown",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.9",
|
|
4
4
|
"description": "A Vue button dropdown component.",
|
|
5
5
|
"files": [
|
|
6
|
-
"
|
|
7
|
-
"dist",
|
|
8
|
-
"src"
|
|
6
|
+
"dist"
|
|
9
7
|
],
|
|
8
|
+
"type": "module",
|
|
10
9
|
"main": "./dist/btn-dropdown.umd.js",
|
|
11
|
-
"module": "./
|
|
10
|
+
"module": "./dist/btn-dropdown.js",
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"import": "./dist/btn-dropdown.js",
|
|
15
|
+
"require": "./dist/btn-dropdown.umd.js",
|
|
16
|
+
"types": "./dist/index.d.ts"
|
|
17
|
+
},
|
|
18
|
+
"./dist/style.css": "./dist/style.css"
|
|
19
|
+
},
|
|
12
20
|
"browserslist": "last 2 versions, > 0.5%, ie >= 11",
|
|
13
21
|
"scripts": {
|
|
14
22
|
"dev": "vite",
|
|
@@ -38,29 +46,28 @@
|
|
|
38
46
|
"bugs": {
|
|
39
47
|
"url": "https://github.com/vue-interface/btn-dropdown/issues"
|
|
40
48
|
},
|
|
41
|
-
"homepage": "https://github.com/vue-interface/btn-dropdown/docs
|
|
49
|
+
"homepage": "https://github.com/vue-interface/btn-dropdown/docs",
|
|
42
50
|
"dependencies": {
|
|
43
51
|
"@popperjs/core": "^2.11.2",
|
|
44
52
|
"@vue-interface/btn": "^3.0.0-beta.1",
|
|
45
|
-
"@vue-interface/btn-group": "^2.0.0-beta.
|
|
46
|
-
"@vue-interface/dropdown-menu": "^2.0.0-beta.
|
|
53
|
+
"@vue-interface/btn-group": "^2.0.0-beta.4",
|
|
54
|
+
"@vue-interface/dropdown-menu": "^2.0.0-beta.8"
|
|
47
55
|
},
|
|
48
56
|
"peerDependencies": {
|
|
49
57
|
"vue": "^3.0.0"
|
|
50
58
|
},
|
|
51
59
|
"devDependencies": {
|
|
52
|
-
"@rollup/plugin-babel": "^6.0.0",
|
|
53
60
|
"@vitejs/plugin-vue": "^4.0.0",
|
|
61
|
+
"@vue-interface/eslint-config": "1.0.0-beta.1",
|
|
54
62
|
"autoprefixer": "^10.4.2",
|
|
55
|
-
"babel-eslint": "^10.1.0",
|
|
56
|
-
"babel-preset-vue": "^2.0.2",
|
|
57
63
|
"change-case": "^4.1.2",
|
|
58
64
|
"eslint": "^8.25.0",
|
|
59
|
-
"eslint-plugin-vue": "^9.6.0",
|
|
60
65
|
"pascalcase": "^2.0.0",
|
|
61
66
|
"postcss": "^8.4.6",
|
|
62
67
|
"tailwindcss": "^3.1.0",
|
|
63
|
-
"
|
|
68
|
+
"typescript": "^4.9.4",
|
|
69
|
+
"vite": "^4.0.0",
|
|
70
|
+
"vite-plugin-dts": "^1.7.1",
|
|
64
71
|
"vue": "^3.2.41"
|
|
65
72
|
}
|
|
66
73
|
}
|
package/src/BtnDropdown.vue
DELETED
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
import BtnDropdownSplit from './BtnDropdownSplit.vue';
|
|
3
|
-
import BtnDropdownSingle from './BtnDropdownSingle.vue';
|
|
4
|
-
|
|
5
|
-
export default {
|
|
6
|
-
|
|
7
|
-
name: 'BtnDropdown',
|
|
8
|
-
|
|
9
|
-
components: {
|
|
10
|
-
BtnDropdownSplit,
|
|
11
|
-
BtnDropdownSingle
|
|
12
|
-
},
|
|
13
|
-
|
|
14
|
-
inheritAttrs: false,
|
|
15
|
-
|
|
16
|
-
emits: [
|
|
17
|
-
'click',
|
|
18
|
-
'click-toggle',
|
|
19
|
-
'dropdown',
|
|
20
|
-
'show',
|
|
21
|
-
'hide',
|
|
22
|
-
'toggle'
|
|
23
|
-
]
|
|
24
|
-
|
|
25
|
-
};
|
|
26
|
-
</script>
|
|
27
|
-
|
|
28
|
-
<template>
|
|
29
|
-
<component
|
|
30
|
-
:is="$attrs.split === undefined || !!$attrs.nav ? 'btn-dropdown-single' : 'btn-dropdown-split'"
|
|
31
|
-
class="btn-dropdown"
|
|
32
|
-
v-bind="$attrs"
|
|
33
|
-
@click="(...args) => $emit('click', ...args)"
|
|
34
|
-
@click-toggle="(...args) => $emit('click-toggle', ...args)"
|
|
35
|
-
@dropdown="(...args) => $emit('dropdown', ...args)"
|
|
36
|
-
@show="(...args) => $emit('show', ...args)"
|
|
37
|
-
@hide="(...args) => $emit('hide', ...args)"
|
|
38
|
-
@toggle="(...args) => $emit('toggle', ...args)">
|
|
39
|
-
<template #icon>
|
|
40
|
-
<slot name="icon" />
|
|
41
|
-
</template>
|
|
42
|
-
<template v-if="$attrs.label || $slots.label" #label>
|
|
43
|
-
<slot name="label">
|
|
44
|
-
{{ $attrs.label }}
|
|
45
|
-
</slot>
|
|
46
|
-
</template>
|
|
47
|
-
<template #button="slot">
|
|
48
|
-
<slot name="button" v-bind="slot" />
|
|
49
|
-
</template>
|
|
50
|
-
<template #split="slot">
|
|
51
|
-
<slot name="split" v-bind="slot" />
|
|
52
|
-
</template>
|
|
53
|
-
<slot />
|
|
54
|
-
</component>
|
|
55
|
-
</template>
|
|
56
|
-
|
|
57
|
-
<style>
|
|
58
|
-
@keyframes btnDropdownZoomIn {
|
|
59
|
-
from {
|
|
60
|
-
opacity: 0;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
to {
|
|
64
|
-
opacity: 1;
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
.btn-dropdown {
|
|
70
|
-
position: relative;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.btn-dropdown .dropdown-toggle {
|
|
74
|
-
display: flex;
|
|
75
|
-
transition: all 125ms ease-in;
|
|
76
|
-
align-items: center;
|
|
77
|
-
justify-content: center;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.nav-item .btn-group,
|
|
81
|
-
.nav-item .btn-dropdown .dropdown-toggle {
|
|
82
|
-
display: block;
|
|
83
|
-
}
|
|
84
|
-
/*
|
|
85
|
-
.btn-dropdown.rounded-circle > .btn:last-child,
|
|
86
|
-
.btn-dropdown.rounded-circle > .btn-group:last-child .dropdown-toggle {
|
|
87
|
-
border-top-right-radius: 100%;
|
|
88
|
-
border-bottom-right-radius: 100%;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.btn-dropdown.rounded-circle > .btn:first-child,
|
|
92
|
-
.btn-dropdown.rounded-circle > .btn-group:first-child .dropdown-toggle {
|
|
93
|
-
border-top-left-radius: 100%;
|
|
94
|
-
border-bottom-left-radius: 100%;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.btn-dropdown .rounded-circle {
|
|
98
|
-
border-radius: 100%;
|
|
99
|
-
} */
|
|
100
|
-
|
|
101
|
-
.btn-dropdown .rotate-90 {
|
|
102
|
-
transform: rotate(90deg);
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
.btn-dropdown.hide-caret .dropdown-toggle::after,
|
|
106
|
-
.btn-dropdown.icon-only .dropdown-toggle::after,
|
|
107
|
-
.btn-dropdown.hide-caret .dropdown-toggle::before,
|
|
108
|
-
.btn-dropdown.icon-only .dropdown-toggle::before {
|
|
109
|
-
display: none;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.btn-dropdown .dropdown-menu {
|
|
113
|
-
animation-timing-function: ease-in-out;
|
|
114
|
-
animation-duration: 200ms;
|
|
115
|
-
animation-fill-mode: both;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
.btn-dropdown .dropdown-menu.animated {
|
|
119
|
-
animation-name: btnDropdownZoomIn;
|
|
120
|
-
}
|
|
121
|
-
</style>
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
export default {
|
|
3
|
-
props: {
|
|
4
|
-
expanded: {
|
|
5
|
-
type: Boolean,
|
|
6
|
-
default: false
|
|
7
|
-
},
|
|
8
|
-
id: String,
|
|
9
|
-
href: String,
|
|
10
|
-
to: [String, Object]
|
|
11
|
-
},
|
|
12
|
-
computed: {
|
|
13
|
-
is() {
|
|
14
|
-
if(this.to) {
|
|
15
|
-
return 'router-link';
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
if(this.href) {
|
|
19
|
-
return 'a';
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
return 'button';
|
|
23
|
-
},
|
|
24
|
-
}
|
|
25
|
-
};
|
|
26
|
-
</script>
|
|
27
|
-
|
|
28
|
-
<template>
|
|
29
|
-
<component
|
|
30
|
-
:is="is"
|
|
31
|
-
:id="id"
|
|
32
|
-
v-bind="to ? { to } : { href }"
|
|
33
|
-
aria-haspopup="true"
|
|
34
|
-
:aria-expanded="expanded"
|
|
35
|
-
:type="is === 'button' ? 'button': undefined">
|
|
36
|
-
<slot />
|
|
37
|
-
</component>
|
|
38
|
-
</template>
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
import DropdownHandler from './DropdownHandler';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
|
|
6
|
-
mixins: [
|
|
7
|
-
DropdownHandler
|
|
8
|
-
]
|
|
9
|
-
|
|
10
|
-
};
|
|
11
|
-
</script>
|
|
12
|
-
|
|
13
|
-
<template>
|
|
14
|
-
<btn-group :class="classes">
|
|
15
|
-
<slot name="button" v-bind="scope">
|
|
16
|
-
<btn-dropdown-action
|
|
17
|
-
:id="$attrs.id"
|
|
18
|
-
ref="button"
|
|
19
|
-
:expanded="expanded"
|
|
20
|
-
:href="href"
|
|
21
|
-
:to="to"
|
|
22
|
-
:style="toggleStyle"
|
|
23
|
-
:class="toggleClasses"
|
|
24
|
-
@blur="onBlur"
|
|
25
|
-
@click="onClickToggle">
|
|
26
|
-
<slot name="icon" />
|
|
27
|
-
<slot name="label">
|
|
28
|
-
{{ label }}
|
|
29
|
-
</slot>
|
|
30
|
-
</btn-dropdown-action>
|
|
31
|
-
</slot>
|
|
32
|
-
<dropdown-menu
|
|
33
|
-
:id="$attrs.id"
|
|
34
|
-
ref="menu"
|
|
35
|
-
:align="align"
|
|
36
|
-
:show="expanded"
|
|
37
|
-
:class="{animated: triggerAnimation}"
|
|
38
|
-
@blur="onBlur"
|
|
39
|
-
@click="onClickItem"
|
|
40
|
-
@keydown.tab="onKeydown"
|
|
41
|
-
@mousedown.prevent="">
|
|
42
|
-
<slot />
|
|
43
|
-
</dropdown-menu>
|
|
44
|
-
</btn-group>
|
|
45
|
-
</template>
|
package/src/BtnDropdownSplit.vue
DELETED
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
import DropdownHandler from './DropdownHandler';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
|
|
6
|
-
mixins: [
|
|
7
|
-
DropdownHandler
|
|
8
|
-
],
|
|
9
|
-
|
|
10
|
-
emits: [
|
|
11
|
-
'click'
|
|
12
|
-
]
|
|
13
|
-
|
|
14
|
-
};
|
|
15
|
-
</script>
|
|
16
|
-
|
|
17
|
-
<template>
|
|
18
|
-
<btn-group :class="classes" class="btn-dropdown-split">
|
|
19
|
-
<slot v-if="!dropleft" name="button" v-bind="scope">
|
|
20
|
-
<btn-dropdown-action
|
|
21
|
-
v-if="!dropleft"
|
|
22
|
-
:id="$attrs.id"
|
|
23
|
-
ref="button"
|
|
24
|
-
:expanded="expanded"
|
|
25
|
-
:href="href"
|
|
26
|
-
:to="to"
|
|
27
|
-
:class="actionClasses"
|
|
28
|
-
@click="e => $emit('click', e)">
|
|
29
|
-
<slot name="icon" />
|
|
30
|
-
<slot name="label">
|
|
31
|
-
{{ label }}
|
|
32
|
-
</slot>
|
|
33
|
-
</btn-dropdown-action>
|
|
34
|
-
</slot>
|
|
35
|
-
|
|
36
|
-
<btn-group ref="split">
|
|
37
|
-
<slot name="split" v-bind="scope">
|
|
38
|
-
<button
|
|
39
|
-
v-if="split"
|
|
40
|
-
:id="$attrs.id"
|
|
41
|
-
type="button"
|
|
42
|
-
aria-haspopup="true"
|
|
43
|
-
:aria-expanded="expanded"
|
|
44
|
-
:class="toggleClasses"
|
|
45
|
-
@blur="onBlur"
|
|
46
|
-
@click="onClickToggle" />
|
|
47
|
-
</slot>
|
|
48
|
-
|
|
49
|
-
<dropdown-menu
|
|
50
|
-
:id="$attrs.id"
|
|
51
|
-
ref="menu"
|
|
52
|
-
:align="align"
|
|
53
|
-
:show="expanded"
|
|
54
|
-
:class="{animated: triggerAnimation}"
|
|
55
|
-
@blur="onBlur"
|
|
56
|
-
@click="onClickItem"
|
|
57
|
-
@keydown.tab="onKeydown"
|
|
58
|
-
@mousedown.prevent="">
|
|
59
|
-
<slot />
|
|
60
|
-
</dropdown-menu>
|
|
61
|
-
</btn-group>
|
|
62
|
-
<slot v-if="dropleft" name="button" v-bind="scope">
|
|
63
|
-
<btn-dropdown-action
|
|
64
|
-
v-if="dropleft"
|
|
65
|
-
:id="$attrs.id"
|
|
66
|
-
ref="button"
|
|
67
|
-
:expanded="expanded"
|
|
68
|
-
:href="href"
|
|
69
|
-
:to="to"
|
|
70
|
-
:class="actionClasses"
|
|
71
|
-
@click="e => $emit('click', e)">
|
|
72
|
-
<slot name="icon" />
|
|
73
|
-
<slot name="label">
|
|
74
|
-
{{ label }}
|
|
75
|
-
</slot>
|
|
76
|
-
</btn-dropdown-action>
|
|
77
|
-
</slot>
|
|
78
|
-
</btn-group>
|
|
79
|
-
</template>
|