TahaSh · TBroz15 · Sep 1, 2024 · Sep 15, 2024
diff --git a/examples/qwik/App.tsx 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 (
+    <div class="item a" data-swapy-item="a">
+      <div class="handle" data-swapy-handle></div>
+      <div>A</div>
+    </div>
+  );
+}
+
+function C() {
+  return (
+    <div class="item c" data-swapy-item="c">
+      <div>C</div>
+    </div>
+  );
+}
+
+function D() {
+  return (
+    <div class="item d" data-swapy-item="d">
+      <div>D</div>
+    </div>
+  );
+}
+
+function getItemById(itemId: "a" | "c" | "d" | null) {
+  switch (itemId) {
+    case "a":
+      return <A />;
+    case "c":
+      return <C />;
+    case "d":
+      return <D />;
+  }
+}
+
+const App = component$(() => {
+  const slotItems = useSignal() as Signal<
+    Record<string, "a" | "c" | "d" | null>
+  >;
+
+  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 (
+    <div class="container">
+      <div class="slot a" data-swapy-slot="1">
+        {getItemById(slotItems.value?.["1"])}
+      </div>
+      <div class="second-row">
+        <div class="slot b" data-swapy-slot="2">
+          {getItemById(slotItems.value?.["2"])}
+        </div>
+        <div class="slot c" data-swapy-slot="3">
+          {getItemById(slotItems.value?.["3"])}
+        </div>
+      </div>
+      <div class="slot d" data-swapy-slot="4">
+        {getItemById(slotItems.value?.["4"])}
+      </div>
+    </div>
+  );
+});
+
+export default App;
diff --git a/examples/qwik/index.html b/examples/qwik/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Swapy Example</title>
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="./main.ts" type="module"></script>
+  </body>
+</html>
diff --git a/examples/qwik/main.ts 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
@@ -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
@@ -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.5",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml