From 4646ce14e4256a524781667299967b07ea74dd27 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Fri, 3 Feb 2023 20:38:41 +0100
Subject: [PATCH] Add example project
---
.eslintrc.cjs | 11 ++++++
example/.gitignore | 27 +++++++++++++
example/index.html | 13 +++++++
example/public/favicon.ico | Bin 0 -> 4286 bytes
example/src/App.vue | 13 +++++++
example/src/assets/base.css | 74 ++++++++++++++++++++++++++++++++++++
example/src/assets/logo.svg | 1 +
example/src/assets/main.css | 30 +++++++++++++++
example/src/main.js | 8 ++++
example/vite.config.js | 21 ++++++++++
package.json | 17 ++++++++-
11 files changed, 213 insertions(+), 2 deletions(-)
create mode 100644 .eslintrc.cjs
create mode 100644 example/.gitignore
create mode 100644 example/index.html
create mode 100644 example/public/favicon.ico
create mode 100644 example/src/App.vue
create mode 100644 example/src/assets/base.css
create mode 100644 example/src/assets/logo.svg
create mode 100644 example/src/assets/main.css
create mode 100644 example/src/main.js
create mode 100644 example/vite.config.js
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
new file mode 100644
index 0000000..c70f7f0
--- /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 0000000..133da84
--- /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 0000000..030a6ff
--- /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
GIT binary patch
literal 4286
zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj
zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56
zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy
zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei
z@g6Xq-pDoPl=MANPiR7%172VA%r)kev<ISBgE$F{SFy+(=9Z)f)De0Se}ZDZW}Z3B
zElCeVrw;K0Fdl_Cg=gZOFXXc3pL)Q05CAuT+XucQ<8g~3dteP~|7s7c6QYP;fy;mF
zMN;>tV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX
zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm
zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp=
zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8
zx!=3<4seY*%=OlbCbcae?<QnEgvj4i?s}Yk=qA2z`-^*<eK3c)MS4JOdbsTQEOa0)
z0NWqlna2rzs>5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO
z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3
z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD
zsW0Ab)ZK@0cIW%W7<X*Er!BfRbvU93$DH%#v6dRt^6HBxz1xBNHx=$&_Gv<&J}Ljk
zJN<Fzx(`Oe@KgQ0F$<14=XV#WK`o#6Ku>z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6
z={Xwx{T<?%b6i9IjI)Ls)S{-*mq<@~R{?$}ZKjf;^k75i_}(2MXt}^SEBVg7AI@28
zo_uPg2V)_e-`2Ois=PYoe%9u*n9({PFR)OnHJPi{dNx>Kx<YG`4QQ>D#iCLfl2<BD
h7L=-;Q>vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S
literal 0
HcmV?d00001
diff --git a/example/src/App.vue b/example/src/App.vue
new file mode 100644
index 0000000..a0b9998
--- /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 0000000..71dc55a
--- /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 0000000..bc826fe
--- /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 0000000..2c55e50
--- /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 0000000..19cc590
--- /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 0000000..0994acc
--- /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 72adff6..6dc80c6 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"
}
}
--
GitLab