Skip to content

Commit 7f2c70b

Browse files
MaxLeiterMaxLeiter
committed
Add and run prettier
1 parent 63f18a7 commit 7f2c70b

15 files changed

+92
-200
lines changed

‎.github/workflows/release.yml

+3-3
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ jobs:
1212
- uses: actions/checkout@v3
1313
- uses: actions/setup-node@v3
1414
with:
15-
node-version: '16'
16-
registry-url: 'https://registry.npmjs.org'
15+
node-version: "16"
16+
registry-url: "https://registry.npmjs.org"
1717
- run: yarn
1818
- run: yarn build
1919
- run: yarn publish
2020
env:
21-
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
21+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

‎.prettierignore

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
node_modules
2+
dist
3+
dist-ssr
4+
*.local
5+
6+
# Editor directories and files
7+
.vscode/*
8+
!.vscode/extensions.json
9+
.idea
10+
.DS_Store
11+
*.suo
12+
*.ntvs*
13+
*.njsproj
14+
*.sln
15+
*.sw?
16+
17+
.vercel
18+
19+
# Custom
20+
sortablejs-*.tgz

‎.prettierrc.json

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎README.md

+14-8
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,25 @@ Note that this library is small enough (see [Sortable.vue](https://github.com/Ma
1515
- `shopify/draggable` and [`vue-shopify-dragable`](https://github.com/zjffun/vue-shopify-draggable) seemed promising but they don't supported nested components
1616

1717
## Usage
18+
1819
You can see a demo with more complete code at [https://sortablejs-vue3.maxleiter.com](https://sortablejs-vue3.maxleiter.com).
1920

2021
1. Install the package:
2122

22-
```bash
23-
yarn add sortablejs-vue3 sortablejs
24-
```
23+
```bash
24+
yarn add sortablejs-vue3 sortablejs
25+
```
2526

26-
or
27+
or
2728

28-
```bash
29-
npm install sortablejs-vue3 sortablejs
30-
```
29+
```bash
30+
npm install sortablejs-vue3 sortablejs
31+
```
3132

3233
2. Import the component in your `<script setup>` (or `<script>`):
34+
3335
```typescript
34-
import { Sortable } from 'sortablejs-vue3'
36+
import { Sortable } from "sortablejs-vue3";
3537
```
3638

3739
3. Use the component:
@@ -59,6 +61,7 @@ import { Sortable } from 'sortablejs-vue3'
5961
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`
6062

6163
### Events
64+
6265
You can listen to Sortable events by adding the listeners to the `Sortable` component. For example:
6366

6467
```typescript
@@ -81,6 +84,7 @@ You can listen to Sortable events by adding the listeners to the `Sortable` comp
8184
```
8285

8386
### Vuex
87+
8488
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:
8589

8690
```typescript
@@ -91,7 +95,9 @@ const moveItemInArray = <T>(array: T[], from: number, to: number) => {
9195

9296
onEnd(event) { moveItemInArray(store.state.items, event.oldIndex, event.newIndex) }
9397
```
98+
9499
## Development
100+
95101
1. Run `yarn` to install dependencies
96102
2. `yarn dev` will start a web server with live reloading
97103
3. `yarn build` will build the production library files

‎index.html

+4-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@
77
<title>sortablejs-vue3</title>
88

99
<!-- SEO -->
10-
<meta name="description" content="sortablejs-vue3 - A Vue 3 wrapper for SortableJS written in TypeScript." />
10+
<meta
11+
name="description"
12+
content="sortablejs-vue3 - A Vue 3 wrapper for SortableJS written in TypeScript."
13+
/>
1114
<meta name="robots" content="index, follow" />
1215
</head>
1316
<body>

‎lib/main.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
import Sortable from '../src/components/Sortable.vue'
1+
import Sortable from "../src/components/Sortable.vue";
22

3-
export { Sortable }
3+
export { Sortable };

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
"dev": "vite",
2020
"build": "vite build && vue-tsc --emitDeclarationOnly --project tsconfig.dist.json && mv dist/lib dist/types && rm -rf favicon.ico",
2121
"build:site": "vue-tsc --noEmit --project tsconfig.site.json && vite --config vite.site.config.ts build",
22-
"preview": "vite preview"
22+
"preview": "vite preview",
23+
"lint": "vite lint"
2324
},
2425
"types": "./dist/types/main.d.ts",
2526
"files": [
@@ -45,6 +46,7 @@
4546
"@types/node": "17.0.40",
4647
"@types/sortablejs": "1.13.0",
4748
"@vitejs/plugin-vue": "2.3.3",
49+
"prettier": "2.7.1",
4850
"typescript": "4.7.4",
4951
"vite": "3.0.0",
5052
"vue-tsc": "0.38.5"

‎renovate.json

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
{
22
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
3-
"extends": [
4-
"group:allNonMajor",
5-
"config:base"
6-
]
3+
"extends": ["group:allNonMajor", "config:base"]
74
}

‎src/App.vue

+12-151
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@ import HelloWorld from "./components/HelloWorld.vue";
66

77
<template>
88
<h1>SortableJS-vue3 demo</h1>
9-
<h2>Source on <a href="https://github.com/maxleiter/sortablejs-vue3">GitHub</a></h2>
9+
<h2>
10+
Source on <a href="https://github.com/maxleiter/sortablejs-vue3">GitHub</a>
11+
</h2>
1012
<ol class="instructions">
1113
<li>First run <code>yarn add sortablejs-vue3 sortablejs</code></li>
1214
<li>
@@ -55,153 +57,6 @@ import HelloWorld from "./components/HelloWorld.vue";
5557
</li>
5658
</ul>
5759
</details>
58-
<details>
59-
<summary>Code for the below demo</summary>
60-
<aside>Also available on <a href="https://github.com/MaxLeiter/sortablejs-vue3/blob/main/src/components/HelloWorld.vue">GitHub</a></aside>
61-
<pre>
62-
{{ `<script setup lang="ts">
63-
import Sortable from "./Sortable.vue";
64-
import { computed } from 'vue'
65-
import type { SortableOptions } from "sortablejs";
66-
67-
const elements = computed(() => {
68-
return [
69-
{
70-
id: '1',
71-
text: 'One',
72-
children: [
73-
{
74-
id: '1-1',
75-
text: 'One-One',
76-
children: [
77-
{
78-
id: '1-1-1',
79-
text: 'One-One-One',
80-
},
81-
{
82-
id: '1-1-2',
83-
text: 'One-One-Two',
84-
},
85-
],
86-
},
87-
{
88-
id: '1-2',
89-
text: 'One-Two',
90-
},
91-
],
92-
},
93-
{
94-
id: '2',
95-
text: 'Two'
96-
},
97-
{
98-
id: '3',
99-
text: 'Three'
100-
}
101-
]
102-
})
103-
104-
const logEvent = (evt: Event, evt2?: Event) => {
105-
if (evt2) {
106-
console.log(evt, evt2);
107-
} else {
108-
console.log(evt);
109-
}
110-
}
111-
112-
const options = computed(() => {
113-
return {
114-
draggable: '.draggable',
115-
animation: 150,
116-
ghostClass: 'ghost',
117-
dragClass: 'drag',
118-
} as SortableOptions
119-
})
120-
</script>
121-
122-
<style lang="css" scoped>
123-
main {
124-
max-width: 800px;
125-
margin: 0 auto;
126-
}
127-
128-
.draggable {
129-
background: #fff;
130-
padding: 10px;
131-
margin: 10px;
132-
border: 1px solid #ccc;
133-
cursor: move;
134-
}
135-
136-
.ghost {
137-
opacity: 0.5;
138-
background: #fff;
139-
border: 1px dashed #ccc;
140-
}
141-
142-
.drag {
143-
background: #f5f5f5;
144-
}
145-
</style>
146-
147-
<template>
148-
<main>
149-
<Sortable
150-
:list="elements"
151-
item-key="id"
152-
:options="options"
153-
@change="logEvent"
154-
@choose="logEvent"
155-
@unchoose="logEvent"
156-
@start="logEvent"
157-
@end="logEvent"
158-
@add="logEvent"
159-
@update="logEvent"
160-
@sort="logEvent"
161-
@remove="logEvent"
162-
@filter="logEvent"
163-
@move="logEvent"
164-
@clone="logEvent"
165-
>
166-
<template #item="{element, index}">
167-
<div class="draggable" :key="element.id">
168-
&#123;&#123; element.text &#125;&#125;
169-
<Sortable
170-
v-if="element.children"
171-
:list="element.children"
172-
item-key="id"
173-
:options="options"
174-
@change="logEvent"
175-
@choose="logEvent"
176-
@unchoose="logEvent"
177-
@start="logEvent"
178-
@end="logEvent"
179-
@add="logEvent"
180-
@update="logEvent"
181-
@sort="logEvent"
182-
@remove="logEvent"
183-
@filter="logEvent"
184-
@move="logEvent"
185-
@clone="logEvent"
186-
>
187-
<template #item="{element, index}">
188-
<div class="draggable" :key="element.id">
189-
&#123;&#123; element.text &#125;&#125;
190-
</div>
191-
</template>
192-
</Sortable>
193-
</div>
194-
</template>
195-
</Sortable>
196-
</main>
197-
</template>
198-
199-
<style scoped>
200-
201-
</style>
202-
`}}
203-
</pre>
204-
</details>
20560
<p>
20661
Open your console to view the events being logged while you interact with
20762
the list below.
@@ -210,7 +65,13 @@ main {
21065
<HelloWorld />
21166
<footer>
21267
<p>
213-
Made by <a href="https://twitter.com/max_leiter">@Max_Leiter</a>
68+
Made by <a href="https://twitter.com/max_leiter">@Max_Leiter</a> &mdash;
69+
Code for this page is available on
70+
<a
71+
href="https://github.com/MaxLeiter/sortablejs-vue3/blob/main/src/components/HelloWorld.vue"
72+
>
73+
GitHub
74+
</a>
21475
</p>
21576
</footer>
21677
</template>
@@ -247,7 +108,7 @@ main {
247108
}
248109
249110
#app .instructions code {
250-
font-size: .9rem;
111+
font-size: 0.9rem;
251112
}
252113
253114
#app .instructions li {
@@ -308,7 +169,7 @@ main {
308169
}
309170
310171
#app a:after {
311-
content: '';
172+
content: "";
312173
position: absolute;
313174
width: 100%;
314175
transform: scaleX(0);

‎src/components/Sortable.vue

-3
Original file line numberDiff line numberDiff line change
@@ -89,9 +89,6 @@ watch(
8989
if (options && sortable?.value) {
9090
sortable.value.options = { ...sortable.value.options, ...options };
9191
}
92-
},
93-
{
94-
deep: true,
9592
}
9693
);
9794

‎src/env.d.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/// <reference types="vite/client" />
22

3-
declare module '*.vue' {
4-
import type { DefineComponent } from 'vue'
3+
declare module "*.vue" {
4+
import type { DefineComponent } from "vue";
55
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
6-
const component: DefineComponent<{}, {}, any>
7-
export default component
6+
const component: DefineComponent<{}, {}, any>;
7+
export default component;
88
}

‎src/main.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { createApp } from 'vue'
2-
import App from './App.vue'
1+
import { createApp } from "vue";
2+
import App from "./App.vue";
33

4-
createApp(App).mount('#app')
4+
createApp(App).mount("#app");

0 commit comments

Comments
 (0)