Add and run prettier

MaxLeiter · MaxLeiter · commit 7f2c70b2c616 · 2022-07-28T10:52:11.000-07:00
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -12,10 +12,10 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '16'
-          registry-url: 'https://registry.npmjs.org'
+          node-version: "16"
+          registry-url: "https://registry.npmjs.org"
       - run: yarn
       - run: yarn build
       - run: yarn publish
     env:
-      NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,20 @@
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.vercel
+
+# Custom
+sortablejs-*.tgz
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1 @@
+{}
diff --git a/README.md b/README.md
@@ -15,23 +15,25 @@ Note that this library is small enough (see [Sortable.vue](https://github.com/Ma
 - `shopify/draggable` and [`vue-shopify-dragable`](https://github.com/zjffun/vue-shopify-draggable) seemed promising but they don't supported nested components
 
 ## Usage
+
 You can see a demo with more complete code at [https://sortablejs-vue3.maxleiter.com](https://sortablejs-vue3.maxleiter.com).
 
 1. Install the package:
 
-  ```bash
-  yarn add sortablejs-vue3 sortablejs
-  ```
+```bash
+yarn add sortablejs-vue3 sortablejs
+```
 
-  or
+or
 
-  ```bash
-  npm install sortablejs-vue3 sortablejs
-  ```
+```bash
+npm install sortablejs-vue3 sortablejs
+```
 
 2. Import the component in your `<script setup>` (or `<script>`):
+
 ```typescript
-import { Sortable } from 'sortablejs-vue3'
+import { Sortable } from "sortablejs-vue3";
 ```
 
 3. Use the component:
@@ -59,6 +61,7 @@ import { Sortable } from 'sortablejs-vue3'
 5. The `tag` prop is an optional prop, it's the HTML node type of the element that creates an outer element for the included slot. the default value is `div`
 
 ### Events
+
 You can listen to Sortable events by adding the listeners to the `Sortable` component. For example:
 
 ```typescript
@@ -81,6 +84,7 @@ You can listen to Sortable events by adding the listeners to the `Sortable` comp
 ```
 
 ### Vuex
+
 No changes are necessary to work with Vuex. Just pass `store.state.item` as your list. To modify your data you need to manually listen to the events and calculate the new position with `event.oldIndex` and `event.newIndex` with something like the following:
 
 ```typescript
@@ -91,7 +95,9 @@ const moveItemInArray = <T>(array: T[], from: number, to: number) => {
 
 onEnd(event) { moveItemInArray(store.state.items, event.oldIndex, event.newIndex) }
 ```
+
 ## Development
+
 1. Run `yarn` to install dependencies
 2. `yarn dev` will start a web server with live reloading
 3. `yarn build` will build the production library files
diff --git a/index.html b/index.html
@@ -7,7 +7,10 @@
     <title>sortablejs-vue3</title>
 
     <!-- SEO -->
-    <meta name="description" content="sortablejs-vue3 - A Vue 3 wrapper for SortableJS written in TypeScript." />
+    <meta
+      name="description"
+      content="sortablejs-vue3 - A Vue 3 wrapper for SortableJS written in TypeScript."
+    />
     <meta name="robots" content="index, follow" />
   </head>
   <body>
diff --git a/lib/main.ts b/lib/main.ts
@@ -1,3 +1,3 @@
-import Sortable from '../src/components/Sortable.vue'
+import Sortable from "../src/components/Sortable.vue";
 
-export { Sortable }
+export { Sortable };
diff --git a/package.json b/package.json
@@ -19,7 +19,8 @@
     "dev": "vite",
     "build": "vite build && vue-tsc --emitDeclarationOnly --project tsconfig.dist.json && mv dist/lib dist/types && rm -rf favicon.ico",
     "build:site": "vue-tsc --noEmit --project tsconfig.site.json && vite --config vite.site.config.ts build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "vite lint"
   },
   "types": "./dist/types/main.d.ts",
   "files": [
@@ -45,6 +46,7 @@
     "@types/node": "17.0.40",
     "@types/sortablejs": "1.13.0",
     "@vitejs/plugin-vue": "2.3.3",
+    "prettier": "2.7.1",
     "typescript": "4.7.4",
     "vite": "3.0.0",
     "vue-tsc": "0.38.5"
diff --git a/renovate.json b/renovate.json
@@ -1,7 +1,4 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "group:allNonMajor",
-    "config:base"
-  ]
+  "extends": ["group:allNonMajor", "config:base"]
 }
diff --git a/src/App.vue b/src/App.vue
@@ -6,7 +6,9 @@ import HelloWorld from "./components/HelloWorld.vue";
 
 <template>
   <h1>SortableJS-vue3 demo</h1>
-  <h2>Source on <a href="https://github.com/maxleiter/sortablejs-vue3">GitHub</a></h2>
+  <h2>
+    Source on <a href="https://github.com/maxleiter/sortablejs-vue3">GitHub</a>
+  </h2>
   <ol class="instructions">
     <li>First run <code>yarn add sortablejs-vue3 sortablejs</code></li>
     <li>
@@ -55,153 +57,6 @@ import HelloWorld from "./components/HelloWorld.vue";
       </li>
     </ul>
   </details>
-  <details>
-    <summary>Code for the below demo</summary>
-    <aside>Also available on <a href="https://github.com/MaxLeiter/sortablejs-vue3/blob/main/src/components/HelloWorld.vue">GitHub</a></aside>
-    <pre>
-{{ `<script setup lang="ts">
-import Sortable from "./Sortable.vue";
-import { computed } from 'vue'
-import type { SortableOptions } from "sortablejs";
-
-const elements = computed(() => {
-    return [
-        {
-            id: '1',
-            text: 'One',
-            children: [
-                {
-                    id: '1-1',
-                    text: 'One-One',
-                    children: [
-                        {
-                            id: '1-1-1',
-                            text: 'One-One-One',
-                        },
-                        {
-                            id: '1-1-2',
-                            text: 'One-One-Two',
-                        },
-                    ],
-                },
-                {
-                    id: '1-2',
-                    text: 'One-Two',
-                },
-            ],
-        },
-        {
-            id: '2',
-            text: 'Two'
-        },
-        {
-            id: '3',
-            text: 'Three'
-        }
-    ]
-})
-
-const logEvent = (evt: Event, evt2?: Event) => {
-    if (evt2) {
-        console.log(evt, evt2);
-    } else {
-        console.log(evt);
-    }
-}
-
-const options = computed(() => {
-  return {
-    draggable: '.draggable',
-    animation: 150,
-    ghostClass: 'ghost',
-    dragClass: 'drag',
-  } as SortableOptions
-})
-</script>
-
-<style lang="css" scoped>
-main {
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-.draggable {
-  background: #fff;
-  padding: 10px;
-  margin: 10px;
-  border: 1px solid #ccc;
-  cursor: move;
-}
-
-.ghost {
-  opacity: 0.5;
-  background: #fff;
-  border: 1px dashed #ccc;
-}
-
-.drag {
-  background: #f5f5f5;
-}
-</style>
-
-<template>
-  <main>
-    <Sortable
-      :list="elements"
-      item-key="id"
-      :options="options"
-      @change="logEvent"
-      @choose="logEvent"
-      @unchoose="logEvent"
-      @start="logEvent"
-      @end="logEvent"
-      @add="logEvent"
-      @update="logEvent"
-      @sort="logEvent"
-      @remove="logEvent"
-      @filter="logEvent"
-      @move="logEvent"
-      @clone="logEvent"
-    >
-      <template #item="{element, index}">
-        <div class="draggable" :key="element.id">
-          &#123;&#123; element.text &#125;&#125;
-          <Sortable
-            v-if="element.children"
-            :list="element.children"
-            item-key="id"
-            :options="options"
-            @change="logEvent"
-            @choose="logEvent"
-            @unchoose="logEvent"
-            @start="logEvent"
-            @end="logEvent"
-            @add="logEvent"
-            @update="logEvent"
-            @sort="logEvent"
-            @remove="logEvent"
-            @filter="logEvent"
-            @move="logEvent"
-            @clone="logEvent"
-          >
-            <template #item="{element, index}">
-              <div class="draggable" :key="element.id">
-               &#123;&#123; element.text &#125;&#125;
-              </div>
-            </template>
-          </Sortable>
-        </div>
-      </template>
-    </Sortable>
-  </main>
-</template>
-
-<style scoped>
-
-</style>
-`}}
-  </pre>
-  </details>
   <p>
     Open your console to view the events being logged while you interact with
     the list below.
@@ -210,7 +65,13 @@ main {
   <HelloWorld />
   <footer>
     <p>
-      Made by <a href="https://twitter.com/max_leiter">@Max_Leiter</a>
+      Made by <a href="https://twitter.com/max_leiter">@Max_Leiter</a> &mdash;
+      Code for this page is available on
+      <a
+        href="https://github.com/MaxLeiter/sortablejs-vue3/blob/main/src/components/HelloWorld.vue"
+      >
+        GitHub
+      </a>
     </p>
   </footer>
 </template>
@@ -247,7 +108,7 @@ main {
 }
 
 #app .instructions code {
-  font-size: .9rem;
+  font-size: 0.9rem;
 }
 
 #app .instructions li {
@@ -308,7 +169,7 @@ main {
 }
 
 #app a:after {
-  content: '';
+  content: "";
   position: absolute;
   width: 100%;
   transform: scaleX(0);
diff --git a/src/components/Sortable.vue b/src/components/Sortable.vue
@@ -89,9 +89,6 @@ watch(
     if (options && sortable?.value) {
       sortable.value.options = { ...sortable.value.options, ...options };
     }
-  },
-  {
-    deep: true,
   }
 );
 
diff --git a/src/env.d.ts b/src/env.d.ts
@@ -1,8 +1,8 @@
 /// <reference types="vite/client" />
 
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>
-  export default component
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 }
diff --git a/src/main.ts b/src/main.ts
@@ -1,4 +1,4 @@
-import { createApp } from 'vue'
-import App from './App.vue'
+import { createApp } from "vue";
+import App from "./App.vue";
 
-createApp(App).mount('#app')
+createApp(App).mount("#app");
diff --git a/vite.config.ts b/vite.config.ts
diff --git a/vite.site.config.ts b/vite.site.config.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,4 @@`
`1`	`1`	`{`
`2`	`2`	`"$schema": "https://docs.renovatebot.com/renovate-schema.json",`
`3`		`- "extends": [`
`4`		`- "group:allNonMajor",`
`5`		`- "config:base"`
`6`		`- ]`
	`3`	`+ "extends": ["group:allNonMajor", "config:base"]`
`7`	`4`	`}`
Original file line number	Diff line number	Diff line change
`@@ -89,9 +89,6 @@ watch(`
`89`	`89`	`if (options && sortable?.value) {`
`90`	`90`	`sortable.value.options = { ...sortable.value.options, ...options };`
`91`	`91`	`}`
`92`		`- },`
`93`		`- {`
`94`		`- deep: true,`
`95`	`92`	`}`
`96`	`93`	`);`
`97`	`94`