@vue-interface/btn-activity 2.0.0-beta.8 → 3.0.0
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/CHANGELOG.md +7 -0
- package/demo.css +4 -0
- package/docs/btn-activity.md +222 -0
- package/index.css +3 -0
- package/index.html +143 -0
- package/{dist/index.d.ts → index.ts} +4 -1
- package/package.json +18 -42
- package/src/BtnActivity.vue +102 -0
- package/tsconfig.json +27 -0
- package/vite.config.js +47 -0
- package/dist/btn-activity.js +0 -392
- package/dist/btn-activity.umd.cjs +0 -1
- package/dist/src/BtnActivity.vue.d.ts +0 -151
- package/dist/style.css +0 -1
package/CHANGELOG.md
ADDED
package/demo.css
ADDED
|
@@ -0,0 +1,222 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Button Activity
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<script setup>
|
|
6
|
+
import '../demo.css'
|
|
7
|
+
import { ref, onMounted } from 'vue'
|
|
8
|
+
import BtnActivity from '../src/BtnActivity.vue';
|
|
9
|
+
import { Dots, Spinner, Pulse } from '@vue-interface/activity-indicator'
|
|
10
|
+
|
|
11
|
+
const activity = ref(false)
|
|
12
|
+
|
|
13
|
+
/* #region setup */
|
|
14
|
+
const onClick = (event, { toggle }) => {
|
|
15
|
+
toggle()
|
|
16
|
+
|
|
17
|
+
setTimeout(() => {
|
|
18
|
+
toggle()
|
|
19
|
+
}, 2000)
|
|
20
|
+
}
|
|
21
|
+
/* #endregion setup */
|
|
22
|
+
|
|
23
|
+
/* #region activity */
|
|
24
|
+
onMounted(() => {
|
|
25
|
+
const toggle = () => setTimeout(() => {
|
|
26
|
+
activity.value = !activity.value
|
|
27
|
+
toggle()
|
|
28
|
+
}, 1000)
|
|
29
|
+
|
|
30
|
+
toggle()
|
|
31
|
+
})
|
|
32
|
+
/* #endregion activity */
|
|
33
|
+
</script>
|
|
34
|
+
|
|
35
|
+
# Button Activity
|
|
36
|
+
|
|
37
|
+
The `btn-activity` component provides an interactive button with built-in activity indicators for async operations. It extends the standard [button](/packages/btn/docs/btn) and [activity-indicator](/packages/activity-indicator/docs/activity-indicator) components to create these buttons.
|
|
38
|
+
|
|
39
|
+
## Basic Usage
|
|
40
|
+
|
|
41
|
+
<div class="mb-5 flex gap-2">
|
|
42
|
+
<!-- #region basicUsage -->
|
|
43
|
+
<div><btn-activity :indicator="Dots" @click="onClick">Dots</btn-activity></div>
|
|
44
|
+
<div><btn-activity :indicator="Spinner" @click="onClick">Spinner</btn-activity></div>
|
|
45
|
+
<div><btn-activity :indicator="Pulse" @click="onClick">Pulse</btn-activity></div>
|
|
46
|
+
<!-- #endregion basicUsage -->
|
|
47
|
+
</div>
|
|
48
|
+
|
|
49
|
+
<<< @/packages/btn-activity/docs/btn-activity.md#basicUsage{html}
|
|
50
|
+
<<< @/packages/btn-activity/docs/btn-activity.md#setup{js}
|
|
51
|
+
|
|
52
|
+
## Dots
|
|
53
|
+
|
|
54
|
+
<div class="mb-5 flex gap-2">
|
|
55
|
+
<!-- #region dots -->
|
|
56
|
+
<div><btn-activity :indicator="Dots" size="btn-sm" @click="onClick">Click Me!</btn-activity></div>
|
|
57
|
+
<div><btn-activity :indicator="Dots" size="btn-md" @click="onClick">Click Me!</btn-activity></div>
|
|
58
|
+
<div><btn-activity :indicator="Dots" size="btn-lg" @click="onClick">Click Me!</btn-activity></div>
|
|
59
|
+
<!-- #endregion dots -->
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
::: details Show Code
|
|
63
|
+
<<< @/packages/btn-activity/docs/btn-activity.md#dots{html}
|
|
64
|
+
:::
|
|
65
|
+
|
|
66
|
+
## Spinner
|
|
67
|
+
|
|
68
|
+
<div class="flex gap-2 mb-5">
|
|
69
|
+
<!-- #region spinner -->
|
|
70
|
+
<div><btn-activity :indicator="Spinner" size="btn-sm" @click="onClick">Click Me!</btn-activity></div>
|
|
71
|
+
<div><btn-activity :indicator="Spinner" size="btn-md" @click="onClick">Click Me!</btn-activity></div>
|
|
72
|
+
<div><btn-activity :indicator="Spinner" size="btn-lg" @click="onClick">Click Me!</btn-activity></div>
|
|
73
|
+
<!-- #endregion spinner -->
|
|
74
|
+
</div>
|
|
75
|
+
|
|
76
|
+
::: details Show Code
|
|
77
|
+
<<< @/packages/btn-activity/docs/btn-activity.md#spinner{html}
|
|
78
|
+
:::
|
|
79
|
+
|
|
80
|
+
## Pulse
|
|
81
|
+
|
|
82
|
+
<div class="flex gap-2 mb-5">
|
|
83
|
+
<!-- #region pulse -->
|
|
84
|
+
<div><btn-activity :indicator="Pulse" size="btn-sm" @click="onClick">Click Me!</btn-activity></div>
|
|
85
|
+
<div><btn-activity :indicator="Pulse" size="btn-md" @click="onClick">Click Me!</btn-activity></div>
|
|
86
|
+
<div><btn-activity :indicator="Pulse" size="btn-lg" @click="onClick">Click Me!</btn-activity></div>
|
|
87
|
+
<!-- #endregion pulse -->
|
|
88
|
+
</div>
|
|
89
|
+
|
|
90
|
+
::: details Show Code
|
|
91
|
+
<<< @/packages/btn-activity/docs/btn-activity.md#pulse{html}
|
|
92
|
+
:::
|
|
93
|
+
|
|
94
|
+
## Orientation
|
|
95
|
+
|
|
96
|
+
Control the position of the activity indicator relative to the button label using the `orientation` prop.
|
|
97
|
+
|
|
98
|
+
<div class="flex gap-2 mb-5">
|
|
99
|
+
<!-- #region orientation -->
|
|
100
|
+
<div><btn-activity :indicator="Spinner" orientation="top" @click="onClick">Orientate Top</btn-activity></div>
|
|
101
|
+
<div><btn-activity :indicator="Spinner" orientation="bottom" @click="onClick">Orientate Bottom</btn-activity></div>
|
|
102
|
+
<div><btn-activity :indicator="Spinner" orientation="left" @click="onClick">Orientate Left</btn-activity></div>
|
|
103
|
+
<div><btn-activity :indicator="Spinner" orientation="right" @click="onClick">Orientate Right</btn-activity></div>
|
|
104
|
+
<!-- #endregion orientation -->
|
|
105
|
+
</div>
|
|
106
|
+
|
|
107
|
+
::: details Show Code
|
|
108
|
+
<<< @/packages/btn-activity/docs/btn-activity.md#orientation{html}
|
|
109
|
+
:::
|
|
110
|
+
|
|
111
|
+
## Block Activity Buttons
|
|
112
|
+
|
|
113
|
+
Full-width buttons with different indicator orientations using the `block` prop.
|
|
114
|
+
|
|
115
|
+
<div class="flex flex-col gap-4">
|
|
116
|
+
<!-- #region block -->
|
|
117
|
+
<btn-activity :indicator="Spinner" block orientation="top" @click="onClick">Spinner Top</btn-activity>
|
|
118
|
+
<btn-activity :indicator="Spinner" block orientation="bottom" @click="onClick">Spinner Bottom</btn-activity>
|
|
119
|
+
<btn-activity :indicator="Spinner" block orientation="left" @click="onClick">Spinner Left</btn-activity>
|
|
120
|
+
<btn-activity :indicator="Spinner" block orientation="right" @click="onClick">Spinner Right</btn-activity>
|
|
121
|
+
<!-- #endregion block -->
|
|
122
|
+
</div>
|
|
123
|
+
|
|
124
|
+
::: details Show Code
|
|
125
|
+
<<< @/packages/btn-activity/docs/btn-activity.md#block{html}
|
|
126
|
+
:::
|
|
127
|
+
|
|
128
|
+
## Variants
|
|
129
|
+
|
|
130
|
+
Button activity supports all standard button color variants.
|
|
131
|
+
|
|
132
|
+
<div class="flex flex-wrap gap-2 mb-5">
|
|
133
|
+
<!-- #region variants -->
|
|
134
|
+
<btn-activity :indicator="Spinner" variant="btn-secondary" @click="onClick">btn-secondary</btn-activity>
|
|
135
|
+
<btn-activity :indicator="Spinner" variant="btn-warning" @click="onClick">btn-warning</btn-activity>
|
|
136
|
+
<btn-activity :indicator="Spinner" variant="btn-danger" @click="onClick">btn-danger</btn-activity>
|
|
137
|
+
<btn-activity :indicator="Spinner" variant="btn-success" @click="onClick">btn-success</btn-activity>
|
|
138
|
+
<!-- #endregion variants -->
|
|
139
|
+
</div>
|
|
140
|
+
|
|
141
|
+
::: details Show Code
|
|
142
|
+
<<< @/packages/btn-activity/docs/btn-activity.md#variants{html}
|
|
143
|
+
:::
|
|
144
|
+
|
|
145
|
+
## Activity Attribute
|
|
146
|
+
|
|
147
|
+
Control the activity state programmatically using the `activity` prop.
|
|
148
|
+
|
|
149
|
+
<div class="flex gap-2 mb-5">
|
|
150
|
+
<!-- #region activityAttribute -->
|
|
151
|
+
<btn-activity :indicator="Spinner" :activity="activity">
|
|
152
|
+
{{ activity ? 'On' : 'Off' }}
|
|
153
|
+
</btn-activity>
|
|
154
|
+
<btn-activity :indicator="Spinner" :activity="activity" :disabled="true">
|
|
155
|
+
{{ activity ? 'On' : 'Off' }}
|
|
156
|
+
</btn-activity>
|
|
157
|
+
<!-- #endregion activityAttribute -->
|
|
158
|
+
</div>
|
|
159
|
+
|
|
160
|
+
::: details Show Code
|
|
161
|
+
<<< @/packages/btn-activity/docs/btn-activity.md#activityAttribute{html}
|
|
162
|
+
:::
|
|
163
|
+
|
|
164
|
+
<<< @/packages/btn-activity/docs/btn-activity.md#activity{js}
|
|
165
|
+
|
|
166
|
+
## Disabled State
|
|
167
|
+
|
|
168
|
+
Buttons can be disabled to prevent user interaction.
|
|
169
|
+
|
|
170
|
+
<div class="mb-5">
|
|
171
|
+
<!-- #region disabled -->
|
|
172
|
+
<btn-activity :indicator="Spinner" disabled @click="onClick">Spinner</btn-activity>
|
|
173
|
+
<!-- #endregion disabled -->
|
|
174
|
+
</div>
|
|
175
|
+
|
|
176
|
+
::: details Show Code
|
|
177
|
+
<<< @/packages/btn-activity/docs/btn-activity.md#disabled{html}
|
|
178
|
+
:::
|
|
179
|
+
|
|
180
|
+
## Label Attribute
|
|
181
|
+
|
|
182
|
+
Use the `label` prop to set button text without using the default slot.
|
|
183
|
+
|
|
184
|
+
<div class="mb-5">
|
|
185
|
+
<!-- #region labelAttribute -->
|
|
186
|
+
<btn-activity :indicator="Spinner" label="Some Text Here" @click="onClick"></btn-activity>
|
|
187
|
+
<!-- #endregion labelAttribute -->
|
|
188
|
+
</div>
|
|
189
|
+
|
|
190
|
+
::: details Show Code
|
|
191
|
+
<<< @/packages/btn-activity/docs/btn-activity.md#labelAttribute{html}
|
|
192
|
+
:::
|
|
193
|
+
|
|
194
|
+
## Custom Element
|
|
195
|
+
|
|
196
|
+
Combine slot content with the label attribute and disabled states.
|
|
197
|
+
|
|
198
|
+
<div class="flex gap-2 mb-5">
|
|
199
|
+
<!-- #region customElement -->
|
|
200
|
+
<btn-activity :indicator="Spinner" @click="onClick">Label</btn-activity>
|
|
201
|
+
<btn-activity :indicator="Spinner" label="Some Text Here" disabled @click="onClick"></btn-activity>
|
|
202
|
+
<!-- #endregion customElement -->
|
|
203
|
+
</div>
|
|
204
|
+
|
|
205
|
+
::: details Show Code
|
|
206
|
+
<<< @/packages/btn-activity/docs/btn-activity.md#customElement{html}
|
|
207
|
+
:::
|
|
208
|
+
|
|
209
|
+
## Click Event
|
|
210
|
+
|
|
211
|
+
The click event handler receives a toggle function to control the activity state.
|
|
212
|
+
|
|
213
|
+
<div class="flex gap-2 mb-5">
|
|
214
|
+
<!-- #region clickEvent -->
|
|
215
|
+
<btn-activity :indicator="Spinner" class="btn-primary" @click="onClick">Enabled</btn-activity>
|
|
216
|
+
<btn-activity :indicator="Spinner" disabled @click="onClick">Disabled</btn-activity>
|
|
217
|
+
<!-- #endregion clickEvent -->
|
|
218
|
+
</div>
|
|
219
|
+
|
|
220
|
+
::: details Show Code
|
|
221
|
+
<<< @/packages/btn-activity/docs/btn-activity.md#clickEvent{html}
|
|
222
|
+
:::
|
package/index.css
ADDED
package/index.html
ADDED
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
6
|
+
<title>BtnActivity</title>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<div id="app" class="container mx-auto">
|
|
10
|
+
<h1 class="text-5xl mb-5">btn-activity</h1>
|
|
11
|
+
|
|
12
|
+
<div class="mb-5 flex gap-2">
|
|
13
|
+
<div><btn-activity :indicator="Dots()" @click="onClick">Dots</btn-activity></div>
|
|
14
|
+
<div><btn-activity :indicator="Spinner()" @click="onClick">Spinner</btn-activity></div>
|
|
15
|
+
<div><btn-activity :indicator="Pulse()" @click="onClick">Pulse</btn-activity></div>
|
|
16
|
+
</div>
|
|
17
|
+
|
|
18
|
+
<h3 class="text-2xl mt-6 mb-3">Dots</h3>
|
|
19
|
+
|
|
20
|
+
<div class="mb-5 flex gap-2">
|
|
21
|
+
<div><btn-activity :indicator="Dots()" size="btn-sm" @click="onClick">Click Me!</btn-activity></div>
|
|
22
|
+
<div><btn-activity :indicator="Dots()" size="btn-md" @click="onClick">Click Me!</btn-activity></div>
|
|
23
|
+
<div><btn-activity :indicator="Dots()" size="btn-lg" @click="onClick">Click Me!</btn-activity></div>
|
|
24
|
+
</div>
|
|
25
|
+
|
|
26
|
+
<h3 class="text-2xl mt-6 mb-3">Spinner</h3>
|
|
27
|
+
|
|
28
|
+
<div class="mb-5 flex gap-2">
|
|
29
|
+
<div><btn-activity :indicator="Spinner()" size="btn-sm" @click="onClick">Click Me!</btn-activity></div>
|
|
30
|
+
<div><btn-activity :indicator="Spinner()" size="btn-md" @click="onClick">Click Me!</btn-activity></div>
|
|
31
|
+
<div><btn-activity :indicator="Spinner()" size="btn-lg" @click="onClick">Click Me!</btn-activity></div>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<h3 class="text-2xl mt-6 mb-3">Pulse</h3>
|
|
35
|
+
|
|
36
|
+
<div class="mb-5 flex gap-2">
|
|
37
|
+
<div><btn-activity :indicator="Pulse()" size="btn-sm" @click="onClick">Click Me!</btn-activity></div>
|
|
38
|
+
<div><btn-activity :indicator="Pulse()" size="btn-md" @click="onClick">Click Me!</btn-activity></div>
|
|
39
|
+
<div><btn-activity :indicator="Pulse()" size="btn-lg" @click="onClick">Click Me!</btn-activity></div>
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<h2 class="text-2xl mt-6 mb-3">Orientation</h2>
|
|
43
|
+
|
|
44
|
+
<div class="mb-5 flex gap-2">
|
|
45
|
+
<div><btn-activity :indicator="Spinner()" orientation="top" @click="onClick">Orientate Top</btn-activity></div>
|
|
46
|
+
<div><btn-activity :indicator="Spinner()" orientation="bottom" @click="onClick">Orientate Bottom</btn-activity></div>
|
|
47
|
+
<div><btn-activity :indicator="Spinner()" orientation="left" @click="onClick">Orientate Left</btn-activity></div>
|
|
48
|
+
<div><btn-activity :indicator="Spinner()" orientation="right" @click="onClick">Orientate Right</btn-activity></div>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<h2 class="text-2xl mt-6 mb-3">Block</h2>
|
|
52
|
+
|
|
53
|
+
<div class="mb-5 flex-col gap-4">
|
|
54
|
+
<btn-activity :indicator="Spinner()" block orientation="top" @click="onClick">Spinner Top</btn-activity>
|
|
55
|
+
<btn-activity :indicator="Spinner()" block orientation="bottom" @click="onClick">Spinner Bottom</btn-activity>
|
|
56
|
+
<btn-activity :indicator="Spinner()" block orientation="left" @click="onClick">Spinner Left</btn-activity>
|
|
57
|
+
<btn-activity :indicator="Spinner()" block orientation="right" @click="onClick">Spinner Right</btn-activity>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<h2 class="text-2xl mt-6 mb-3">Variants</h2>
|
|
61
|
+
|
|
62
|
+
<div class="mb-5 flex gap-2">
|
|
63
|
+
<btn-activity :indicator="Spinner()" variant="btn-secondary" @click="onClick">btn-success</btn-activity>
|
|
64
|
+
<btn-activity :indicator="Spinner()" variant="btn-warning" @click="onClick">btn-warning</btn-activity>
|
|
65
|
+
<btn-activity :indicator="Spinner()" variant="btn-danger" @click="onClick">btn-danger</btn-activity>
|
|
66
|
+
<btn-activity :indicator="Spinner()" variant="btn-success" @click="onClick">btn-success</btn-activity>
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
<h2 class="text-2xl mt-6 mb-3">Activity Attribute</h2>
|
|
70
|
+
|
|
71
|
+
<div class="flex gap-2">
|
|
72
|
+
<btn-activity :indicator="Spinner()" :activity="activity">
|
|
73
|
+
{{ activity ? 'On' : 'Off' }}
|
|
74
|
+
</btn-activity>
|
|
75
|
+
|
|
76
|
+
<btn-activity :indicator="Spinner()" :activity="activity" :disabled="true">
|
|
77
|
+
{{ activity ? 'On' : 'Off' }}
|
|
78
|
+
</btn-activity>
|
|
79
|
+
</div>
|
|
80
|
+
|
|
81
|
+
<h2 class="text-2xl mt-6 mb-3">Disabled</h2>
|
|
82
|
+
|
|
83
|
+
<btn-activity :indicator="Spinner()" disabled @click="onClick">Spinner Top</btn-activity>
|
|
84
|
+
|
|
85
|
+
<h2 class="text-2xl mt-6 mb-3">Label Attribute</h2>
|
|
86
|
+
|
|
87
|
+
<btn-activity :indicator="Spinner()" label="Some Text Here" @click="onClick"></btn-activity>
|
|
88
|
+
|
|
89
|
+
<h3 class="text-2xl mt-6 mb-3">Custom Element</h3>
|
|
90
|
+
|
|
91
|
+
<div class="flex gap-2">
|
|
92
|
+
<btn-activity :indicator="Spinner()" @click="onClick">Label</btn-activity>
|
|
93
|
+
<btn-activity :indicator="Spinner()" label="Some Text Here" disabled @click="onClick"></btn-activity>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<h3 class="text-2xl mt-6 mb-3">Click Event</h3>
|
|
97
|
+
|
|
98
|
+
<btn-activity :indicator="Spinner()" class="btn-primary mr-1" @click="onClick">Enabled</btn-activity>
|
|
99
|
+
<btn-activity :indicator="Spinner()" disabled @click="onClick">Disabled</btn-activity>
|
|
100
|
+
|
|
101
|
+
</div>
|
|
102
|
+
|
|
103
|
+
<script type="module">
|
|
104
|
+
import './demo.css';
|
|
105
|
+
import { createApp } from 'vue/dist/vue.esm-bundler';
|
|
106
|
+
import { BtnActivity } from './index.ts';
|
|
107
|
+
import { Dots, Spinner, Pulse } from '@vue-interface/activity-indicator';
|
|
108
|
+
|
|
109
|
+
const vue = createApp({
|
|
110
|
+
components: {
|
|
111
|
+
BtnActivity
|
|
112
|
+
},
|
|
113
|
+
methods: {
|
|
114
|
+
onClick(event, { toggle }) {
|
|
115
|
+
toggle();
|
|
116
|
+
|
|
117
|
+
setTimeout(() => {
|
|
118
|
+
toggle();
|
|
119
|
+
}, 2000);
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
data() {
|
|
123
|
+
return {
|
|
124
|
+
Dots: () => Dots,
|
|
125
|
+
Spinner: () => Spinner,
|
|
126
|
+
Pulse: () => Pulse,
|
|
127
|
+
activity: false
|
|
128
|
+
}
|
|
129
|
+
},
|
|
130
|
+
mounted() {
|
|
131
|
+
const toggle = () => setTimeout(() => {
|
|
132
|
+
this.activity = !this.activity;
|
|
133
|
+
|
|
134
|
+
toggle();
|
|
135
|
+
}, 1000);
|
|
136
|
+
|
|
137
|
+
toggle()
|
|
138
|
+
}
|
|
139
|
+
})
|
|
140
|
+
.mount('#app');
|
|
141
|
+
</script>
|
|
142
|
+
</body>
|
|
143
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,38 +1,23 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vue-interface/btn-activity",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "A Vue activity button component.",
|
|
5
5
|
"type": "module",
|
|
6
|
-
"files": [
|
|
7
|
-
"index.js",
|
|
8
|
-
"dist"
|
|
9
|
-
],
|
|
10
6
|
"main": "./dist/btn-activity.umd.cjs",
|
|
11
7
|
"module": "./dist/btn-activity.js",
|
|
12
|
-
"style": "./dist/style.css",
|
|
13
8
|
"types": "./dist/index.d.ts",
|
|
14
9
|
"exports": {
|
|
15
10
|
".": {
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
|
|
20
|
-
|
|
11
|
+
"source": "./index.ts",
|
|
12
|
+
"types": "./dist/index.d.ts",
|
|
13
|
+
"require": "./dist/btn-activity.umd.js",
|
|
14
|
+
"import": "./dist/btn-activity.js"
|
|
15
|
+
}
|
|
21
16
|
},
|
|
22
17
|
"browserslist": "last 2 versions, > 0.5%, ie >= 11",
|
|
23
|
-
"scripts": {
|
|
24
|
-
"dev": "vite",
|
|
25
|
-
"build": "vite build",
|
|
26
|
-
"preview": "vite preview",
|
|
27
|
-
"pre-release": "npm run build; git add . -A; git commit -m 'pre-release commit'",
|
|
28
|
-
"release-patch": "npm run pre-release && npm version patch -m \"%s\" && npm run release;",
|
|
29
|
-
"release-minor": "npm run pre-release && npm version minor -m \"%s\" && npm run release;",
|
|
30
|
-
"release-major": "npm run pre-release && npm version major -m \"%s\" && npm run release;",
|
|
31
|
-
"release": "git add . -A; git commit; git push --tags origin; npm publish;"
|
|
32
|
-
},
|
|
33
18
|
"repository": {
|
|
34
19
|
"type": "git",
|
|
35
|
-
"url": "git+https://github.com/vue-interface/btn-activity
|
|
20
|
+
"url": "git+https://github.com/vue-interface/btn-activity"
|
|
36
21
|
},
|
|
37
22
|
"keywords": [
|
|
38
23
|
"Form",
|
|
@@ -45,26 +30,17 @@
|
|
|
45
30
|
"author": "Justin Kimbrell",
|
|
46
31
|
"license": "ISC",
|
|
47
32
|
"bugs": {
|
|
48
|
-
"url": "https://github.com/vue-interface/btn-activity
|
|
33
|
+
"url": "https://github.com/vue-interface/btn-activity"
|
|
49
34
|
},
|
|
50
|
-
"homepage": "https://github.com/vue-interface/
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"@vue-interface/
|
|
35
|
+
"homepage": "https://github.com/vue-interface/vue-interface",
|
|
36
|
+
"peerDependencies": {
|
|
37
|
+
"vue": "^3.3.4",
|
|
38
|
+
"@vue-interface/activity-indicator": "3.0.0",
|
|
39
|
+
"@vue-interface/btn": "4.0.0"
|
|
54
40
|
},
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"babel-preset-vue": "^2.0.2",
|
|
60
|
-
"change-case": "^4.1.2",
|
|
61
|
-
"eslint": "^8.25.0",
|
|
62
|
-
"eslint-plugin-vue": "^9.6.0",
|
|
63
|
-
"pascalcase": "^2.0.0",
|
|
64
|
-
"postcss": "^8.4.6",
|
|
65
|
-
"tailwindcss": "^3.0.18",
|
|
66
|
-
"vite": "^3.1.7",
|
|
67
|
-
"vite-plugin-dts": "^1.7.1",
|
|
68
|
-
"vue": "^3.2.40"
|
|
41
|
+
"scripts": {
|
|
42
|
+
"dev": "vite",
|
|
43
|
+
"build": "vue-tsc && vite build",
|
|
44
|
+
"preview": "vite preview"
|
|
69
45
|
}
|
|
70
|
-
}
|
|
46
|
+
}
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
import { ActivityIndicator } from '@vue-interface/activity-indicator';
|
|
3
|
+
import { ref, watch, watchEffect, type Component, type Ref } from 'vue';
|
|
4
|
+
import { ActivityIndicatorSize } from '../../activity-indicator/src/ActivityIndicator.vue';
|
|
5
|
+
|
|
6
|
+
export type BtnActivityProps = {
|
|
7
|
+
activity?: boolean;
|
|
8
|
+
indicator: Component;
|
|
9
|
+
indicatorSize?: ActivityIndicatorSize;
|
|
10
|
+
label?: string;
|
|
11
|
+
orientation?: 'top' | 'bottom' | 'left' | 'right';
|
|
12
|
+
variant?: string;
|
|
13
|
+
size?: string;
|
|
14
|
+
block?: boolean;
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
const props = withDefaults(defineProps<BtnActivityProps>(), {
|
|
19
|
+
indicatorSize: 'xs',
|
|
20
|
+
label: undefined,
|
|
21
|
+
orientation: 'right',
|
|
22
|
+
variant: 'btn-primary',
|
|
23
|
+
size: 'btn-md'
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
export type BtnActivityContext = {
|
|
27
|
+
status: Ref<boolean>;
|
|
28
|
+
toggle: () => void;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
const emit = defineEmits<{
|
|
32
|
+
click: [event: MouseEvent, context: BtnActivityContext];
|
|
33
|
+
'hide-activity': [];
|
|
34
|
+
'show-activity': [];
|
|
35
|
+
}>();
|
|
36
|
+
|
|
37
|
+
const status = ref(props.activity);
|
|
38
|
+
|
|
39
|
+
watchEffect(() => {
|
|
40
|
+
status.value = props.activity;
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
watch(status, (value) => {
|
|
44
|
+
if(value) {
|
|
45
|
+
emit('show-activity');
|
|
46
|
+
}
|
|
47
|
+
else {
|
|
48
|
+
emit('hide-activity');
|
|
49
|
+
}
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
function toggle() {
|
|
53
|
+
status.value = !status.value;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
const context = {
|
|
57
|
+
status,
|
|
58
|
+
toggle,
|
|
59
|
+
};
|
|
60
|
+
</script>
|
|
61
|
+
|
|
62
|
+
<template>
|
|
63
|
+
<button
|
|
64
|
+
type="button"
|
|
65
|
+
:disabled="disabled"
|
|
66
|
+
:class="[
|
|
67
|
+
'btn',
|
|
68
|
+
variant,
|
|
69
|
+
size,
|
|
70
|
+
{
|
|
71
|
+
'w-full': block,
|
|
72
|
+
'gap-1': ['xs', 'sm'].includes(indicatorSize),
|
|
73
|
+
'gap-2': ['md', 'lg', 'xl'].includes(indicatorSize),
|
|
74
|
+
'flex-col-reverse': orientation === 'top',
|
|
75
|
+
'flex-col': orientation === 'bottom',
|
|
76
|
+
'flex-row-reverse': orientation === 'left',
|
|
77
|
+
'inline-flex items-center justify-center': true,
|
|
78
|
+
'opacity-50 cursor-not-allowed': disabled,
|
|
79
|
+
}
|
|
80
|
+
]"
|
|
81
|
+
@click="emit('click', $event, context)">
|
|
82
|
+
<slot>{{ label }}</slot>
|
|
83
|
+
<Transition
|
|
84
|
+
enter-active-class="transition-all ease-out duration-250"
|
|
85
|
+
enter-from-class="opacity-0"
|
|
86
|
+
enter-to-class="opacity-100"
|
|
87
|
+
leave-active-class="transition-all ease-in duration-250"
|
|
88
|
+
leave-from-class="opacity-100"
|
|
89
|
+
leave-to-class="opacity-0">
|
|
90
|
+
<ActivityIndicator
|
|
91
|
+
v-if="status"
|
|
92
|
+
:type="indicator"
|
|
93
|
+
:size="indicatorSize"
|
|
94
|
+
:class="{
|
|
95
|
+
'pt-1': orientation === 'top',
|
|
96
|
+
'pb-1': orientation === 'bottom',
|
|
97
|
+
'pr-1': orientation === 'left',
|
|
98
|
+
'pl-1': orientation === 'right',
|
|
99
|
+
}" />
|
|
100
|
+
</Transition>
|
|
101
|
+
</button>
|
|
102
|
+
</template>
|
package/tsconfig.json
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2020",
|
|
4
|
+
"useDefineForClassFields": true,
|
|
5
|
+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
|
6
|
+
"module": "ESNext",
|
|
7
|
+
"skipLibCheck": true,
|
|
8
|
+
"moduleResolution": "bundler",
|
|
9
|
+
"customConditions": ["source"],
|
|
10
|
+
"allowImportingTsExtensions": true,
|
|
11
|
+
"resolveJsonModule": true,
|
|
12
|
+
"isolatedModules": true,
|
|
13
|
+
"noEmit": true,
|
|
14
|
+
"strict": true,
|
|
15
|
+
"noUnusedLocals": true,
|
|
16
|
+
"noUnusedParameters": true,
|
|
17
|
+
"noFallthroughCasesInSwitch": true,
|
|
18
|
+
"jsx": "preserve",
|
|
19
|
+
"jsxImportSource": "vue"
|
|
20
|
+
},
|
|
21
|
+
"include": [
|
|
22
|
+
"index.ts",
|
|
23
|
+
"src/*.ts",
|
|
24
|
+
"src/*.vue",
|
|
25
|
+
],
|
|
26
|
+
"exclude": ["node_modules"]
|
|
27
|
+
}
|
package/vite.config.js
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import tailwindcss from '@tailwindcss/vite';
|
|
2
|
+
import vue from '@vitejs/plugin-vue';
|
|
3
|
+
import { pascalCase } from 'change-case';
|
|
4
|
+
import path from 'path';
|
|
5
|
+
import { defineConfig } from 'vite';
|
|
6
|
+
import dts from 'vite-plugin-dts';
|
|
7
|
+
import pkg from './package.json';
|
|
8
|
+
|
|
9
|
+
const fileName = pkg.name.split('/')[1];
|
|
10
|
+
|
|
11
|
+
const external = [
|
|
12
|
+
...(pkg.dependencies ? Object.keys(pkg.dependencies) : []),
|
|
13
|
+
...(pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [])
|
|
14
|
+
];
|
|
15
|
+
|
|
16
|
+
export default ({ command }) => defineConfig({
|
|
17
|
+
build: {
|
|
18
|
+
sourcemap: command === 'build',
|
|
19
|
+
lib: {
|
|
20
|
+
entry: path.resolve(__dirname, 'index.ts'),
|
|
21
|
+
name: pascalCase(fileName),
|
|
22
|
+
fileName,
|
|
23
|
+
},
|
|
24
|
+
rollupOptions: {
|
|
25
|
+
external,
|
|
26
|
+
output: {
|
|
27
|
+
globals: external.reduce((carry, dep) => {
|
|
28
|
+
return Object.assign(carry, {
|
|
29
|
+
[dep]: pascalCase(dep)
|
|
30
|
+
});
|
|
31
|
+
}, {}),
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
watch: !process.env.NODE_ENV && {
|
|
35
|
+
include: [
|
|
36
|
+
'./tailwindcss/**/*.js'
|
|
37
|
+
]
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
plugins: [
|
|
41
|
+
vue(),
|
|
42
|
+
dts({
|
|
43
|
+
entryRoot: path.resolve(__dirname, './'),
|
|
44
|
+
}),
|
|
45
|
+
tailwindcss()
|
|
46
|
+
],
|
|
47
|
+
});
|
package/dist/btn-activity.js
DELETED
|
@@ -1,392 +0,0 @@
|
|
|
1
|
-
import { defineComponent as b, inject as O, openBlock as a, createElementBlock as g, normalizeClass as j, normalizeStyle as N, createElementVNode as E, createBlock as f, resolveDynamicComponent as x, createCommentVNode as $, toDisplayString as y, mergeProps as w, withCtx as A, renderSlot as C, createTextVNode as k, resolveComponent as P, createVNode as _, normalizeProps as H, guardReactiveProps as R } from "vue";
|
|
2
|
-
function r(t, i = "px") {
|
|
3
|
-
return t != null && t !== !1 && isFinite(t) ? `${t}${i}` : t;
|
|
4
|
-
}
|
|
5
|
-
const V = b({
|
|
6
|
-
props: {
|
|
7
|
-
absolute: Boolean,
|
|
8
|
-
center: Boolean,
|
|
9
|
-
label: String,
|
|
10
|
-
size: {
|
|
11
|
-
type: String,
|
|
12
|
-
default: "md"
|
|
13
|
-
},
|
|
14
|
-
registry: {
|
|
15
|
-
type: String,
|
|
16
|
-
default: "indicators"
|
|
17
|
-
},
|
|
18
|
-
type: {
|
|
19
|
-
type: String,
|
|
20
|
-
required: !0
|
|
21
|
-
},
|
|
22
|
-
height: [String, Number],
|
|
23
|
-
maxHeight: [String, Number],
|
|
24
|
-
minHeight: [String, Number],
|
|
25
|
-
width: [String, Number],
|
|
26
|
-
maxWidth: [String, Number],
|
|
27
|
-
minWidth: [String, Number]
|
|
28
|
-
},
|
|
29
|
-
data: () => ({
|
|
30
|
-
is: null
|
|
31
|
-
}),
|
|
32
|
-
setup(t) {
|
|
33
|
-
return {
|
|
34
|
-
registryInstance: O(t.registry || "indicators")
|
|
35
|
-
};
|
|
36
|
-
},
|
|
37
|
-
computed: {
|
|
38
|
-
classes() {
|
|
39
|
-
return {
|
|
40
|
-
"activity-indicator-center": this.center,
|
|
41
|
-
"activity-indicator-absolute": this.absolute,
|
|
42
|
-
[this.size && `activity-indicator-${this.size}`]: !!this.size
|
|
43
|
-
};
|
|
44
|
-
},
|
|
45
|
-
style() {
|
|
46
|
-
return {
|
|
47
|
-
width: r(this.width),
|
|
48
|
-
maxWidth: r(this.maxWidth),
|
|
49
|
-
minWidth: r(this.minWidth),
|
|
50
|
-
height: r(this.height),
|
|
51
|
-
maxHeight: r(this.maxHeight),
|
|
52
|
-
minHeight: r(this.minHeight)
|
|
53
|
-
};
|
|
54
|
-
}
|
|
55
|
-
},
|
|
56
|
-
async mounted() {
|
|
57
|
-
const t = await this.component();
|
|
58
|
-
this.is = () => t;
|
|
59
|
-
},
|
|
60
|
-
methods: {
|
|
61
|
-
async component() {
|
|
62
|
-
let t = this.registryInstance.get(this.type);
|
|
63
|
-
return t instanceof Promise ? t : (typeof t == "function" && (t = await t()), t.default ? t.default : t);
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
}), W = (t, i) => {
|
|
67
|
-
const e = t.__vccOpts || t;
|
|
68
|
-
for (const [n, s] of i)
|
|
69
|
-
e[n] = s;
|
|
70
|
-
return e;
|
|
71
|
-
}, D = { class: "activity-indicator-content" }, L = {
|
|
72
|
-
key: 1,
|
|
73
|
-
class: "activity-indicator-label"
|
|
74
|
-
};
|
|
75
|
-
function I(t, i, e, n, s, o) {
|
|
76
|
-
return a(), g("div", {
|
|
77
|
-
class: j(["activity-indicator", t.classes]),
|
|
78
|
-
style: N(t.style)
|
|
79
|
-
}, [
|
|
80
|
-
E("div", D, [
|
|
81
|
-
t.is ? (a(), f(x(t.is()), {
|
|
82
|
-
key: 0,
|
|
83
|
-
class: "mx-auto"
|
|
84
|
-
})) : $("", !0),
|
|
85
|
-
t.label ? (a(), g("div", L, y(t.label), 1)) : $("", !0)
|
|
86
|
-
])
|
|
87
|
-
], 6);
|
|
88
|
-
}
|
|
89
|
-
const Z = /* @__PURE__ */ W(V, [["render", I]]);
|
|
90
|
-
var F = Object.defineProperty, M = (t, i, e) => i in t ? F(t, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[i] = e, T = (t, i, e) => (M(t, typeof i != "symbol" ? i + "" : i, e), e), u = function() {
|
|
91
|
-
return u = Object.assign || function(t) {
|
|
92
|
-
for (var i, e = 1, n = arguments.length; e < n; e++) {
|
|
93
|
-
i = arguments[e];
|
|
94
|
-
for (var s in i)
|
|
95
|
-
Object.prototype.hasOwnProperty.call(i, s) && (t[s] = i[s]);
|
|
96
|
-
}
|
|
97
|
-
return t;
|
|
98
|
-
}, u.apply(this, arguments);
|
|
99
|
-
};
|
|
100
|
-
function q(t) {
|
|
101
|
-
return t.toLowerCase();
|
|
102
|
-
}
|
|
103
|
-
var G = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g], J = /[^A-Z0-9]+/gi;
|
|
104
|
-
function K(t, i) {
|
|
105
|
-
i === void 0 && (i = {});
|
|
106
|
-
for (var e = i.splitRegexp, n = e === void 0 ? G : e, s = i.stripRegexp, o = s === void 0 ? J : s, c = i.transform, p = c === void 0 ? q : c, l = i.delimiter, B = l === void 0 ? " " : l, h = S(S(t, n, "$1\0$2"), o, "\0"), v = 0, m = h.length; h.charAt(v) === "\0"; )
|
|
107
|
-
v++;
|
|
108
|
-
for (; h.charAt(m - 1) === "\0"; )
|
|
109
|
-
m--;
|
|
110
|
-
return h.slice(v, m).split("\0").map(p).join(B);
|
|
111
|
-
}
|
|
112
|
-
function S(t, i, e) {
|
|
113
|
-
return i instanceof RegExp ? t.replace(i, e) : i.reduce(function(n, s) {
|
|
114
|
-
return n.replace(s, e);
|
|
115
|
-
}, t);
|
|
116
|
-
}
|
|
117
|
-
function Q(t, i) {
|
|
118
|
-
return i === void 0 && (i = {}), K(t, u({ delimiter: "." }, i));
|
|
119
|
-
}
|
|
120
|
-
function d(t, i) {
|
|
121
|
-
return i === void 0 && (i = {}), Q(t, u({ delimiter: "-" }, i));
|
|
122
|
-
}
|
|
123
|
-
class U {
|
|
124
|
-
constructor(i = {}) {
|
|
125
|
-
T(this, "components"), this.components = /* @__PURE__ */ new Map(), Object.entries(i).forEach(([e, n]) => {
|
|
126
|
-
this.register(e, n);
|
|
127
|
-
});
|
|
128
|
-
}
|
|
129
|
-
get(i) {
|
|
130
|
-
const e = this.components.get(
|
|
131
|
-
i = d(i)
|
|
132
|
-
);
|
|
133
|
-
if (e)
|
|
134
|
-
return e;
|
|
135
|
-
throw new Error(`"${i}" has not been registered yet!`);
|
|
136
|
-
}
|
|
137
|
-
register(i, e) {
|
|
138
|
-
return typeof i == "object" ? (Object.entries(i).forEach(([n, s]) => {
|
|
139
|
-
this.register(d(n), s);
|
|
140
|
-
}), this) : (this.components.set(d(i), e), this);
|
|
141
|
-
}
|
|
142
|
-
remove(i) {
|
|
143
|
-
return this.components.delete(d(i)), this;
|
|
144
|
-
}
|
|
145
|
-
reset() {
|
|
146
|
-
return this.components = /* @__PURE__ */ new Map(), this;
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
function X(t = {}) {
|
|
150
|
-
return new U(t);
|
|
151
|
-
}
|
|
152
|
-
X();
|
|
153
|
-
const Y = {
|
|
154
|
-
props: {
|
|
155
|
-
componentPrefix: String,
|
|
156
|
-
size: String,
|
|
157
|
-
sizePrefix: String
|
|
158
|
-
},
|
|
159
|
-
computed: {
|
|
160
|
-
sizeableClassPrefix() {
|
|
161
|
-
return this.sizePrefix || this.componentPrefix;
|
|
162
|
-
},
|
|
163
|
-
hasSizeablePrefix() {
|
|
164
|
-
return this.size === void 0 ? !1 : !!this.size.match(new RegExp(`^${this.sizeableClassPrefix}`));
|
|
165
|
-
},
|
|
166
|
-
sizeableClass() {
|
|
167
|
-
return this.size ? !this.sizeableClassPrefix || this.hasSizeablePrefix ? this.size : `${this.sizeableClassPrefix}-${this.size}` : "";
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
}, tt = {
|
|
171
|
-
props: {
|
|
172
|
-
componentPrefix: String,
|
|
173
|
-
variant: String,
|
|
174
|
-
variantPrefix: String
|
|
175
|
-
},
|
|
176
|
-
computed: {
|
|
177
|
-
variantClassPrefix() {
|
|
178
|
-
return this.variantPrefix || this.componentPrefix;
|
|
179
|
-
},
|
|
180
|
-
hasVariantPrefix() {
|
|
181
|
-
return this.variant === void 0 ? !1 : !!this.variant.match(new RegExp(`^${this.variantClassPrefix}`));
|
|
182
|
-
},
|
|
183
|
-
variantClass() {
|
|
184
|
-
return this.variant ? !this.variantClassPrefix || this.hasVariantPrefix ? this.variant : `${this.variantClassPrefix}-${this.variant}` : "";
|
|
185
|
-
}
|
|
186
|
-
}
|
|
187
|
-
}, it = b({
|
|
188
|
-
mixins: [
|
|
189
|
-
Y,
|
|
190
|
-
tt
|
|
191
|
-
],
|
|
192
|
-
props: {
|
|
193
|
-
active: Boolean,
|
|
194
|
-
block: Boolean,
|
|
195
|
-
componentPrefix: {
|
|
196
|
-
type: String,
|
|
197
|
-
default: "btn"
|
|
198
|
-
},
|
|
199
|
-
disabled: Boolean,
|
|
200
|
-
label: String,
|
|
201
|
-
outline: Boolean,
|
|
202
|
-
tag: String,
|
|
203
|
-
variant: {
|
|
204
|
-
type: String,
|
|
205
|
-
default: "primary"
|
|
206
|
-
}
|
|
207
|
-
},
|
|
208
|
-
computed: {
|
|
209
|
-
classes() {
|
|
210
|
-
return [
|
|
211
|
-
"btn",
|
|
212
|
-
this.variantClass,
|
|
213
|
-
this.sizeableClass,
|
|
214
|
-
this.active && "active",
|
|
215
|
-
this.block && "btn-block",
|
|
216
|
-
this.disabled && "disabled"
|
|
217
|
-
];
|
|
218
|
-
},
|
|
219
|
-
component() {
|
|
220
|
-
return this.tag ? this.tag : this.$attrs.href ? "a" : "button";
|
|
221
|
-
},
|
|
222
|
-
variantClassPrefix() {
|
|
223
|
-
return (this.variantPrefix || this.componentPrefix) + (this.outline ? "-outline" : "");
|
|
224
|
-
}
|
|
225
|
-
}
|
|
226
|
-
}), et = (t, i) => {
|
|
227
|
-
const e = t.__vccOpts || t;
|
|
228
|
-
for (const [n, s] of i)
|
|
229
|
-
e[n] = s;
|
|
230
|
-
return e;
|
|
231
|
-
};
|
|
232
|
-
function st(t, i, e, n, s, o) {
|
|
233
|
-
return a(), f(x(t.component), w(t.$attrs, {
|
|
234
|
-
disabled: t.disabled,
|
|
235
|
-
class: t.classes,
|
|
236
|
-
role: "button"
|
|
237
|
-
}), {
|
|
238
|
-
default: A(() => [
|
|
239
|
-
C(t.$slots, "default", {}, () => [
|
|
240
|
-
k(y(t.label), 1)
|
|
241
|
-
])
|
|
242
|
-
]),
|
|
243
|
-
_: 3
|
|
244
|
-
}, 16, ["disabled", "class"]);
|
|
245
|
-
}
|
|
246
|
-
const nt = /* @__PURE__ */ et(it, [["render", st]]), rt = function(t) {
|
|
247
|
-
const i = parseFloat(t || 0), e = t && t.match(/m?s/), n = e ? e[0] : !1;
|
|
248
|
-
let s;
|
|
249
|
-
switch (n) {
|
|
250
|
-
case "s":
|
|
251
|
-
s = i * 1e3;
|
|
252
|
-
break;
|
|
253
|
-
case "ms":
|
|
254
|
-
default:
|
|
255
|
-
s = i;
|
|
256
|
-
break;
|
|
257
|
-
}
|
|
258
|
-
return s || 0;
|
|
259
|
-
}, z = function(t, i) {
|
|
260
|
-
const e = (t.ownerDocument || document).defaultView;
|
|
261
|
-
setTimeout(
|
|
262
|
-
i,
|
|
263
|
-
rt(
|
|
264
|
-
e == null ? void 0 : e.getComputedStyle(t).animationDuration
|
|
265
|
-
)
|
|
266
|
-
);
|
|
267
|
-
}, at = b({
|
|
268
|
-
inheritAttrs: !1,
|
|
269
|
-
components: {
|
|
270
|
-
ActivityIndicator: Z,
|
|
271
|
-
Btn: nt
|
|
272
|
-
},
|
|
273
|
-
props: {
|
|
274
|
-
active: Boolean,
|
|
275
|
-
activity: Boolean,
|
|
276
|
-
block: Boolean,
|
|
277
|
-
disabled: Boolean,
|
|
278
|
-
indicator: {
|
|
279
|
-
type: [Object, String],
|
|
280
|
-
default: "spinner"
|
|
281
|
-
},
|
|
282
|
-
label: String,
|
|
283
|
-
orientation: {
|
|
284
|
-
type: String,
|
|
285
|
-
default: "right"
|
|
286
|
-
},
|
|
287
|
-
size: {
|
|
288
|
-
type: String,
|
|
289
|
-
default: "md"
|
|
290
|
-
},
|
|
291
|
-
tag: String,
|
|
292
|
-
variant: {
|
|
293
|
-
type: String,
|
|
294
|
-
default: "primary"
|
|
295
|
-
}
|
|
296
|
-
},
|
|
297
|
-
data() {
|
|
298
|
-
return {
|
|
299
|
-
currentActivity: this.activity
|
|
300
|
-
};
|
|
301
|
-
},
|
|
302
|
-
computed: {
|
|
303
|
-
classes() {
|
|
304
|
-
return {
|
|
305
|
-
disabled: this.disabled,
|
|
306
|
-
active: this.active,
|
|
307
|
-
"btn-activity": this.activity,
|
|
308
|
-
[`btn-activity-${this.orientation.replace("btn-activity-", "")}`]: !!this.orientation,
|
|
309
|
-
[`'btn-activity-indicator-${this.indicatorProps.type.replace(
|
|
310
|
-
"btn-activity-indicator-",
|
|
311
|
-
""
|
|
312
|
-
)}`]: !!this.indicatorProps.type
|
|
313
|
-
};
|
|
314
|
-
},
|
|
315
|
-
indicatorProps() {
|
|
316
|
-
return Object.assign(
|
|
317
|
-
{
|
|
318
|
-
type: "spinner"
|
|
319
|
-
},
|
|
320
|
-
(typeof this.indicator == "string" ? {
|
|
321
|
-
type: this.indicator
|
|
322
|
-
} : this.indicator) || {}
|
|
323
|
-
);
|
|
324
|
-
}
|
|
325
|
-
},
|
|
326
|
-
watch: {
|
|
327
|
-
activity(t) {
|
|
328
|
-
t ? this.showActivity() : this.hideActivity();
|
|
329
|
-
}
|
|
330
|
-
},
|
|
331
|
-
mounted() {
|
|
332
|
-
this.activity && this.showActivity();
|
|
333
|
-
},
|
|
334
|
-
methods: {
|
|
335
|
-
disable() {
|
|
336
|
-
this.$el.disabled = !0, this.$el.classList.add("disabled");
|
|
337
|
-
},
|
|
338
|
-
enable() {
|
|
339
|
-
this.$el.disabled = !1, this.$el.classList.remove("disabled");
|
|
340
|
-
},
|
|
341
|
-
hideActivity() {
|
|
342
|
-
this.$el.classList.add("btn-hide-activity"), z(this.$el, () => {
|
|
343
|
-
this.enable(), this.currentActivity = !1, this.$el.classList.remove("btn-activity", "btn-hide-activity"), this.$emit("hide-activity");
|
|
344
|
-
});
|
|
345
|
-
},
|
|
346
|
-
showActivity() {
|
|
347
|
-
this.currentActivity = !0, this.disable(), z(this.$el, () => {
|
|
348
|
-
this.$el.classList.add("btn-activity"), this.$emit("show-activity");
|
|
349
|
-
});
|
|
350
|
-
},
|
|
351
|
-
toggle() {
|
|
352
|
-
this.currentActivity ? this.hideActivity() : this.showActivity();
|
|
353
|
-
}
|
|
354
|
-
}
|
|
355
|
-
});
|
|
356
|
-
const ot = (t, i) => {
|
|
357
|
-
const e = t.__vccOpts || t;
|
|
358
|
-
for (const [n, s] of i)
|
|
359
|
-
e[n] = s;
|
|
360
|
-
return e;
|
|
361
|
-
};
|
|
362
|
-
function ct(t, i, e, n, s, o) {
|
|
363
|
-
const c = P("activity-indicator"), p = P("btn");
|
|
364
|
-
return a(), f(p, w({
|
|
365
|
-
active: t.active,
|
|
366
|
-
block: t.block,
|
|
367
|
-
disabled: t.disabled,
|
|
368
|
-
size: t.size,
|
|
369
|
-
tag: t.tag,
|
|
370
|
-
variant: t.variant,
|
|
371
|
-
class: t.classes,
|
|
372
|
-
onClick: i[0] || (i[0] = (l) => !t.disabled && t.$emit("click", l, {
|
|
373
|
-
disable: t.disable,
|
|
374
|
-
enable: t.enable,
|
|
375
|
-
toggle: t.toggle,
|
|
376
|
-
showActivity: t.showActivity,
|
|
377
|
-
hideActivity: t.hideActivity
|
|
378
|
-
}))
|
|
379
|
-
}, Object.assign({}, t.$attrs, { onClick: void 0 })), {
|
|
380
|
-
default: A(() => [
|
|
381
|
-
C(t.$slots, "default", {}, () => [
|
|
382
|
-
k(y(t.label), 1)
|
|
383
|
-
]),
|
|
384
|
-
_(c, H(R(t.indicatorProps)), null, 16)
|
|
385
|
-
]),
|
|
386
|
-
_: 3
|
|
387
|
-
}, 16, ["active", "block", "disabled", "size", "tag", "variant", "class"]);
|
|
388
|
-
}
|
|
389
|
-
const ht = /* @__PURE__ */ ot(at, [["render", ct]]);
|
|
390
|
-
export {
|
|
391
|
-
ht as BtnActivity
|
|
392
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a.BtnActivity={},a.Vue))})(this,function(a,e){"use strict";function o(t,i="px"){return t!=null&&t!==!1&&isFinite(t)?`${t}${i}`:t}const v=e.defineComponent({props:{absolute:Boolean,center:Boolean,label:String,size:{type:String,default:"md"},registry:{type:String,default:"indicators"},type:{type:String,required:!0},height:[String,Number],maxHeight:[String,Number],minHeight:[String,Number],width:[String,Number],maxWidth:[String,Number],minWidth:[String,Number]},data:()=>({is:null}),setup(t){return{registryInstance:e.inject(t.registry||"indicators")}},computed:{classes(){return{"activity-indicator-center":this.center,"activity-indicator-absolute":this.absolute,[this.size&&`activity-indicator-${this.size}`]:!!this.size}},style(){return{width:o(this.width),maxWidth:o(this.maxWidth),minWidth:o(this.minWidth),height:o(this.height),maxHeight:o(this.maxHeight),minHeight:o(this.minHeight)}}},async mounted(){const t=await this.component();this.is=()=>t},methods:{async component(){let t=this.registryInstance.get(this.type);return t instanceof Promise?t:(typeof t=="function"&&(t=await t()),t.default?t.default:t)}}}),$=(t,i)=>{const n=t.__vccOpts||t;for(const[r,s]of i)n[r]=s;return n},P={class:"activity-indicator-content"},S={key:1,class:"activity-indicator-label"};function x(t,i,n,r,s,d){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["activity-indicator",t.classes]),style:e.normalizeStyle(t.style)},[e.createElementVNode("div",P,[t.is?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.is()),{key:0,class:"mx-auto"})):e.createCommentVNode("",!0),t.label?(e.openBlock(),e.createElementBlock("div",S,e.toDisplayString(t.label),1)):e.createCommentVNode("",!0)])],6)}const z=$(v,[["render",x]]);var C=Object.defineProperty,A=(t,i,n)=>i in t?C(t,i,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[i]=n,w=(t,i,n)=>(A(t,typeof i!="symbol"?i+"":i,n),n),c=function(){return c=Object.assign||function(t){for(var i,n=1,r=arguments.length;n<r;n++){i=arguments[n];for(var s in i)Object.prototype.hasOwnProperty.call(i,s)&&(t[s]=i[s])}return t},c.apply(this,arguments)};function B(t){return t.toLowerCase()}var k=[/([a-z0-9])([A-Z])/g,/([A-Z])([A-Z][a-z])/g],j=/[^A-Z0-9]+/gi;function O(t,i){i===void 0&&(i={});for(var n=i.splitRegexp,r=n===void 0?k:n,s=i.stripRegexp,d=s===void 0?j:s,h=i.transform,u=h===void 0?B:h,p=i.delimiter,q=p===void 0?" ":p,m=b(b(t,r,"$1\0$2"),d,"\0"),f=0,y=m.length;m.charAt(f)==="\0";)f++;for(;m.charAt(y-1)==="\0";)y--;return m.slice(f,y).split("\0").map(u).join(q)}function b(t,i,n){return i instanceof RegExp?t.replace(i,n):i.reduce(function(r,s){return r.replace(s,n)},t)}function N(t,i){return i===void 0&&(i={}),O(t,c({delimiter:"."},i))}function l(t,i){return i===void 0&&(i={}),N(t,c({delimiter:"-"},i))}class _{constructor(i={}){w(this,"components"),this.components=new Map,Object.entries(i).forEach(([n,r])=>{this.register(n,r)})}get(i){const n=this.components.get(i=l(i));if(n)return n;throw new Error(`"${i}" has not been registered yet!`)}register(i,n){return typeof i=="object"?(Object.entries(i).forEach(([r,s])=>{this.register(l(r),s)}),this):(this.components.set(l(i),n),this)}remove(i){return this.components.delete(l(i)),this}reset(){return this.components=new Map,this}}function E(t={}){return new _(t)}E();const V={props:{componentPrefix:String,size:String,sizePrefix:String},computed:{sizeableClassPrefix(){return this.sizePrefix||this.componentPrefix},hasSizeablePrefix(){return this.size===void 0?!1:!!this.size.match(new RegExp(`^${this.sizeableClassPrefix}`))},sizeableClass(){return this.size?!this.sizeableClassPrefix||this.hasSizeablePrefix?this.size:`${this.sizeableClassPrefix}-${this.size}`:""}}},D={props:{componentPrefix:String,variant:String,variantPrefix:String},computed:{variantClassPrefix(){return this.variantPrefix||this.componentPrefix},hasVariantPrefix(){return this.variant===void 0?!1:!!this.variant.match(new RegExp(`^${this.variantClassPrefix}`))},variantClass(){return this.variant?!this.variantClassPrefix||this.hasVariantPrefix?this.variant:`${this.variantClassPrefix}-${this.variant}`:""}}},H=e.defineComponent({mixins:[V,D],props:{active:Boolean,block:Boolean,componentPrefix:{type:String,default:"btn"},disabled:Boolean,label:String,outline:Boolean,tag:String,variant:{type:String,default:"primary"}},computed:{classes(){return["btn",this.variantClass,this.sizeableClass,this.active&&"active",this.block&&"btn-block",this.disabled&&"disabled"]},component(){return this.tag?this.tag:this.$attrs.href?"a":"button"},variantClassPrefix(){return(this.variantPrefix||this.componentPrefix)+(this.outline?"-outline":"")}}}),R=(t,i)=>{const n=t.__vccOpts||t;for(const[r,s]of i)n[r]=s;return n};function T(t,i,n,r,s,d){return e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.component),e.mergeProps(t.$attrs,{disabled:t.disabled,class:t.classes,role:"button"}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])]),_:3},16,["disabled","class"])}const W=R(H,[["render",T]]),L=function(t){const i=parseFloat(t||0),n=t&&t.match(/m?s/),r=n?n[0]:!1;let s;switch(r){case"s":s=i*1e3;break;case"ms":default:s=i;break}return s||0},g=function(t,i){const n=(t.ownerDocument||document).defaultView;setTimeout(i,L(n==null?void 0:n.getComputedStyle(t).animationDuration))},I=e.defineComponent({inheritAttrs:!1,components:{ActivityIndicator:z,Btn:W},props:{active:Boolean,activity:Boolean,block:Boolean,disabled:Boolean,indicator:{type:[Object,String],default:"spinner"},label:String,orientation:{type:String,default:"right"},size:{type:String,default:"md"},tag:String,variant:{type:String,default:"primary"}},data(){return{currentActivity:this.activity}},computed:{classes(){return{disabled:this.disabled,active:this.active,"btn-activity":this.activity,[`btn-activity-${this.orientation.replace("btn-activity-","")}`]:!!this.orientation,[`'btn-activity-indicator-${this.indicatorProps.type.replace("btn-activity-indicator-","")}`]:!!this.indicatorProps.type}},indicatorProps(){return Object.assign({type:"spinner"},(typeof this.indicator=="string"?{type:this.indicator}:this.indicator)||{})}},watch:{activity(t){t?this.showActivity():this.hideActivity()}},mounted(){this.activity&&this.showActivity()},methods:{disable(){this.$el.disabled=!0,this.$el.classList.add("disabled")},enable(){this.$el.disabled=!1,this.$el.classList.remove("disabled")},hideActivity(){this.$el.classList.add("btn-hide-activity"),g(this.$el,()=>{this.enable(),this.currentActivity=!1,this.$el.classList.remove("btn-activity","btn-hide-activity"),this.$emit("hide-activity")})},showActivity(){this.currentActivity=!0,this.disable(),g(this.$el,()=>{this.$el.classList.add("btn-activity"),this.$emit("show-activity")})},toggle(){this.currentActivity?this.hideActivity():this.showActivity()}}}),G="",M=(t,i)=>{const n=t.__vccOpts||t;for(const[r,s]of i)n[r]=s;return n};function Z(t,i,n,r,s,d){const h=e.resolveComponent("activity-indicator"),u=e.resolveComponent("btn");return e.openBlock(),e.createBlock(u,e.mergeProps({active:t.active,block:t.block,disabled:t.disabled,size:t.size,tag:t.tag,variant:t.variant,class:t.classes,onClick:i[0]||(i[0]=p=>!t.disabled&&t.$emit("click",p,{disable:t.disable,enable:t.enable,toggle:t.toggle,showActivity:t.showActivity,hideActivity:t.hideActivity}))},Object.assign({},t.$attrs,{onClick:void 0})),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)]),e.createVNode(h,e.normalizeProps(e.guardReactiveProps(t.indicatorProps)),null,16)]),_:3},16,["active","block","disabled","size","tag","variant","class"])}const F=M(I,[["render",Z]]);a.BtnActivity=F,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
@@ -1,151 +0,0 @@
|
|
|
1
|
-
declare const _sfc_main: import("vue").DefineComponent<{
|
|
2
|
-
/**
|
|
3
|
-
* Make the button appear with the active state.
|
|
4
|
-
*/
|
|
5
|
-
active: BooleanConstructor;
|
|
6
|
-
/**
|
|
7
|
-
* Show the activity indicator inside the button.
|
|
8
|
-
*/
|
|
9
|
-
activity: BooleanConstructor;
|
|
10
|
-
/**
|
|
11
|
-
* Display the button as block width.
|
|
12
|
-
*/
|
|
13
|
-
block: BooleanConstructor;
|
|
14
|
-
/**
|
|
15
|
-
* Disable the button.
|
|
16
|
-
*/
|
|
17
|
-
disabled: BooleanConstructor;
|
|
18
|
-
/**
|
|
19
|
-
* The type of activity indicator inside the button.
|
|
20
|
-
*/
|
|
21
|
-
indicator: {
|
|
22
|
-
type: (StringConstructor | ObjectConstructor)[];
|
|
23
|
-
default: string;
|
|
24
|
-
};
|
|
25
|
-
/**
|
|
26
|
-
* The button label.
|
|
27
|
-
*/
|
|
28
|
-
label: StringConstructor;
|
|
29
|
-
/**
|
|
30
|
-
* The orientation of the activity button inside the button.
|
|
31
|
-
*/
|
|
32
|
-
orientation: {
|
|
33
|
-
type: StringConstructor;
|
|
34
|
-
default: string;
|
|
35
|
-
};
|
|
36
|
-
/**
|
|
37
|
-
* The size of the button.
|
|
38
|
-
*/
|
|
39
|
-
size: {
|
|
40
|
-
type: StringConstructor;
|
|
41
|
-
default: string;
|
|
42
|
-
};
|
|
43
|
-
/**
|
|
44
|
-
* The HTML tag.
|
|
45
|
-
*/
|
|
46
|
-
tag: StringConstructor;
|
|
47
|
-
/**
|
|
48
|
-
* The variant of the button.
|
|
49
|
-
*/
|
|
50
|
-
variant: {
|
|
51
|
-
type: StringConstructor;
|
|
52
|
-
default: string;
|
|
53
|
-
};
|
|
54
|
-
}, unknown, {
|
|
55
|
-
currentActivity: boolean;
|
|
56
|
-
}, {
|
|
57
|
-
/**
|
|
58
|
-
* An object of classes to append to the button.
|
|
59
|
-
*/
|
|
60
|
-
classes(): {
|
|
61
|
-
[x: string]: any;
|
|
62
|
-
disabled: any;
|
|
63
|
-
active: any;
|
|
64
|
-
"btn-activity": any;
|
|
65
|
-
};
|
|
66
|
-
indicatorProps(): any;
|
|
67
|
-
}, {
|
|
68
|
-
/**
|
|
69
|
-
* Disable the button.
|
|
70
|
-
*/
|
|
71
|
-
disable(): void;
|
|
72
|
-
/**
|
|
73
|
-
* Enable the button.
|
|
74
|
-
*/
|
|
75
|
-
enable(): void;
|
|
76
|
-
/**
|
|
77
|
-
* Hide the activity indicator inside the button.
|
|
78
|
-
*/
|
|
79
|
-
hideActivity(): void;
|
|
80
|
-
/**
|
|
81
|
-
* Show the activity indicator inside the button.
|
|
82
|
-
*/
|
|
83
|
-
showActivity(): void;
|
|
84
|
-
/**
|
|
85
|
-
* Show the activity indicator inside the button.
|
|
86
|
-
*/
|
|
87
|
-
toggle(): void;
|
|
88
|
-
}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
89
|
-
/**
|
|
90
|
-
* Make the button appear with the active state.
|
|
91
|
-
*/
|
|
92
|
-
active: BooleanConstructor;
|
|
93
|
-
/**
|
|
94
|
-
* Show the activity indicator inside the button.
|
|
95
|
-
*/
|
|
96
|
-
activity: BooleanConstructor;
|
|
97
|
-
/**
|
|
98
|
-
* Display the button as block width.
|
|
99
|
-
*/
|
|
100
|
-
block: BooleanConstructor;
|
|
101
|
-
/**
|
|
102
|
-
* Disable the button.
|
|
103
|
-
*/
|
|
104
|
-
disabled: BooleanConstructor;
|
|
105
|
-
/**
|
|
106
|
-
* The type of activity indicator inside the button.
|
|
107
|
-
*/
|
|
108
|
-
indicator: {
|
|
109
|
-
type: (StringConstructor | ObjectConstructor)[];
|
|
110
|
-
default: string;
|
|
111
|
-
};
|
|
112
|
-
/**
|
|
113
|
-
* The button label.
|
|
114
|
-
*/
|
|
115
|
-
label: StringConstructor;
|
|
116
|
-
/**
|
|
117
|
-
* The orientation of the activity button inside the button.
|
|
118
|
-
*/
|
|
119
|
-
orientation: {
|
|
120
|
-
type: StringConstructor;
|
|
121
|
-
default: string;
|
|
122
|
-
};
|
|
123
|
-
/**
|
|
124
|
-
* The size of the button.
|
|
125
|
-
*/
|
|
126
|
-
size: {
|
|
127
|
-
type: StringConstructor;
|
|
128
|
-
default: string;
|
|
129
|
-
};
|
|
130
|
-
/**
|
|
131
|
-
* The HTML tag.
|
|
132
|
-
*/
|
|
133
|
-
tag: StringConstructor;
|
|
134
|
-
/**
|
|
135
|
-
* The variant of the button.
|
|
136
|
-
*/
|
|
137
|
-
variant: {
|
|
138
|
-
type: StringConstructor;
|
|
139
|
-
default: string;
|
|
140
|
-
};
|
|
141
|
-
}>>, {
|
|
142
|
-
size: string;
|
|
143
|
-
active: boolean;
|
|
144
|
-
block: boolean;
|
|
145
|
-
disabled: boolean;
|
|
146
|
-
variant: string;
|
|
147
|
-
activity: boolean;
|
|
148
|
-
indicator: string | Record<string, any>;
|
|
149
|
-
orientation: string;
|
|
150
|
-
}>;
|
|
151
|
-
export default _sfc_main;
|
package/dist/style.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@-webkit-keyframes btn-activity-in{0%,to{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scale(.98);transform:scale(.98)}}@keyframes btn-activity-in{0%,to{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scale(.98);transform:scale(.98)}}@-webkit-keyframes btn-activity-out{0%,to{-webkit-transform:scale(1);transform:scale(1)}70%{-webkit-transform:scale(.98);transform:scale(.98)}}@keyframes btn-activity-out{0%,to{-webkit-transform:scale(1);transform:scale(1)}70%{-webkit-transform:scale(.98);transform:scale(.98)}}.btn-activity-top,.btn.btn-activity-top,.btn-activity-bottom,.btn.btn-activity-bottom,.btn-activity-left,.btn.btn-activity-left,.btn-activity-right,.btn.btn-activity-right{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-transition:all 166.5ms ease-in;transition:all 166.5ms ease-in}.btn-activity-top .activity-indicator,.btn-activity-bottom .activity-indicator,.btn-activity-left .activity-indicator,.btn-activity-right .activity-indicator{opacity:0;position:absolute;visibility:hidden;-webkit-transition:opacity 333ms ease-in;transition:opacity 333ms ease-in}.btn-activity-top,.btn-activity-bottom{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.btn-activity-top .activity-indicator,.btn-activity-bottom .activity-indicator{margin-left:auto;margin-right:auto}.btn-activity-top{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.btn-activity-top .activity-indicator{padding-bottom:1em}.btn-activity-bottom .activity-indicator{padding-top:1em}.btn-activity-left,.btn-activity-right{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.btn-activity-left{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.btn-activity-left .activity-indicator{padding-right:1em}.btn-activity-right .activity-indicator{padding-left:1em}.btn-activity:not(.btn-link){-webkit-animation:btn-activity-in 333ms;animation:btn-activity-in 333ms}.btn-hide-activity:not(.btn-link){-webkit-animation:btn-activity-out 333ms;animation:btn-activity-out 333ms}.btn-activity.btn-hide-activity .activity-indicator{opacity:0}.btn-activity .activity-indicator{opacity:1;visibility:visible;position:relative;font-size:.55em}
|