fuma 0.1.11 → 0.1.13

package/dist/ui/Icon.svelte

@@ -2,7 +2,7 @@
 import { onMount } from "svelte";
 export let path;
 export let title = "";
-export let size = 24;
+export let size = 22;
 let klass = "";
 export { klass as class };
 export let style = "";

package/dist/ui/input/InputCombo.svelte

@@ -30,7 +30,7 @@ async function select(index = focusIndex) {
 }
 </script>
 
-<DropDown {tippyProps}>
+<DropDown {tippyProps} isWidthOfActivator>
 	<div class="contents" slot="activator">
 		<FormControl {...props} let:key>
 			<div class="flex grow gap-2" class:hidden={selectedOption}>

package/dist/ui/input/InputRelation.svelte

@@ -4,11 +4,11 @@ import { toast } from "svelte-sonner";
 import { mdiClose } from "@mdi/js";
 import { FormControl, DropDown, Icon, SelectorList, Slot } from "../index.js";
 import RelationAfter from "./RelationAfter.svelte";
-export let key = "";
+export let key = Math.random().toString();
 export let label = "";
 export let search;
 export let createUrl = "";
-export let createTitle = "";
+export let createTitle = "Nouveau";
 let item = null;
 export { item as value };
 export let error = "";
@@ -60,15 +60,15 @@ async function handleBlur() {
 }
 </script>
 
-<DropDown {tippyProps} disable={flatMode}>
+<DropDown {tippyProps} disable={flatMode} isWidthOfActivator>
 	<div class="contents" slot="activator">
 		<FormControl {key} {label} {error} class={klass} let:key>
 			<div class="flex grow gap-2" class:hidden={item}>
-				<div class="relative flex grow items-center gap-2">
+				<div class="input input-bordered flex grow items-center pr-2">
 					<input
 						type="text"
-						id={key}
 						name={key}
+						id={key}
 						bind:this={inputElement}
 						bind:value={searchValue}
 						on:input={(e) => searchItemsDebounce(e.currentTarget.value)}
@@ -76,7 +76,7 @@ async function handleBlur() {
 						on:blur={handleBlur}
 						autocomplete="off"
 						{placeholder}
-						class="input input-bordered grow"
+						class="grow"
 					/>
 
 					<RelationAfter {isLoading} {createUrl} {createTitle} />

package/dist/ui/input/InputRelations.svelte

@@ -73,7 +73,7 @@ async function handleBlur() {
 }
 </script>
 
-<DropDown bind:this={dropdown} disable={flatMode}>
+<DropDown bind:this={dropdown} disable={flatMode} isWidthOfActivator>
 	<div slot="activator">
 		<FormControl {key} {label} {error} class={klass}>
 			<div class="flex flex-col gap-2">
@@ -103,7 +103,7 @@ async function handleBlur() {
 					</div>
 				{/if}
 				<div class="flex grow gap-2">
-					<div class="relative flex grow items-center gap-2">
+					<div class="input input-bordered flex grow items-center pr-2">
 						<input
 							type="text"
 							id={key}
@@ -115,7 +115,7 @@ async function handleBlur() {
 							on:blur={handleBlur}
 							autocomplete="off"
 							{placeholder}
-							class="input input-bordered grow"
+							class="grow"
 						/>
 
 						<RelationAfter {isLoading} {createUrl} {createTitle} />

package/dist/ui/input/InputSelect.svelte

@@ -25,7 +25,7 @@ function onSelect(index) {
 }
 </script>
 
-<DropDown bind:this={dropDown}>
+<DropDown bind:this={dropDown} isWidthOfActivator>
 	<div class="contents" slot="activator">
 		<FormControl {...props} let:key>
 			<button

package/dist/ui/input/RelationAfter.svelte

@@ -1,16 +1,15 @@
 <script>import { fade } from "svelte/transition";
 import { createEventDispatcher } from "svelte";
-import { mdiClose, mdiLoading, mdiPlus } from "@mdi/js";
+import { mdiLoading, mdiPlus } from "@mdi/js";
 import Icon from "../Icon.svelte";
 export let isLoading;
-export let isUnselectable = false;
 export let createUrl = "";
 export let createTitle = "";
 const dispatch = createEventDispatcher();
 </script>
 
 {#if isLoading}
-	<div class="absolute right-1" class:right-10={createUrl} transition:fade|local>
+	<div class:right-10={createUrl} transition:fade|local>
 		<Icon
 			path={mdiLoading}
 			class="w-9"
@@ -19,24 +18,8 @@ const dispatch = createEventDispatcher();
 	</div>
 {/if}
 
-{#if isUnselectable}
-	<div class="ml-[4px] hidden -translate-x-[2px] group-hover:block">
-		<Icon
-			path={mdiClose}
-			on:click={() => dispatch('unselect')}
-			title="Supprimer la sélection"
-			class="outline-primary-light outline outline-2 hover:bg-primary"
-		/>
-	</div>
-{/if}
-
 {#if createUrl}
-	<div class="ml-[4px] -translate-x-[2px]">
-		<Icon
-			path={mdiPlus}
-			on:click={() => dispatch('create')}
-			title={createTitle}
-			class="btn btn-square"
-		/>
-	</div>
+	<a href={createUrl} class="btn btn-square btn-sm">
+		<Icon path={mdiPlus} on:click={() => dispatch('create')} title={createTitle} />
+	</a>
 {/if}

package/dist/ui/input/RelationAfter.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         isLoading: boolean;
-        isUnselectable?: boolean | undefined;
         createUrl?: string | undefined;
         createTitle?: string | undefined;
     };

package/dist/ui/menu/DropDown.svelte

@@ -26,6 +26,7 @@ export let hideOnNav = true;
 export let tip = void 0;
 export let disable = false;
 export let content = void 0;
+export let isWidthOfActivator = false;
 let activator;
 beforeNavigate(() => hideOnNav && hide());
 onMount(() => {
@@ -47,6 +48,7 @@ onMount(() => {
     interactive: true,
     interactiveDebounce: 50,
     appendTo: "parent",
+    hideOnClick: false,
     onShown() {
       if (autofocus)
         focusables[0]?.select();
@@ -93,6 +95,7 @@ export function setTippyProps(props) {
 
 		<div class="hidden">
 			<div
+				style={isWidthOfActivator ? `width: ${activator?.offsetWidth}px;` : ''}
 				class="{klass} max-h-80 overflow-auto rounded-lg border bg-base-100 p-1 shadow-lg"
 				bind:this={content}
 			>

package/dist/ui/menu/DropDown.svelte.d.ts

@@ -15,6 +15,7 @@ declare const __propDef: {
         tip?: TippyInstance | undefined;
         disable?: boolean | undefined;
         content?: HTMLDivElement | undefined;
+        isWidthOfActivator?: boolean | undefined;
         hide?: (() => void) | undefined;
         show?: (() => void) | undefined;
         setTippyProps?: ((props: Partial<TippyProps>) => void) | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuma",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "My fullstack material build with sveltekit, daisyui, zod and more",
   "author": {
     "name": "Jonas Voisard",