odj-svelte-ui 0.1.0 → 0.1.1

package/README.md

@@ -14,10 +14,13 @@ 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
+  - `Label` now has `space-y-1` by default;
+  - `Input:Search` has a better X button for Chromium browsers;
 - `Tabs` styles are fixed and introduced underline animations and a complete modern redesign for "Full" style;
 - 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;
+- `Textarea` can autoexpand as user type, control this by `autoexpand` and `maxRows` props;
 
 ## Installation
 

package/dist/buttons/Button.svelte

@@ -1,26 +1,48 @@
 <script lang="ts">
+  import Spinner from "../spinner/Spinner.svelte";
   import { getContext } from "svelte";
   import type { SizeType } from "../types";
   import { type ButtonProps as Props, button } from ".";
 
   const group: SizeType = getContext("group");
 
-  let { children, pill = false, outline = false, size = group ? "sm" : "md", href, type = "button", color = group ? (outline ? "dark" : "alternative") : "primary", shadow = false, tag = "button", disabled, class: className, ...restProps }: Props = $props();
+  let { children, pill = false, outline = false, size = group ? "sm" : "md", href, type = "button", color = group ? (outline ? "dark" : "alternative") : "primary", shadow = false, tag = "button", disabled, class: className, loading = false, ...restProps }: Props = $props();
 
+  let disabledValueBeforeLoading:boolean|undefined = $state(disabled);
+  $effect(() => { 
+    if (loading) {
+      disabled = true;
+    } else {
+      disabled = disabledValueBeforeLoading;
+    }
+  })
   const base = $derived(button({ color, size, disabled, pill, group: !!group, outline, shadow, className }));
 </script>
 
+{#snippet defaultOrLoadingWrapper()}
+  {#if loading}
+    <div class="w-full text-center relative">
+      <Spinner size="4" {color} class="absolute inset-0 m-auto"/>
+      <div class="invisible">
+        {@render children()}
+      </div>
+    </div>
+  {:else}
+    {@render children()}
+  {/if}
+{/snippet}
+
 {#if href}
   <a {href} {...restProps} class={base} role="button">
-    {@render children()}
+    {@render defaultOrLoadingWrapper()}
   </a>
 {:else if tag === "button"}
   <button {type} {...restProps} class={base} {disabled}>
-    {@render children()}
+    {@render defaultOrLoadingWrapper()}
   </button>
 {:else}
   <svelte:element this={tag} {...restProps} class={base}>
-    {@render children()}
+    {@render defaultOrLoadingWrapper()}
   </svelte:element>
 {/if}
 

package/dist/buttons/theme.js

@@ -187,12 +187,12 @@ export const button = tv({
         {
             outline: true,
             color: "alternative",
-            class: "text-neutral-900 hover:text-white border border-neutral-800 hover:bg-neutral-900 focus:!bg-neutral-900 dark:border-neutral-600 dark:hover:text-white dark:hover:!bg-neutral-600"
+            class: "text-light-surface-900 hover:text-white border hover:!bg-primary-800 dark:border-neutral-600 dark:hover:text-white dark:hover:!bg-neutral-600"
         },
         {
             outline: true,
             color: "light",
-            class: "text-neutral-500 hover:text-neutral-900 bg-white border border-neutral-200 dark:border-neutral-600 dark:hover:text-white dark:text-neutral-400 hover:bg-neutral-50 dark:bg-neutral-700 dark:hover:bg-neutral-600"
+            class: "text-light-surface-900 bg-white dark:border-dark-surface-600 dark:hover:text-white dark:text-dark-surface-400 hover:!bg-light-surface-100 hover:dark:!bg-dark-surface-600"
         },
         {
             outline: true,

package/dist/buttons/type.d.ts

@@ -15,6 +15,7 @@ interface ButtonProps extends HTMLAttributesWithoutAbort {
     class?: string;
     disabled?: boolean;
     href?: string;
+    loading?: boolean;
 }
 type GradientButtonColorType = "red" | "lime" | "green" | "teal" | "cyan" | "blue" | "purple" | "pink" | "purpleToBlue" | "cyanToBlue" | "greenToBlue" | "purpleToPink" | "pinkToOrange" | "tealToLime" | "redToYellow" | undefined;
 interface GradientButtonProps extends HTMLAttributesWithoutAbort {

package/dist/forms/input/Input.svelte

@@ -4,7 +4,7 @@
   import { CloseButton } from "../..";
   import { type InputProps as Props, input, clampSize, type InputValue } from ".";
 
-  let { children, left, right, value = $bindable<InputValue>(), clearable = false, size, color = "default", class: className, classLeft, classRight, divClass, ...restProps }: Props<InputValue> = $props();
+  let { children, left, right, value = $bindable<InputValue>(), clearable = false, size, color = "default", class: className, classLeft, classRight, divClass, classSearchInputXButton, ...restProps }: Props<InputValue> = $props();
 
   // tinted if put in component having its own background
   let background: boolean = getContext("background");
@@ -14,13 +14,39 @@
   let _size = $derived(size || clampSize(group?.size) || "md");
   const _color = $derived(color === "default" && background ? "tinted" : color);
 
-  const { base, input: inputCls, left: leftCls, right: rightCls } = $derived(input({ size: _size, color: _color, group: isGroup, class: className }));
+  const { base, input: inputCls, left: leftCls, right: rightCls, searchInputXButton } = $derived(input({ size: _size, color: _color, group: isGroup, class: className }));
 
   const clearAll = () => {
     value = undefined;
   };
+  
+  let colorForSearchInputXButton:string = $state('');
+  let referenceToGetColorID = 'getColor-' + crypto.randomUUID();
+  $effect(() => {
+    color;
+    const el = document.querySelector("#" + referenceToGetColorID);
+    if (el) {
+      const computedColor = getComputedStyle(el).color;
+      colorForSearchInputXButton = computedColor;
+    }
+  });
 </script>
 
+{#if restProps.type === 'search'}
+  <span class={searchInputXButton({ class: classSearchInputXButton })} id={referenceToGetColorID}></span>
+{/if}
+
+<style>
+  [type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    background-color: var(--color);
+    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
+    background-size: 20px 20px;
+    height: 20px;
+    width: 20px;
+  }
+</style>
+
 {#snippet inputContent()}
   {#if left}
     <div class={leftCls({ class: classLeft })}>
@@ -30,7 +56,7 @@
   {#if children}
     {@render children({ ...restProps, class: inputCls() })}
   {:else}
-    <input {...restProps} bind:value class={inputCls({ class: className })} />
+    <input {...restProps} style="--color: {colorForSearchInputXButton};" bind:value class={inputCls({ class: className })} />
   {/if}
   {#if right}
     <div class={rightCls({ class: classRight })}>