@weni/unnnic-system 3.14.0-alpha-teleports.0 → 3.15.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/CHANGELOG.md +11 -0
- package/README.md +1 -9
- package/dist/{es-0d53b5b2.mjs → es-b51fb49d.mjs} +1 -1
- package/dist/{index-d7070de8.mjs → index-88ec0352.mjs} +26529 -29321
- package/dist/index.d.ts +1485 -4826
- package/dist/{pt-br-bf4e1f97.mjs → pt-br-cd9f0dbc.mjs} +1 -1
- package/dist/style.css +1 -1
- package/dist/unnnic.mjs +204 -232
- package/dist/unnnic.umd.js +46 -50
- package/package.json +2 -3
- package/src/assets/scss/tailwind.scss +0 -8
- package/src/components/Alert/__tests__/__snapshots__/Alert.spec.js.snap +1 -1
- package/src/components/ChartFunnel/DefaultFunnel/ChartDefaultFunnelBase.vue +1 -2
- package/src/components/ChartFunnel/SvgFunnel/ChartFunnelTwoRows.vue +60 -61
- package/src/components/CheckboxGroup/CheckboxGroup.vue +7 -5
- package/src/components/Chip/Chip.vue +1 -1
- package/src/components/DatePicker/DatePicker.vue +1 -10
- package/src/components/Drawer/Drawer.vue +270 -180
- package/src/components/Drawer/__tests__/Drawer.spec.js +43 -32
- package/src/components/Drawer/__tests__/__snapshots__/Drawer.spec.js.snap +19 -18
- package/src/components/FormElement/FormElement.vue +96 -87
- package/src/components/InputDatePicker/InputDatePicker.vue +73 -68
- package/src/components/InputDatePicker/__test__/InputDatePicker.spec.js +24 -31
- package/src/components/ModalDialog/ModalDialog.vue +154 -63
- package/src/components/ModalDialog/__tests__/ModalDialog.spec.js +210 -30
- package/src/components/ModalDialog/__tests__/__snapshots__/ModalDialog.spec.js.snap +22 -1
- package/src/components/Radio/Radio.vue +12 -6
- package/src/components/Radio/__test__/Radio.spec.js +3 -1
- package/src/components/RadioGroup/RadioGroup.vue +18 -10
- package/src/components/Select/__tests__/Select.spec.js +74 -0
- package/src/components/Select/__tests__/SelectItem.spec.js +35 -15
- package/src/components/Select/__tests__/__snapshots__/Select.spec.js.snap +18 -0
- package/src/components/Select/index.vue +131 -22
- package/src/components/Switch/Switch.vue +10 -3
- package/src/components/Tab/__test__/__snapshots__/Tab.spec.js.snap +1 -3
- package/src/components/TemplatePreview/TemplatePreview.vue +28 -25
- package/src/components/TemplatePreview/TemplatePreviewModal.vue +10 -10
- package/src/components/TemplatePreview/types.d.ts +3 -3
- package/src/components/Toast/Toast.vue +1 -4
- package/src/components/Toast/ToastManager.ts +1 -4
- package/src/components/Toast/__tests__/ToastManager.spec.js +6 -10
- package/src/components/ToolTip/ToolTip.vue +177 -25
- package/src/components/ToolTip/__tests__/ToolTip.spec.js +61 -339
- package/src/components/index.ts +0 -56
- package/src/components/ui/popover/PopoverContent.vue +4 -7
- package/src/components/ui/popover/PopoverTrigger.vue +1 -5
- package/src/index.ts +2 -9
- package/src/stories/Drawer.stories.js +1 -1
- package/src/stories/ModalDialog.mdx +0 -3
- package/src/stories/ModalDialog.stories.js +1 -96
- package/src/stories/Select.stories.js +86 -0
- package/src/stories/TemplatePreview.stories.js +27 -27
- package/src/stories/TemplatePreviewModal.stories.js +31 -31
- package/src/components/ui/dialog/Dialog.vue +0 -19
- package/src/components/ui/dialog/DialogClose.vue +0 -29
- package/src/components/ui/dialog/DialogContent.vue +0 -140
- package/src/components/ui/dialog/DialogFooter.vue +0 -50
- package/src/components/ui/dialog/DialogHeader.vue +0 -83
- package/src/components/ui/dialog/DialogTitle.vue +0 -38
- package/src/components/ui/dialog/DialogTrigger.vue +0 -16
- package/src/components/ui/dialog/index.ts +0 -7
- package/src/components/ui/drawer/Drawer.vue +0 -27
- package/src/components/ui/drawer/DrawerClose.vue +0 -31
- package/src/components/ui/drawer/DrawerContent.vue +0 -113
- package/src/components/ui/drawer/DrawerDescription.vue +0 -40
- package/src/components/ui/drawer/DrawerFooter.vue +0 -38
- package/src/components/ui/drawer/DrawerHeader.vue +0 -57
- package/src/components/ui/drawer/DrawerOverlay.vue +0 -33
- package/src/components/ui/drawer/DrawerTitle.vue +0 -37
- package/src/components/ui/drawer/DrawerTrigger.vue +0 -31
- package/src/components/ui/drawer/index.ts +0 -10
- package/src/components/ui/tooltip/Tooltip.vue +0 -21
- package/src/components/ui/tooltip/TooltipContent.vue +0 -77
- package/src/components/ui/tooltip/TooltipTrigger.vue +0 -24
- package/src/components/ui/tooltip/index.ts +0 -3
- package/src/lib/__tests__/teleport-target.spec.ts +0 -73
- package/src/lib/layer-manager.ts +0 -64
- package/src/lib/teleport-target.ts +0 -46
- package/src/stories/Dialog.stories.js +0 -832
- package/src/stories/DrawerNext.stories.js +0 -611
- package/src/stories/LayerManager.docs.mdx +0 -40
- package/src/stories/LayerManager.stories.js +0 -407
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import type { TooltipTriggerProps } from 'reka-ui';
|
|
3
|
-
import { TooltipTrigger } from 'reka-ui';
|
|
4
|
-
|
|
5
|
-
const props = defineProps<TooltipTriggerProps>();
|
|
6
|
-
</script>
|
|
7
|
-
|
|
8
|
-
<template>
|
|
9
|
-
<TooltipTrigger
|
|
10
|
-
v-bind="props"
|
|
11
|
-
as="div"
|
|
12
|
-
class="unnnic-tooltip-trigger"
|
|
13
|
-
>
|
|
14
|
-
<slot />
|
|
15
|
-
</TooltipTrigger>
|
|
16
|
-
</template>
|
|
17
|
-
|
|
18
|
-
<style lang="scss" scoped>
|
|
19
|
-
.unnnic-tooltip-trigger {
|
|
20
|
-
position: relative;
|
|
21
|
-
display: inline-block;
|
|
22
|
-
overflow-wrap: break-word;
|
|
23
|
-
}
|
|
24
|
-
</style>
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { describe, it, expect, beforeEach } from 'vitest';
|
|
2
|
-
import { ref } from 'vue';
|
|
3
|
-
import {
|
|
4
|
-
getTeleportContainer,
|
|
5
|
-
getTeleportTarget,
|
|
6
|
-
setTeleportTarget,
|
|
7
|
-
useTeleportTarget,
|
|
8
|
-
} from '@/lib/teleport-target';
|
|
9
|
-
|
|
10
|
-
describe('teleport-target helpers', () => {
|
|
11
|
-
beforeEach(() => {
|
|
12
|
-
setTeleportTarget(null);
|
|
13
|
-
document.body.innerHTML = '';
|
|
14
|
-
});
|
|
15
|
-
|
|
16
|
-
it('stores and returns the raw teleport target', () => {
|
|
17
|
-
expect(getTeleportTarget()).toBeUndefined();
|
|
18
|
-
|
|
19
|
-
setTeleportTarget('#micro');
|
|
20
|
-
expect(getTeleportTarget()).toBe('#micro');
|
|
21
|
-
|
|
22
|
-
const element = document.createElement('section');
|
|
23
|
-
setTeleportTarget(element);
|
|
24
|
-
expect(getTeleportTarget()).toBe(element);
|
|
25
|
-
});
|
|
26
|
-
|
|
27
|
-
it('keeps the composable value in sync with global updates', () => {
|
|
28
|
-
const targetRef = useTeleportTarget();
|
|
29
|
-
expect(targetRef.value).toBeUndefined();
|
|
30
|
-
|
|
31
|
-
setTeleportTarget('#first');
|
|
32
|
-
expect(targetRef.value).toBe('#first');
|
|
33
|
-
|
|
34
|
-
setTeleportTarget('#second');
|
|
35
|
-
expect(targetRef.value).toBe('#second');
|
|
36
|
-
});
|
|
37
|
-
|
|
38
|
-
it('prefers local overrides over the shared teleport target', () => {
|
|
39
|
-
setTeleportTarget('#global');
|
|
40
|
-
|
|
41
|
-
const override = ref('#local-1');
|
|
42
|
-
const targetRef = useTeleportTarget(override);
|
|
43
|
-
expect(targetRef.value).toBe('#local-1');
|
|
44
|
-
|
|
45
|
-
override.value = '#local-2';
|
|
46
|
-
expect(targetRef.value).toBe('#local-2');
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
it('resolves DOM elements for selector targets', () => {
|
|
50
|
-
const host = document.createElement('div');
|
|
51
|
-
host.id = 'micro-root';
|
|
52
|
-
document.body.appendChild(host);
|
|
53
|
-
|
|
54
|
-
setTeleportTarget('#micro-root');
|
|
55
|
-
expect(getTeleportContainer()).toBe(host);
|
|
56
|
-
});
|
|
57
|
-
|
|
58
|
-
it('falls back to document.body when selector is missing or unset', () => {
|
|
59
|
-
setTeleportTarget('#missing');
|
|
60
|
-
expect(getTeleportContainer()).toBe(document.body);
|
|
61
|
-
|
|
62
|
-
setTeleportTarget(null);
|
|
63
|
-
expect(getTeleportContainer()).toBe(document.body);
|
|
64
|
-
});
|
|
65
|
-
|
|
66
|
-
it('returns the element itself when the target is an HTMLElement', () => {
|
|
67
|
-
const host = document.createElement('section');
|
|
68
|
-
document.body.appendChild(host);
|
|
69
|
-
|
|
70
|
-
setTeleportTarget(host);
|
|
71
|
-
expect(getTeleportContainer()).toBe(host);
|
|
72
|
-
});
|
|
73
|
-
});
|
package/src/lib/layer-manager.ts
DELETED
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import { onBeforeUnmount, onMounted, ref, type Ref } from 'vue';
|
|
2
|
-
|
|
3
|
-
const BASE_LAYER_Z_INDEX = 1000;
|
|
4
|
-
const DEFAULT_STEP = 5;
|
|
5
|
-
|
|
6
|
-
const layerStack: number[] = [];
|
|
7
|
-
const layerHandles = new Map<symbol, number>();
|
|
8
|
-
|
|
9
|
-
interface LayerHandle {
|
|
10
|
-
id: symbol;
|
|
11
|
-
value: number;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
function pushLayer(): LayerHandle {
|
|
15
|
-
const id = Symbol('layer');
|
|
16
|
-
const lastValue = layerStack.length
|
|
17
|
-
? layerStack[layerStack.length - 1]
|
|
18
|
-
: BASE_LAYER_Z_INDEX;
|
|
19
|
-
const value = lastValue + DEFAULT_STEP;
|
|
20
|
-
layerStack.push(value);
|
|
21
|
-
layerHandles.set(id, value);
|
|
22
|
-
return { id, value };
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
function popLayer(id: symbol) {
|
|
26
|
-
const value = layerHandles.get(id);
|
|
27
|
-
if (value === undefined) {
|
|
28
|
-
return;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
layerHandles.delete(id);
|
|
32
|
-
const index = layerStack.indexOf(value);
|
|
33
|
-
if (index !== -1) {
|
|
34
|
-
layerStack.splice(index, 1);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
export interface LayerZIndexOptions {
|
|
39
|
-
offset?: number;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
export function useLayerZIndex(options?: LayerZIndexOptions): Ref<number> {
|
|
43
|
-
const offset = options?.offset ?? 0;
|
|
44
|
-
const zIndex = ref(BASE_LAYER_Z_INDEX + offset);
|
|
45
|
-
|
|
46
|
-
let allocationId: symbol | null = null;
|
|
47
|
-
|
|
48
|
-
const allocate = () => {
|
|
49
|
-
const handle = pushLayer();
|
|
50
|
-
allocationId = handle.id;
|
|
51
|
-
zIndex.value = handle.value + offset;
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
onMounted(allocate);
|
|
55
|
-
|
|
56
|
-
onBeforeUnmount(() => {
|
|
57
|
-
if (allocationId) {
|
|
58
|
-
popLayer(allocationId);
|
|
59
|
-
allocationId = null;
|
|
60
|
-
}
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
return zIndex;
|
|
64
|
-
}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { computed, shallowRef, toValue, type MaybeRefOrGetter } from 'vue';
|
|
2
|
-
|
|
3
|
-
export type TeleportTarget = string | HTMLElement;
|
|
4
|
-
|
|
5
|
-
const teleportTargetRef = shallowRef<TeleportTarget | null>(null);
|
|
6
|
-
|
|
7
|
-
export function setTeleportTarget(target?: TeleportTarget | null) {
|
|
8
|
-
teleportTargetRef.value = target ?? null;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export function getTeleportTarget() {
|
|
12
|
-
return teleportTargetRef.value ?? undefined;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
export function useTeleportTarget(
|
|
16
|
-
override?: MaybeRefOrGetter<TeleportTarget | null | undefined>,
|
|
17
|
-
) {
|
|
18
|
-
// Composable version, ideal for `<Teleport :to="...">` bindings because the
|
|
19
|
-
// returned ref stays reactive to both global and local overrides.
|
|
20
|
-
return computed(() => {
|
|
21
|
-
const localTarget = override ? toValue(override) : undefined;
|
|
22
|
-
return localTarget ?? teleportTargetRef.value ?? undefined;
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
function resolveTargetElement(target?: TeleportTarget | null) {
|
|
27
|
-
if (typeof document === 'undefined') {
|
|
28
|
-
return null;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
if (!target) {
|
|
32
|
-
return document.body;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
if (typeof target === 'string') {
|
|
36
|
-
return document.querySelector(target) ?? document.body;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
return target;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
export function getTeleportContainer() {
|
|
43
|
-
// Immediate DOM resolver for imperative consumers (e.g., Toast manager)
|
|
44
|
-
// that simply need the concrete HTMLElement to append to right away.
|
|
45
|
-
return resolveTargetElement(teleportTargetRef.value);
|
|
46
|
-
}
|