feat: angular integration

PuruVJ · Jun 28, 2023 · 724193e · 724193e
1 parent a1b43f3
commit 724193e
Show file tree

Hide file tree

Showing 41 changed files with 9,157 additions and 3,148 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@ dist/
 .DS_Store
 .env
 .pnpm-store/
+
diff --git a/docs/public/logos/angular.svg b/docs/public/logos/angular.svg
diff --git a/docs/src/components/options/OptionsCode.astro b/docs/src/components/options/OptionsCode.astro
@@ -1,11 +1,15 @@
 ---
 import type { Framework } from 'src/helpers/constants';
 
-const framework = Astro.url.pathname.split('/').filter(Boolean).at(-1) as Framework;
+const framework = Astro.url.pathname
+    .split('/')
+    .filter(Boolean)
+    .at(-1) as Framework;
 ---
 
 {framework === 'react' && <slot name="react" />}
 {framework === 'svelte' && <slot name="svelte" />}
 {framework === 'vue' && <slot name="vue" />}
 {framework === 'vanilla' && <slot name="vanilla" />}
 {framework === 'solid' && <slot name="solid" />}
+{framework === 'angular' && <slot name="angular" />}
diff --git a/docs/src/css/themes.scss b/docs/src/css/themes.scss
@@ -63,6 +63,15 @@ body.light {
 	);
 	--app-color-brand-solid-navbar: #c0cad8;
 
+	--app-color-brand-angular: #c31c2e;
+	--app-color-brand-angular-hsl: 354, 75%, 44%;
+	--app-color-brand-angular-body-gradient: radial-gradient(
+		ellipse farthest-corner at 95% 2%,
+		hsla(var(--app-color-brand-angular-hsl), 0.4) 0%,
+		var(--app-color-shell) 100%
+	);
+	--app-color-brand-angular-navbar: #c31c2e;
+
 	--app-color-brand-vanilla: var(--app-color-dark);
 	--app-color-brand-vanilla-hsl: var(--app-color-dark-hsl);
 	--app-color-brand-vanilla-body-gradient: radial-gradient(
@@ -133,6 +142,15 @@ body.dark {
 	);
 	--app-color-brand-solid-navbar: #2b3138;
 
+	--app-color-brand-angular: hsl(355, 75%, 49%);
+	--app-color-brand-angular-hsl: 355, 75%, 49%;
+	--app-color-brand-angular-body-gradient: radial-gradient(
+		ellipse farthest-corner at 95% 2%,
+		hsla(var(--app-color-brand-angular-hsl), 0.3) 0%,
+		var(--app-color-shell) 100%
+	);
+	--app-color-brand-angular-navbar: #dc2030;
+
 	--app-color-brand-vanilla: var(--app-color-dark);
 	--app-color-brand-vanilla-hsl: var(--app-color-dark-hsl);
 	--app-color-brand-vanilla-body-gradient: radial-gradient(

diff --git a/docs/src/data/sizes.json b/docs/src/data/sizes.json
@@ -1,22 +1,26 @@
 {
-  "solid": {
-    "size": "1.77",
-    "version": "2.0.2"
-  },
-  "svelte": {
-    "size": "1.70",
-    "version": "2.0.2"
-  },
-  "vanilla": {
-    "size": "1.81",
-    "version": "2.0.2"
-  },
-  "vue": {
-    "size": "1.79",
-    "version": "2.0.2"
-  },
-  "react": {
-    "size": "1.98",
-    "version": "2.0.2"
-  }
-}
+	"solid": {
+		"size": "1.77",
+		"version": "2.0.2"
+	},
+	"angular": {
+		"size": "1.77",
+		"version": "2.0.2"
+	},
+	"svelte": {
+		"size": "1.70",
+		"version": "2.0.2"
+	},
+	"vanilla": {
+		"size": "1.81",
+		"version": "2.0.2"
+	},
+	"vue": {
+		"size": "1.79",
+		"version": "2.0.2"
+	},
+	"react": {
+		"size": "1.98",
+		"version": "2.0.2"
+	}
+}
diff --git a/docs/src/documentation/options/applyUserSelectHack/+option.mdx b/docs/src/documentation/options/applyUserSelectHack/+option.mdx
@@ -11,7 +11,8 @@ import Examples from '$components/options/OptionsExamples.svelte';
 import UserSelectExample from './UserSelect.example.svelte';
 import NoUserSelectExample from './NoUserSelect.example.svelte';
 
-export const shortDescription = 'Applies `user-select: none` on `<body />` when dragging';
+export const shortDescription =
+  'Applies `user-select: none` on `<body />` when dragging';
 
 Applies `user-select: none` on `<body />` element when dragging, to prevent the irritating effect where dragging doesn't happen and the text is selected. Applied when dragging starts and removed when it stops.
 
@@ -46,6 +47,14 @@ Applies `user-select: none` on `<body />` element when dragging, to prevent the
         ```
       </div>
 
+      <div slot="angular">
+        ```html
+        <div [neoDraggable]="{ applyUserSelectHack: true }">
+          User Select disabled
+        </div>
+        ```
+      </div>
+
       <div slot="react">
         ```ts
         useDraggable(draggableRef, { applyUserSelectHack: true });
@@ -92,6 +101,14 @@ Applies `user-select: none` on `<body />` element when dragging, to prevent the
         ```
       </div>
 
+      <div slot="angular">
+        ```html
+        <div [neoDraggable]="{ applyUserSelectHack: false }">
+          User Select enabled
+        </div>
+        ```
+      </div>
+
       <div slot="react">
         ```ts
         useDraggable(draggableRef, { applyUserSelectHack: false });

diff --git a/docs/src/documentation/options/axis/+option.mdx b/docs/src/documentation/options/axis/+option.mdx
@@ -53,6 +53,14 @@ export const shortDescription = 'Axis on which the element can be dragged on.';
         ```
       </div>
 
+      <div slot="angular">
+        ```html
+        <div [neoDraggable]="{ axis: 'both' }">
+          Both directions
+        </div>
+        ```
+      </div>
+
       <div slot="react">
         ```ts
         useDraggable(draggableRef, { axis: 'both' });
@@ -99,6 +107,14 @@ export const shortDescription = 'Axis on which the element can be dragged on.';
         ```
       </div>
 
+      <div slot="angular">
+        ```html
+        <div [neoDraggable]="{ axis: 'x' }">
+          Horizontal
+        </div>
+        ```
+      </div>
+
       <div slot="react">
         ```ts
         useDraggable(draggableRef, { axis: 'x' });
@@ -145,6 +161,14 @@ export const shortDescription = 'Axis on which the element can be dragged on.';
         ```
       </div>
 
+      <div slot="angular">
+        ```html
+        <div [neoDraggable]="{ axis: 'y' }">
+          Vertical
+        </div>
+        ```
+      </div>
+
       <div slot="react">
         ```ts
         useDraggable(draggableRef, { axis: 'y' });
@@ -191,6 +215,14 @@ export const shortDescription = 'Axis on which the element can be dragged on.';
         ```
       </div>
 
+      <div slot="angular">
+        ```html
+        <div [neoDraggable]="{ axis: 'none' }">
+          None axis: Won't drag
+        </div>
+        ```
+      </div>
+
       <div slot="react">
         ```ts
         useDraggable(draggableRef, { axis: 'none' });

diff --git a/docs/src/documentation/options/bounds/+option.mdx b/docs/src/documentation/options/bounds/+option.mdx
@@ -74,6 +74,14 @@ export type DragBoundsCoords = {
         ```
       </div>
 
+      <div slot="angular">
+        ```html
+        <div [neoDraggable]="{ bounds: 'parent' }">
+          Can't go outside the parent element
+        </div>
+        ```
+      </div>
+
       <div slot="react">
         ```ts
         useDraggable(draggableRef, { bounds: 'parent' });
@@ -120,6 +128,14 @@ export type DragBoundsCoords = {
         ```
       </div>
 
+      <div slot="angular">
+        ```html
+        <div [neoDraggable]="{ bounds: 'body' }">
+          Can't go outside body
+        </div>
+        ```
+      </div>
+
       <div slot="react">
         ```ts
         useDraggable(draggableRef, { bounds: 'body' });
@@ -186,6 +202,19 @@ export type DragBoundsCoords = {
         ```
       </div>
 
+      <div slot="angular">
+        ```html
+        <div [neoDraggable]="{ bounds: { top: 60, left: 20, bottom: 35, right: 30 } }">
+          Limited to:
+
+          top: 60
+          left: 20
+          bottom: 35
+          right: 30
+        </div>
+        ```
+      </div>
+
       <div slot="react">
         ```ts
         useDraggable(draggableRef, { bounds: { top: 60, left: 20, bottom: 35, right: 30 } });

diff --git a/docs/src/documentation/options/cancel/+option.mdx b/docs/src/documentation/options/cancel/+option.mdx
@@ -55,6 +55,16 @@ Can be an element or elements too. If it is provided, Trying to drag inside the
         ```
       </div>
 
+      <div slot="angular">
+        ```html
+        <div [neoDraggable]="{ cancel: '.cancel' }">
+          This will drag!
+
+          <div class="cancel">This won't drag</div>
+        </div>
+        ```
+      </div>
+
       <div slot="react">
         ```tsx
         useDraggable(draggableRef, { cancel: '.cancel' });
@@ -130,6 +140,16 @@ Can be an element or elements too. If it is provided, Trying to drag inside the
         ```
       </div>
 
+      <div slot="angular">
+        ```html
+        <div [neoDraggable]="{ cancel: cancelEl }">
+          This will drag!
+
+          <div #cancelEl>This won't drag</div>
+        </div>
+        ```
+      </div>
+
       <div slot="react">
         ```tsx
         const cancelEl = useRef<HTMLDivElement>();
@@ -202,6 +222,17 @@ Can be an element or elements too. If it is provided, Trying to drag inside the
         ```
       </div>
 
+      <div slot="angular">
+        ```html
+        <div [neoDraggable]="{ cancel: '.cancel' }">
+          This will drag!
+
+          <div class="cancel">This won't drag</div>
+          <div class="cancel">This won't drag</div>
+        </div>
+        ```
+      </div>
+
       <div slot="react">
         ```tsx
         useDraggable(draggableRef, { cancel: '.cancel' });
@@ -286,6 +317,17 @@ Can be an element or elements too. If it is provided, Trying to drag inside the
         ```
       </div>
 
+      <div slot="angular">
+        ```html
+        <div [neoDraggable]="{ cancel: [cancel1, cancel2] }">
+          This will drag!
+
+          <div #cancel1>This won't drag</div>
+          <div #cancel2>This won't drag</div>
+        </div>
+        ```
+      </div>
+
       <div slot="react">
         ```tsx
         const cancel1 = useRef<HTMLDivElement>();

diff --git a/docs/src/documentation/options/defaultPosition/+option.mdx b/docs/src/documentation/options/defaultPosition/+option.mdx
@@ -46,6 +46,14 @@ export const shortDescription =
         ```
       </div>
 
+      <div slot="angular">
+        ```html
+        <div [neoDraggable]="{ defaultPosition: { x: 100, y: 40 } }">
+          Shifted by (100, 40)
+        </div>
+        ```
+      </div>
+
       <div slot="react">
         ```ts
         useDraggable(draggableRef, { defaultPosition: { x: 100, y: 40 } });

diff --git a/docs/src/documentation/options/disabled/+option.mdx b/docs/src/documentation/options/disabled/+option.mdx
@@ -45,6 +45,14 @@ export const shortDescription = 'Disables dragging';
         ```
       </div>
 
+      <div slot="angular">
+        ```html
+        <div [neoDraggable]="{ disabled: true }">
+          Disabled. Won't drag, won't trigger any events
+        </div>
+        ```
+      </div>
+
       <div slot="react">
         ```ts
         useDraggable(draggableRef, { disabled: true });

diff --git a/docs/src/documentation/options/gpuAcceleration/+option.mdx b/docs/src/documentation/options/gpuAcceleration/+option.mdx
@@ -55,6 +55,14 @@ Depending on the device, you may not see much difference
         ```
       </div>
 
+      <div slot="angular">
+        ```html
+        <div [neoDraggable]="{ gpuAcceleration: true }">
+          GPU acceleration on
+        </div>
+        ```
+      </div>
+
       <div slot="react">
         ```ts
         useDraggable(draggableRef, { gpuAcceleration: true });
@@ -101,6 +109,14 @@ Depending on the device, you may not see much difference
         ```
       </div>
 
+      <div slot="angular">
+        ```html
+        <div [neoDraggable]="{ gpuAcceleration: false }">
+          GPU acceleration off
+        </div>
+        ```
+      </div>
+
       <div slot="react">
         ```ts
         useDraggable(draggableRef, { gpuAcceleration: false });