quasar-ui-sellmate-ui-kit 3.12.1 → 3.12.2

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.
Files changed (10) hide show
  1. package/dist/index.common.js +2 -2
  2. package/dist/index.css +1 -1
  3. package/dist/index.esm.js +2 -2
  4. package/dist/index.min.css +1 -1
  5. package/dist/index.rtl.css +1 -1
  6. package/dist/index.rtl.min.css +1 -1
  7. package/dist/index.umd.js +85 -81
  8. package/dist/index.umd.min.js +2 -2
  9. package/package.json +1 -1
  10. package/src/components/STooltip.vue +214 -209
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "quasar-ui-sellmate-ui-kit",
3
- "version": "3.12.1",
3
+ "version": "3.12.2",
4
4
  "author": "Sellmate Dev Team <dev@sellmate.co.kr>",
5
5
  "description": "Sellmate UI Kit",
6
6
  "license": "MIT",
package/src/components/STooltip.vue CHANGED
@@ -1,209 +1,214 @@
1
- <template>
2
- <q-btn
3
- no-caps
4
- no-wrap
5
- dense
6
- unelevated
7
- :ripple="false"
8
- class="s-tooltip-btn q-pa-none"
9
- :class="{ 'no-hover': noHover }"
10
- @mouseenter="() => isToogled = true"
11
- @click="() => isToogled = false"
12
- :text-color="needToogle && isToogled && toogleColor ? toogleColor : textColor"
13
- >
14
- <template v-if="needToogle">
15
- <q-menu
16
- :self="$props.boxSelf"
17
- :anchor="$props.boxAnchor"
18
- :offset="$props.boxOffset"
19
- :modelValue="isToogled"
20
- no-parent-event
21
- persistent
22
- class="bg-Blue_B_Darken-2 text-white s-tooltip"
23
- >
24
- <div class="tooltip-close-icon cursor-pointer">
25
- <q-icon :name="closeIcon" size="16px" @click="() => isToogled = false" />
26
- </div>
27
- <div class="q-py-sm q-px-md"><slot></slot></div>
28
- </q-menu>
29
- <q-menu
30
- :anchor="$props.arrowAnchor"
31
- :self="$props.arrowSelf"
32
- :offset="$props.arrowOffset"
33
- :class="$props.arrowStyle"
34
- class="tooltip-triangle"
35
- :model-value="isToogled"
36
- @update:model-value="(val) => {
37
- isToogled = val
38
- $emit('update:modelValue', val)
39
- }"
40
- no-parent-event
41
- persistent
42
- />
43
- </template>
44
- <template v-else>
45
- <q-tooltip
46
- :anchor="$props.boxAnchor"
47
- :self="$props.boxSelf"
48
- :offset="$props.boxOffset"
49
- class="bg-Blue_B_Darken-2 text-white s-tooltip"
50
- :modelValue="modelValue"
51
- @hide="$emit('update:modelValue', false)"
52
- @show="$emit('update:modelValue', true)"
53
- >
54
- <slot></slot>
55
- </q-tooltip>
56
- <q-tooltip
57
- :anchor="$props.arrowAnchor"
58
- :self="$props.arrowSelf"
59
- :offset="$props.arrowOffset"
60
- :class="$props.arrowStyle"
61
- class="tooltip-triangle"
62
- :modelValue="modelValue"
63
- ></q-tooltip>
64
- </template>
65
- </q-btn>
66
- </template>
67
-
68
- <script>
69
- import { defineComponent, ref } from 'vue';
70
- import {
71
- QTooltip, QBtn, QMenu, QIcon,
72
- } from 'quasar';
73
- import { closeIcon } from '../assets/icons';
74
-
75
- export default defineComponent({
76
- name: 'STooptip',
77
- components: {
78
- QTooltip,
79
- QBtn,
80
- QMenu,
81
- QIcon,
82
- },
83
- props: {
84
- modelValue: Boolean,
85
- textColor: {
86
- type: String,
87
- default: '',
88
- },
89
- toogleColor: {
90
- type: String,
91
- default: '',
92
- },
93
- needToogle: {
94
- type: Boolean,
95
- default: false,
96
- },
97
- toogle: {
98
- type: Boolean,
99
- default: false,
100
- },
101
- noHover: {
102
- type: Boolean,
103
- default: false,
104
- },
105
- boxAnchor: {
106
- type: String,
107
- required: true,
108
- },
109
- boxSelf: {
110
- type: String,
111
- required: true,
112
- },
113
- boxOffset: {
114
- type: Array,
115
- required: true,
116
- },
117
- arrowAnchor: {
118
- type: String,
119
- required: true,
120
- },
121
- arrowSelf: {
122
- type: String,
123
- required: true,
124
- },
125
- arrowOffset: {
126
- type: Array,
127
- required: true,
128
- },
129
- arrowStyle: {
130
- type: String,
131
- required: true,
132
- },
133
- },
134
- setup(props) {
135
- const isToogled = ref(props.toogle);
136
- return {
137
- isToogled,
138
- closeIcon,
139
- };
140
- },
141
- });
142
- </script>
143
-
144
- <style lang="scss">
145
- @import "../css/quasar.variables.scss";
146
- .s-tooltip {
147
- padding: $tooltip-padding;
148
- border-radius: $button-border-radius;
149
- font: {
150
- size: $default-font;
151
- weight: $font-weight-md;
152
- }
153
- }
154
- .s-toogle-tip {
155
- padding: 0;
156
- border-radius: $button-border-radius;
157
- font: {
158
- size: $default-font;
159
- weight: $font-weight-md;
160
- }
161
-
162
- }
163
- .tooltip-triangle {
164
- box-shadow: none !important;
165
- background: none !important;
166
- padding: 0;
167
- width: 0;
168
- height: 0;
169
- &.bottom {
170
- border: {
171
- top: 0px solid transparent;
172
- bottom: 12px solid $Blue_B_Darken-2;
173
- left: 8px solid transparent;
174
- right: 8px solid transparent;
175
- }
176
- }
177
- &.top {
178
- border: {
179
- top: 12px solid $Blue_B_Darken-2;
180
- bottom: 0px solid transparent;
181
- left: 8px solid transparent;
182
- right: 8px solid transparent;
183
- }
184
- }
185
- &.left {
186
- border: {
187
- top: 8px solid transparent;
188
- bottom: 8px solid transparent;
189
- left: 12px solid $Blue_B_Darken-2;
190
- right: 0px solid transparent;
191
- }
192
- }
193
- &.right {
194
- border: {
195
- top: 8px solid transparent;
196
- bottom: 8px solid transparent;
197
- left: 0px solid transparent;
198
- right: 12px solid $Blue_B_Darken-2;
199
- }
200
- }
201
- }
202
- .q-menu {
203
- > .tooltip-close-icon {
204
- position: absolute;
205
- top: 6px;
206
- right: 6px;
207
- }
208
- }
209
- </style>
1
+ <template>
2
+ <q-btn
3
+ no-caps
4
+ no-wrap
5
+ dense
6
+ unelevated
7
+ :ripple="false"
8
+ class="s-tooltip-btn q-pa-none"
9
+ :class="{ 'no-hover': noHover }"
10
+ @mouseenter="() => isToggled = true"
11
+ @click="() => isToggled = false"
12
+ :text-color="needToggle && isToggled && toggleColor ? toggleColor : textColor"
13
+ >
14
+ <template v-if="needToggle">
15
+ <q-menu
16
+ :self="$props.boxSelf"
17
+ :anchor="$props.boxAnchor"
18
+ :offset="$props.boxOffset"
19
+ :modelValue="isToggled"
20
+ no-parent-event
21
+ persistent
22
+ :class="menuClass"
23
+ class="bg-Blue_B_Darken-2 text-white s-tooltip"
24
+ >
25
+ <div class="tooltip-close-icon cursor-pointer">
26
+ <q-icon :name="closeIcon" size="16px" @click="() => isToggled = false" />
27
+ </div>
28
+ <div class="q-py-sm q-px-md"><slot></slot></div>
29
+ </q-menu>
30
+ <q-menu
31
+ :anchor="$props.arrowAnchor"
32
+ :self="$props.arrowSelf"
33
+ :offset="$props.arrowOffset"
34
+ :class="$props.arrowStyle"
35
+ class="tooltip-triangle"
36
+ :model-value="isToggled"
37
+ @update:model-value="(val) => {
38
+ isToggled = val
39
+ $emit('update:modelValue', val)
40
+ }"
41
+ no-parent-event
42
+ persistent
43
+ />
44
+ </template>
45
+ <template v-else>
46
+ <q-tooltip
47
+ :anchor="$props.boxAnchor"
48
+ :self="$props.boxSelf"
49
+ :offset="$props.boxOffset"
50
+ class="bg-Blue_B_Darken-2 text-white s-tooltip"
51
+ :modelValue="modelValue"
52
+ @hide="$emit('update:modelValue', false)"
53
+ @show="$emit('update:modelValue', true)"
54
+ >
55
+ <slot></slot>
56
+ </q-tooltip>
57
+ <q-tooltip
58
+ :anchor="$props.arrowAnchor"
59
+ :self="$props.arrowSelf"
60
+ :offset="$props.arrowOffset"
61
+ :class="$props.arrowStyle"
62
+ class="tooltip-triangle"
63
+ :modelValue="modelValue"
64
+ ></q-tooltip>
65
+ </template>
66
+ </q-btn>
67
+ </template>
68
+
69
+ <script>
70
+ import { defineComponent, ref } from 'vue';
71
+ import {
72
+ QTooltip, QBtn, QMenu, QIcon,
73
+ } from 'quasar';
74
+ import { closeIcon } from '../assets/icons';
75
+
76
+ export default defineComponent({
77
+ name: 'STooltip',
78
+ components: {
79
+ QTooltip,
80
+ QBtn,
81
+ QMenu,
82
+ QIcon,
83
+ },
84
+ props: {
85
+ modelValue: Boolean,
86
+ textColor: {
87
+ type: String,
88
+ default: '',
89
+ },
90
+ toggleColor: {
91
+ type: String,
92
+ default: '',
93
+ },
94
+ needToggle: {
95
+ type: Boolean,
96
+ default: false,
97
+ },
98
+ toggle: {
99
+ type: Boolean,
100
+ default: false,
101
+ },
102
+ noHover: {
103
+ type: Boolean,
104
+ default: false,
105
+ },
106
+ boxAnchor: {
107
+ type: String,
108
+ required: true,
109
+ },
110
+ boxSelf: {
111
+ type: String,
112
+ required: true,
113
+ },
114
+ boxOffset: {
115
+ type: Array,
116
+ required: true,
117
+ },
118
+ arrowAnchor: {
119
+ type: String,
120
+ required: true,
121
+ },
122
+ arrowSelf: {
123
+ type: String,
124
+ required: true,
125
+ },
126
+ arrowOffset: {
127
+ type: Array,
128
+ required: true,
129
+ },
130
+ arrowStyle: {
131
+ type: String,
132
+ required: true,
133
+ },
134
+ menuClass: {
135
+ type: String,
136
+ default: '',
137
+ },
138
+ },
139
+ setup(props) {
140
+ const isToggled = ref(props.toggle);
141
+ return {
142
+ isToggled,
143
+ closeIcon,
144
+ };
145
+ },
146
+ });
147
+ </script>
148
+
149
+ <style lang="scss">
150
+ @import "../css/quasar.variables.scss";
151
+ .s-tooltip {
152
+ padding: $tooltip-padding;
153
+ border-radius: $button-border-radius;
154
+ font: {
155
+ size: $default-font;
156
+ weight: $font-weight-md;
157
+ }
158
+ }
159
+ .s-toggle-tip {
160
+ padding: 0;
161
+ border-radius: $button-border-radius;
162
+ font: {
163
+ size: $default-font;
164
+ weight: $font-weight-md;
165
+ }
166
+
167
+ }
168
+ .tooltip-triangle {
169
+ box-shadow: none !important;
170
+ background: none !important;
171
+ padding: 0;
172
+ width: 0;
173
+ height: 0;
174
+ &.bottom {
175
+ border: {
176
+ top: 0px solid transparent;
177
+ bottom: 12px solid $Blue_B_Darken-2;
178
+ left: 8px solid transparent;
179
+ right: 8px solid transparent;
180
+ }
181
+ }
182
+ &.top {
183
+ border: {
184
+ top: 12px solid $Blue_B_Darken-2;
185
+ bottom: 0px solid transparent;
186
+ left: 8px solid transparent;
187
+ right: 8px solid transparent;
188
+ }
189
+ }
190
+ &.left {
191
+ border: {
192
+ top: 8px solid transparent;
193
+ bottom: 8px solid transparent;
194
+ left: 12px solid $Blue_B_Darken-2;
195
+ right: 0px solid transparent;
196
+ }
197
+ }
198
+ &.right {
199
+ border: {
200
+ top: 8px solid transparent;
201
+ bottom: 8px solid transparent;
202
+ left: 0px solid transparent;
203
+ right: 12px solid $Blue_B_Darken-2;
204
+ }
205
+ }
206
+ }
207
+ .q-menu {
208
+ > .tooltip-close-icon {
209
+ position: absolute;
210
+ top: 6px;
211
+ right: 6px;
212
+ }
213
+ }
214
+ </style>