@nativescript-community/ui-drawer 0.1.19 → 0.1.21

package/README.md

@@ -55,6 +55,8 @@
 	* [Examples:](#examples-2)
 * [Usage in Vue](#usage-in-vue)
 	* [Examples:](#examples-3)
+* [Usage in Vue3](#usage-in-vue3)
+	* [Examples:](#examples-4)
 * [Demos and Development](#demos-and-development)
 	* [Repo Setup](#repo-setup)
 	* [Build](#build)
@@ -221,6 +223,26 @@ Vue.use(DrawerPlugin);
   - An example of drawers on all sides: left, right, top, bottom.
 
 
+[](#usage-in-vue3)
+
+## Usage in Vue3
+
+Register the plugin in your `app.js`.
+
+```typescript
+import DrawerPlugin from '@nativescript-community/ui-drawer/vue3'
+
+app.use(DrawerPlugin);
+```
+
+### Examples:
+
+- [Basic Drawer](demo-snippets/vue3/BasicDrawer.vue)
+  - A basic sliding drawer.
+- [All Sides](demo-snippets/vue3/AllSides.vue)
+  - An example of drawers on all sides: left, right, top, bottom.
+
+
 [](#demos-and-development)
 
 ## Demos and Development
@@ -317,4 +339,4 @@ One easy solution is t modify `~/.gitconfig` and add
 
 ## Questions
 
-If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).
+If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nativescript-community/ui-drawer",
-    "version": "0.1.19",
+    "version": "0.1.21",
     "description": "Easily add a side drawer (side menu) to your projects.",
     "main": "./index",
     "sideEffects": false,
@@ -54,5 +54,5 @@
     "dependencies": {
         "@nativescript-community/gesturehandler": "^2.0.8"
     },
-    "gitHead": "5f59c2df55ea1a8a728bd5c4d5f254adf88f3736"
+    "gitHead": "dafbf3db2e1cf20cf500575ff34b1d700430c2f2"
 }

package/angular/index.d.ts

@@ -1 +0,0 @@
-export * from './module';

package/angular/module.d.ts

@@ -1,84 +0,0 @@
-import { ElementRef, EmbeddedViewRef, TemplateRef, ViewContainerRef } from '@angular/core';
-import { Drawer } from '@nativescript-community/ui-drawer';
-import * as i0 from "@angular/core";
-export interface ItemEventArgs {
-    object: any;
-    view: EmbeddedViewRef<any>;
-    returnValue?: boolean;
-}
-/**
- * This is the SideDrawer component. It separates your mobile app's screen
- * into a main part and a menu part whereby the menu part is shown upon a swipe
- * gesture using a transition effect.
- */
-export declare class DrawerComponent {
-    elementRef: ElementRef;
-    private viewContainer;
-    drawer: Drawer;
-    mainTemplate: TemplateRef<ElementRef>;
-    drawerTemplate: TemplateRef<ElementRef>;
-    private _gestureEnabled;
-    constructor(elementRef: ElementRef, viewContainer: ViewContainerRef);
-    get nativeElement(): Drawer;
-    set gestureEnabled(value: boolean);
-    private updateGestureEnabled;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DrawerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DrawerComponent, "Drawer", never, {}, {}, never, ["*"], false, never>;
-}
-/**
- * Directive identifying the left drawer
- */
-export declare class LeftDrawerDirective {
-    private _elementRef;
-    constructor(_elementRef: ElementRef);
-    static ɵfac: i0.ɵɵFactoryDeclaration<LeftDrawerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<LeftDrawerDirective, "[leftDrawer]", never, {}, {}, never, never, false, never>;
-}
-/**
- * Directive identifying the right drawer
- */
-export declare class RightDrawerDirective {
-    private _elementRef;
-    constructor(_elementRef: ElementRef);
-    static ɵfac: i0.ɵɵFactoryDeclaration<RightDrawerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RightDrawerDirective, "[rightDrawer]", never, {}, {}, never, never, false, never>;
-}
-/**
- * Directive identifying the right drawer
- */
-export declare class TopDrawerDirective {
-    private _elementRef;
-    constructor(_elementRef: ElementRef);
-    static ɵfac: i0.ɵɵFactoryDeclaration<TopDrawerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TopDrawerDirective, "[topDrawer]", never, {}, {}, never, never, false, never>;
-}
-/**
- * Directive identifying the right drawer
- */
-export declare class BottomDrawerDirective {
-    private _elementRef;
-    constructor(_elementRef: ElementRef);
-    static ɵfac: i0.ɵɵFactoryDeclaration<BottomDrawerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<BottomDrawerDirective, "[bottomDrawer]", never, {}, {}, never, never, false, never>;
-}
-/**
- * Directive identifying the main content.
- */
-export declare class MainContentDirective {
-    private _elementRef;
-    constructor(_elementRef: ElementRef);
-    static ɵfac: i0.ɵɵFactoryDeclaration<MainContentDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MainContentDirective, "[mainContent]", never, {}, {}, never, never, false, never>;
-}
-/**
- * Directives identifying the Drawer.
- */
-export declare const SIDEDRAWER_DIRECTIVES: (typeof LeftDrawerDirective | typeof RightDrawerDirective | typeof TopDrawerDirective | typeof BottomDrawerDirective | typeof MainContentDirective)[];
-/**
- * NgModule containing all of the RadSideDrawer directives.
- */
-export declare class DrawerModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DrawerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DrawerModule, [typeof DrawerComponent, typeof LeftDrawerDirective, typeof RightDrawerDirective, typeof TopDrawerDirective, typeof BottomDrawerDirective, typeof MainContentDirective], never, [typeof DrawerComponent, typeof LeftDrawerDirective, typeof RightDrawerDirective, typeof TopDrawerDirective, typeof BottomDrawerDirective, typeof MainContentDirective]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DrawerModule>;
-}

package/index.d.ts

@@ -1,183 +0,0 @@
-import { GestureState, GestureStateEventData, GestureTouchEventData, PanGestureHandler } from '@nativescript-community/gesturehandler';
-import { AnimationDefinition, Color, EventData, GridLayout, Property, View } from '@nativescript/core';
-export declare const PAN_GESTURE_TAG = 12431;
-export declare type Side = 'left' | 'right';
-export declare type VerticalSide = 'bottom' | 'top';
-export declare type Mode = 'under' | 'slide';
-export interface DrawerEventData extends EventData {
-    side: Side;
-    duration?: number;
-}
-export declare const leftDrawerContentProperty: Property<Drawer, View>;
-export declare const rightDrawerContentProperty: Property<Drawer, View>;
-export declare const topDrawerContentProperty: Property<Drawer, View>;
-export declare const bottomDrawerContentProperty: Property<Drawer, View>;
-export declare const gestureEnabledProperty: Property<Drawer, boolean>;
-export declare const backdropColorProperty: Property<Drawer, Color>;
-export declare const leftDrawerModeProperty: Property<Drawer, Mode>;
-export declare const rightDrawerModeProperty: Property<Drawer, Mode>;
-export declare const topDrawerModeProperty: Property<Drawer, Mode>;
-export declare const bottomDrawerModeProperty: Property<Drawer, Mode>;
-export declare const translationFunctionProperty: Property<Drawer, TranslationFunctionType>;
-export declare const animationFunctionProperty: Property<Drawer, AnimationFunctionType>;
-export declare const backDropEnabledProperty: Property<Drawer, boolean>;
-export declare const startingSideProperty: Property<Drawer, Side | VerticalSide | "none">;
-export declare const gestureHandlerOptionsProperty: Property<import("@nativescript/core").ViewBase, unknown>;
-export interface TrData {
-    [k: string]: AnimationDefinition;
-    leftDrawer?: AnimationDefinition;
-    rightDrawer?: AnimationDefinition;
-    bottomDrawer?: AnimationDefinition;
-    topDrawer?: AnimationDefinition;
-    backDrop?: AnimationDefinition;
-    mainContent?: AnimationDefinition;
-}
-export declare type TranslationFunctionType = (side: Side | VerticalSide, width: number, value: number, delta: number, progress: number, drawer: Drawer) => TrData;
-export declare type AnimationFunctionType = (side: Side | VerticalSide, duration: number, trData: TrData, animationParams: AnimationDefinition[], drawer: Drawer) => Promise<void>;
-export declare class Drawer extends GridLayout {
-    leftDrawer?: View;
-    rightDrawer?: View;
-    bottomDrawer?: View;
-    topDrawer?: View;
-    mainContent: View;
-    backDrop: View;
-    leftDrawerMode: any;
-    rightDrawerMode: any;
-    bottomDrawerMode: any;
-    topDrawerMode: any;
-    gestureTag: number;
-    gestureMinDist: number;
-    gestureHandlerOptions: any;
-    waitFor: any[];
-    simultaneousHandlers: any[];
-    shouldStartSheetDragging?: (side: Side | VerticalSide) => boolean;
-    shouldPan?: (side: Side | VerticalSide) => boolean;
-    leftSwipeDistance: number;
-    rightSwipeDistance: number;
-    bottomSwipeDistance: number;
-    topSwipeDistance: number;
-    backdropColor: Color;
-    leftOpenedDrawerAllowDraging: boolean;
-    rightOpenedDrawerAllowDraging: boolean;
-    bottomOpenedDrawerAllowDraging: boolean;
-    topOpenedDrawerAllowDraging: boolean;
-    leftClosedDrawerAllowDraging: boolean;
-    rightClosedDrawerAllowDraging: boolean;
-    bottomClosedDrawerAllowDraging: boolean;
-    topClosedDrawerAllowDraging: boolean;
-    panGestureHandler: PanGestureHandler;
-    gestureEnabled: boolean;
-    backdropTapGestureEnabled: boolean;
-    startingSide: Side | VerticalSide;
-    openAnimationDuration: number;
-    closeAnimationDuration: number;
-    private mIsPanning;
-    private mIsAnimating;
-    private mPrevDeltaX;
-    private mPrevDeltaY;
-    private mViewWidth;
-    private mViewHeight;
-    private mTranslationX;
-    private mTranslationY;
-    private mShowingSide;
-    private mModes;
-    translationFunction?: TranslationFunctionType;
-    animationFunction?: AnimationFunctionType;
-    backDropEnabled: boolean;
-    constructor();
-    _onBackDropEnabledValueChanged(): void;
-    getActualSide(side: Side | VerticalSide): Side | VerticalSide;
-    updateStartingSide(side: any): void;
-    onBackdropTap(): void;
-    initGestures(): void;
-    initNativeView(): void;
-    disposeNativeView(): void;
-    shouldStartSheetDraggingInternal(side: Side | VerticalSide): any;
-    shouldStartGesture(data: any): any;
-    getDrawerToOpen(extraData: any): "left" | "right" | "bottom" | "top";
-    onGestureState(args: GestureStateEventData): void;
-    isSideVisible(side: Side | VerticalSide): number;
-    onGestureTouch(args: GestureTouchEventData): void;
-    _onMainContentChanged(oldValue: View, newValue: View): void;
-    leftLayoutChanged(event: EventData): void;
-    rightLayoutChanged(event: EventData): void;
-    topLayoutChanged(event: EventData): void;
-    bottomLayoutChanged(event: EventData): void;
-    addChild(child: any): void;
-    _onDrawerContentChanged(side: Side | VerticalSide, oldValue: View, newValue: View): void;
-    onSideModeChanged(side: Side | VerticalSide, mode: Mode, oldMode?: Mode): void;
-    computeTranslationData(side: any, value: any): TrData | {
-        [x: string]: {
-            translateX: number;
-            opacity?: undefined;
-        } | {
-            translateX: number;
-            opacity: number;
-        };
-        mainContent: {
-            translateX: number;
-            translateY?: undefined;
-        };
-        backDrop: {
-            translateX: number;
-            opacity: number;
-            translateY?: undefined;
-        };
-    } | {
-        [x: string]: {
-            translateX?: undefined;
-            opacity?: undefined;
-        } | {
-            translateX: any;
-            opacity?: undefined;
-        } | {
-            opacity: number;
-            translateX?: undefined;
-        };
-        mainContent: {
-            translateX?: undefined;
-            translateY?: undefined;
-        };
-        backDrop: {
-            opacity: number;
-            translateX?: undefined;
-            translateY?: undefined;
-        };
-    } | {
-        [x: string]: {
-            translateY: any;
-            opacity?: undefined;
-        } | {
-            translateY: number;
-            opacity: number;
-        };
-        mainContent: {
-            translateY: number;
-            translateX?: undefined;
-        };
-        backDrop: {
-            translateY: number;
-            opacity: number;
-            translateX?: undefined;
-        };
-    };
-    onLayoutChange(side: Side | VerticalSide, event: EventData): void;
-    forceEnsureSize(side: Side | VerticalSide): void;
-    onTapGestureState(args: GestureStateEventData): void;
-    updateIsPanning(state: GestureState): void;
-    mViewByIdCache: {};
-    applyTrData(trData: {
-        [k: string]: any;
-    }, side: Side | VerticalSide): void;
-    constrainX(side: any, x: any): any;
-    constrainY(side: any, y: any): any;
-    animateToPosition(side: Side | VerticalSide, position: any, duration?: number): Promise<void>;
-    isSideOpened(): boolean;
-    isOpened(side?: Side | VerticalSide): boolean;
-    getDefaultSide(): "left" | "right" | "bottom" | "top";
-    toggle(side?: Side | VerticalSide): Promise<void>;
-    open(side?: Side | VerticalSide, duration?: number): Promise<void>;
-    close(side?: Side | VerticalSide, duration?: number): Promise<void>;
-}
-export declare const mainContentProperty: Property<Drawer, View>;
-export declare function install(): void;