search

sveltecult / franken-ui

Franken UI is an HTML-first, open-source library of UI components that works as a standalone or as a Tailwind CSS plugin. It is compatible with UIkit 3. The design is influenced by shadcn/ui.
https://franken-ui.dev
MIT License
1.06k stars 12 forks source link

Sortable issue #3

Closed yznts closed 2 weeks ago

yznts commented 2 months ago

"franken-ui": "^0.0.7", "tailwindcss": "^3.4.3"

My experience with sortable so far:

https://github.com/sveltecult/franken-ui/assets/17050536/3a29af14-1db9-49b1-9155-49601af10e26

sveltecult commented 2 months ago

can you provide the code you used?

yznts commented 2 months ago

I've copy-pasted it from example. I'll show you my template code.

{{ define "Example" }}
<!doctype html>
<html lang="en">
<head>
    {{ template "Common" }}
    <title>Example page</title>
</head>
<body class="bg-background font-geist-sans text-foreground antialiased">
    {{ template "Navbar" call .Navbar }}
    <div class="grid grid-cols-3 gap-3">
        <div>
            <h4 class="text-xl font-semibold tracking-tight mb-3">Group 1</h4>
            <div class="space-y-3" uk-sortable="group: sortable-group">
                <div>
                    <div class="uk-card uk-card-default uk-card-body">Item 1</div>
                </div>
                <div>
                    <div class="uk-card uk-card-default uk-card-body">Item 2</div>
                </div>
                <div>
                    <div class="uk-card uk-card-default uk-card-body">Item 3</div>
                </div>
                <div>
                    <div class="uk-card uk-card-default uk-card-body">Item 4</div>
                </div>
            </div>
        </div>
        <div>
            <h4 class="text-xl font-semibold tracking-tight mb-3">Group 2</h4>
            <div class="space-y-3" uk-sortable="group: sortable-group">
                <div>
                    <div class="uk-card uk-card-default uk-card-body">Item 1</div>
                </div>
                <div>
                    <div class="uk-card uk-card-default uk-card-body">Item 2</div>
                </div>
                <div>
                    <div class="uk-card uk-card-default uk-card-body">Item 3</div>
                </div>
                <div>
                    <div class="uk-card uk-card-default uk-card-body">Item 4</div>
                </div>
            </div>
        </div>
        <div>
            <h4 class="text-xl font-semibold tracking-tight mb-3">Empty Group</h4>
            <div class="space-y-3" uk-sortable="group: sortable-group"></div>
        </div>
    </div>
</body>
</html>
{{ end }}

Common includes my libs, including UIKit.

{{ define "Common" }}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/assets/css/tailwind.min.css">
<link rel="stylesheet" href="/assets/css/bundle.min.css">
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit-icons.min.js"></script>
<script defer src="/assets/js/bundle.min.js"></script>
<script>
    // On page load or when changing themes, best to add inline in `head` to avoid FOUC
    if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark');
    } else {
        document.documentElement.classList.remove('dark')
    }
</script>
{{ end }}
sveltecult commented 2 months ago

I pasted your code and I can move items. Maybe it's a templating issue? I was looking for the rendered HTML. Unfortunately, I am not familiar with that templating so I can not reproduce your problem. Btw, this project only deal with shadcn stylings. Anything JS-related you can also ask the folks at UIkit.

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Franken UI</title>
    <link
      rel="preload"
      href="/fonts/geist-font/fonts/GeistVariableVF.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
    <link
      rel="preload"
      href="/fonts/geist-font/fonts/GeistMonoVariableVF.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
    <link rel="stylesheet" href="/css/franken-ui.min.css" />
    <link rel="stylesheet" href="/fonts/geist-font/style.css" />
    <script is:inline>
      if (
        localStorage.getItem("color-theme") === "dark" ||
        (!("color-theme" in localStorage) &&
          window.matchMedia("(prefers-color-scheme: dark)").matches)
      ) {
        document.documentElement.classList.add("dark");
      } else {
        document.documentElement.classList.remove("dark");
      }
    </script>

    <script is:inline src="/js/uikit@3.19.4/uikit.js"></script>
    <script is:inline src="/js/uikit@3.19.4/icons.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-background font-geist-sans text-foreground antialiased">
    <!-- START CODING HERE -->
    <div class="uk-container">
      <div class="grid grid-cols-3 gap-3">
        <div>
          <h4 class="text-xl font-semibold tracking-tight mb-3">Group 1</h4>
          <div class="space-y-3" uk-sortable="group: sortable-group">
            <div>
              <div class="uk-card uk-card-default uk-card-body">Item 1</div>
            </div>
            <div>
              <div class="uk-card uk-card-default uk-card-body">Item 2</div>
            </div>
            <div>
              <div class="uk-card uk-card-default uk-card-body">Item 3</div>
            </div>
            <div>
              <div class="uk-card uk-card-default uk-card-body">Item 4</div>
            </div>
          </div>
        </div>
        <div>
          <h4 class="text-xl font-semibold tracking-tight mb-3">Group 2</h4>
          <div class="space-y-3" uk-sortable="group: sortable-group">
            <div>
              <div class="uk-card uk-card-default uk-card-body">Item 1</div>
            </div>
            <div>
              <div class="uk-card uk-card-default uk-card-body">Item 2</div>
            </div>
            <div>
              <div class="uk-card uk-card-default uk-card-body">Item 3</div>
            </div>
            <div>
              <div class="uk-card uk-card-default uk-card-body">Item 4</div>
            </div>
          </div>
        </div>
        <div>
          <h4 class="text-xl font-semibold tracking-tight mb-3">Empty Group</h4>
          <div class="space-y-3" uk-sortable="group: sortable-group"></div>
        </div>
      </div>
    </div>
    <!-- END -->
    <script>
      var themeToggleBtn = document.getElementById("theme-toggle");

      themeToggleBtn?.addEventListener("click", function () {
        // if set via local storage previously
        if (localStorage.getItem("color-theme")) {
          if (localStorage.getItem("color-theme") === "light") {
            document.documentElement.classList.add("dark");
            localStorage.setItem("color-theme", "dark");
          } else {
            document.documentElement.classList.remove("dark");
            localStorage.setItem("color-theme", "light");
          }

          // if NOT set via local storage previously
        } else {
          if (document.documentElement.classList.contains("dark")) {
            document.documentElement.classList.remove("dark");
            localStorage.setItem("color-theme", "light");
          } else {
            document.documentElement.classList.add("dark");
            localStorage.setItem("color-theme", "dark");
          }
        }
      });
    </script>
  </body>
</html>