Skip to content

Commit aab3385

Browse files
EdujugonEdujugon
committed
Merge branch 'dev'
2 parents 904c136 + 0e6a056 commit aab3385

File tree

7 files changed

+218
-66
lines changed

7 files changed

+218
-66
lines changed

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,12 @@ And
3535
| Properties | Type | Values |
3636
| :--------------- | :------- | :--------- |
3737
| `bg-color` | String | <b>Default '#333333'</b><br> Accepts all color formats: HEX, RGB & RGBA |
38-
| `position` | String | <b>Default 'bottom-left'</b> <br>'bottom-left', 'bottom-right', 'top-left','top-right' |
38+
| `position` | String | <b>Default 'bottom-left'</b> <br>Options: 'bottom-left', 'bottom-right', 'top-left','top-right' |
39+
| `position-type` | String | <b>Default 'fixed'</b> <br>Options: 'fixed' or 'absolute'|
3940
| `z-index` | String | <b>Default '999'</b> <br>Set any value that suits your needs. |
4041
| `ripple-show` | Boolean | <b>Default true</b> <br>Options: true or false. |
4142
| `ripple-color` | String | <b>Default 'light'</b> <br>Options: 'light' or 'dark'. |
43+
| `icon-size` | String | <b>Default 'medium'</b> <br>Options: 'small', 'medium' or 'large'. |
4244
| `main-icon` | String | <b>Default 'add'</b> <br>Use icons from the material icon library. |
4345
| `main-tooltip` | String | <b>Default `null`</b> |
4446
| `actions` | Object | <b>[Details bellow](https://github.com/PygmySlowLoris/vue-fab/#actions)</b>

‎demo/App.vue‎

Lines changed: 78 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
A Vue Component
2828
<span class="is-pulled-right">
2929
<!-- Place this tag where you want the button to render. -->
30-
<a class="github-button" href="https://github.com/PygmySlowLoris/vue-fab" data-icon="octicon-star" data-size="large" aria-label="Star PygmySlowLoris/vue-fab on GitHub">Star</a>
30+
<a class="github-button" href="https://github.com/PygmySlowLoris/vue-fab" data-icon="octicon-star" data-size="large"
31+
aria-label="Star PygmySlowLoris/vue-fab on GitHub">Star</a>
3132
</span>
3233
</h2>
3334
</div>
@@ -52,7 +53,7 @@
5253
</div>
5354
<div class="content">
5455
<div class="columns">
55-
<div class="column is-5" style="display: flex; justify-content: center">
56+
<div class="column is-4" style="display: flex; justify-content: center">
5657
<div class="field is-pulled-left">
5758
<label class="label">Color</label>
5859
<p class="control">
@@ -61,17 +62,52 @@
6162
</div>
6263
</div>
6364
<div class="column">
64-
<div class="field has-text-left">
65-
<label class="label">Position</label>
66-
<p class="control">
67-
<span class="select">
68-
<select v-model="position">
69-
<option v-for="pos in positions">{{pos}}</option>
70-
</select>
71-
</span>
72-
</p>
65+
<div class="field is-horizontal">
66+
<div class="field-body">
67+
<div class="field has-text-left">
68+
<label class="label">Position</label>
69+
<p class="control is-expanded">
70+
<span class="select is-fullwidth">
71+
<select v-model="position">
72+
<option v-for="pos in positions">{{pos}}</option>
73+
</select>
74+
</span>
75+
</p>
76+
</div>
77+
<div class="field has-text-left">
78+
<label class="label">Position Type</label>
79+
<p class="control is-expandend">
80+
<span class="select is-fullwidth">
81+
<select v-model="positionType">
82+
<option v-for="type in positionTypes">{{type}}</option>
83+
</select>
84+
</span>
85+
</p>
86+
</div>
87+
<div class="field has-text-left">
88+
<label class="label">Size</label>
89+
<p class="control is-expandend">
90+
<span class="select is-fullwidth">
91+
<select v-model="iconSizes">
92+
<option v-for="size in sizes">{{size}}</option>
93+
</select>
94+
</span>
95+
</p>
96+
</div>
97+
<div class="field has-text-left">
98+
<label class="label">Tooltip event</label>
99+
<p class="control is-expandend">
100+
<span class="select is-fullwidth">
101+
<select v-model="tooltipEvent">
102+
<option v-for="type in tooltipEvents">{{type}}</option>
103+
</select>
104+
</span>
105+
</p>
106+
</div>
107+
</div>
73108
</div>
74-
<label class="label" style="display: flex; align-items: center; padding-right: 1rem;">
109+
<label class="label"
110+
style="display: flex; align-items: center; padding-right: 1rem;">
75111
Main Icon & Tooltip
76112
</label>
77113
<div class="field is-horizontal">
@@ -88,7 +124,8 @@
88124
</div>
89125
</div>
90126
</div>
91-
<label class="label" style="display: flex; align-items: center; padding-right: 1rem;">
127+
<label class="label"
128+
style="display: flex; align-items: center; padding-right: 1rem;">
92129
First Icon & Tooltip
93130
</label>
94131
<div class="field is-horizontal">
@@ -105,7 +142,8 @@
105142
</div>
106143
</div>
107144
</div>
108-
<label class="label" style="display: flex; align-items: center; padding-right: 1rem;">
145+
<label class="label"
146+
style="display: flex; align-items: center; padding-right: 1rem;">
109147
Second Icon & Tooltip
110148
</label>
111149
<div class="field is-horizontal">
@@ -152,11 +190,14 @@
152190
</footer>
153191
<fab
154192
:position="position"
193+
:icon-size="iconSizes"
194+
:position-type="positionType"
155195
:bg-color="colors.hex"
156196
:main-icon="mainIcon"
157197
:main-tooltip="mainTooltip"
158198
:actions="[{name: 'alertMe',icon: firstIcon, tooltip: firstTooltip, color:'#d11014'},{name: 'alertMe',icon: secondIcon, tooltip: secondTooltip}]"
159199
@alertMe="alert"
200+
:fixed-tooltip="fixedTooltip"
160201
></fab>
161202
</div>
162203
</template>
@@ -207,7 +248,23 @@
207248
'top-right',
208249
'top-left',
209250
],
251+
positionTypes: [
252+
'fixed',
253+
'absolute'
254+
],
255+
tooltipEvents: [
256+
'hover',
257+
'fixed'
258+
],
259+
sizes: [
260+
'small',
261+
'medium',
262+
'large'
263+
],
210264
position: 'bottom-right',
265+
positionType: 'fixed',
266+
tooltipEvent: 'hover',
267+
iconSizes: 'medium',
211268
colors: defaultProps,
212269
mainIcon: 'add',
213270
mainTooltip: 'Hello',
@@ -217,6 +274,11 @@
217274
secondTooltip: 'add_alert'
218275
}
219276
},
277+
computed: {
278+
fixedTooltip() {
279+
return this.tooltipEvent === 'fixed';
280+
}
281+
},
220282
methods: {
221283
alert(){
222284
alert('You have clicked me :)');
@@ -250,7 +312,6 @@
250312
border-top: dashed 1px;
251313
}
252314
253-
254315
li {
255316
display: inline-block;
256317
margin: 0 10px;
@@ -292,7 +353,8 @@
292353
}
293354
294355
.vertical-separator {
295-
display: flex; justify-content: space-around;
356+
display: flex;
357+
justify-content: space-around;
296358
}
297359
298360
.vertical-separator .line {

‎dist/build.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/build.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
57
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
68
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
79
<title>vue-fab</title>

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-fab",
3-
"version": "2.0.6",
3+
"version": "2.1.0",
44
"description": "Vue Floating Action Button",
55
"main": "src/index.js",
66
"repository": {
@@ -34,7 +34,7 @@
3434
"prepublish": "npm run build"
3535
},
3636
"dependencies": {
37-
"v-tooltip": "^1.0.6",
37+
"v-tooltip": "2.0.0-beta.1",
3838
"vue": "^2.2.1",
3939
"vue-clickaway": "^2.1.0",
4040
"vue-ripple-directive": "^1.0.0"

0 commit comments

Comments
 (0)