@bobbykim/manguito-theme 0.5.0 → 0.6.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/README.md +1 -3
- package/lib/directives/index.ts +111 -1
- package/lib/directives/index.types.ts +15 -0
- package/lib/tooltip/index.ts +75 -0
- package/package.json +2 -2
- package/theme/theme.ts +1 -1
- package/themeVariables.cjs +111 -0
package/README.md
CHANGED
|
@@ -19,9 +19,7 @@ npx tailwindcss init -p
|
|
|
19
19
|
tailwind.config.cjs
|
|
20
20
|
|
|
21
21
|
```cjs
|
|
22
|
-
const {
|
|
23
|
-
mclTheme,
|
|
24
|
-
} = require('./src/components/manguito-theme/themeVariables.cjs')
|
|
22
|
+
const { mclTheme } = require('@bobbykim/manguito-theme/themeVariables.cjs')
|
|
25
23
|
module.exports = {
|
|
26
24
|
content: [
|
|
27
25
|
'./src/**/*.{vue,ts,js,cjs}',
|
package/lib/directives/index.ts
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
import { Directive } from 'vue'
|
|
1
|
+
import { Directive, DirectiveBinding, h, render, createVNode } from 'vue'
|
|
2
|
+
import generateClass from '../..'
|
|
3
|
+
import type { Direction } from '../..'
|
|
4
|
+
import tooltip from '../tooltip'
|
|
5
|
+
import type { TooltipElementType, TooltipValueType } from './index.types'
|
|
2
6
|
|
|
3
7
|
export const vClickOutside: Directive = {
|
|
4
8
|
mounted(el, binding) {
|
|
@@ -76,3 +80,109 @@ export const vCollapse: Directive = {
|
|
|
76
80
|
el.removeEventListener('click', el.__HandleToggler)
|
|
77
81
|
},
|
|
78
82
|
}
|
|
83
|
+
|
|
84
|
+
export const vTooltip: Directive<TooltipElementType, TooltipValueType> = {
|
|
85
|
+
mounted(el, binding) {
|
|
86
|
+
el.__HandleTooltip = (
|
|
87
|
+
el: HTMLElement,
|
|
88
|
+
binding: DirectiveBinding<TooltipValueType>
|
|
89
|
+
) => {
|
|
90
|
+
// parent element class
|
|
91
|
+
el.classList.add('relative', 'group', 'overflow-visible')
|
|
92
|
+
|
|
93
|
+
// handle tooltip text
|
|
94
|
+
let tooltipText: string | null | undefined
|
|
95
|
+
if (el.hasAttribute('title')) {
|
|
96
|
+
tooltipText = el.getAttribute('title')
|
|
97
|
+
}
|
|
98
|
+
if (
|
|
99
|
+
!el.hasAttribute('title') &&
|
|
100
|
+
typeof binding.value !== 'undefined' &&
|
|
101
|
+
typeof binding.value === 'string'
|
|
102
|
+
) {
|
|
103
|
+
tooltipText = binding.value
|
|
104
|
+
}
|
|
105
|
+
if (
|
|
106
|
+
!el.hasAttribute('title') &&
|
|
107
|
+
typeof binding.value !== 'undefined' &&
|
|
108
|
+
typeof binding.value !== 'string' &&
|
|
109
|
+
typeof binding.value.title === 'string'
|
|
110
|
+
) {
|
|
111
|
+
tooltipText = binding.value.title
|
|
112
|
+
}
|
|
113
|
+
// handle tooltip color
|
|
114
|
+
let tooltipColor: string | null | undefined
|
|
115
|
+
if (el.hasAttribute('color')) {
|
|
116
|
+
tooltipColor = el.getAttribute('color')
|
|
117
|
+
}
|
|
118
|
+
if (
|
|
119
|
+
!el.hasAttribute('color') &&
|
|
120
|
+
typeof binding.value !== 'undefined' &&
|
|
121
|
+
typeof binding.value !== 'string' &&
|
|
122
|
+
typeof binding.value.color === 'string'
|
|
123
|
+
) {
|
|
124
|
+
tooltipColor = binding.value.color
|
|
125
|
+
}
|
|
126
|
+
// handle tooltip text color
|
|
127
|
+
let tooltipTextColor: string | null | undefined
|
|
128
|
+
if (el.hasAttribute('text-color')) {
|
|
129
|
+
tooltipTextColor = el.getAttribute('text-color')
|
|
130
|
+
}
|
|
131
|
+
if (
|
|
132
|
+
!el.hasAttribute('text-color') &&
|
|
133
|
+
typeof binding.value !== 'undefined' &&
|
|
134
|
+
typeof binding.value !== 'string' &&
|
|
135
|
+
typeof binding.value.textColor === 'string'
|
|
136
|
+
) {
|
|
137
|
+
tooltipTextColor = binding.value.textColor
|
|
138
|
+
}
|
|
139
|
+
// handle tooltip width
|
|
140
|
+
let tooltipWidth: string | number | null | undefined
|
|
141
|
+
if (el.hasAttribute('width')) {
|
|
142
|
+
tooltipWidth = el.getAttribute('width')
|
|
143
|
+
}
|
|
144
|
+
if (
|
|
145
|
+
!el.hasAttribute('width') &&
|
|
146
|
+
typeof binding.value !== 'undefined' &&
|
|
147
|
+
typeof binding.value !== 'string' &&
|
|
148
|
+
typeof binding.value.width === ('number' || 'string')
|
|
149
|
+
) {
|
|
150
|
+
tooltipWidth = binding.value.width
|
|
151
|
+
}
|
|
152
|
+
// handle custom class names
|
|
153
|
+
let tooltipClassName: string | undefined
|
|
154
|
+
if (
|
|
155
|
+
typeof binding.value !== 'undefined' &&
|
|
156
|
+
typeof binding.value !== 'string' &&
|
|
157
|
+
typeof binding.value.className === 'string'
|
|
158
|
+
) {
|
|
159
|
+
tooltipClassName = binding.value.className
|
|
160
|
+
}
|
|
161
|
+
let tooltipDirection: Direction | undefined
|
|
162
|
+
const modifierArray: string[] = Object.keys(binding.modifiers)
|
|
163
|
+
// handle direction
|
|
164
|
+
if (modifierArray.length > 0) {
|
|
165
|
+
tooltipDirection = modifierArray[0] as Direction
|
|
166
|
+
}
|
|
167
|
+
const vnode = createVNode(tooltip, {
|
|
168
|
+
direction: tooltipDirection,
|
|
169
|
+
title: tooltipText,
|
|
170
|
+
color: tooltipColor,
|
|
171
|
+
textColor: tooltipTextColor,
|
|
172
|
+
width: tooltipWidth,
|
|
173
|
+
customClass: tooltipClassName,
|
|
174
|
+
})
|
|
175
|
+
render(vnode, el)
|
|
176
|
+
}
|
|
177
|
+
el.__UnmountTooltip = (el: Element) => {
|
|
178
|
+
render(null, el)
|
|
179
|
+
}
|
|
180
|
+
el.__HandleTooltip(el, binding)
|
|
181
|
+
},
|
|
182
|
+
updated(el, binding) {
|
|
183
|
+
el.__HandleTooltip(el, binding)
|
|
184
|
+
},
|
|
185
|
+
unmounted(el) {
|
|
186
|
+
el.__UnmountTooltip(el)
|
|
187
|
+
},
|
|
188
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { ColorPalette } from '../..'
|
|
2
|
+
|
|
3
|
+
export interface TooltipElementType extends HTMLElement {
|
|
4
|
+
__HandleTooltip: Function
|
|
5
|
+
__UnmountTooltip: Function
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
interface TooltipValueObjectType {
|
|
9
|
+
title?: string
|
|
10
|
+
color?: ColorPalette
|
|
11
|
+
textColor?: ColorPalette
|
|
12
|
+
width?: number | string
|
|
13
|
+
className?: string
|
|
14
|
+
}
|
|
15
|
+
export type TooltipValueType = TooltipValueObjectType | string
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { PropType, defineComponent, h, computed } from 'vue'
|
|
2
|
+
import type { Direction, ColorPalette } from '../../'
|
|
3
|
+
import generateClass from '../../'
|
|
4
|
+
|
|
5
|
+
export default defineComponent({
|
|
6
|
+
props: {
|
|
7
|
+
direction: {
|
|
8
|
+
type: String as PropType<Direction>,
|
|
9
|
+
default: 'right',
|
|
10
|
+
},
|
|
11
|
+
color: {
|
|
12
|
+
type: String as PropType<ColorPalette>,
|
|
13
|
+
default: 'dark-3',
|
|
14
|
+
},
|
|
15
|
+
textColor: {
|
|
16
|
+
type: String as PropType<ColorPalette>,
|
|
17
|
+
default: 'white',
|
|
18
|
+
},
|
|
19
|
+
width: {
|
|
20
|
+
type: [Number, String],
|
|
21
|
+
default: 80,
|
|
22
|
+
},
|
|
23
|
+
customClass: {
|
|
24
|
+
type: String,
|
|
25
|
+
default: '',
|
|
26
|
+
},
|
|
27
|
+
title: {
|
|
28
|
+
type: String,
|
|
29
|
+
required: true,
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
setup(props) {
|
|
33
|
+
const defaultClassList: string =
|
|
34
|
+
'invisible opacity-0 group-hover:visible group-hover:opacity-100 z-[100] tooltip'
|
|
35
|
+
const colorClass = computed<string>(() => {
|
|
36
|
+
/**
|
|
37
|
+
* @param {ColorPalette} color - props
|
|
38
|
+
* @param {ColorPalette} textolor - props
|
|
39
|
+
*/
|
|
40
|
+
const { color, textColor } = props
|
|
41
|
+
const classArray: string[] = [
|
|
42
|
+
generateClass('BGCOLOR', color),
|
|
43
|
+
generateClass('TEXTCOLOR', textColor),
|
|
44
|
+
]
|
|
45
|
+
return classArray.join(' ')
|
|
46
|
+
})
|
|
47
|
+
const tooltipWidth = computed(() => {
|
|
48
|
+
return { width: `${props.width}px` }
|
|
49
|
+
})
|
|
50
|
+
const tooltipDirection = computed<string>(() => {
|
|
51
|
+
switch (props.direction) {
|
|
52
|
+
case 'left':
|
|
53
|
+
return 'tooltip-left'
|
|
54
|
+
case 'top':
|
|
55
|
+
return 'tooltip-top'
|
|
56
|
+
case 'bottom':
|
|
57
|
+
return 'tooltip-bottom'
|
|
58
|
+
default:
|
|
59
|
+
return 'tooltip-right'
|
|
60
|
+
}
|
|
61
|
+
})
|
|
62
|
+
return () =>
|
|
63
|
+
h('div', {
|
|
64
|
+
class: [
|
|
65
|
+
defaultClassList,
|
|
66
|
+
props.customClass,
|
|
67
|
+
tooltipDirection.value,
|
|
68
|
+
colorClass.value,
|
|
69
|
+
],
|
|
70
|
+
role: 'tooltip',
|
|
71
|
+
innerHTML: props.title,
|
|
72
|
+
style: [tooltipWidth.value],
|
|
73
|
+
})
|
|
74
|
+
},
|
|
75
|
+
})
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bobbykim/manguito-theme",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0",
|
|
4
4
|
"description": "main theme file for manguito components library. Other MCL components will need to import this file to run.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "index.ts",
|
|
@@ -17,5 +17,5 @@
|
|
|
17
17
|
"url": "https://github.com/bobbykim89/manguito-component-library.git"
|
|
18
18
|
},
|
|
19
19
|
"license": "MIT",
|
|
20
|
-
"gitHead": "
|
|
20
|
+
"gitHead": "eb0833dd47a9dd0bb326bee28daf2bee4e421279"
|
|
21
21
|
}
|
package/theme/theme.ts
CHANGED
package/themeVariables.cjs
CHANGED
|
@@ -141,6 +141,48 @@ const mclTheme = plugin.withOptions(
|
|
|
141
141
|
),
|
|
142
142
|
}
|
|
143
143
|
}, {})
|
|
144
|
+
const tooltipColors = Object.keys(colors).reduce((accumulator, key) => {
|
|
145
|
+
// const invalidKeys = ['current', 'transparent', 'inherit']
|
|
146
|
+
// if (invalidKeys.includes(key)) {
|
|
147
|
+
// return
|
|
148
|
+
// }
|
|
149
|
+
if (typeof colors[key] === 'string') {
|
|
150
|
+
return {
|
|
151
|
+
...accumulator,
|
|
152
|
+
[`.tooltip.tooltip-top.bg-${e(key)}`]: {
|
|
153
|
+
[`@apply after:border-t-${key}`]: {},
|
|
154
|
+
},
|
|
155
|
+
[`.tooltip.tooltip-bottom.bg-${e(key)}`]: {
|
|
156
|
+
[`@apply after:border-b-${key}`]: {},
|
|
157
|
+
},
|
|
158
|
+
[`.tooltip.tooltip-right.bg-${e(key)}`]: {
|
|
159
|
+
[`@apply after:border-r-${key}`]: {},
|
|
160
|
+
},
|
|
161
|
+
[`.tooltip.tooltip-left.bg-${e(key)}`]: {
|
|
162
|
+
[`@apply after:border-l-${key}`]: {},
|
|
163
|
+
},
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
const colorShades = Object.keys(colors[key])
|
|
167
|
+
return {
|
|
168
|
+
...accumulator,
|
|
169
|
+
...colorShades.reduce((acc, level) => ({
|
|
170
|
+
...acc,
|
|
171
|
+
[`.tooltip.tooltip-top.bg-${e(key)}-${level}`]: {
|
|
172
|
+
[`@apply after:border-t-${key}-${level}`]: {},
|
|
173
|
+
},
|
|
174
|
+
[`.tooltip.tooltip-bottom.bg-${e(key)}-${level}`]: {
|
|
175
|
+
[`@apply after:border-b-${key}-${level}`]: {},
|
|
176
|
+
},
|
|
177
|
+
[`.tooltip.tooltip-right.bg-${e(key)}-${level}`]: {
|
|
178
|
+
[`@apply after:border-r-${key}-${level}`]: {},
|
|
179
|
+
},
|
|
180
|
+
[`.tooltip.tooltip-left.bg-${e(key)}-${level}`]: {
|
|
181
|
+
[`@apply after:border-l-${key}-${level}`]: {},
|
|
182
|
+
},
|
|
183
|
+
})),
|
|
184
|
+
}
|
|
185
|
+
}, {})
|
|
144
186
|
|
|
145
187
|
addBase({
|
|
146
188
|
body: {
|
|
@@ -417,11 +459,80 @@ const mclTheme = plugin.withOptions(
|
|
|
417
459
|
left: '0',
|
|
418
460
|
},
|
|
419
461
|
},
|
|
462
|
+
'.tooltip': {
|
|
463
|
+
'@apply font-normal text-sm transition-opacity duration-200 p-2xs absolute rounded text-center drop-shadow-md':
|
|
464
|
+
{},
|
|
465
|
+
},
|
|
466
|
+
'.tooltip.tooltip-top': {
|
|
467
|
+
left: '50%',
|
|
468
|
+
bottom: '110%',
|
|
469
|
+
transform: 'translateX(-50%)',
|
|
470
|
+
'&::after': {
|
|
471
|
+
content: '" "',
|
|
472
|
+
position: 'absolute',
|
|
473
|
+
top: '100%',
|
|
474
|
+
left: '50%',
|
|
475
|
+
'margin-left': '-5px',
|
|
476
|
+
'border-width': '5px',
|
|
477
|
+
'border-style': 'solid',
|
|
478
|
+
},
|
|
479
|
+
'@apply after:border-t-dark-3 after:border-x-transparent after:border-b-transparent':
|
|
480
|
+
{},
|
|
481
|
+
},
|
|
482
|
+
'.tooltip.tooltip-bottom': {
|
|
483
|
+
left: '50%',
|
|
484
|
+
top: '110%',
|
|
485
|
+
transform: 'translateX(-50%)',
|
|
486
|
+
'&::after': {
|
|
487
|
+
content: '" "',
|
|
488
|
+
position: 'absolute',
|
|
489
|
+
bottom: '100%',
|
|
490
|
+
left: '50%',
|
|
491
|
+
'margin-left': '-5px',
|
|
492
|
+
'border-width': '5px',
|
|
493
|
+
'border-style': 'solid',
|
|
494
|
+
},
|
|
495
|
+
'@apply after:border-t-transparent after:border-x-transparent after:border-b-dark-3':
|
|
496
|
+
{},
|
|
497
|
+
},
|
|
498
|
+
'.tooltip.tooltip-left': {
|
|
499
|
+
top: '50%',
|
|
500
|
+
right: '110%',
|
|
501
|
+
transform: 'translateY(-50%)',
|
|
502
|
+
'&::after': {
|
|
503
|
+
content: '" "',
|
|
504
|
+
position: 'absolute',
|
|
505
|
+
top: '50%',
|
|
506
|
+
left: '100%',
|
|
507
|
+
'margin-top': '-5px',
|
|
508
|
+
'border-width': '5px',
|
|
509
|
+
'border-style': 'solid',
|
|
510
|
+
},
|
|
511
|
+
'@apply after:border-y-transparent after:border-r-transparent after:border-l-dark-3':
|
|
512
|
+
{},
|
|
513
|
+
},
|
|
514
|
+
'.tooltip.tooltip-right': {
|
|
515
|
+
top: '50%',
|
|
516
|
+
left: '110%',
|
|
517
|
+
transform: 'translateY(-50%)',
|
|
518
|
+
'&::after': {
|
|
519
|
+
content: '" "',
|
|
520
|
+
position: 'absolute',
|
|
521
|
+
top: '50%',
|
|
522
|
+
right: '100%',
|
|
523
|
+
'margin-top': '-5px',
|
|
524
|
+
'border-width': '5px',
|
|
525
|
+
'border-style': 'solid',
|
|
526
|
+
},
|
|
527
|
+
'@apply after:border-y-transparent after:border-l-transparent after:border-r-dark-3':
|
|
528
|
+
{},
|
|
529
|
+
},
|
|
420
530
|
})
|
|
421
531
|
|
|
422
532
|
addUtilities(listColors)
|
|
423
533
|
addUtilities(btnColors)
|
|
424
534
|
addUtilities(linkColors)
|
|
535
|
+
addUtilities(tooltipColors)
|
|
425
536
|
}
|
|
426
537
|
},
|
|
427
538
|
(options = {}) => {
|