odj-svelte-ui 0.2.1 → 0.2.2

package/README.md

@@ -15,7 +15,6 @@ This is a fork from [Flowbite for Svelte 5 with Runes](https://svelte-5-ui-lib.c
   - `Textarea` is fixed;
   - `Pagination` respect max-width;
   - `Modal` title has a better size, improved default animations with control of backdrop's animations and removed the outdated divider;
-  - `Label` now has `space-y-1` by default, a new default color and the `disabled` prop;
   - `Input:Search` has a better X button for Chromium browsers;
   - `Radio` has a new design and it's animated;
   - `Header` has blur, some small design tweaks and a fixed design for the menu on mobile;
@@ -26,8 +25,9 @@ This is a fork from [Flowbite for Svelte 5 with Runes](https://svelte-5-ui-lib.c
 - The `Tooltip` component received a rework;
 - `Modal` has <kbd>Esc</kbd> to close again;
 - `Button` has now a built-in loading state and can be controlled by the `loading` prop;
+- `Label` now has `space-y-1` by default, a new default color and the `disabled` prop;
 - `Textarea` can autoexpand as user type, control this by `autoexpand` and `maxRows` props;
-- `Dropdown` now locks the page scroll and you can disable this default behaviour setting `lock` to `false`;
+- `Dropdown` now locks the page scroll and you can enable this default behaviour setting `lock` to `true`. Also, it uses a new strategy instead of `uiHelpers`;
 - `Avatar` supports a `fallback` snippet to show when the image is loading or can't be loaded;
 - `Sidebar` can not be opened or closed anymore. If you want this behaviour, this component should be inside the `Drawer` component. On mobile, `Sidebar` will look like tabs;
 - `SidebarButton` has been removed. Please use the `Drawer` component to maintain the old sidebar behaviour;

package/dist/dropdown/Dropdown.svelte

@@ -1,13 +1,51 @@
 <script lang="ts">
   import { type DropdownProps as Props, dropdown } from "./";
-  import { fly } from "svelte/transition";
-  import type { ParamsType } from "../types";
+  import { autoUpdate, flip, offset as floatingUIOffset, useClick, useDismiss, useFloating, useInteractions, useRole } from "@skeletonlabs/floating-ui-svelte";
+  import { fade, fly } from "svelte/transition";
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
 
-  let { children, dropdownStatus = $bindable(), closeDropdown, class: className, backdropClass, params = { y: -5 }, transition = fly, activeUrl = "", lock = true, ...restProps }: Props = $props();
+  let { children, open = $bindable(false), triggeredBy, position: placement = "bottom", offset = 8, class: className, transitionIn = fade, transitionInParams = { duration: 200 }, transitionOut = fly, transitionOutParams = { y: -5 }, activeUrl = "", lock = false, ...restProps }: Props = $props();
 
-  const { base, backdrop } = $derived(dropdown());
+  const { base } = $derived(dropdown());
+
+  // Use Floating
+  let floating = $derived(
+    useFloating({
+      get open() {
+        return open;
+      },
+      onOpenChange: (v) => {
+        open = v;
+      },
+      whileElementsMounted: autoUpdate,
+      placement,
+      get middleware() {
+        return [floatingUIOffset(offset), flip()];
+      }
+    })
+  );
+
+  // Interactions
+  let role = $derived(useRole(floating.context));
+  let behaviour = $derived(useClick(floating.context));
+  let dismiss = $derived(useDismiss(floating.context));
+  let interactions = $derived(useInteractions([role, behaviour, dismiss]));
+
+  // Get elements
+  $effect(() => {
+    let triggerElement = document.querySelector(triggeredBy);
+    if (!triggerElement) return;
+
+    floating.elements.reference = triggerElement;
+
+    // Assign the props to the element
+    Object.entries(interactions.getReferenceProps()).forEach(([key, value]) => {
+      (triggerElement as any)[key] = value;
+    });
+  });
+
+  // Active URL
   const activeUrlStore = writable("");
   setContext("activeUrl", activeUrlStore);
 
@@ -15,8 +53,9 @@
     activeUrlStore.set(activeUrl ?? "");
   });
 
+  // Lock scroll system
   $effect(() => {
-    if (dropdownStatus && lock) {
+    if (open && lock) {
       const scrollWidth = window.innerWidth - document.documentElement.clientWidth;
       document.body.style.overflow = "hidden";
       document.body.style.paddingRight = `${scrollWidth}px`;
@@ -28,23 +67,22 @@
 </script>
 
 <!-- Dropdown menu -->
-{#if dropdownStatus}
-  <div {...restProps} class={base({ class: className })} transition:transition={params as ParamsType}>
+{#if open}
+  <div bind:this={floating.elements.floating} style={floating.floatingStyles} {...interactions.getFloatingProps()} class={base({ class: className })} in:transitionIn={transitionInParams} out:transitionOut={transitionOutParams} {...restProps}>
     {@render children()}
   </div>
-
-  <div role="presentation" class={backdrop({ class: backdropClass })} onclick={closeDropdown}></div>
 {/if}
 
 <!--
 @component
 [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
 ## Props
-@props: children: any;
-@props:dropdownStatus: any = $bindable();
-@props:closeDropdown: any;
+@props:children: any;
+@props:open: any = $bindable();
+@props:triggeredBy: any;
+@props:position: string;
+@props:offset: number;
 @props:class: string;
-@props:backdropClass: any;
 @props:params: any;
 @props:transition: any = fly;
 @props:activeUrl: any = "";

package/dist/dropdown/Dropdown.svelte.d.ts

@@ -2,15 +2,16 @@ import { type DropdownProps as Props } from "./";
 /**
  * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
  * ## Props
- * @props: children: any;
- * @props:dropdownStatus: any = $bindable();
- * @props:closeDropdown: any;
+ * @props:children: any;
+ * @props:open: any = $bindable();
+ * @props:triggeredBy: any;
+ * @props:position: string;
+ * @props:offset: number;
  * @props:class: string;
- * @props:backdropClass: any;
  * @props:params: any;
  * @props:transition: any = fly;
  * @props:activeUrl: any = "";
  */
-declare const Dropdown: import("svelte").Component<Props, {}, "dropdownStatus">;
+declare const Dropdown: import("svelte").Component<Props, {}, "open">;
 type Dropdown = ReturnType<typeof Dropdown>;
 export default Dropdown;

package/dist/dropdown/theme.d.ts

@@ -2,44 +2,36 @@ export declare const dropdown: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
-            backdrop?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
-            backdrop?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
     base: string;
-    backdrop: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
-            backdrop?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
-            backdrop?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
     base: string;
-    backdrop: string;
 }, import("tailwind-variants").TVReturnType<unknown, {
     base: string;
-    backdrop: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
-            backdrop?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;

package/dist/dropdown/theme.js

@@ -1,8 +1,7 @@
 import { tv } from "tailwind-variants";
 export const dropdown = tv({
     slots: {
-        base: "z-10 w-max mt-2 rounded-xl shadow-lg bg-white dark:bg-dark-surface-700 text-light-surface-700 dark:text-dark-surface-200 border border-light-surface-200 dark:border-dark-surface-600 divide-y divide-light-surface-100 dark:divide-dark-surface-600 overflow-hidden",
-        backdrop: "fixed top-0 start-0 w-full h-full"
+        base: "z-10 w-max rounded-xl shadow-lg bg-white dark:bg-dark-surface-700 text-light-surface-700 dark:text-dark-surface-200 border border-light-surface-200 dark:border-dark-surface-600 divide-y divide-light-surface-100 dark:divide-dark-surface-600 overflow-hidden"
     }
 });
 export const dropdowndivider = tv({

package/dist/dropdown/type.d.ts

@@ -1,17 +1,21 @@
 import type { Snippet } from "svelte";
 import type { ParamsType, TransitionFunc } from "../types";
 import type { HTMLAttributes, HTMLAnchorAttributes } from "svelte/elements";
+type Placement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | undefined;
 interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
     children: Snippet;
-    dropdownStatus: boolean;
-    closeDropdown?: () => void;
+    open: boolean;
+    triggeredBy: string;
+    position?: Placement;
+    offset?: number;
     divClass?: string;
     footerClass?: string;
     headerClass?: string;
     ulClass?: string;
-    backdropClass?: string;
-    params?: ParamsType;
-    transition?: TransitionFunc;
+    transitionIn?: TransitionFunc;
+    transitionInParams?: ParamsType;
+    transitionOut?: TransitionFunc;
+    transitionOutParams?: ParamsType;
     activeUrl?: string;
     lock?: boolean;
 }

package/dist/tooltip/Tooltip.svelte

@@ -1,43 +1,34 @@
 <script lang="ts">
   import { tooltip } from "./theme";
   import type { TooltipProps } from ".";
-  import {
-    FloatingArrow,
-    arrow,
-    autoUpdate,
-    flip,
-    offset as floatingUIOffset,
-    useDismiss,
-    useFloating,
-    useHover,
-    useInteractions,
-    useRole,
-  } from "@skeletonlabs/floating-ui-svelte";
+  import { FloatingArrow, arrow, autoUpdate, flip, offset as floatingUIOffset, useDismiss, useFloating, useHover, useInteractions, useRole } from "@skeletonlabs/floating-ui-svelte";
   import { fade } from "svelte/transition";
 
-  let { children, color = "default", arrow: showArrow = false, offset = 8, triggeredBy, position = "top", class: className, arrowClass, open = $bindable(false), transition = fade, transitionOptions = { duration: 200 }, ...restProps }: TooltipProps = $props();
+  let { children, color = "default", arrow: showArrow = false, offset = 8, triggeredBy, position: placement = "top", class: className, arrowClass, open = $bindable(false), transition = fade, transitionOptions = { duration: 200 }, ...restProps }: TooltipProps = $props();
 
   let arrowElement: HTMLElement | null = $state(null);
 
   let { base, arrowBase } = $derived(tooltip({ color }));
-  
+
   // State
   let elemArrow: HTMLElement | null = $state(null);
 
   // Use Floating
-  let floating = $derived(useFloating({
-    whileElementsMounted: autoUpdate,
-    get open() {
-      return open;
-    },
-    onOpenChange: (v) => {
-      open = v;
-    },
-    placement: position,
-    get middleware() {
-      return [floatingUIOffset(offset), flip(), elemArrow && arrow({ element: elemArrow })];
-    },
-  }));
+  let floating = $derived(
+    useFloating({
+      whileElementsMounted: autoUpdate,
+      get open() {
+        return open;
+      },
+      onOpenChange: (v) => {
+        open = v;
+      },
+      placement,
+      get middleware() {
+        return [floatingUIOffset(offset), flip(), elemArrow && arrow({ element: elemArrow })];
+      }
+    })
+  );
 
   // Interactions
   let role = $derived(useRole(floating.context, { role: "tooltip" }));
@@ -48,22 +39,22 @@
   // Get elements
   $effect(() => {
     let triggerElement = document.querySelector(triggeredBy);
-    if (!triggerElement) return; 
+    if (!triggerElement) return;
 
     floating.elements.reference = triggerElement;
-    
+
     // Assign the props to the element
     Object.entries(interactions.getReferenceProps()).forEach(([key, value]) => {
-      triggerElement[key] = value;
+      (triggerElement as any)[key] = value;
     });
-  })
+  });
 </script>
 
 {#if open}
   <div role="tooltip" bind:this={floating.elements.floating} style={floating.floatingStyles} {...interactions.getFloatingProps()} transition:transition={transitionOptions} {...restProps} class={base({ className })}>
     {@render children()}
     {#if showArrow}
-      <FloatingArrow bind:ref={arrowElement} context={floating.context} class={arrowBase({className: arrowClass})}/>
+      <FloatingArrow bind:ref={arrowElement} context={floating.context} class={arrowBase({ className: arrowClass })} />
     {/if}
   </div>
 {/if}
@@ -75,7 +66,7 @@
 @props:children: any;
 @props:color: any = "default";
 @props:arrow: any = false;
-@props:offset: any = 8;
+@props:offset: number = 8;
 @props:triggeredBy: any;
 @props:position: string = "top";
 @props:class: string;
@@ -83,4 +74,4 @@
 @props:open: boolean = false;
 @props:transition: any = "fade";
 @props:transitionOptions: object = { duration: 200 };
--->
+-->

package/dist/tooltip/Tooltip.svelte.d.ts

@@ -5,7 +5,7 @@ import type { TooltipProps } from ".";
  * @props:children: any;
  * @props:color: any = "default";
  * @props:arrow: any = false;
- * @props:offset: any = 8;
+ * @props:offset: number = 8;
  * @props:triggeredBy: any;
  * @props:position: string = "top";
  * @props:class: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "odj-svelte-ui",
   "author": "orbitadajogatina",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "This is a fork from Flowbite Svelte 5 with Runes. I just made some changes that fits better my taste.",
   "license": "MIT",
   "main": "dist/index.js",