New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

vaul-vue

Package Overview
Dependencies
Maintainers
2
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vaul-vue - npm Package Compare versions

Comparing version 0.0.3 to 0.1.0

README.md

20

dist/context.d.ts
import type { ComponentPublicInstance, Ref } from 'vue';
export interface DrawerRootContext {
isOpen: Ref<boolean>;
modal: Ref<boolean>;
hasBeenOpened: Ref<boolean>;

@@ -9,6 +10,7 @@ isVisible: Ref<boolean>;

isDragging: Ref<boolean>;
dragStartTime: Ref<Date>;
dragStartTime: Ref<Date | null>;
isAllowedToDrag: Ref<boolean>;
snapPoints: Ref<(number | string)[] | undefined>;
activeSnapPoint: Ref<number | string | null>;
keyboardIsOpen: Ref<boolean>;
activeSnapPoint: Ref<number | string | null | undefined>;
pointerStartY: Ref<number>;

@@ -24,12 +26,12 @@ dismissible: Ref<boolean>;

fadeFromIndex: Ref<number | undefined>;
shouldScaleBackground: Ref<boolean>;
onNestedDrag: (event: PointerEvent, percentageDragged: number) => void;
onNestedRelease: (event: PointerEvent, o: boolean) => void;
shouldScaleBackground: Ref<boolean | undefined>;
onNestedDrag: (percentageDragged: number) => void;
onNestedRelease: (o: boolean) => void;
onNestedOpenChange: (o: boolean) => void;
onCloseProp: Ref<(() => void) | undefined>;
onOpenChangeProp: Ref<((open: boolean) => void) | undefined>;
onDragProp: Ref<((event: PointerEvent, percentageDragged: number) => void) | undefined>;
onReleaseProp: Ref<((event: PointerEvent, open: boolean) => void) | undefined>;
emitClose: () => void;
emitDrag: (percentageDragged: number) => void;
emitRelease: (open: boolean) => void;
emitOpenChange: (o: boolean) => void;
nested: Ref<boolean>;
}
export declare const injectDrawerRootContext: <T extends DrawerRootContext | null | undefined = DrawerRootContext>(fallback?: T | undefined) => T extends null ? DrawerRootContext | null : DrawerRootContext, provideDrawerRootContext: (contextValue: DrawerRootContext) => DrawerRootContext;

@@ -1,4 +0,9 @@

import { type ComponentPublicInstance } from 'vue';
import type { Ref } from 'vue';
import type { ComponentPublicInstance, Ref } from 'vue';
import type { DrawerRootContext } from './context';
export declare const CLOSE_THRESHOLD = 0.25;
export declare const SCROLL_LOCK_TIMEOUT = 100;
export declare const BORDER_RADIUS = 8;
export declare const NESTED_DISPLACEMENT = 16;
export declare const WINDOW_TOP_OFFSET = 26;
export declare const DRAG_CLASS = "vaul-dragging";
export interface WithFadeFromProps {

@@ -12,6 +17,5 @@ snapPoints: (number | string)[];

}
export type DialogProps = {
export type DrawerRootProps = {
activeSnapPoint?: number | string | null;
closeThreshold?: number;
onOpenChange?: (open: boolean) => void;
shouldScaleBackground?: boolean;

@@ -21,9 +25,34 @@ scrollLockTimeout?: number;

dismissible?: boolean;
onDrag?: (event: PointerEvent, percentageDragged: number) => void;
onRelease?: (event: PointerEvent, open: boolean) => void;
modal?: boolean;
open?: boolean;
defaultOpen?: boolean;
nested?: boolean;
onClose?: () => void;
} & (WithFadeFromProps | WithoutFadeFromProps);
export type Drawer = {
export interface UseDrawerProps {
open: Ref<boolean>;
snapPoints: Ref<(number | string)[] | undefined>;
dismissible: Ref<boolean>;
nested: Ref<boolean>;
fixed: Ref<boolean | undefined>;
modal: Ref<boolean>;
shouldScaleBackground: Ref<boolean | undefined>;
activeSnapPoint: Ref<number | string | null | undefined>;
fadeFromIndex: Ref<number | undefined>;
closeThreshold: Ref<number>;
scrollLockTimeout: Ref<number>;
}
export interface DrawerRootEmits {
(e: 'drag', percentageDragged: number): void;
(e: 'release', open: boolean): void;
(e: 'close'): void;
(e: 'update:open', open: boolean): void;
(e: 'update:activeSnapPoint', val: string | number): void;
}
export interface DialogEmitHandlers {
emitDrag: (percentageDragged: number) => void;
emitRelease: (open: boolean) => void;
emitClose: () => void;
emitOpenChange: (open: boolean) => void;
}
export interface Drawer {
isOpen: Ref<boolean>;

@@ -47,3 +76,3 @@ hasBeenOpened: Ref<boolean>;

closeDrawer: () => void;
};
export declare function useDrawer(): DrawerRootContext;
}
export declare function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRootContext;

@@ -1,189 +0,96 @@

declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
open: import("vue").PropType<boolean>;
onDrag: {
type: import("vue").PropType<(event: PointerEvent, percentageDragged: number) => void>;
};
onRelease: {
type: import("vue").PropType<(event: PointerEvent, open: boolean) => void>;
};
dismissible: {
type: import("vue").PropType<boolean>;
default: undefined;
};
snapPoints: {
type: import("vue").PropType<(string | number)[]>;
required: true;
};
activeSnapPoint: {
type: import("vue").PropType<string | number | null>;
};
fadeFromIndex: {
type: import("vue").PropType<number>;
required: true;
};
modal: {
type: import("vue").PropType<boolean>;
};
nested: {
type: import("vue").PropType<boolean>;
};
fixed: {
type: import("vue").PropType<boolean>;
};
closeThreshold: {
type: import("vue").PropType<number>;
};
onOpenChange: {
type: import("vue").PropType<(open: boolean) => void>;
};
shouldScaleBackground: {
type: import("vue").PropType<boolean>;
};
scrollLockTimeout: {
type: import("vue").PropType<number>;
};
onClose: {
type: import("vue").PropType<() => void>;
};
} | {
open: import("vue").PropType<boolean>;
onDrag: {
type: import("vue").PropType<(event: PointerEvent, percentageDragged: number) => void>;
};
onRelease: {
type: import("vue").PropType<(event: PointerEvent, open: boolean) => void>;
};
dismissible: {
type: import("vue").PropType<boolean>;
default: undefined;
};
snapPoints: {
type: import("vue").PropType<(string | number)[]>;
};
activeSnapPoint: {
type: import("vue").PropType<string | number | null>;
};
fadeFromIndex: {
type: import("vue").PropType<never>;
};
modal: {
type: import("vue").PropType<boolean>;
};
nested: {
type: import("vue").PropType<boolean>;
};
fixed: {
type: import("vue").PropType<boolean>;
};
closeThreshold: {
type: import("vue").PropType<number>;
};
onOpenChange: {
type: import("vue").PropType<(open: boolean) => void>;
};
shouldScaleBackground: {
type: import("vue").PropType<boolean>;
};
scrollLockTimeout: {
type: import("vue").PropType<number>;
};
onClose: {
type: import("vue").PropType<() => void>;
};
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
open: import("vue").PropType<boolean>;
onDrag: {
type: import("vue").PropType<(event: PointerEvent, percentageDragged: number) => void>;
};
onRelease: {
type: import("vue").PropType<(event: PointerEvent, open: boolean) => void>;
};
dismissible: {
type: import("vue").PropType<boolean>;
default: undefined;
};
snapPoints: {
type: import("vue").PropType<(string | number)[]>;
required: true;
};
activeSnapPoint: {
type: import("vue").PropType<string | number | null>;
};
fadeFromIndex: {
type: import("vue").PropType<number>;
required: true;
};
modal: {
type: import("vue").PropType<boolean>;
};
nested: {
type: import("vue").PropType<boolean>;
};
fixed: {
type: import("vue").PropType<boolean>;
};
closeThreshold: {
type: import("vue").PropType<number>;
};
onOpenChange: {
type: import("vue").PropType<(open: boolean) => void>;
};
shouldScaleBackground: {
type: import("vue").PropType<boolean>;
};
scrollLockTimeout: {
type: import("vue").PropType<number>;
};
onClose: {
type: import("vue").PropType<() => void>;
};
}>> | Readonly<import("vue").ExtractPropTypes<{
open: import("vue").PropType<boolean>;
onDrag: {
type: import("vue").PropType<(event: PointerEvent, percentageDragged: number) => void>;
};
onRelease: {
type: import("vue").PropType<(event: PointerEvent, open: boolean) => void>;
};
dismissible: {
type: import("vue").PropType<boolean>;
default: undefined;
};
snapPoints: {
type: import("vue").PropType<(string | number)[]>;
};
activeSnapPoint: {
type: import("vue").PropType<string | number | null>;
};
fadeFromIndex: {
type: import("vue").PropType<never>;
};
modal: {
type: import("vue").PropType<boolean>;
};
nested: {
type: import("vue").PropType<boolean>;
};
fixed: {
type: import("vue").PropType<boolean>;
};
closeThreshold: {
type: import("vue").PropType<number>;
};
onOpenChange: {
type: import("vue").PropType<(open: boolean) => void>;
};
shouldScaleBackground: {
type: import("vue").PropType<boolean>;
};
scrollLockTimeout: {
type: import("vue").PropType<number>;
};
onClose: {
type: import("vue").PropType<() => void>;
};
}>>, {
import { type DrawerRootProps } from './controls';
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<DrawerRootProps>, {
open: undefined;
fixed: undefined;
dismissible: boolean;
activeSnapPoint: undefined;
snapPoints: undefined;
shouldScaleBackground: undefined;
closeThreshold: number;
fadeFromIndex: undefined;
nested: boolean;
modal: boolean;
scrollLockTimeout: number;
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
drag: (percentageDragged: number) => void;
release: (open: boolean) => void;
close: () => void;
"update:open": (open: boolean) => void;
"update:activeSnapPoint": (val: string | number) => void;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
activeSnapPoint?: string | number | null | undefined;
closeThreshold?: number | undefined;
shouldScaleBackground?: boolean | undefined;
scrollLockTimeout?: number | undefined;
fixed?: boolean | undefined;
dismissible?: boolean | undefined;
modal?: boolean | undefined;
open?: boolean | undefined;
defaultOpen?: boolean | undefined;
nested?: boolean | undefined;
} & import("./controls").WithFadeFromProps>, {
open: undefined;
fixed: undefined;
dismissible: boolean;
activeSnapPoint: undefined;
snapPoints: undefined;
shouldScaleBackground: undefined;
closeThreshold: number;
fadeFromIndex: undefined;
nested: boolean;
modal: boolean;
scrollLockTimeout: number;
}>> | import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
activeSnapPoint?: string | number | null | undefined;
closeThreshold?: number | undefined;
shouldScaleBackground?: boolean | undefined;
scrollLockTimeout?: number | undefined;
fixed?: boolean | undefined;
dismissible?: boolean | undefined;
modal?: boolean | undefined;
open?: boolean | undefined;
defaultOpen?: boolean | undefined;
nested?: boolean | undefined;
} & import("./controls").WithoutFadeFromProps>, {
open: undefined;
fixed: undefined;
dismissible: boolean;
activeSnapPoint: undefined;
snapPoints: undefined;
shouldScaleBackground: undefined;
closeThreshold: number;
fadeFromIndex: undefined;
nested: boolean;
modal: boolean;
scrollLockTimeout: number;
}>>> & {
onDrag?: ((percentageDragged: number) => any) | undefined;
onRelease?: ((open: boolean) => any) | undefined;
onClose?: (() => any) | undefined;
"onUpdate:open"?: ((open: boolean) => any) | undefined;
"onUpdate:activeSnapPoint"?: ((val: string | number) => any) | undefined;
}, {
modal: boolean;
dismissible: boolean;
snapPoints: (string | number)[];
activeSnapPoint: string | number | null;
fadeFromIndex: number;
nested: boolean;
fixed: boolean;
open: boolean;
shouldScaleBackground: boolean;
scrollLockTimeout: number;
closeThreshold: number;
} | {
modal: boolean;
dismissible: boolean;
snapPoints: (string | number)[];
activeSnapPoint: string | number | null;
fadeFromIndex: never;
nested: boolean;
fixed: boolean;
open: boolean;
shouldScaleBackground: boolean;
scrollLockTimeout: number;
closeThreshold: number;
}, {}>, {

@@ -193,2 +100,19 @@ default?(_: {}): any;

export default _default;
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
type __VLS_TypePropsToRuntimeProps<T> = {
[K in keyof T]-?: {} extends Pick<T, K> ? {
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
} : {
type: import('vue').PropType<T[K]>;
required: true;
};
};
type __VLS_WithDefaults<P, D> = {
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
default: D[K];
}> : P[K];
};
type __VLS_Prettify<T> = {
[K in keyof T]: T[K];
} & {};
type __VLS_WithTemplateSlots<T, S> = T & {

@@ -195,0 +119,0 @@ new (): {

@@ -1,6 +0,11 @@

import { type DialogProps } from './controls';
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<DialogProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
import type { DrawerRootProps } from './controls';
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<DrawerRootProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
drag: (percentageDragged: number) => void;
release: (open: boolean) => void;
close: () => void;
"update:open": (open: boolean) => void;
"update:activeSnapPoint": (val: string | number) => void;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
activeSnapPoint?: string | number | null | undefined;
closeThreshold?: number | undefined;
onOpenChange?: ((open: boolean) => void) | undefined;
shouldScaleBackground?: boolean | undefined;

@@ -10,11 +15,9 @@ scrollLockTimeout?: number | undefined;

dismissible?: boolean | undefined;
onDrag?: ((event: PointerEvent, percentageDragged: number) => void) | undefined;
onRelease?: ((event: PointerEvent, open: boolean) => void) | undefined;
modal?: boolean | undefined;
open?: boolean | undefined;
defaultOpen?: boolean | undefined;
nested?: boolean | undefined;
onClose?: (() => void) | undefined;
} & import("./controls").WithFadeFromProps>>> | Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
} & import("./controls").WithFadeFromProps>> | import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
activeSnapPoint?: string | number | null | undefined;
closeThreshold?: number | undefined;
onOpenChange?: ((open: boolean) => void) | undefined;
shouldScaleBackground?: boolean | undefined;

@@ -24,8 +27,13 @@ scrollLockTimeout?: number | undefined;

dismissible?: boolean | undefined;
onDrag?: ((event: PointerEvent, percentageDragged: number) => void) | undefined;
onRelease?: ((event: PointerEvent, open: boolean) => void) | undefined;
modal?: boolean | undefined;
open?: boolean | undefined;
defaultOpen?: boolean | undefined;
nested?: boolean | undefined;
onClose?: (() => void) | undefined;
} & import("./controls").WithoutFadeFromProps>>>, {} | {}, {}>, {
} & import("./controls").WithoutFadeFromProps>>> & {
onDrag?: ((percentageDragged: number) => any) | undefined;
onRelease?: ((open: boolean) => any) | undefined;
onClose?: (() => any) | undefined;
"onUpdate:open"?: ((open: boolean) => any) | undefined;
"onUpdate:activeSnapPoint"?: ((val: string | number) => any) | undefined;
}, {} | {}, {}>, {
default?(_: {}): any;

@@ -32,0 +40,0 @@ }>;

@@ -1,2 +0,1 @@

import { DialogTitle as DrawerTitle, DialogDescription as DrawerDescription, DialogTrigger as DrawerTrigger, DialogPortal as DrawerPortal, DialogClose as DrawerClose } from 'radix-vue';
import DrawerRoot from "./DrawerRoot";

@@ -6,2 +5,4 @@ import DrawerRootNested from "./DrawerRootNested";

import DrawerContent from "./DrawerContent";
export { DrawerTitle, DrawerDescription, DrawerTrigger, DrawerPortal, DrawerClose, DrawerRoot, DrawerRootNested, DrawerOverlay, DrawerContent };
export type { DrawerRootEmits, DrawerRootProps, } from './controls';
export { DrawerRoot, DrawerRootNested, DrawerOverlay, DrawerContent, };
export { DialogClose as DrawerClose, type DialogCloseProps as DrawerCloseProps, DialogDescription as DrawerDescription, type DialogDescriptionProps as DrawerDescriptionProps, DialogPortal as DrawerPortal, type DialogPortalProps as DrawerPortalProps, DialogTitle as DrawerTitle, type DialogTitleProps as DrawerTitleProps, DialogTrigger as DrawerTrigger, type DialogTriggerProps as DrawerTriggerProps, } from 'radix-vue';
import { type Ref } from 'vue';
interface PositionFixedOptions {
isOpen: Ref<boolean>;
modal: boolean;
modal: Ref<boolean>;
nested: Ref<boolean>;

@@ -6,0 +6,0 @@ hasBeenOpened: Ref<boolean>;

import { type ComponentPublicInstance, type Ref } from 'vue';
type useSnapPointsProps = {
activeSnapPoint: Ref<number | string | null>;
interface useSnapPointsProps {
activeSnapPoint: Ref<number | string | null | undefined>;
snapPoints: Ref<(number | string)[] | undefined>;

@@ -8,11 +8,10 @@ fadeFromIndex: Ref<number | undefined>;

overlayRef: Ref<ComponentPublicInstance | null>;
onSnapPointChange(activeSnapPointIndex: number): void;
};
export declare function useSnapPoints({ activeSnapPoint, snapPoints, drawerRef, overlayRef, fadeFromIndex, onSnapPointChange }: useSnapPointsProps): {
onSnapPointChange: (activeSnapPointIndex: number, snapPointsOffset: number[]) => void;
}
export declare function useSnapPoints({ activeSnapPoint, snapPoints, drawerRef, overlayRef, fadeFromIndex, onSnapPointChange, }: useSnapPointsProps): {
isLastSnapPoint: import("vue").ComputedRef<boolean | null>;
activeSnapPoint: Ref<string | number | null>;
shouldFade: import("vue").ComputedRef<boolean>;
getPercentageDragged: (absDraggedDistance: number, isDraggingDown: boolean) => number | null;
activeSnapPointIndex: import("vue").ComputedRef<number | null>;
onRelease: ({ draggedDistance, closeDrawer, velocity, dismissible }: {
onRelease: ({ draggedDistance, closeDrawer, velocity, dismissible, }: {
draggedDistance: number;

@@ -19,0 +18,0 @@ closeDrawer: () => void;

{
"name": "vaul-vue",
"version": "0.0.3",
"type": "module",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"version": "0.1.0",
"repository": "https://github.com/Elliot-Alexander/vaul-vue",
"keywords": [
"vue",
"vue3",
"drawer",
"dialog",
"modal",
"headless"
],
"exports": {
".": {
"import": "./dist/index.js",
"require": "./dist/index.umd.cjs"
}
},
"main": "./dist/index.umd.cjs",
"module": "./dist/index.js",
"types": "./dist/index.d.ts",
"files": [
"README.md",
"dist"
],
"dependencies": {
"radix-vue": "^1.2.5",
"@vueuse/core": "^10.8.0",
"radix-vue": "^1.4.9",
"vue": "^3.4.5"

@@ -20,3 +38,2 @@ },

"@vitejs/plugin-vue": "^4.5.2",
"@vue/eslint-config-prettier": "^8.0.0",
"@vue/eslint-config-typescript": "^12.0.0",

@@ -29,3 +46,2 @@ "@vue/test-utils": "^2.4.3",

"npm-run-all2": "^6.1.1",
"prettier": "^3.0.3",
"typescript": "~5.3.0",

@@ -32,0 +48,0 @@ "vite": "^5.0.10",

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc