From 52bc55b407d98c7ba04910c3a2ceea84e8c818fd Mon Sep 17 00:00:00 2001 From: TBroz15 <78770366+TBroz15@users.noreply.github.com> Date: Sun, 1 Sep 2024 11:50:48 +0800 Subject: [PATCH] chore: add qwik example --- examples/qwik/App.tsx | 94 ++++++++++++++++++++++++++++++++++ examples/qwik/index.html | 16 ++++++ examples/qwik/main.ts | 6 +++ examples/qwik/style.css | 107 +++++++++++++++++++++++++++++++++++++++ package.json | 1 + pnpm-lock.yaml | 22 ++++++++ 6 files changed, 246 insertions(+) create mode 100644 examples/qwik/App.tsx create mode 100644 examples/qwik/index.html create mode 100644 examples/qwik/main.ts create mode 100644 examples/qwik/style.css diff --git a/examples/qwik/App.tsx b/examples/qwik/App.tsx new file mode 100644 index 0000000..ae4aa2f --- /dev/null +++ b/examples/qwik/App.tsx @@ -0,0 +1,94 @@ +/* eslint-disable @typescript-eslint/no-unnecessary-condition */ +import type { Signal } from "@builder.io/qwik"; +import { $, component$, useOnWindow, useSignal } from "@builder.io/qwik"; +import { createSwapy } from "swapy"; +import "./style.css"; + +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 ; + } +} + +const App = component$(() => { + const slotItems = useSignal() as Signal< + Record + >; + + useOnWindow( + "DOMContentLoaded", + $(() => { + if (typeof localStorage === "undefined") return; + + slotItems.value = localStorage.getItem("slotItem") + ? JSON.parse(localStorage.getItem("slotItem")!) + : DEFAULT; + + console.log(slotItems.value); + + const container = document.querySelector(".container")!; + const swapy = createSwapy(container); + swapy.onSwap(({ data }) => { + localStorage.setItem("slotItem", JSON.stringify(data.object)); + }); + }) + ); + + return ( +
+
+ {getItemById(slotItems.value?.["1"])} +
+
+
+ {getItemById(slotItems.value?.["2"])} +
+
+ {getItemById(slotItems.value?.["3"])} +
+
+
+ {getItemById(slotItems.value?.["4"])} +
+
+ ); +}); + +export default App; diff --git a/examples/qwik/index.html b/examples/qwik/index.html new file mode 100644 index 0000000..ac12b1d --- /dev/null +++ b/examples/qwik/index.html @@ -0,0 +1,16 @@ + + + + + + React Swapy Example + + + +
+ + + diff --git a/examples/qwik/main.ts b/examples/qwik/main.ts new file mode 100644 index 0000000..09f8fdd --- /dev/null +++ b/examples/qwik/main.ts @@ -0,0 +1,6 @@ +import { render } from "@builder.io/qwik"; +import App from "./App"; + +const root = document.getElementById("app")!; + +render(root!, App); diff --git a/examples/qwik/style.css b/examples/qwik/style.css new file mode 100644 index 0000000..a6683bd --- /dev/null +++ b/examples/qwik/style.css @@ -0,0 +1,107 @@ +* { + 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; +} diff --git a/package.json b/package.json index e62eb93..91bc993 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "preview": "vite preview" }, "devDependencies": { + "@builder.io/qwik": "^1.8.0", "@sveltejs/vite-plugin-svelte": "^3.1.2", "@tsconfig/svelte": "^5.0.4", "@types/react": "^18.3.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1e0d02f..81b1ec1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: devDependencies: + '@builder.io/qwik': + specifier: ^1.8.0 + version: 1.8.0 '@sveltejs/vite-plugin-svelte': specifier: ^3.1.2 version: 3.1.2(svelte@4.2.19)(vite@5.4.2) @@ -150,6 +153,11 @@ packages: resolution: {integrity: sha512-zQ1ijeeCXVEh+aNL0RlmkPkG8HUiDcU2pzQQFjtbntgAczRASFzj4H+6+bV+dy1ntKR14I/DypeuRG1uma98iQ==} engines: {node: '>=6.9.0'} + '@builder.io/qwik@1.8.0': + resolution: {integrity: sha512-HM7X6h1NCfhyHt15NZYTF2PaNQmuc1gW6PzTzw2bNhpgBuD/RR/nE79HBXq13djQg6hHjaZpToJySToT9Q3u6w==} + engines: {node: '>=16.8.0 <18.0.0 || >=18.11'} + hasBin: true + '@esbuild/aix-ppc64@0.21.5': resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==} engines: {node: '>=12'} @@ -1330,6 +1338,20 @@ snapshots: '@babel/helper-validator-identifier': 7.24.7 to-fast-properties: 2.0.0 + '@builder.io/qwik@1.8.0': + dependencies: + csstype: 3.1.3 + vite: 5.4.2 + transitivePeerDependencies: + - '@types/node' + - less + - lightningcss + - sass + - sass-embedded + - stylus + - sugarss + - terser + '@esbuild/aix-ppc64@0.21.5': optional: true