Skip to content

Commit 8a082c7

Browse files
rstoenescurstoenescu
committed
refactor: New tooltip components replacing directive (draft, not ready)
1 parent db5efea commit 8a082c7

File tree

11 files changed

+386
-266
lines changed

11 files changed

+386
-266
lines changed

‎dev/components/components/tooltip.vue‎

Lines changed: 128 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,141 @@
1212
</span>
1313
</p>
1414

15-
<div v-tooltip="'Quasar Rulz!'" style="margin-top: 40px;width: 200px; height: 70px;background-color: #26A69A;">
15+
<div style="margin-top: 40px;width: 200px; height: 70px;background-color: #26A69A;">
1616
&nbsp;
17+
<quasar-tooltip>
18+
Quasar Rulz!
19+
</quasar-tooltip>
1720
</div>
1821
<br><br>
1922
<div class="group">
20-
<div v-tooltip.inline="'Tooltip'">
21-
<button class="indigo">Hover</button>
22-
</div>
23-
<div v-tooltip.inline="'Tooltip for the user'">
24-
<button class="red">Over</button>
25-
</div>
26-
<div v-tooltip.inline="'Lorem Ipsum... Some long tooltip...'">
27-
<button class="purple">These</button>
23+
<button class="indigo">
24+
Hover
25+
<quasar-tooltip>
26+
Quasar Tooltip 1
27+
</quasar-tooltip>
28+
</button>
29+
<button class="red">
30+
Over
31+
<quasar-tooltip>
32+
Quasar Tooltip 2
33+
</quasar-tooltip>
34+
</button>
35+
<button class="purple">
36+
These
37+
<quasar-tooltip>
38+
Quasar Tooltip 3
39+
</quasar-tooltip>
40+
</button>
41+
<button class="amber">
42+
Buttons
43+
<quasar-tooltip>
44+
Quasar Tooltip 4
45+
</quasar-tooltip>
46+
</button>
47+
</div>
48+
49+
<div class="card" style="margin-top: 75px">
50+
<div class="card-title bg-primary text-center">
51+
<button class="orange push">
52+
Mouse Hover
53+
54+
<quasar-tooltip
55+
:anchor-origin="anchorOrigin"
56+
:target-origin="targetOrigin"
57+
>
58+
<div>Quasar is <strong>great</strong>!</div>
59+
<div class="text-center">Try it.</div>
60+
</quasar-popover>
61+
</button>
2862
</div>
29-
<div v-tooltip.inline="'Lorem Ipsum...'">
30-
<button class="amber">Buttons</button>
63+
64+
<p class="caption text-center">Configure the Popover for button above.</p>
65+
<div class="card-content group row sm-column">
66+
<div class="auto column items-center">
67+
<p class="caption">Anchor Origin</p>
68+
<div class="flex">
69+
<div class="column group">
70+
<div>Vertical</div>
71+
<label>
72+
<quasar-radio v-model="anchorOrigin.vertical" val="top"></quasar-radio>
73+
Top
74+
</label>
75+
<label>
76+
<quasar-radio v-model="anchorOrigin.vertical" val="center"></quasar-radio>
77+
Center
78+
</label>
79+
<label>
80+
<quasar-radio v-model="anchorOrigin.vertical" val="bottom"></quasar-radio>
81+
Bottom
82+
</label>
83+
</div>
84+
<div class="column group">
85+
<div>Horizontal</div>
86+
<label>
87+
<quasar-radio v-model="anchorOrigin.horizontal" val="left"></quasar-radio>
88+
Left
89+
</label>
90+
<label>
91+
<quasar-radio v-model="anchorOrigin.horizontal" val="middle"></quasar-radio>
92+
Middle
93+
</label>
94+
<label>
95+
<quasar-radio v-model="anchorOrigin.horizontal" val="right"></quasar-radio>
96+
Right
97+
</label>
98+
</div>
99+
</div>
100+
</div>
101+
102+
<div class="auto column items-center">
103+
<p class="caption">Target Origin</p>
104+
<div class="flex">
105+
<div class="column group">
106+
<div>Vertical</div>
107+
<label>
108+
<quasar-radio v-model="targetOrigin.vertical" val="top"></quasar-radio>
109+
Top
110+
</label>
111+
<label>
112+
<quasar-radio v-model="targetOrigin.vertical" val="center"></quasar-radio>
113+
Center
114+
</label>
115+
<label>
116+
<quasar-radio v-model="targetOrigin.vertical" val="bottom"></quasar-radio>
117+
Bottom
118+
</label>
119+
</div>
120+
<div class="column group">
121+
<div>Horizontal</div>
122+
<label>
123+
<quasar-radio v-model="targetOrigin.horizontal" val="left"></quasar-radio>
124+
Left
125+
</label>
126+
<label>
127+
<quasar-radio v-model="targetOrigin.horizontal" val="middle"></quasar-radio>
128+
Middle
129+
</label>
130+
<label>
131+
<quasar-radio v-model="targetOrigin.horizontal" val="right"></quasar-radio>
132+
Right
133+
</label>
134+
</div>
135+
</div>
136+
</div>
31137
</div>
32138
</div>
33139
</div>
34140
</div>
35141
</template>
142+
143+
<script>
144+
export default {
145+
data () {
146+
return {
147+
anchorOrigin: {vertical: 'top', horizontal: 'middle'},
148+
targetOrigin: {vertical: 'bottom', horizontal: 'middle'}
149+
}
150+
}
151+
}
152+
</script>

‎src/css-components/tooltip/tooltip.ios.styl‎

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

‎src/css-components/tooltip/tooltip.mat.styl‎

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

‎src/install.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import dGoBack from './vue-directives/go-back'
99
import dLink from './vue-directives/link'
1010
import dScrollFire from './vue-directives/scroll-fire'
1111
import dScroll from './vue-directives/scroll'
12-
import dTooltip from './vue-directives/tooltip'
1312
import dTouchHold from './vue-directives/touch-hold'
1413
import dTouchPan from './vue-directives/touch-pan'
1514
import dTouchSwipe from './vue-directives/touch-swipe'
@@ -56,6 +55,7 @@ import Step from './vue-components/stepper/Step.vue'
5655
import Tab from './vue-components/tab/Tab.vue'
5756
import Tabs from './vue-components/tab/Tabs.vue'
5857
import Toggle from './vue-components/toggle/Toggle.vue'
58+
import Tooltip from './vue-components/tooltip/Tooltip.vue'
5959
import Tree from './vue-components/tree/Tree.vue'
6060
import Video from './vue-components/video/Video.vue'
6161

@@ -64,7 +64,6 @@ function registerDirectives (_Vue) {
6464
_Vue.directive('link', dLink)
6565
_Vue.directive('scroll-fire', dScrollFire)
6666
_Vue.directive('scroll', dScroll)
67-
_Vue.directive('tooltip', dTooltip)
6867
_Vue.directive('touch-hold', dTouchHold)
6968
_Vue.directive('touch-pan', dTouchPan)
7069
_Vue.directive('touch-swipe', dTouchSwipe)
@@ -110,6 +109,7 @@ function registerComponents (_Vue) {
110109
_Vue.component('quasar-tab', Tab)
111110
_Vue.component('quasar-tabs', Tabs)
112111
_Vue.component('quasar-toggle', Toggle)
112+
_Vue.component('quasar-tooltip', Tooltip)
113113
_Vue.component('quasar-tree', Tree)
114114
_Vue.component('quasar-video', Video)
115115

‎src/utils.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import * as event from './utils/event'
55
import extend from './utils/extend'
66
import getVueRef from './utils/get-vue-ref'
77
import openURL from './utils/open-url'
8+
import * as popup from './utils/popup'
89
import * as store from './utils/store'
910
import throttle from './utils/throttle'
1011
import uid from './utils/uid'
@@ -17,6 +18,7 @@ export default {
1718
extend,
1819
getVueRef,
1920
openURL,
21+
popup,
2022
store,
2123
throttle,
2224
uid

0 commit comments

Comments
 (0)