Merge pull request #69 from kimuraz/dev

v2.0.0

dist/composables/useDraggable.d.ts

@@ -0,0 +1,13 @@
+import { DraggableOptions } from '@interactjs/actions/drag/plugin';
+import { InteractContext } from './useInteractContext';
+export interface IPosition {
+    x: number;
+    y: number;
+}
+declare const useDraggable: (context: InteractContext, interactOptions?: DraggableOptions) => {
+    init: () => void;
+    position: import('vue').Ref<import('./useInteractContext').IPosition>;
+    draggableOptions: import('vue').WritableComputedRef<DraggableOptions>;
+    isDragging: import('vue').Ref<boolean>;
+};
+export default useDraggable;

dist/composables/useInteractContext.d.ts

@@ -0,0 +1,19 @@
+import { Interactable } from '@interactjs/types';
+import { default as interact } from 'interactjs';
+import { Ref } from 'vue';
+export interface IPosition {
+    x: number;
+    y: number;
+}
+export interface ISizeData {
+    width: number;
+    height: number;
+}
+export interface InteractContext {
+    interactable: Ref<Interactable | null>;
+    interact: typeof interact;
+    position: Ref<IPosition>;
+    size: Ref<ISizeData>;
+}
+declare const useInteractContext: (elRef: Ref) => InteractContext;
+export default useInteractContext;

dist/composables/useResizable.d.ts

@@ -0,0 +1,10 @@
+import { ResizableOptions } from '@interactjs/actions/resize/plugin';
+import { InteractContext } from './useInteractContext';
+declare const useResizable: (context: InteractContext, interactOptions: ResizableOptions) => {
+    init: () => void;
+    resizeData: import('vue').Ref<import('./useInteractContext').ISizeData>;
+    position: import('vue').Ref<import('./useInteractContext').IPosition>;
+    resizableOptions: import('vue').WritableComputedRef<ResizableOptions>;
+    isResizing: import('vue').Ref<boolean>;
+};
+export default useResizable;

dist/index.d.ts

@@ -0,0 +1,11 @@
+import { Plugin } from 'vue';
+import { default as useInteractContext } from './composables/useInteractContext';
+import { default as useDraggable } from './composables/useDraggable';
+import { default as useResizable } from './composables/useResizable';
+export interface IVueInteractOptions {
+    installInject?: boolean;
+    installGlobalProperty?: boolean;
+}
+declare const VueInteract: Plugin;
+export { useInteractContext, useDraggable, useResizable };
+export default VueInteract;

docs/.vuepress/client.ts

@@ -0,0 +1,12 @@
+import { defineClientConfig } from '@vuepress/client';
+import DemoUseDraggable from '../guide/composables/components/DemoUseDraggable.vue';
+import DemoUseResizable from '../guide/composables/components/DemoUseResizable.vue';
+import DemoUseDragAndResize from '../guide/composables/components/DemoUseDragAndResize.vue';
+
+export default defineClientConfig({
+  enhance({ app }) {
+    app.component('DemoUseDraggable', DemoUseDraggable);
+    app.component('DemoUseResizable', DemoUseResizable);
+    app.component('DemoUseDragAndResize', DemoUseDragAndResize);
+  },
+});

docs/.vuepress/config.ts

@@ -1,11 +1,18 @@
-import { defineUserConfig, defaultTheme } from "vuepress";
+import { defineUserConfig } from "vuepress";
+import { defaultTheme } from '@vuepress/theme-default';
+import { viteBundler } from '@vuepress/bundler-vite';
+import navbar from './navbar';
+import sidebar from './sidebar';
 
 export default defineUserConfig({
   lang: "en-US",
   title: "VueInteract",
   description: "VueInteract is a Vue 3 wrapper for Interact.js",
   theme: defaultTheme({
-    logo: '/assets/VueInteract.svg',
+    navbar,
+    sidebar,
+    repo: 'https://github.com/kimuraz/vue-interact',
   }),
+  bundler: viteBundler(),
 });
 

docs/.vuepress/navbar.ts

@@ -0,0 +1,5 @@
+export default [
+  { text: 'Home', link: '/' },
+  { text: 'Getting Started', link: '/guide/getting_started.html' },
+  { text: 'Composables', link: '/guide/composables/index.html' },
+];

docs/.vuepress/sidebar.ts

@@ -0,0 +1,18 @@
+export default [
+  {
+    text: 'Home',
+    link: '/'
+  },
+  {
+    text: 'Getting Started',
+    link: '/guide/getting_started.html'
+  },
+  {
+    text: 'Composables',
+    link: '/guide/composables/index.html',
+    children: [
+      { text: 'useDraggable', link: '/guide/composables/use_draggable.html' },
+      { text: 'useResizable', link: '/guide/composables/use_resizable.html' },
+    ],
+  },
+];

docs/guide/composables/components/DemoUseDragAndResize.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { nextTick, onMounted, ref } from 'vue';
+import { useInteractContext, useDraggable, useResizable } from 'vue-interact';
+
+const interactableTarget = ref(null);
+
+const context = useInteractContext(interactableTarget);
+const { init, position } = useDraggable(context);
+const { init: initResize, resizeData } = useResizable(context);
+
+onMounted(() => {
+  nextTick(() => {
+    init();
+    initResize();
+  });
+});
+
+const reset = () => {
+  position.value.x = 0;
+  position.value.y = 0;
+  resizeData.value.width = 100;
+  resizeData.value.height = 100;
+}
+</script>
+
+<template>
+  <div class="container">
+    {{ position }}
+    <div ref="interactableTarget" style="width: 100px; height: 100px; background-color: #29e;">
+    </div>
+
+    <button class="reset-btn" @click="reset">Reset</button>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  height: 30vh;
+  border: 2px solid #29e;
+  position: relative;
+}
+
+.reset-btn {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+</style>

docs/guide/composables/components/DemoUseDraggable.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { nextTick, onMounted, ref } from 'vue';
+import { useInteractContext, useDraggable } from 'vue-interact';
+
+const interactableTarget = ref(null);
+
+const context = useInteractContext(interactableTarget);
+const { init, position } = useDraggable(context);
+
+onMounted(() => {
+  nextTick(() => {
+    init();
+  });
+});
+
+const reset = () => {
+  position.value.x = 0;
+  position.value.y = 0;
+}
+</script>
+
+<template>
+  <div class="container">
+    {{ position }}
+    <div ref="interactableTarget" style="width: 100px; height: 100px; background-color: #29e;">
+    </div>
+
+    <button class="reset-btn" @click="reset">Reset</button>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  height: 30vh;
+  border: 2px solid #29e;
+  position: relative;
+}
+
+.reset-btn {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+</style>

docs/guide/composables/components/DemoUseResizable.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { nextTick, onMounted, ref } from 'vue';
+import { useInteractContext, useResizable } from 'vue-interact';
+
+const interactableTarget = ref(null);
+
+const context = useInteractContext(interactableTarget);
+const { init, position, resizeData } = useResizable(context);
+
+onMounted(() => {
+  nextTick(() => {
+    init();
+  });
+});
+
+const reset = () => {
+  resizeData.value.width = 100;
+  resizeData.value.height = 100;
+  position.value.x = 0;
+  position.value.y = 0;
+}
+</script>
+
+<template>
+  <div class="container">
+    {{ position }}
+    <div ref="interactableTarget" style="width: 100px; height: 100px; background-color: #29e;">
+    </div>
+
+    <button class="reset-btn" @click="reset">Reset</button>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  height: 30vh;
+  border: 2px solid #29e;
+  position: relative;
+}
+
+.reset-btn {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+</style>

docs/guide/composables/index.md

@@ -0,0 +1,51 @@
+### Composables
+
+Currently the library provides the following composables:
+
+```ts
+import { useInteractContext } from 'vue-interact';
+import { useDraggable } from 'vue-interact';
+import { useResizable } from 'vue-interact';
+```
+
+:warning: **Important**: The `useInteractContext` must be used before the other composables.
+
+The `useInteractContext` is an entry point for the other composables. It provides the `interactable` object which is used by the other composables.
+
+Also it creates a single context to share among the other composables so you can use them together on the same element ref.
+
+On this example the position and the resizeData are actually refs declared on the context and redirected by `useDraggable` and `useResizable` respectively.
+
+```ts
+import { nextTick, onMounted, ref } from 'vue';
+import { useInteractContext, useDraggable, useResizable } from 'vue-interact';
+
+const interactableTarget = ref(null);
+
+const context = useInteractContext(interactableTarget);
+
+const { init, position } = useDraggable(context);
+const { init: initResize, resizeData } = useResizable(context);
+
+onMounted(() => {
+    nextTick(() => {
+        init();
+        initResize();
+    });
+});
+```
+
+On template:
+
+```html
+<div
+    ref="interactableTarget"
+    style="width: 100px; height: 100px; background-color: #29e;"
+></div>
+```
+
+**Note**: Due to the dependency of having the element on the DOM to initialize the interactable object, it is recommended to use the `onMounted` lifecycle hook to initialize the composables.
+
+#### Demo
+
+<DemoUseDragAndResize/>

docs/guide/composables/use_draggable.md

@@ -1 +1,5 @@
 # useDraggable
+
+<DemoUseDraggable />
+
+@[code{1-29}](./components/DemoUseDraggable.vue)

docs/guide/composables/use_resizable.md

@@ -1 +1,5 @@
-# useDraggable
+# useResizable
+
+<DemoUseResizable/>
+
+@[code](./components/DemoUseResizable.vue)

docs/guide/getting_started.md

@@ -4,13 +4,10 @@ This plugin is compatible with `VueJS >= 3`
 
 The version is currently using InteractJS `1.10.x`
 
-
 ## Adding it to your project
 
 ```bash
-
-$ npm i vue-interact
-
+npm i vue-interact
 ```
 
 ## Using the plugin
@@ -29,8 +26,8 @@ app.use(VueInteract, {
 
 ```ts
 export interface IVueInteractOptions {
-  installInject?: boolean;
-  installGlobalProperty?: boolean;
+    installInject?: boolean;
+    installGlobalProperty?: boolean;
 }
 ```
 
@@ -42,10 +39,4 @@ Both instances are merely the default InteractJS instance.
 
 > Check the documentation for the InteractJS instance [here](https://interactjs.io/docs/interactjs/).
 
-### Composables
-
-```ts
-import { useDraggable } from 'vue-interact';
-```
-
-> Check the documentation for composables [here](/guide/composables/use_draggable.md)
+> Check the documentation for composables [here](/guide/composables/use_draggable.html)