chore: first commit

.editorconfig

@@ -0,0 +1,13 @@
+ editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.yml

@@ -0,0 +1,18 @@
+env:
+  es2020: true
+extends:
+  - eslint:recommended
+  - plugin:@typescript-eslint/recommended
+parserOptions:
+  ecmaVersion: latest
+  parser: "@typescript-eslint/parser"
+  sourceType: module
+plugins:
+  - "@typescript-eslint"
+rules:
+  no-constant-condition: off
+  "@typescript-eslint/no-explicit-any": off
+ignorePatterns:
+  - node_modules
+  - dist
+  - commitlint.config.js

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: [formkit]

.github/workflows/ci.yml

@@ -0,0 +1,49 @@
+name: Drag and drop tests
+on: [push, workflow_dispatch]
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - name: Setup
+        run: npm i -g @antfu/ni
+
+      - name: Install
+        run: nci
+
+      - name: Lint
+        run: nr lint
+
+  playwright:
+    name: "Playwright tests"
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - run: pnpm install --frozen-lockfile
+      - name: Build Nuxt
+        run: cd docs && pnpm install && cd ..
+      - name: Install Playwright
+        run: pnpm exec playwright install chromium
+      - name: Spin up dev
+        run: pnpm dev &
+      - name: Run Playwright tests
+        run: npx playwright test vue
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.github/workflows/release.yml

@@ -0,0 +1,24 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+
+      - run: npx changelogithub
+        env:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-present FormKit, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,136 @@
+# DragAndDrop for Vue
+
+# 💻 Install
+
+via npm
+
+```sh
+npm install @formkit/drag-and-drop
+```
+
+or via yarn
+
+```sh
+yarn add @formkit/drag-and-drop
+```
+
+or via pnpm
+
+```sh
+pnpm install @formkit/drag-and-drop
+```
+
+# Intro
+
+# 🕹 Usage
+
+## Sortability
+
+The two required arguments for `dragAndDrop` are `parent` and `values`. Parent represents the parent element for the items that are intended to be made draggable. The parent can be passed either as a template ref or as an HTML element. Values is the array of values that will be iterated over in the template script. The values must be type of `Ref<Array<any>>`.
+
+Important notes:
+
+- Only the immediate children of `myList` will become draggable.
+- The values you are iterating over, in `myListValues`, must be keyed with unique values in order for Vue to properly rerender when sorting occurs.
+- You do not necessarily need to pass a ref to the parent key of `dragAndDrop`. You can call dragAndDrop by instead passing an HTML element.
+
+```javascript
+<script setup>
+import { dragAndDrop } from '@formkit/dragAndDrop';
+
+const myList = ref(null)
+const myListValues = ref(['Apple', 'Banana', 'Orange'])
+
+dragAndDrop({
+  parent: myList,
+  values: myListValues
+})
+</script>
+```
+
+```html
+<template>
+  <div ref="myList">
+    <div v-for="item in myListValues" :key="item">
+      <div>{{ item }}</div>
+    </div>
+  </div>
+</template>
+```
+
+By default, all immediate children of a parent will become draggable. To filter which children become draggable, assign the draggable property of settings.
+
+```javascript
+<script setup>
+import { dragAndDrop } from '@formkit/dragAndDrop';
+
+const myList = ref(null)
+const myListValues = ref(['Apple', 'Banana', 'Orange'])
+
+dragAndDrop({
+  parent: myList,
+  values: myListValues,
+  settings: {
+    draggable: (node: HTMLElement) => {
+      return child.classList.contains('item')
+    }
+  }
+})
+</script>
+```
+
+```html
+<template>
+  <div ref="myList">
+    <h2>My List</h2>
+    <div v-for="item in myListValues" :key="item" class="item">
+      <div>{{ item }}</div>
+    </div>
+  </div>
+</template>
+```
+
+## Transferability
+
+Additionally, if we specify two separate lists, they will allow both sortability (within the list itself) as well as transferability between each other. Notice that instead of passing a single object to `dragAndDrop`, we are instead passing an array of objects.
+
+Important notes:
+
+- The items that are transferred from their respective parent lists will be hidden when dragging the element over a new list. The dragged element's value will not be removed from the original list until a drop occurs. Why? In the case that a user "drops" their dragged item off the browser, the `dragend` event will not fire if the dragged element is removed from its parent. Setting these transferred nodes to `display: none` circuments that issue.
+
+```javascript
+<script setup>
+import { dragAndDrop } from '@formkit/dragAndDrop';
+
+const list1 = ref(null)
+const list2 = ref(null)
+const list1Values = ref(['Apple', 'Banana', 'Orange'])
+const list2Values = ref(['Strawberry', 'Pear'])
+
+dragAndDrop([
+  {
+    parent: list1,
+    values: list1Values
+  },
+  {
+    parent: list2,
+    values: list2Values
+  }
+])
+</script>
+```
+
+```html
+<template>
+  <div>
+    <div ref="list1">
+      <div v-for="item in list1Values" :key="item">
+        <div>{{ item }}</div>
+      </div>
+    </div>
+    <div ref="list2">
+      <div v-for="item in list2Values" :key="item">{{ item }}</div>
+    </div>
+  </div>
+</template>
+```

docs/.gitignore

@@ -0,0 +1,12 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist
+.DS_Store
+/test-results/
+/playwright-report/
+/playwright/.cache/

docs/app.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="main-layout">
+    <div id="page-container">
+      <NuxtPage />
+    </div>
+  </div>
+</template>

docs/assets/css/main.css

@@ -0,0 +1,5 @@
+@import "modules/_fonts";
+@import "modules/_typography";
+@import "modules/_structure";
+@import "modules/_dnd";
+@import "variables";

docs/assets/css/modules/_dnd.css

@@ -0,0 +1,7 @@
+.dnd-hidden {
+  display: none;
+}
+
+.destination {
+  opacity: 0.5;
+}

docs/assets/css/modules/_fonts.css

@@ -0,0 +1,38 @@
+@font-face {
+  font-family: "silka";
+  src: local("silka"),
+    url("../../../fonts/silka/silka-medium-webfont.eot?#iefix")
+      format("embedded-opentype"),
+    url("../../../fonts/silka/silka-medium-webfont.woff2") format("woff2"),
+    url("../../../fonts/silka/silka-medium-webfont.woff") format("woff"),
+    url("../../../fonts/silka/silka-medium-webfont.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "silka";
+  src: local("silka"),
+    url("../../../fonts/silka/silka-regular-webfont.eot?#iefix")
+      format("embedded-opentype"),
+    url("../../../fonts/silka/silka-regular-webfont.woff2") format("woff2"),
+    url("../../../fonts/silka/silka-regular-webfont.woff") format("woff"),
+    url("../../../fonts/silka/silka-regular-webfont.ttf") format("truetype");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "silka";
+  src: local("silka"),
+    url("../../../fonts/silka/silka-semibold-webfont.eot?#iefix")
+      format("embedded-opentype"),
+    url("../../../fonts/silka/silka-semibold-webfont.woff2") format("woff2"),
+    url("../../../fonts/silka/silka-semibold-webfont.woff") format("woff"),
+    url("../../../fonts/silka/silka-semibold-webfont.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}

docs/assets/css/modules/_structure.css

@@ -0,0 +1,19 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  -webkit-text-size-adjust: 100%;
+}
+
+* {
+  box-sizing: border-box;
+
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+}
+
+.main-layout {
+  padding: 0 2em;
+}