@meistrari/tela-build 1.69.0 → 1.70.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.
Files changed (8) hide show
  1. package/components/tela/dropdown-menu/DropdownMenuItem.vue +7 -1
  2. package/components/tela/tooltip/tooltip-body.vue +66 -0
  3. package/components/tela/tooltip/tooltip-content.vue +60 -10
  4. package/components/tela/tooltip/tooltip-provider.vue +4 -0
  5. package/components/tela/tooltip/tooltip.vue +16 -47
  6. package/components/tela/tooltip-group/tooltip-group-trigger.vue +16 -52
  7. package/components/tela/tooltip-group/tooltip-group.mdx +20 -20
  8. package/package.json +1 -1
package/components/tela/dropdown-menu/DropdownMenuItem.vue CHANGED
@@ -54,6 +54,11 @@ const tooltipConfig = computed(() => {
54
54
  side: 'right' as const,
55
55
  align: 'center' as const,
56
56
  variant: 'single' as const,
57
+ title: undefined,
58
+ description: undefined,
59
+ alignOffset: undefined,
60
+ arrowOffset: undefined,
61
+ delayDuration: undefined,
57
62
  }
58
63
  }
59
64
  if (typeof props.tooltip === 'object' && props.tooltip) {
@@ -66,6 +71,7 @@ const tooltipConfig = computed(() => {
66
71
  description: props.tooltip.description,
67
72
  alignOffset: props.tooltip.alignOffset,
68
73
  arrowOffset: props.tooltip.arrowOffset,
74
+ delayDuration: props.tooltip.delayDuration,
69
75
  }
70
76
  }
71
77
  return null
@@ -91,7 +97,7 @@ const isIconImage = computed(() => {
91
97
  :arrow-offset="tooltipConfig?.arrowOffset"
92
98
  :title="tooltipConfig?.title"
93
99
  :description="tooltipConfig?.description"
94
- :delay-duration="100"
100
+ :delay-duration="tooltipConfig?.delayDuration ?? 100"
95
101
  >
96
102
  <DropdownMenuItem
97
103
  v-bind="props"
package/components/tela/tooltip/tooltip-body.vue ADDED
@@ -0,0 +1,66 @@
1
+ <script setup lang="ts">
2
+ import { TooltipArrow } from 'reka-ui'
3
+ import TelaTooltipContent from './tooltip-content.vue'
4
+
5
+ export type TooltipBodyProps = {
6
+ content?: string
7
+ align?: 'start' | 'center' | 'end'
8
+ side?: 'top' | 'right' | 'bottom' | 'left'
9
+ contentClass?: string
10
+ alignOffset?: number
11
+ arrowOffset?: number
12
+ variant?: 'single' | 'multiline'
13
+ title?: string
14
+ description?: string
15
+ }
16
+
17
+ const props = withDefaults(defineProps<TooltipBodyProps>(), {
18
+ variant: 'single',
19
+ })
20
+
21
+ defineEmits<{
22
+ (e: 'clickContent', event: Event): void
23
+ }>()
24
+
25
+ const variantClasses = computed(() => {
26
+ if (props.variant === 'multiline') {
27
+ return 'w-full min-w-255px max-w-320px py-12px pl-16px pr-24px text-left'
28
+ }
29
+
30
+ return ''
31
+ })
32
+ </script>
33
+
34
+ <template>
35
+ <TelaTooltipContent
36
+ :align="align"
37
+ :side="side"
38
+ :align-offset="props.alignOffset"
39
+ :class="cn(contentClass, variantClasses)"
40
+ @click="$emit('clickContent', $event)"
41
+ >
42
+ <slot>
43
+ <div v-if="variant === 'multiline' && (title || description)" class="max-h-96 overflow-y-auto">
44
+ <h3
45
+ v-if="title"
46
+ body-14-semibold text-white
47
+ >
48
+ {{ title }}
49
+ </h3>
50
+ <p
51
+ v-if="description"
52
+ body-12-regular mt-2px class="text-white/85"
53
+ >
54
+ {{ description }}
55
+ </p>
56
+ </div>
57
+ <template v-else>
58
+ {{ content }}
59
+ </template>
60
+ </slot>
61
+ <TooltipArrow
62
+ class="fill-neutral-800"
63
+ :style="props.arrowOffset ? { transform: `translateX(${props.arrowOffset}px)` } : {}"
64
+ />
65
+ </TelaTooltipContent>
66
+ </template>
package/components/tela/tooltip/tooltip-content.vue CHANGED
@@ -1,16 +1,15 @@
1
1
  <script setup lang="ts">
2
- import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
2
+ import { TooltipContent, TooltipPortal, injectTooltipRootContext, useForwardPropsEmits } from 'reka-ui'
3
3
  import type { TooltipContentEmits, TooltipContentProps } from 'reka-ui'
4
4
  import { reactiveOmit } from '@vueuse/core'
5
- import { inject } from 'vue'
6
- import type { HTMLAttributes } from 'vue'
5
+ import type { HTMLAttributes, ShallowRef } from 'vue'
7
6
 
8
7
  defineOptions({
9
8
  inheritAttrs: false,
10
9
  })
11
10
 
12
11
  const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
13
- sideOffset: 4,
12
+ sideOffset: 2,
14
13
  })
15
14
 
16
15
  const emits = defineEmits<TooltipContentEmits & {
@@ -22,22 +21,73 @@ const delegatedProps = reactiveOmit(props, 'class')
22
21
  const forwarded = useForwardPropsEmits(delegatedProps, emits)
23
22
 
24
23
  const disablePortal = inject<boolean>('tela-disable-tooltip-portal', false)
24
+
25
+ const id = Symbol('tela-tooltip')
26
+ const activeId = inject<ShallowRef<symbol | null> | null>('tela-tooltip-active-id', null)
27
+ const { open } = injectTooltipRootContext()
28
+
29
+ watch(open, (isOpen) => {
30
+ if (!activeId) {
31
+ return
32
+ }
33
+
34
+ if (isOpen) {
35
+ activeId.value = id
36
+ }
37
+ else if (activeId.value === id) {
38
+ activeId.value = null
39
+ }
40
+ })
41
+
42
+ const isGrouped = computed(() => activeId !== null && activeId.value !== null && activeId.value !== id)
25
43
  </script>
26
44
 
27
45
  <template>
28
46
  <TooltipPortal :disabled="disablePortal">
29
47
  <TooltipContent
30
48
  v-bind="{ ...forwarded, ...$attrs }"
31
- :style="{ pointerEvents: 'auto' }"
32
- z-1000 overflow-hidden rounded-12px
33
- py-7px px-12px
49
+ z-1000 relative rounded-8px
50
+ py-5px px-10px pointer-events-auto
34
51
  body-12-semibold text-white
35
- shadow-flying
36
- class="bg-[#030C16F0]"
37
- :class="props.class"
52
+ bg-neutral-800
53
+ :class="cn('tooltip-content', props.class)"
54
+ :data-grouped="isGrouped || undefined"
38
55
  @click="$emit('click', $event)"
39
56
  >
40
57
  <slot />
41
58
  </TooltipContent>
42
59
  </TooltipPortal>
43
60
  </template>
61
+
62
+ <style>
63
+ .tooltip-content {
64
+ transform-origin: var(--reka-tooltip-content-transform-origin);
65
+ animation: tooltip-in 0.125s ease-out;
66
+
67
+ &[data-state='closed'] {
68
+ animation: tooltip-out 0.125s ease-out forwards;
69
+ }
70
+
71
+ &[data-state='instant-open'] {
72
+ animation: none;
73
+ }
74
+
75
+ &[data-state='closed'][data-grouped] {
76
+ animation-duration: 0ms;
77
+ }
78
+ }
79
+
80
+ @keyframes tooltip-in {
81
+ from {
82
+ opacity: 0;
83
+ transform: scale(0.97);
84
+ }
85
+ }
86
+
87
+ @keyframes tooltip-out {
88
+ to {
89
+ opacity: 0;
90
+ transform: scale(0.97);
91
+ }
92
+ }
93
+ </style>
package/components/tela/tooltip/tooltip-provider.vue CHANGED
@@ -3,6 +3,10 @@ import { TooltipProvider } from 'reka-ui'
3
3
  import type { TooltipProviderProps } from 'reka-ui'
4
4
 
5
5
  const props = defineProps<TooltipProviderProps>()
6
+
7
+ // Tracks which tooltip in this provider is currently open, so a closing tooltip
8
+ // can tell whether a sibling took over (instant swap) or it is just leaving (exit animation).
9
+ provide('tela-tooltip-active-id', shallowRef<symbol | null>(null))
6
10
  </script>
7
11
 
8
12
  <template>
package/components/tela/tooltip/tooltip.vue CHANGED
@@ -1,24 +1,14 @@
1
1
  <script setup lang="ts">
2
- import { TooltipArrow } from 'reka-ui'
3
2
  import TelaTooltipProvider from './tooltip-provider.vue'
4
3
  import TelaTooltipRoot from './tooltip-root.vue'
5
4
  import TelaTooltipTrigger from './tooltip-trigger.vue'
6
- import TelaTooltipContent from './tooltip-content.vue'
7
- import { computed } from 'vue'
5
+ import TelaTooltipBody from './tooltip-body.vue'
6
+ import type { TooltipBodyProps } from './tooltip-body.vue'
8
7
 
9
- export type TooltipProps = {
10
- content?: string
11
- align?: 'start' | 'center' | 'end'
12
- side?: 'top' | 'right' | 'bottom' | 'left'
13
- contentClass?: string
8
+ export type TooltipProps = TooltipBodyProps & {
14
9
  disabled?: boolean
15
10
  delayDuration?: number
16
11
  open?: boolean
17
- alignOffset?: number
18
- arrowOffset?: number
19
- variant?: 'single' | 'multiline'
20
- title?: string
21
- description?: string
22
12
  triggerClass?: string
23
13
  }
24
14
 
@@ -40,13 +30,6 @@ const tooltipRootProps = computed(() => {
40
30
 
41
31
  return rootProps
42
32
  })
43
-
44
- const variantClasses = computed(() => {
45
- if (props.variant === 'multiline') {
46
- return 'w-full min-w-255px max-w-320px pt-12px pb-16px px-16px gap-12px flex flex-col text-left max-h-96 overflow-y-auto'
47
- }
48
- return ''
49
- })
50
33
  </script>
51
34
 
52
35
  <template>
@@ -55,36 +38,22 @@ const variantClasses = computed(() => {
55
38
  <TelaTooltipTrigger :class="triggerClass" :tabindex="-1">
56
39
  <slot />
57
40
  </TelaTooltipTrigger>
58
- <TelaTooltipContent
41
+ <TelaTooltipBody
42
+ :content="content"
59
43
  :align="align"
60
44
  :side="side"
61
- :align-offset="props.alignOffset"
62
- :class="cn(contentClass, variantClasses)"
63
- @click="$emit('clickContent', $event)"
45
+ :content-class="contentClass"
46
+ :align-offset="alignOffset"
47
+ :arrow-offset="arrowOffset"
48
+ :variant="variant"
49
+ :title="title"
50
+ :description="description"
51
+ @click-content="$emit('clickContent', $event)"
64
52
  >
65
- <slot name="content">
66
- <div v-if="variant === 'multiline' && (title || description)">
67
- <div
68
- v-if="title"
69
- class="text-white font-inter text-14px leading-16px not-italic font-580 tracking--0.14px"
70
- >
71
- {{ title }}
72
- </div>
73
- <div
74
- v-if="description"
75
- class="body-12-regular text-gray-200 mt-[4px] break-words whitespace-pre-line w-full"
76
- >
77
- {{ description }}
78
- </div>
79
- </div>
80
- <template v-else>
81
- {{ content }}
82
- </template>
83
- </slot>
84
- <TooltipArrow
85
- :style="props.arrowOffset ? { transform: `translateX(${props.arrowOffset}px)` } : {}"
86
- />
87
- </TelaTooltipContent>
53
+ <template v-if="$slots.content" #default>
54
+ <slot name="content" />
55
+ </template>
56
+ </TelaTooltipBody>
88
57
  </TelaTooltipRoot>
89
58
  </TelaTooltipProvider>
90
59
  </template>
package/components/tela/tooltip-group/tooltip-group-trigger.vue CHANGED
@@ -1,23 +1,13 @@
1
1
  <script setup lang="ts">
2
- import { TooltipArrow } from 'reka-ui'
3
2
  import TelaTooltipRoot from '../tooltip/tooltip-root.vue'
4
3
  import TelaTooltipTrigger from '../tooltip/tooltip-trigger.vue'
5
- import TelaTooltipContent from '../tooltip/tooltip-content.vue'
6
- import { computed } from 'vue'
4
+ import TelaTooltipBody from '../tooltip/tooltip-body.vue'
5
+ import type { TooltipBodyProps } from '../tooltip/tooltip-body.vue'
7
6
 
8
- export type TooltipProps = {
9
- content?: string
10
- align?: 'start' | 'center' | 'end'
11
- side?: 'top' | 'right' | 'bottom' | 'left'
12
- contentClass?: string
7
+ export type TooltipProps = TooltipBodyProps & {
13
8
  disabled?: boolean
14
9
  delayDuration?: number
15
10
  open?: boolean
16
- alignOffset?: number
17
- arrowOffset?: number
18
- variant?: 'single' | 'multiline'
19
- title?: string
20
- description?: string
21
11
  disableClosingTrigger?: boolean
22
12
  triggerClass?: string
23
13
  }
@@ -44,13 +34,6 @@ const tooltipRootProps = computed(() => {
44
34
 
45
35
  return rootProps
46
36
  })
47
-
48
- const variantClasses = computed(() => {
49
- if (props.variant === 'multiline') {
50
- return 'max-w-280px text-left'
51
- }
52
- return ''
53
- })
54
37
  </script>
55
38
 
56
39
  <template>
@@ -58,40 +41,21 @@ const variantClasses = computed(() => {
58
41
  <TelaTooltipTrigger :class="triggerClass">
59
42
  <slot />
60
43
  </TelaTooltipTrigger>
61
- <TelaTooltipContent
44
+ <TelaTooltipBody
45
+ :content="content"
62
46
  :align="align"
63
47
  :side="side"
64
- :align-offset="props.alignOffset"
65
- :class="cn(contentClass, variantClasses)"
66
- @click="$emit('clickContent', $event)"
48
+ :content-class="contentClass"
49
+ :align-offset="alignOffset"
50
+ :arrow-offset="arrowOffset"
51
+ :variant="variant"
52
+ :title="title"
53
+ :description="description"
54
+ @click-content="$emit('clickContent', $event)"
67
55
  >
68
- <slot name="content">
69
- <div v-if="variant === 'multiline' && (title || description)">
70
- <div v-if="title" class="body-14-semibold text-white">
71
- {{ title }}
72
- </div>
73
- <div
74
- v-if="description"
75
- class="text-[#DFE3E7] mt-[2px]"
76
- :style="{
77
- fontFamily: 'Inter, sans-serif',
78
- fontWeight: 400,
79
- fontStyle: 'normal',
80
- fontSize: '12px',
81
- lineHeight: '16px',
82
- letterSpacing: '0%',
83
- }"
84
- >
85
- {{ description }}
86
- </div>
87
- </div>
88
- <template v-else>
89
- {{ content }}
90
- </template>
91
- </slot>
92
- <TooltipArrow
93
- :style="props.arrowOffset ? { transform: `translateX(${props.arrowOffset}px)` } : {}"
94
- />
95
- </TelaTooltipContent>
56
+ <template v-if="$slots.content" #default>
57
+ <slot name="content" />
58
+ </template>
59
+ </TelaTooltipBody>
96
60
  </TelaTooltipRoot>
97
61
  </template>
package/components/tela/tooltip-group/tooltip-group.mdx CHANGED
@@ -47,13 +47,13 @@ A tooltip group component that manages tooltips for multiple child elements. Pro
47
47
  <TelaTooltipGroup>
48
48
  <div class="flex gap-1">
49
49
  <TelaTooltipGroupTrigger content="Cut">
50
- <TelaIconButton icon="i-ph-scissors" />
50
+ <TelaIconButton icon="i-ph-scissors" color="secondary" outline />
51
51
  </TelaTooltipGroupTrigger>
52
52
  <TelaTooltipGroupTrigger content="Copy">
53
- <TelaIconButton icon="i-ph-copy" />
53
+ <TelaIconButton icon="i-ph-copy" color="secondary" outline />
54
54
  </TelaTooltipGroupTrigger>
55
55
  <TelaTooltipGroupTrigger content="Paste">
56
- <TelaIconButton icon="i-ph-clipboard" />
56
+ <TelaIconButton icon="i-ph-clipboard" color="secondary" outline />
57
57
  </TelaTooltipGroupTrigger>
58
58
  </div>
59
59
  </TelaTooltipGroup>
@@ -65,13 +65,13 @@ A tooltip group component that manages tooltips for multiple child elements. Pro
65
65
  <TelaTooltipGroup>
66
66
  <div class="flex gap-1">
67
67
  <TelaTooltipGroupTrigger content="Bold">
68
- <TelaIconButton icon="i-ph-text-b" />
68
+ <TelaIconButton icon="i-ph-text-b" color="secondary" outline />
69
69
  </TelaTooltipGroupTrigger>
70
70
  <TelaTooltipGroupTrigger content="Italic">
71
- <TelaIconButton icon="i-ph-text-italic" />
71
+ <TelaIconButton icon="i-ph-text-italic" color="secondary" outline />
72
72
  </TelaTooltipGroupTrigger>
73
73
  <TelaTooltipGroupTrigger content="Heading 1">
74
- <TelaIconButton icon="i-ph-text-h-one" />
74
+ <TelaIconButton icon="i-ph-text-h-one" color="secondary" outline />
75
75
  </TelaTooltipGroupTrigger>
76
76
  </div>
77
77
  </TelaTooltipGroup>
@@ -83,13 +83,13 @@ A tooltip group component that manages tooltips for multiple child elements. Pro
83
83
  <TelaTooltipGroup :delay-duration="500">
84
84
  <div class="flex gap-1">
85
85
  <TelaTooltipGroupTrigger content="Save">
86
- <TelaIconButton icon="i-ph-floppy-disk" />
86
+ <TelaIconButton icon="i-ph-floppy-disk" color="secondary" outline />
87
87
  </TelaTooltipGroupTrigger>
88
88
  <TelaTooltipGroupTrigger content="Undo">
89
- <TelaIconButton icon="i-ph-arrow-counter-clockwise" />
89
+ <TelaIconButton icon="i-ph-arrow-counter-clockwise" color="secondary" outline />
90
90
  </TelaTooltipGroupTrigger>
91
91
  <TelaTooltipGroupTrigger content="Redo">
92
- <TelaIconButton icon="i-ph-arrow-clockwise" />
92
+ <TelaIconButton icon="i-ph-arrow-clockwise" color="secondary" outline />
93
93
  </TelaTooltipGroupTrigger>
94
94
  </div>
95
95
  </TelaTooltipGroup>
@@ -105,13 +105,13 @@ A tooltip group component that manages tooltips for multiple child elements. Pro
105
105
  <div class="flex gap-1">
106
106
  <!-- Tooltips show quickly when moving between buttons -->
107
107
  <TelaTooltipGroupTrigger content="Play">
108
- <TelaIconButton icon="i-ph-play" />
108
+ <TelaIconButton icon="i-ph-play" color="secondary" outline />
109
109
  </TelaTooltipGroupTrigger>
110
110
  <TelaTooltipGroupTrigger content="Pause">
111
- <TelaIconButton icon="i-ph-pause" />
111
+ <TelaIconButton icon="i-ph-pause" color="secondary" outline />
112
112
  </TelaTooltipGroupTrigger>
113
113
  <TelaTooltipGroupTrigger content="Stop">
114
- <TelaIconButton icon="i-ph-stop" />
114
+ <TelaIconButton icon="i-ph-stop" color="secondary" outline />
115
115
  </TelaTooltipGroupTrigger>
116
116
  </div>
117
117
  </TelaTooltipGroup>
@@ -127,14 +127,14 @@ A tooltip group component that manages tooltips for multiple child elements. Pro
127
127
  title="Export Document"
128
128
  description="Save your document in PDF format"
129
129
  >
130
- <TelaIconButton icon="i-ph-file-pdf" />
130
+ <TelaIconButton icon="i-ph-file-pdf" color="secondary" outline />
131
131
  </TelaTooltipGroupTrigger>
132
132
  <TelaTooltipGroupTrigger
133
133
  variant="multiline"
134
134
  title="Share Document"
135
135
  description="Collaborate with your team"
136
136
  >
137
- <TelaIconButton icon="i-ph-share-network" />
137
+ <TelaIconButton icon="i-ph-share-network" color="secondary" outline />
138
138
  </TelaTooltipGroupTrigger>
139
139
  </div>
140
140
  </TelaTooltipGroup>
@@ -146,16 +146,16 @@ A tooltip group component that manages tooltips for multiple child elements. Pro
146
146
  <TelaTooltipGroup>
147
147
  <div class="flex gap-1">
148
148
  <TelaTooltipGroupTrigger content="Top" side="top">
149
- <TelaIconButton icon="i-ph-arrow-up" />
149
+ <TelaIconButton icon="i-ph-arrow-up" color="secondary" outline />
150
150
  </TelaTooltipGroupTrigger>
151
151
  <TelaTooltipGroupTrigger content="Right" side="right">
152
- <TelaIconButton icon="i-ph-arrow-right" />
152
+ <TelaIconButton icon="i-ph-arrow-right" color="secondary" outline />
153
153
  </TelaTooltipGroupTrigger>
154
154
  <TelaTooltipGroupTrigger content="Bottom" side="bottom">
155
- <TelaIconButton icon="i-ph-arrow-down" />
155
+ <TelaIconButton icon="i-ph-arrow-down" color="secondary" outline />
156
156
  </TelaTooltipGroupTrigger>
157
157
  <TelaTooltipGroupTrigger content="Left" side="left">
158
- <TelaIconButton icon="i-ph-arrow-left" />
158
+ <TelaIconButton icon="i-ph-arrow-left" color="secondary" outline />
159
159
  </TelaTooltipGroupTrigger>
160
160
  </div>
161
161
  </TelaTooltipGroup>
@@ -168,7 +168,7 @@ A tooltip group component that manages tooltips for multiple child elements. Pro
168
168
  <div class="flex gap-1">
169
169
  <!-- Tooltips won't show -->
170
170
  <TelaTooltipGroupTrigger content="Won't show">
171
- <TelaIconButton icon="i-ph-info" />
171
+ <TelaIconButton icon="i-ph-info" color="secondary" outline />
172
172
  </TelaTooltipGroupTrigger>
173
173
  </div>
174
174
  </TelaTooltipGroup>
@@ -178,7 +178,7 @@ A tooltip group component that manages tooltips for multiple child elements. Pro
178
178
  <TelaTooltipGroup>
179
179
  <div class="flex gap-1">
180
180
  <TelaTooltipGroupTrigger>
181
- <TelaIconButton icon="i-ph-star" />
181
+ <TelaIconButton icon="i-ph-star" color="secondary" outline />
182
182
  <template #content>
183
183
  <div class="flex items-center gap-1">
184
184
  <span>⭐</span>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@meistrari/tela-build",
3
- "version": "1.69.0",
3
+ "version": "1.70.0",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "app.config.ts",