fuma 0.1.10 → 0.1.13

package/dist/Meta.svelte

@@ -1,9 +1,12 @@
 <script>import {} from "svelte";
-import { Card, Table } from "./index.js";
+import { Card, Table, Icon } from "./index.js";
+import { mdiEyeOffOutline, mdiEyeOutline } from "@mdi/js";
+import { slide } from "svelte/transition";
 export let name = "";
 export let description = "";
 export let component;
 let props = [];
+let isPropsVisible = false;
 $:
   initMeta(component);
 function initMeta(c) {
@@ -23,33 +26,45 @@ function updateComponentMeta(c) {
 </script>
 
 <Card class="mx-auto mt-6 max-w-4xl">
-	<svelte:fragment slot="title">{name}</svelte:fragment>
+	<div slot="title" class="flex items-center gap-4">
+		<span class="grow">{name}</span>
+		<button class="btn btn-square btn-sm" on:click={() => (isPropsVisible = !isPropsVisible)}>
+			<Icon
+				size={20}
+				title="Affichage des props"
+				path={isPropsVisible ? mdiEyeOutline : mdiEyeOffOutline}
+			/>
+		</button>
+	</div>
+
 	<svelte:fragment slot="subtitle">{description}</svelte:fragment>
 
 	<slot />
 
-	<div class="my-10" />
-
-	<Table
-		items={props}
-		fields={[
-			{
-				key: 'name',
-				label: 'Prop',
-				getCell: (p) => p.id,
-				locked: true
-			},
-			{
-				key: 'type',
-				label: 'Type',
-				getCell: (p) => typeof p.value
-			},
-			{
-				key: 'value',
-				label: 'Value',
-				getCell: (p) => p.value,
-				visible: true
-			}
-		]}
-	></Table>
+	{#if isPropsVisible}
+		<div transition:slide class="pt-6">
+			<Table
+				items={props}
+				fields={[
+					{
+						key: 'name',
+						label: 'Prop',
+						getCell: (p) => p.id,
+						locked: true
+					},
+					{
+						key: 'type',
+						label: 'Type',
+						getCell: (p) => typeof p.value
+					},
+					{
+						key: 'value',
+						label: 'Value',
+						getCell: (p) => p.value,
+						visible: true
+					}
+				]}
+			/>
+		</div>
+	{/if}
 </Card>

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/InputBoolean.svelte

@@ -1,29 +1,29 @@
 <script>import { createEventDispatcher } from "svelte";
 import { FormControl, bindCheckedWithParams } from "./index.js";
 $:
-  ({ input, value: _value, bindWithParams, label, ...props } = $$props);
+  ({ input, value: _value, bindWithParams, label, ...props } = $$restProps);
 export let value = _value;
 const dispatch = createEventDispatcher();
 </script>
 
 <FormControl {...props} let:key>
-	<div class="flex items-center gap-2">
-		<input type="hidden" name={key} value={value ? 'true' : ''} />
-		<input
-			bind:checked={value}
-			use:bindCheckedWithParams={{ bindEnable: bindWithParams }}
-			on:input={({ currentTarget: { checked } }) => dispatch('change', checked)}
-			on:focus
-			on:blur
-			type="checkbox"
-			id={key}
-			class="checkbox"
-			{...input}
-		/>
-		<label for={key} class="label cursor-pointer">
-			<span class="label-text">
-				<slot>{label}</slot>
-			</span>
-		</label>
-	</div>
+	<label for={key} class="label cursor-pointer">
+		<span class="label-text">
+			<slot>{label}</slot>
+		</span>
+	</label>
+
+	<input
+		bind:checked={value}
+		use:bindCheckedWithParams={{ bindEnable: bindWithParams }}
+		on:input={({ currentTarget: { checked } }) => dispatch('change', checked)}
+		on:focus
+		on:blur
+		type="checkbox"
+		id={key}
+		class="checkbox ml-1"
+		{...input}
+	/>
+
+	<input type="hidden" name={key} value={value ? 'true' : ''} />
 </FormControl>

package/dist/ui/input/InputCombo.svelte

@@ -0,0 +1,84 @@
+<script>import { createEventDispatcher, tick } from "svelte";
+import { parseOptions } from "../../utils/options.js";
+import { FormControl, DropDown, Icon, SelectorList } from "../index.js";
+$:
+  ({ input, value: _value, options, tippyProps, ...props } = $$props);
+export let value = _value;
+export let inputElement = void 0;
+let focusIndex = 0;
+let searchValue = "";
+const dispatch = createEventDispatcher();
+let filteredOptions = [];
+$:
+  _options = parseOptions(options);
+$:
+  selectedOption = _options.find((opt) => opt.value === value);
+function filterOptions(value2) {
+  const reg = new RegExp(value2, "i");
+  filteredOptions = _options.filter((opt) => opt.label.match(reg) || opt.value.match(reg)).map((opt) => ({ id: opt.value, ...opt }));
+}
+export async function clear() {
+  searchValue = "";
+  value = "";
+  filterOptions("");
+  await tick();
+  inputElement?.focus();
+}
+async function select(index = focusIndex) {
+  value = _options[index].value;
+  dispatch("input", value);
+}
+</script>
+
+<DropDown {tippyProps} isWidthOfActivator>
+	<div class="contents" slot="activator">
+		<FormControl {...props} let:key>
+			<div class="flex grow gap-2" class:hidden={selectedOption}>
+				<div class="relative flex grow items-center gap-2">
+					<input
+						type="text"
+						id={key}
+						bind:this={inputElement}
+						bind:value={searchValue}
+						on:focus={() => filterOptions('')}
+						on:blur={() => (searchValue = '')}
+						on:input={(e) => filterOptions(e.currentTarget.value)}
+						autocomplete="off"
+						class="input input-bordered grow"
+						{...input}
+					/>
+				</div>
+				<slot name="append" />
+			</div>
+
+			{#if selectedOption}
+				<button
+					type="button"
+					class="flex h-12 items-center gap-2 rounded-lg border pl-4 pr-2"
+					on:click={clear}
+					on:focus={clear}
+				>
+					{#if selectedOption.icon}
+						<Icon path={selectedOption.icon} size={21} class="opacity-70" />
+					{/if}
+					<span>{selectedOption.label}</span>
+				</button>
+				<input type="hidden" name={key} value={selectedOption.value} />
+			{/if}
+		</FormControl>
+	</div>
+
+	<SelectorList
+		items={filteredOptions}
+		trigger={inputElement}
+		{focusIndex}
+		let:item
+		class="w-full"
+		on:select={({ detail }) => select(detail)}
+	>
+		{#if item.icon}
+			<Icon path={item.icon} size={21} class="opacity-70" />
+		{/if}
+		<span class="whitespace-nowrap pr-4">{item.label}</span>
+	</SelectorList>
+</DropDown>

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

@@ -0,0 +1,42 @@
+import { SvelteComponent } from "svelte";
+import type { TippyProps } from '../../index.js';
+import { type Options } from '../../utils/options.js';
+declare const __propDef: {
+    props: {
+        clear?: (() => Promise<void>) | undefined;
+    } & {
+        class?: string | undefined;
+        classLabel?: string | undefined;
+        key?: string | undefined;
+        label?: string | undefined;
+        error?: string | undefined;
+        hint?: string | undefined;
+        prefix?: string | number | undefined;
+        prefixFor?: string | number | undefined;
+        enhanceDisabled?: boolean | undefined;
+    } & {
+        input?: import("svelte/elements").HTMLInputAttributes | undefined;
+        inputElement?: HTMLInputElement | undefined;
+        wrapperClass?: string | undefined;
+        value?: string | undefined;
+        bindWithParams?: boolean | undefined;
+    } & {
+        options: Options;
+        tippyProps?: TippyProps | undefined;
+    };
+    events: {
+        input: CustomEvent<string>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        append: {};
+    };
+};
+export type InputComboProps = typeof __propDef.props;
+export type InputComboEvents = typeof __propDef.events;
+export type InputComboSlots = typeof __propDef.slots;
+export default class InputCombo extends SvelteComponent<InputComboProps, InputComboEvents, InputComboSlots> {
+    get clear(): () => Promise<void>;
+}
+export {};

package/dist/ui/input/InputRelation.svelte

@@ -4,12 +4,12 @@ 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 item = null;
+export let createTitle = "Nouveau";
+let item = null;
 export { item as value };
 export let error = "";
 export let placeholder = "";
@@ -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

@@ -19,7 +19,7 @@ let klass = "";
 export { klass as class };
 export let classList = "";
 let proposedItems = [];
-export let items = null;
+let items = null;
 export { items as value };
 let isLoading = false;
 let isError = false;
@@ -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

@@ -1,12 +1,10 @@
 <script>import { createEventDispatcher, onMount } from "svelte";
-import { SelectorList, DropDown, Icon } from "../index.js";
+import { SelectorList, DropDown, Icon, FormControl } from "../index.js";
 import { parseOptions } from "../../utils/options.js";
-export let key = "";
-export let value = "";
-export let options;
-export let noBtnClass = false;
-let klass = "";
-export { klass as class };
+import { mdiUnfoldMoreHorizontal } from "@mdi/js";
+$:
+  ({ input, value: _value, options, tippyProps, placeholder, ...props } = $$props);
+export let value = _value;
 $:
   _options = parseOptions(options);
 $:
@@ -22,26 +20,33 @@ onMount(() => {
 function onSelect(index) {
   focusIndex = index;
   value = _options[index].value;
-  dispatch("select", value);
+  dispatch("input", value);
   dropDown.hide();
 }
 </script>
 
-<input type="hidden" name={key} {value} />
-
-<DropDown bind:this={dropDown}>
-	<button bind:this={button} slot="activator" type="button" class:btn={!noBtnClass} class={klass}>
-		<slot name="btn">
-			{#if selectedOption}
-				{#if selectedOption.icon}
-					<Icon path={selectedOption.icon} size={21} class="opacity-70" />
+<DropDown bind:this={dropDown} isWidthOfActivator>
+	<div class="contents" slot="activator">
+		<FormControl {...props} let:key>
+			<button
+				bind:this={button}
+				id={key}
+				type="button"
+				class="flex h-12 items-center gap-2 rounded-lg border pl-4 pr-2"
+			>
+				{#if selectedOption}
+					{#if selectedOption.icon}
+						<Icon path={selectedOption.icon} size={21} class="opacity-70" />
+					{/if}
+					<span>{selectedOption.label}</span>
+				{:else if placeholder}
+					<span class="opacity-60">{placeholder}</span>
 				{/if}
-				<span>{selectedOption.label}</span>
-			{:else}
-				<slot name="placeholder">Sélection</slot>
-			{/if}
-		</slot>
-	</button>
+				<Icon class="ml-auto" path={mdiUnfoldMoreHorizontal} size={18} />
+			</button>
+			<input type="hidden" name={key} {value} />
+		</FormControl>
+	</div>
 
 	<SelectorList
 		trigger={button}
@@ -52,8 +57,8 @@ function onSelect(index) {
 		class="w-full"
 	>
 		{#if item.icon}
-			<Icon path={item.icon} size={21} class="opacity-70" />
+			<Icon path={item.icon} size={18} class="opacity-70" />
 		{/if}
-		<span class="whitespace-nowrap">{item.label}</span>
+		<span class="whitespace-nowrap pr-4">{item.label}</span>
 	</SelectorList>
 </DropDown>

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

@@ -1,22 +1,19 @@
 import { SvelteComponent } from "svelte";
+import { type InputProps } from '../index.js';
 import { type Options } from '../../utils/options.js';
+import type { TippyProps } from '../../index.js';
 declare const __propDef: {
-    props: {
-        key?: string | undefined;
-        value?: string | undefined;
+    props: Omit<InputProps, "inputElement"> & {
         options: Options;
-        noBtnClass?: boolean | undefined;
-        class?: string | undefined;
+        tippyProps?: TippyProps | undefined;
+        placeholder?: string | undefined;
     };
     events: {
-        select: CustomEvent<string>;
+        input: CustomEvent<string>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        btn: {};
-        placeholder: {};
-    };
+    slots: {};
 };
 export type InputSelectProps = typeof __propDef.props;
 export type InputSelectEvents = typeof __propDef.events;

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/input/index.d.ts

@@ -22,4 +22,5 @@ export { default as InputOptions } from './InputOptions.svelte';
 export { default as InputSearch } from './InputSearch.svelte';
 export { default as InputImage, type Crop } from './InputImage.svelte';
 export { default as InputImagePreview } from './InputImagePreview.svelte';
+export { default as InputCombo } from './InputCombo.svelte';
 export { default as SelectorList } from './SelectorList.svelte';

package/dist/ui/input/index.js

@@ -22,4 +22,5 @@ export { default as InputOptions } from './InputOptions.svelte';
 export { default as InputSearch } from './InputSearch.svelte';
 export { default as InputImage } from './InputImage.svelte';
 export { default as InputImagePreview } from './InputImagePreview.svelte';
+export { default as InputCombo } from './InputCombo.svelte';
 export { default as SelectorList } from './SelectorList.svelte';

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.10",
+  "version": "0.1.13",
   "description": "My fullstack material build with sveltekit, daisyui, zod and more",
   "author": {
     "name": "Jonas Voisard",
@@ -48,6 +48,7 @@
     "prettier": "^3.1.1",
     "prettier-plugin-svelte": "^3.1.2",
     "prettier-plugin-tailwindcss": "^0.5.9",
+    "prisma": "^5.13.0",
     "publint": "^0.1.9",
     "svelte": "^4.2.7",
     "svelte-check": "^3.6.0",
@@ -60,7 +61,7 @@
   "dependencies": {
     "@lucia-auth/adapter-prisma": "^4.0.1",
     "@mdi/js": "^7.4.47",
-    "@prisma/client": "5.12.1",
+    "@prisma/client": "5.13.0",
     "@tiptap/core": "^2.3.0",
     "@tiptap/extension-color": "^2.3.0",
     "@tiptap/extension-highlight": "^2.3.0",
@@ -81,7 +82,6 @@
     "lucia": "^3.1.1",
     "mode-watcher": "^0.3.0",
     "oslo": "^1.2.0",
-    "prisma": "^5.12.1",
     "svelte-easy-crop": "^2.0.3",
     "svelte-sonner": "^0.3.22",
     "tippy.js": "^6.3.7",