fuma 0.1.7 → 0.1.11

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

@@ -10,10 +10,14 @@ mode.subscribe((_mode) => {
     return;
   html.setAttribute("data-theme", _mode);
 });
+$:
+  path = $mode === "light" ? mdiWhiteBalanceSunny : mdiWeatherNight;
 </script>
 
 <ModeWatcher />
 
-<button class="btn btn-square btn-sm" on:click={toggleMode}>
-	<Icon path={$mode === 'light' ? mdiWhiteBalanceSunny : mdiWeatherNight} />
-</button>
+<slot {toggleMode} {path}>
+	<button class="btn btn-square btn-sm" on:click={toggleMode}>
+		<Icon {path} />
+	</button>
+</slot>

package/dist/ui/ToggleMode.svelte.d.ts

@@ -1,10 +1,16 @@
 import { SvelteComponent } from "svelte";
+import { toggleMode } from 'mode-watcher';
 declare const __propDef: {
     props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {
+            toggleMode: typeof toggleMode;
+            path: string;
+        };
+    };
 };
 export type ToggleModeProps = typeof __propDef.props;
 export type ToggleModeEvents = typeof __propDef.events;

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}>
+	<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

@@ -9,13 +9,14 @@ export let label = "";
 export let search;
 export let createUrl = "";
 export let createTitle = "";
-export let item = null;
+let item = null;
+export { item as value };
 export let error = "";
 export let placeholder = "";
 export let tippyProps = {};
 export let flatMode = false;
 export let slotItem = null;
-export let slotSuggestion = null;
+export let slotSuggestion = slotItem;
 let klass = "";
 export { klass as class };
 export let classList = "";

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

@@ -10,7 +10,7 @@ declare class __sveltets_Render<RelationItem extends {
         search: (q: string) => Promise<RelationItem[]>;
         createUrl?: string | undefined;
         createTitle?: string | undefined;
-        item?: RelationItem | null | undefined;
+        value?: RelationItem | null | undefined;
         error?: string | undefined;
         placeholder?: string | undefined;
         tippyProps?: Partial<TippyProps> | undefined;

package/dist/ui/input/InputRelations.svelte

@@ -14,12 +14,13 @@ export let error = "";
 export let placeholder = "";
 export let flatMode = false;
 export let slotItem = null;
-export let slotSuggestion = null;
+export let slotSuggestion = slotItem;
 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;
 let focusIndex = 0;

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

@@ -16,7 +16,7 @@ declare class __sveltets_Render<RelationItem extends {
         slotSuggestion?: ((item: RelationItem) => string | ComponentAndProps) | null | undefined;
         class?: string | undefined;
         classList?: string | undefined;
-        items?: RelationItem[] | null | undefined;
+        value?: RelationItem[] | null | undefined;
     };
     events(): {
         input: CustomEvent<{

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" />
+	<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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuma",
-  "version": "0.1.7",
+  "version": "0.1.11",
   "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",