@tb-dev/vue-components 1.0.1 → 1.0.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.
@@ -1,5 +1,5 @@
1
- import { PopoverProps } from './types';
2
1
  import { VNode } from 'vue';
2
+ import { PopoverProps } from './types';
3
3
  type __VLS_Props = PopoverProps;
4
4
  declare function open(): void;
5
5
  declare function close(): void;
@@ -15,149 +15,7 @@ declare function __VLS_template(): {
15
15
  default: () => VNode;
16
16
  trigger: () => VNode;
17
17
  };
18
- refs: {
19
- contentEl: ({
20
- $: import('vue').ComponentInternalInstance;
21
- $data: {};
22
- $props: {
23
- readonly forceMount?: boolean | undefined;
24
- readonly side?: ("top" | "right" | "bottom" | "left") | undefined;
25
- readonly sideOffset?: number | undefined;
26
- readonly align?: ("end" | "start" | "center") | undefined;
27
- readonly alignOffset?: number | undefined;
28
- readonly avoidCollisions?: boolean | undefined;
29
- readonly collisionBoundary?: (Element | null | Array<Element | null>) | undefined;
30
- readonly collisionPadding?: (number | Partial<Record<"top" | "right" | "bottom" | "left", number>>) | undefined;
31
- readonly arrowPadding?: number | undefined;
32
- readonly sticky?: "partial" | "always" | undefined;
33
- readonly hideWhenDetached?: boolean | undefined;
34
- readonly positionStrategy?: "absolute" | "fixed" | undefined;
35
- readonly updatePositionStrategy?: "optimized" | "always" | undefined;
36
- readonly disableUpdateOnLayoutShift?: boolean | undefined;
37
- readonly prioritizePosition?: boolean | undefined;
38
- readonly reference?: import('reka-ui').ReferenceElement | undefined;
39
- readonly asChild?: boolean | undefined;
40
- readonly as?: (import('reka-ui').AsTag | import('vue').Component) | undefined;
41
- readonly disableOutsidePointerEvents?: boolean | undefined;
42
- readonly class?: import('vue').HTMLAttributes["class"];
43
- readonly onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
44
- readonly onPointerDownOutside?: ((event: CustomEvent<{
45
- originalEvent: PointerEvent;
46
- }>) => any) | undefined;
47
- readonly onFocusOutside?: ((event: CustomEvent<{
48
- originalEvent: FocusEvent;
49
- }>) => any) | undefined;
50
- readonly onInteractOutside?: ((event: CustomEvent<{
51
- originalEvent: PointerEvent;
52
- }> | CustomEvent<{
53
- originalEvent: FocusEvent;
54
- }>) => any) | undefined;
55
- readonly onOpenAutoFocus?: ((event: Event) => any) | undefined;
56
- readonly onCloseAutoFocus?: ((event: Event) => any) | undefined;
57
- } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
58
- $attrs: {
59
- [x: string]: unknown;
60
- };
61
- $refs: {
62
- [x: string]: unknown;
63
- };
64
- $slots: Readonly<{
65
- [name: string]: import('vue').Slot<any> | undefined;
66
- }>;
67
- $root: import('vue').ComponentPublicInstance | null;
68
- $parent: import('vue').ComponentPublicInstance | null;
69
- $host: Element | null;
70
- $emit: ((event: "escapeKeyDown", event: KeyboardEvent) => void) & ((event: "pointerDownOutside", event: CustomEvent<{
71
- originalEvent: PointerEvent;
72
- }>) => void) & ((event: "focusOutside", event: CustomEvent<{
73
- originalEvent: FocusEvent;
74
- }>) => void) & ((event: "interactOutside", event: CustomEvent<{
75
- originalEvent: PointerEvent;
76
- }> | CustomEvent<{
77
- originalEvent: FocusEvent;
78
- }>) => void) & ((event: "openAutoFocus", event: Event) => void) & ((event: "closeAutoFocus", event: Event) => void);
79
- $el: any;
80
- $options: import('vue').ComponentOptionsBase<Readonly<import('reka-ui').PopoverContentProps & {
81
- class?: import('vue').HTMLAttributes["class"];
82
- }> & Readonly<{
83
- onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
84
- onPointerDownOutside?: ((event: CustomEvent<{
85
- originalEvent: PointerEvent;
86
- }>) => any) | undefined;
87
- onFocusOutside?: ((event: CustomEvent<{
88
- originalEvent: FocusEvent;
89
- }>) => any) | undefined;
90
- onInteractOutside?: ((event: CustomEvent<{
91
- originalEvent: PointerEvent;
92
- }> | CustomEvent<{
93
- originalEvent: FocusEvent;
94
- }>) => any) | undefined;
95
- onOpenAutoFocus?: ((event: Event) => any) | undefined;
96
- onCloseAutoFocus?: ((event: Event) => any) | undefined;
97
- }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
98
- escapeKeyDown: (event: KeyboardEvent) => any;
99
- pointerDownOutside: (event: CustomEvent<{
100
- originalEvent: PointerEvent;
101
- }>) => any;
102
- focusOutside: (event: CustomEvent<{
103
- originalEvent: FocusEvent;
104
- }>) => any;
105
- interactOutside: (event: CustomEvent<{
106
- originalEvent: PointerEvent;
107
- }> | CustomEvent<{
108
- originalEvent: FocusEvent;
109
- }>) => any;
110
- openAutoFocus: (event: Event) => any;
111
- closeAutoFocus: (event: Event) => any;
112
- }, string, {
113
- sideOffset: number;
114
- align: "end" | "start" | "center";
115
- }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
116
- beforeCreate?: (() => void) | (() => void)[];
117
- created?: (() => void) | (() => void)[];
118
- beforeMount?: (() => void) | (() => void)[];
119
- mounted?: (() => void) | (() => void)[];
120
- beforeUpdate?: (() => void) | (() => void)[];
121
- updated?: (() => void) | (() => void)[];
122
- activated?: (() => void) | (() => void)[];
123
- deactivated?: (() => void) | (() => void)[];
124
- beforeDestroy?: (() => void) | (() => void)[];
125
- beforeUnmount?: (() => void) | (() => void)[];
126
- destroyed?: (() => void) | (() => void)[];
127
- unmounted?: (() => void) | (() => void)[];
128
- renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
129
- renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
130
- errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
131
- };
132
- $forceUpdate: () => void;
133
- $nextTick: typeof import('vue').nextTick;
134
- $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
135
- } & Readonly<{
136
- sideOffset: number;
137
- align: "end" | "start" | "center";
138
- }> & Omit<Readonly<import('reka-ui').PopoverContentProps & {
139
- class?: import('vue').HTMLAttributes["class"];
140
- }> & Readonly<{
141
- onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
142
- onPointerDownOutside?: ((event: CustomEvent<{
143
- originalEvent: PointerEvent;
144
- }>) => any) | undefined;
145
- onFocusOutside?: ((event: CustomEvent<{
146
- originalEvent: FocusEvent;
147
- }>) => any) | undefined;
148
- onInteractOutside?: ((event: CustomEvent<{
149
- originalEvent: PointerEvent;
150
- }> | CustomEvent<{
151
- originalEvent: FocusEvent;
152
- }>) => any) | undefined;
153
- onOpenAutoFocus?: ((event: Event) => any) | undefined;
154
- onCloseAutoFocus?: ((event: Event) => any) | undefined;
155
- }>, "sideOffset" | "align"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
156
- $slots: {
157
- default?(_: {}): any;
158
- };
159
- }) | null;
160
- };
18
+ refs: {};
161
19
  rootEl: any;
162
20
  };
163
21
  type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
@@ -168,149 +26,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
168
26
  "update:modelValue": (value: boolean) => any;
169
27
  }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
170
28
  "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
171
- }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
172
- contentEl: ({
173
- $: import('vue').ComponentInternalInstance;
174
- $data: {};
175
- $props: {
176
- readonly forceMount?: boolean | undefined;
177
- readonly side?: ("top" | "right" | "bottom" | "left") | undefined;
178
- readonly sideOffset?: number | undefined;
179
- readonly align?: ("end" | "start" | "center") | undefined;
180
- readonly alignOffset?: number | undefined;
181
- readonly avoidCollisions?: boolean | undefined;
182
- readonly collisionBoundary?: (Element | null | Array<Element | null>) | undefined;
183
- readonly collisionPadding?: (number | Partial<Record<"top" | "right" | "bottom" | "left", number>>) | undefined;
184
- readonly arrowPadding?: number | undefined;
185
- readonly sticky?: "partial" | "always" | undefined;
186
- readonly hideWhenDetached?: boolean | undefined;
187
- readonly positionStrategy?: "absolute" | "fixed" | undefined;
188
- readonly updatePositionStrategy?: "optimized" | "always" | undefined;
189
- readonly disableUpdateOnLayoutShift?: boolean | undefined;
190
- readonly prioritizePosition?: boolean | undefined;
191
- readonly reference?: import('reka-ui').ReferenceElement | undefined;
192
- readonly asChild?: boolean | undefined;
193
- readonly as?: (import('reka-ui').AsTag | import('vue').Component) | undefined;
194
- readonly disableOutsidePointerEvents?: boolean | undefined;
195
- readonly class?: import('vue').HTMLAttributes["class"];
196
- readonly onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
197
- readonly onPointerDownOutside?: ((event: CustomEvent<{
198
- originalEvent: PointerEvent;
199
- }>) => any) | undefined;
200
- readonly onFocusOutside?: ((event: CustomEvent<{
201
- originalEvent: FocusEvent;
202
- }>) => any) | undefined;
203
- readonly onInteractOutside?: ((event: CustomEvent<{
204
- originalEvent: PointerEvent;
205
- }> | CustomEvent<{
206
- originalEvent: FocusEvent;
207
- }>) => any) | undefined;
208
- readonly onOpenAutoFocus?: ((event: Event) => any) | undefined;
209
- readonly onCloseAutoFocus?: ((event: Event) => any) | undefined;
210
- } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
211
- $attrs: {
212
- [x: string]: unknown;
213
- };
214
- $refs: {
215
- [x: string]: unknown;
216
- };
217
- $slots: Readonly<{
218
- [name: string]: import('vue').Slot<any> | undefined;
219
- }>;
220
- $root: import('vue').ComponentPublicInstance | null;
221
- $parent: import('vue').ComponentPublicInstance | null;
222
- $host: Element | null;
223
- $emit: ((event: "escapeKeyDown", event: KeyboardEvent) => void) & ((event: "pointerDownOutside", event: CustomEvent<{
224
- originalEvent: PointerEvent;
225
- }>) => void) & ((event: "focusOutside", event: CustomEvent<{
226
- originalEvent: FocusEvent;
227
- }>) => void) & ((event: "interactOutside", event: CustomEvent<{
228
- originalEvent: PointerEvent;
229
- }> | CustomEvent<{
230
- originalEvent: FocusEvent;
231
- }>) => void) & ((event: "openAutoFocus", event: Event) => void) & ((event: "closeAutoFocus", event: Event) => void);
232
- $el: any;
233
- $options: import('vue').ComponentOptionsBase<Readonly<import('reka-ui').PopoverContentProps & {
234
- class?: import('vue').HTMLAttributes["class"];
235
- }> & Readonly<{
236
- onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
237
- onPointerDownOutside?: ((event: CustomEvent<{
238
- originalEvent: PointerEvent;
239
- }>) => any) | undefined;
240
- onFocusOutside?: ((event: CustomEvent<{
241
- originalEvent: FocusEvent;
242
- }>) => any) | undefined;
243
- onInteractOutside?: ((event: CustomEvent<{
244
- originalEvent: PointerEvent;
245
- }> | CustomEvent<{
246
- originalEvent: FocusEvent;
247
- }>) => any) | undefined;
248
- onOpenAutoFocus?: ((event: Event) => any) | undefined;
249
- onCloseAutoFocus?: ((event: Event) => any) | undefined;
250
- }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
251
- escapeKeyDown: (event: KeyboardEvent) => any;
252
- pointerDownOutside: (event: CustomEvent<{
253
- originalEvent: PointerEvent;
254
- }>) => any;
255
- focusOutside: (event: CustomEvent<{
256
- originalEvent: FocusEvent;
257
- }>) => any;
258
- interactOutside: (event: CustomEvent<{
259
- originalEvent: PointerEvent;
260
- }> | CustomEvent<{
261
- originalEvent: FocusEvent;
262
- }>) => any;
263
- openAutoFocus: (event: Event) => any;
264
- closeAutoFocus: (event: Event) => any;
265
- }, string, {
266
- sideOffset: number;
267
- align: "end" | "start" | "center";
268
- }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
269
- beforeCreate?: (() => void) | (() => void)[];
270
- created?: (() => void) | (() => void)[];
271
- beforeMount?: (() => void) | (() => void)[];
272
- mounted?: (() => void) | (() => void)[];
273
- beforeUpdate?: (() => void) | (() => void)[];
274
- updated?: (() => void) | (() => void)[];
275
- activated?: (() => void) | (() => void)[];
276
- deactivated?: (() => void) | (() => void)[];
277
- beforeDestroy?: (() => void) | (() => void)[];
278
- beforeUnmount?: (() => void) | (() => void)[];
279
- destroyed?: (() => void) | (() => void)[];
280
- unmounted?: (() => void) | (() => void)[];
281
- renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
282
- renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
283
- errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
284
- };
285
- $forceUpdate: () => void;
286
- $nextTick: typeof import('vue').nextTick;
287
- $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
288
- } & Readonly<{
289
- sideOffset: number;
290
- align: "end" | "start" | "center";
291
- }> & Omit<Readonly<import('reka-ui').PopoverContentProps & {
292
- class?: import('vue').HTMLAttributes["class"];
293
- }> & Readonly<{
294
- onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
295
- onPointerDownOutside?: ((event: CustomEvent<{
296
- originalEvent: PointerEvent;
297
- }>) => any) | undefined;
298
- onFocusOutside?: ((event: CustomEvent<{
299
- originalEvent: FocusEvent;
300
- }>) => any) | undefined;
301
- onInteractOutside?: ((event: CustomEvent<{
302
- originalEvent: PointerEvent;
303
- }> | CustomEvent<{
304
- originalEvent: FocusEvent;
305
- }>) => any) | undefined;
306
- onOpenAutoFocus?: ((event: Event) => any) | undefined;
307
- onCloseAutoFocus?: ((event: Event) => any) | undefined;
308
- }>, "sideOffset" | "align"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
309
- $slots: {
310
- default?(_: {}): any;
311
- };
312
- }) | null;
313
- }, any>;
29
+ }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
314
30
  declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
315
31
  export default _default;
316
32
  type __VLS_WithTemplateSlots<T, S> = T & {
package/dist/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot, createElementVNode, normalizeClass, createVNode, createElementBlock, createCommentVNode, computed, normalizeStyle, toDisplayString, resolveDynamicComponent, mergeModels, useModel, createTextVNode, withDirectives, isRef, vModelText, useTemplateRef, normalizeProps, guardReactiveProps, Fragment, ref, renderList, createSlots } from 'vue';
2
2
  import { useForwardPropsEmits, AccordionRoot, AccordionContent, useForwardProps, AccordionItem, AccordionHeader, AccordionTrigger, AlertDialogRoot, Primitive, AlertDialogAction, AlertDialogCancel, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger, AvatarRoot, AvatarFallback, AvatarImage, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaRoot, ScrollAreaViewport, ScrollAreaCorner, CheckboxRoot, CheckboxIndicator, ComboboxRoot, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxPortal, ComboboxContent, ComboboxSeparator, ComboboxViewport, ContextMenuRoot, ContextMenuCheckboxItem, ContextMenuItemIndicator, ContextMenuPortal, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DialogRoot, DialogClose, DialogOverlay, DialogPortal, DialogContent, DialogDescription, DialogTitle, DialogTrigger, DropdownMenuRoot, DropdownMenuCheckboxItem, DropdownMenuItemIndicator, DropdownMenuPortal, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, HoverCardRoot, HoverCardPortal, HoverCardContent, HoverCardTrigger, NumberFieldRoot, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, Label, MenubarRoot, MenubarCheckboxItem, MenubarItemIndicator, MenubarPortal, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, PaginationRoot, PaginationList, PaginationEllipsis, PaginationFirst, PaginationListItem, PaginationLast, PaginationNext, PaginationPrev, PopoverRoot, PopoverPortal, PopoverContent, PopoverTrigger, ProgressRoot, ProgressIndicator, RadioGroupRoot, RadioGroupItem, RadioGroupIndicator, SplitterResizeHandle, SplitterPanel, SplitterGroup, SelectRoot, SelectPortal, SelectContent, SelectViewport, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectIcon, SelectValue, Separator, createContext, TooltipRoot, TooltipPortal, TooltipContent, TooltipArrow, TooltipProvider, TooltipTrigger, SliderRoot, SliderTrack, SliderRange, SliderThumb, SwitchRoot, SwitchThumb, TabsRoot, TabsContent, TabsList, TabsTrigger, TagsInputRoot, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText, Toggle } from 'reka-ui';
3
3
  export { ComboboxCancel, ComboboxTrigger, DropdownMenuPortal, PaginationList, PaginationListItem } from 'reka-ui';
4
- import { reactiveOmit, useVModel, onClickOutside, useMediaQuery } from '@vueuse/core';
4
+ import { reactiveOmit, useVModel, useMediaQuery } from '@vueuse/core';
5
5
  import { twMerge } from 'tailwind-merge';
6
6
  import { clsx } from 'clsx';
7
7
  import { ChevronDown, Check, SearchIcon, Circle, ChevronRight, X, Minus, Plus, LoaderCircle, MoreHorizontal, ChevronLeftIcon, ChevronRightIcon, CircleIcon, GripVertical, ChevronUp, PanelLeft } from 'lucide-vue-next';
@@ -4049,16 +4049,15 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
4049
4049
  setup(__props, { expose: __expose }) {
4050
4050
  const props = __props;
4051
4051
  const isOpen = useModel(__props, "modelValue");
4052
- const component = useTemplateRef("contentEl");
4053
- onClickOutside(component, () => {
4054
- if (!props.keepOpen) close();
4055
- });
4056
4052
  function open() {
4057
4053
  isOpen.value = true;
4058
4054
  }
4059
4055
  function close() {
4060
4056
  isOpen.value = false;
4061
4057
  }
4058
+ function onPointerDownOutside() {
4059
+ if (!props.keepOpen) close();
4060
+ }
4062
4061
  __expose({ close, open });
4063
4062
  return (_ctx, _cache) => {
4064
4063
  return openBlock(), createBlock(unref(_sfc_main$1n), {
@@ -4073,8 +4072,8 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
4073
4072
  _: 3
4074
4073
  }),
4075
4074
  createVNode(unref(_sfc_main$1m), {
4076
- ref: "contentEl",
4077
- class: normalizeClass(_ctx.contentClass)
4075
+ class: normalizeClass(_ctx.contentClass),
4076
+ onPointerDownOutside
4078
4077
  }, {
4079
4078
  default: withCtx(() => [
4080
4079
  renderSlot(_ctx.$slots, "default")
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tb-dev/vue-components",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "Vue components",
5
5
  "license": "MIT",
6
6
  "type": "module",