diff --git a/examples/solid/App.tsx b/examples/solid/App.tsx new file mode 100644 index 0000000..4df2d0b --- /dev/null +++ b/examples/solid/App.tsx @@ -0,0 +1,89 @@ +/** @jsxImportSource solid-js (This line overrides `jsx` and `jsxImportSource` in tsconfig.json: https://docs.astro.build/en/guides/typescript/) */ + +import { onMount } from 'solid-js' +import './style.css' +import { createSwapy } from '../../src/index' + +const DEFAULT = { + '1': 'a', + '3': 'c', + '4': 'd', + '2': null +} + + +function A() { + return ( + <> +
+
+
A
+
+ + ) +} + +function C() { + return ( + <> +
+
C
+
+ + ) +} + +function D() { + return ( + <> +
+
D
+
+ + ) +} + +function getItemById(itemId: 'a' | 'c' | 'd' | null) { + switch (itemId) { + case 'a': + return + case 'c': + return + case 'd': + return + } +} + + +function App() { + const slotItems: Record = localStorage.getItem('slotItem') ? JSON.parse(localStorage.getItem('slotItem')!) : DEFAULT + onMount(() => { + const container = document.querySelector('.container')! + const swapy = createSwapy(container) + swapy.onSwap(({ data }) => { + localStorage.setItem('slotItem', JSON.stringify(data.object)) + }) + }) + return ( + <> +
+
+ {getItemById(slotItems['1'])} +
+
+
+ {getItemById(slotItems['2'])} +
+
+ {getItemById(slotItems['3'])} +
+
+
+ {getItemById(slotItems['4'])} +
+
+ + ) +} + +export default App diff --git a/examples/solid/index.html b/examples/solid/index.html new file mode 100644 index 0000000..ee4480e --- /dev/null +++ b/examples/solid/index.html @@ -0,0 +1,16 @@ + + + + + + Solid Swapy Example + + + +
+ + + diff --git a/examples/solid/main.ts b/examples/solid/main.ts new file mode 100644 index 0000000..73543ac --- /dev/null +++ b/examples/solid/main.ts @@ -0,0 +1,10 @@ +/** @jsxImportSource solid-js (This line overrides `jsx` and `jsxImportSource` in tsconfig.json: https://docs.astro.build/en/guides/typescript/) */ + +/* @refresh reload */ +import { render } from 'solid-js/web' + +import App from './App' + +const root = document.getElementById('app') + +render(App, root!) diff --git a/examples/solid/style.css b/examples/solid/style.css new file mode 100644 index 0000000..32f0d12 --- /dev/null +++ b/examples/solid/style.css @@ -0,0 +1,108 @@ +* { + box-sizing: border-box; + } + + :root { + background: #242424; + } + + body, + #app { + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + width: 100%; + min-height: 100dvh; + display: flex; + justify-content: center; + align-items: center; + padding: 0; + margin: 0; + } + + .container { + display: flex; + flex-direction: column; + gap: 5px; + width: 100%; + max-width: 500px; + padding: 10px; + } + + .second-row { + display: flex; + gap: 5px; + } + + .slot { + background: #111; + flex: 1; + } + + .slot.a { + flex-basis: 150px; + height: 150px; + } + + .slot.b { + flex: 2; + } + + .second-row { + height: 100px; + } + + .slot.d { + flex-basis: 120px; + height: 120px; + } + + .item { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + color: white; + font-size: 40px; + cursor: pointer; + user-select: none; + -webkit-user-select: none; + position: relative; + } + + .item.a { + background: #b95050; + } + + .item.b { + background: #50b97f; + } + + .item.c { + background: #508db9; + } + + .item.d { + background: #b95096; + } + + [data-swapy-highlighted] { + background: #444; + } + + .handle { + position: absolute; + left: 0; + top: 0; + width: 20px; + height: 100%; + background: rgba(0, 0, 0, 0.5); + } + + .enable-input { + position: fixed; + top: 0; + left: 0; + padding: 10px; + } + \ No newline at end of file diff --git a/package.json b/package.json index 2224efa..2701209 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "@vitejs/plugin-vue": "^5.1.1", "react": "^18.3.1", "react-dom": "^18.3.1", + "solid-js": "^1.8.21", "svelte": "^4.2.18", "svelte-check": "^3.8.4", "typescript": "^5.5.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5f96dfa..3c1ea97 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,6 +32,9 @@ importers: react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) + solid-js: + specifier: ^1.8.21 + version: 1.8.21 svelte: specifier: ^4.2.18 version: 4.2.18 @@ -1021,6 +1024,19 @@ packages: engines: {node: '>=10'} hasBin: true + seroval-plugins@1.1.1: + resolution: {integrity: sha512-qNSy1+nUj7hsCOon7AO4wdAIo9P0jrzAMp18XhiOzA6/uO5TKtP7ScozVJ8T293oRIvi5wyCHSM4TrJo/c/GJA==} + engines: {node: '>=10'} + peerDependencies: + seroval: ^1.0 + + seroval@1.1.1: + resolution: {integrity: sha512-rqEO6FZk8mv7Hyv4UCj3FD3b6Waqft605TLfsCe/BiaylRpyyMC0b+uA5TJKawX3KzMrdi3wsLbCaLplrQmBvQ==} + engines: {node: '>=10'} + + solid-js@1.8.21: + resolution: {integrity: sha512-FHUGdoo7GVa1BTpGh/4UtwIISde0vSXoqNB6KFpHiTgkIY959tmCJ7NYQAWDfScBfnpoMGZR8lFz0DiwW/gFlw==} + sorcery@0.11.1: resolution: {integrity: sha512-o7npfeJE6wi6J9l0/5LKshFzZ2rMatRiCDwYeDQaOzqdzRJwALhX7mk/A/ecg6wjMu7wdZbmXfD2S/vpOg0bdQ==} hasBin: true @@ -2213,6 +2229,18 @@ snapshots: semver@7.6.3: {} + seroval-plugins@1.1.1(seroval@1.1.1): + dependencies: + seroval: 1.1.1 + + seroval@1.1.1: {} + + solid-js@1.8.21: + dependencies: + csstype: 3.1.3 + seroval: 1.1.1 + seroval-plugins: 1.1.1(seroval@1.1.1) + sorcery@0.11.1: dependencies: '@jridgewell/sourcemap-codec': 1.5.0