diff --git a/.eslintrc.cjs b/.eslintrc.cjs
new file mode 100644
index 0000000000000000000000000000000000000000..c70f7f0bab7282ddf37d52ea378c03844edc89ad
--- /dev/null
+++ b/.eslintrc.cjs
@@ -0,0 +1,11 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+ root: true,
+ extends: [
+ "plugin:vue/essential",
+ "eslint:recommended",
+ "@vue/eslint-config-prettier",
+ ],
+};
diff --git a/example/.gitignore b/example/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..133da84efcfe2ef4d2580e0d6a8f91979f30b2be
--- /dev/null
+++ b/example/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/example/index.html b/example/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..030a6ff51bfc6f6adcc472f6d8c02db92ce947a8
--- /dev/null
+++ b/example/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <link rel="icon" href="/favicon.ico" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Vite App</title>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script type="module" src="/src/main.js"></script>
+ </body>
+</html>
diff --git a/example/public/favicon.ico b/example/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2
Binary files /dev/null and b/example/public/favicon.ico differ
diff --git a/example/src/App.vue b/example/src/App.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a0b9998bcde9f36f4b634b246cbe4efb7d8b780c
--- /dev/null
+++ b/example/src/App.vue
@@ -0,0 +1,13 @@
+<script setup>
+import Grid from "../../src/Grid.vue";
+import DragContainer from "../../src/DragContainer.vue";
+</script>
+
+<template>
+ <div id="app">
+ <Grid :rows="10" :cols="5"></Grid>
+ <DragContainer></DragContainer>
+ </div>
+</template>
+
+<style scoped></style>
diff --git a/example/src/assets/base.css b/example/src/assets/base.css
new file mode 100644
index 0000000000000000000000000000000000000000..71dc55a3cb5a72589496743a327c738ead3e1c83
--- /dev/null
+++ b/example/src/assets/base.css
@@ -0,0 +1,74 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+ --vt-c-white: #ffffff;
+ --vt-c-white-soft: #f8f8f8;
+ --vt-c-white-mute: #f2f2f2;
+
+ --vt-c-black: #181818;
+ --vt-c-black-soft: #222222;
+ --vt-c-black-mute: #282828;
+
+ --vt-c-indigo: #2c3e50;
+
+ --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+ --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+ --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+ --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+ --vt-c-text-light-1: var(--vt-c-indigo);
+ --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+ --vt-c-text-dark-1: var(--vt-c-white);
+ --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+ --color-background: var(--vt-c-white);
+ --color-background-soft: var(--vt-c-white-soft);
+ --color-background-mute: var(--vt-c-white-mute);
+
+ --color-border: var(--vt-c-divider-light-2);
+ --color-border-hover: var(--vt-c-divider-light-1);
+
+ --color-heading: var(--vt-c-text-light-1);
+ --color-text: var(--vt-c-text-light-1);
+
+ --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --color-background: var(--vt-c-black);
+ --color-background-soft: var(--vt-c-black-soft);
+ --color-background-mute: var(--vt-c-black-mute);
+
+ --color-border: var(--vt-c-divider-dark-2);
+ --color-border-hover: var(--vt-c-divider-dark-1);
+
+ --color-heading: var(--vt-c-text-dark-1);
+ --color-text: var(--vt-c-text-dark-2);
+ }
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ position: relative;
+ font-weight: normal;
+}
+
+body {
+ min-height: 100vh;
+ color: var(--color-text);
+ background: var(--color-background);
+ transition: color 0.5s, background-color 0.5s;
+ line-height: 1.6;
+ font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+ Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+ font-size: 15px;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
diff --git a/example/src/assets/logo.svg b/example/src/assets/logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..bc826fed80ad0c846e5ca25978776f555f4a2370
--- /dev/null
+++ b/example/src/assets/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69" xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
\ No newline at end of file
diff --git a/example/src/assets/main.css b/example/src/assets/main.css
new file mode 100644
index 0000000000000000000000000000000000000000..2c55e5037f5e3d6139735c6139cf073bba44a501
--- /dev/null
+++ b/example/src/assets/main.css
@@ -0,0 +1,30 @@
+@import "./base.css";
+
+#app {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+
+ font-weight: normal;
+}
+
+a,
+.green {
+ text-decoration: none;
+ color: hsla(160, 100%, 37%, 1);
+ transition: 0.4s;
+}
+
+@media (hover: hover) {
+ a:hover {
+ background-color: hsla(160, 100%, 37%, 0.2);
+ }
+}
+
+@media (min-width: 1024px) {
+ body {
+ display: flex;
+ flex-direction: column;
+ place-items: center;
+ }
+}
diff --git a/example/src/main.js b/example/src/main.js
new file mode 100644
index 0000000000000000000000000000000000000000..19cc590b60417cd9919eb2b8894727f0f2fecc8c
--- /dev/null
+++ b/example/src/main.js
@@ -0,0 +1,8 @@
+import Vue from "vue";
+import App from "./App.vue";
+
+import "./assets/main.css";
+
+new Vue({
+ render: (h) => h(App),
+}).$mount("#app");
diff --git a/example/vite.config.js b/example/vite.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..0994acce87b7a26d69a4778c00e670eda39d9a93
--- /dev/null
+++ b/example/vite.config.js
@@ -0,0 +1,21 @@
+import { fileURLToPath, URL } from "node:url";
+
+import { defineConfig } from "vite";
+import legacy from "@vitejs/plugin-legacy";
+import vue2 from "@vitejs/plugin-vue2";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [
+ vue2(),
+ legacy({
+ targets: ["ie >= 11"],
+ additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
+ }),
+ ],
+ resolve: {
+ alias: {
+ "@": fileURLToPath(new URL("./src", import.meta.url)),
+ },
+ },
+});
diff --git a/package.json b/package.json
index 72adff604b42527230310b622cd4ff585ef8311e..6dc80c6f4706e323f15495a1e4cdd44c880cc0d4 100644
--- a/package.json
+++ b/package.json
@@ -3,8 +3,12 @@
"version": "1.0.0",
"scripts": {
"build": "rollup -c",
+ "example:build": "vite build example",
+ "example:dev": "vite example",
+ "example:preview": "vite preview example --port 4173",
"docs:dev": "vuepress dev docs",
- "docs:build": "vuepress build docs"
+ "docs:build": "vuepress build docs",
+ "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
},
"keywords": [],
"author": "",
@@ -22,6 +26,15 @@
"rollup": "^3.12.1",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-vue": "^6.0.0",
- "vuepress": "^1.9.8"
+ "vuepress": "^1.9.8",
+ "@rushstack/eslint-patch": "^1.1.0",
+ "@vitejs/plugin-legacy": "^2.0.0",
+ "@vitejs/plugin-vue2": "^1.1.2",
+ "@vue/eslint-config-prettier": "^7.0.0",
+ "eslint": "^8.5.0",
+ "eslint-plugin-vue": "^9.0.0",
+ "prettier": "^2.5.1",
+ "terser": "^5.14.2",
+ "vite": "^3.0.2"
}
}