fuma 0.0.1

package/dist/ui/input/action.js

@@ -0,0 +1,56 @@
+import { get } from 'svelte/store';
+import debounce from 'debounce';
+import { urlParam } from '../../index.js';
+import { goto } from '$app/navigation';
+export function bindValueWithParams(node, { bindEnable = false, debounceTime = 200, initValue = (initalValue) => (node.value = initalValue), listenerType = 'input' }) {
+    const { name } = node;
+    if (!name || !bindEnable)
+        return;
+    const importValueFromParams = () => {
+        const _urlParam = get(urlParam);
+        const value = _urlParam.get(name);
+        if (value)
+            return initValue(value);
+    };
+    const handleInput = debounce(async () => {
+        const _urlParam = get(urlParam);
+        const newUrl = node.value
+            ? _urlParam.with({ [name]: node.value }, 'skip', 'take')
+            : _urlParam.without(name, 'skip', 'take');
+        await goto(newUrl, { replaceState: true, keepFocus: true, noScroll: true });
+    }, debounceTime);
+    importValueFromParams();
+    node.addEventListener(listenerType, handleInput);
+    return {
+        destroy() {
+            node.removeEventListener(listenerType, handleInput);
+        }
+    };
+}
+export function bindCheckedWithParams(node, { bindEnable = false, listenerType = 'input', debounceTime = 0, initValue = (initalValue) => (node.checked = node.value === initalValue) }) {
+    const { name } = node;
+    if (!name || !bindEnable)
+        return;
+    const importValueFromParams = () => {
+        const _urlParam = get(urlParam);
+        if (!_urlParam.has(name))
+            return;
+        const paramValue = _urlParam.get(name);
+        if (paramValue)
+            initValue(paramValue);
+    };
+    const handleInput = debounce(async () => {
+        const _urlParam = get(urlParam);
+        const newUrl = node.checked
+            ? _urlParam.with({ [name]: node.value }, 'skip', 'take')
+            : _urlParam.without(name, 'skip', 'take');
+        await goto(newUrl, { replaceState: true, keepFocus: true, noScroll: true });
+    }, debounceTime);
+    importValueFromParams();
+    node.addEventListener(listenerType, handleInput);
+    return {
+        destroy: () => {
+            node.removeEventListener(listenerType, handleInput);
+        }
+    };
+}

package/dist/ui/input/index.d.ts

@@ -0,0 +1,25 @@
+export * from './types.js';
+export * from './action.js';
+export { default as FormControl } from './FormControl.svelte';
+export { default as InputText } from './InputText.svelte';
+export { default as InputTextRich } from './textRich/InputTextRich.svelte';
+export { default as InputPassword } from './InputPassword.svelte';
+export { default as InputTextarea } from './InputTextarea.svelte';
+export { default as InputRelations } from './InputRelations.svelte';
+export { default as InputRelation } from './InputRelation.svelte';
+export { default as InputDate } from './InputDate.svelte';
+export { default as InputDatetime } from './InputDatetime.svelte';
+export { default as InputTime } from './InputTime.svelte';
+export { default as InputNumber } from './InputNumber.svelte';
+export { default as InputBoolean } from './InputBoolean.svelte';
+export { default as InputRadio } from './InputRadio.svelte';
+export { default as InputOptionInParam } from './InputOptionInParam.svelte';
+export { default as InputCheckboxs } from './InputCheckboxs.svelte';
+export { default as InputCheckboxsMenu } from './InputCheckboxsMenu.svelte';
+export { default as InputCheckboxsTree } from './InputCheckboxsTree.svelte';
+export { default as InputSelect } from './InputSelect.svelte';
+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 SelectorList } from './SelectorList.svelte';

package/dist/ui/input/index.js

@@ -0,0 +1,25 @@
+export * from './types.js';
+export * from './action.js';
+export { default as FormControl } from './FormControl.svelte';
+export { default as InputText } from './InputText.svelte';
+export { default as InputTextRich } from './textRich/InputTextRich.svelte';
+export { default as InputPassword } from './InputPassword.svelte';
+export { default as InputTextarea } from './InputTextarea.svelte';
+export { default as InputRelations } from './InputRelations.svelte';
+export { default as InputRelation } from './InputRelation.svelte';
+export { default as InputDate } from './InputDate.svelte';
+export { default as InputDatetime } from './InputDatetime.svelte';
+export { default as InputTime } from './InputTime.svelte';
+export { default as InputNumber } from './InputNumber.svelte';
+export { default as InputBoolean } from './InputBoolean.svelte';
+export { default as InputRadio } from './InputRadio.svelte';
+export { default as InputOptionInParam } from './InputOptionInParam.svelte';
+export { default as InputCheckboxs } from './InputCheckboxs.svelte';
+export { default as InputCheckboxsMenu } from './InputCheckboxsMenu.svelte';
+export { default as InputCheckboxsTree } from './InputCheckboxsTree.svelte';
+export { default as InputSelect } from './InputSelect.svelte';
+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 SelectorList } from './SelectorList.svelte';

package/dist/ui/input/textRich/InputTextRich.svelte

@@ -0,0 +1,58 @@
+<script>import { createEventDispatcher, onMount } from "svelte";
+import { Editor } from "@tiptap/core";
+import debounce from "debounce";
+import { jsonParse } from "../../../utils/jsonParse.js";
+import ToolsBar from "./ToolsBar.svelte";
+import { extensions } from "./extensions.js";
+export let value = "";
+export let key = "";
+export let classToolbar = "";
+let element;
+let editor = null;
+const dispatch = createEventDispatcher();
+onMount(() => {
+  initEditor();
+  return () => {
+    if (editor)
+      editor.destroy();
+  };
+});
+function initEditor() {
+  const valueAsHtml = !value.startsWith("{") && value !== "null";
+  editor = new Editor({
+    element,
+    content: valueAsHtml ? value : jsonParse(value, void 0),
+    editorProps: {
+      attributes: {
+        class: "prose max-w-[210mm] mx-auto focus:outline-none"
+      }
+    },
+    extensions,
+    onTransaction() {
+      editor = editor;
+      updateValue();
+    }
+  });
+}
+const updateValue = debounce(() => {
+  if (!editor)
+    return;
+  const newValue = JSON.stringify(editor.getJSON());
+  console.log(newValue);
+  if (newValue === value)
+    return;
+  value = newValue;
+  dispatch("change");
+}, 120);
+</script>
+
+<div class="bordered relative rounded-lg border">
+	{#if editor}
+		<ToolsBar {editor} class={classToolbar} />
+	{/if}
+	<div bind:this={element} class="min-h-[20rem] p-4 pb-10" />
+</div>
+
+{#if key}
+	<input type="hidden" name={key} {value} />
+{/if}

package/dist/ui/input/textRich/InputTextRich.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: string | undefined;
+        key?: string | undefined;
+        classToolbar?: string | undefined;
+    };
+    events: {
+        change: CustomEvent<void>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputTextRichProps = typeof __propDef.props;
+export type InputTextRichEvents = typeof __propDef.events;
+export type InputTextRichSlots = typeof __propDef.slots;
+export default class InputTextRich extends SvelteComponent<InputTextRichProps, InputTextRichEvents, InputTextRichSlots> {
+}
+export {};

package/dist/ui/input/textRich/SuggesionList.svelte

@@ -0,0 +1,21 @@
+<script>import { SelectorList } from "../index.js";
+export let props;
+export let keyDownEvent = void 0;
+function handleSelect(index) {
+  const item = props.items[index];
+  if (!item)
+    return;
+  props.command(item);
+}
+</script>
+
+<SelectorList
+	items={props.items}
+	{keyDownEvent}
+	keyDownPreventDefault={false}
+	let:item
+	on:select={(event) => handleSelect(event.detail)}
+	class=" max-h-64 overflow-auto"
+>
+	<span>{item.label}</span>
+</SelectorList>

package/dist/ui/input/textRich/SuggesionList.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { SuggestionProps } from '@tiptap/suggestion';
+import type { SuggestionItem } from './suggestion.js';
+declare const __propDef: {
+    props: {
+        props: SuggestionProps<SuggestionItem>;
+        keyDownEvent?: KeyboardEvent | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SuggesionListProps = typeof __propDef.props;
+export type SuggesionListEvents = typeof __propDef.events;
+export type SuggesionListSlots = typeof __propDef.slots;
+export default class SuggesionList extends SvelteComponent<SuggesionListProps, SuggesionListEvents, SuggesionListSlots> {
+}
+export {};

package/dist/ui/input/textRich/ToolMark.svelte

@@ -0,0 +1,19 @@
+<script>import { Icon } from "../../index.js";
+import { tip } from "../../../action/tip.js";
+export let editor;
+export let key;
+export let label;
+export let icon;
+export let action;
+$:
+  isActive = editor.isActive(key);
+</script>
+
+<button
+	type="button"
+	use:tip={{ content: label, arrow: true }}
+	class="menu-item {isActive ? 'bg-base-200/60' : ''}"
+	on:click={action}
+>
+	<Icon path={icon} size={19} class={isActive ? 'opacity-90' : 'opacity-60'} />
+</button>

package/dist/ui/input/textRich/ToolMark.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { Editor } from '@tiptap/core';
+declare const __propDef: {
+    props: {
+        editor: Editor;
+        key: string;
+        label: string;
+        icon: string;
+        action: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToolMarkProps = typeof __propDef.props;
+export type ToolMarkEvents = typeof __propDef.events;
+export type ToolMarkSlots = typeof __propDef.slots;
+export default class ToolMark extends SvelteComponent<ToolMarkProps, ToolMarkEvents, ToolMarkSlots> {
+}
+export {};

package/dist/ui/input/textRich/ToolMarkColor.svelte

@@ -0,0 +1,32 @@
+<script>import { Icon } from "../../index.js";
+import { tip } from "../../../action/tip.js";
+export let icon;
+export let label;
+export let color;
+export let setColor;
+let inputColor;
+function handleClick() {
+  inputColor.click();
+  setColor(color);
+}
+</script>
+
+<div class="flex align-bottom">
+	<input
+		type="color"
+		tabindex="-1"
+		bind:value={color}
+		class="h-0 w-0 translate-y-8 border-none opacity-0 outline-none"
+		bind:this={inputColor}
+		on:input={() => setColor(color)}
+	/>
+	<button type="button" class="menu-item gap-2" on:click={handleClick} use:tip={{ content: label }}>
+		<div class="indicator">
+			<span
+				class="badge indicator-item badge-xs scale-75 border transition-none"
+				style:background={color}
+			/>
+			<Icon path={icon} size={19} class="opacity-70" />
+		</div>
+	</button>
+</div>

package/dist/ui/input/textRich/ToolMarkColor.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        icon: string;
+        label: string;
+        color: string;
+        setColor: (color: string) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToolMarkColorProps = typeof __propDef.props;
+export type ToolMarkColorEvents = typeof __propDef.events;
+export type ToolMarkColorSlots = typeof __propDef.slots;
+export default class ToolMarkColor extends SvelteComponent<ToolMarkColorProps, ToolMarkColorEvents, ToolMarkColorSlots> {
+}
+export {};

package/dist/ui/input/textRich/ToolMarkLink.svelte

@@ -0,0 +1,63 @@
+<script>import { mdiLinkVariant } from "@mdi/js";
+import { Dialog, InputText } from "../../index.js";
+import { z } from "../../../validation/zod.js";
+import ToolMark from "./ToolMark.svelte";
+export let editor;
+let dialogLink;
+let linkHref = "";
+let linkError = "";
+async function handleNewLink() {
+  if (!linkHref) {
+    linkError = "URL requis";
+    return;
+  }
+  const isEmail = z.string().email().safeParse(linkHref);
+  if (isEmail.success)
+    linkHref = "mailto:" + linkHref;
+  else if (!linkHref.match(/^http(s)?:\/\//)) {
+    linkHref = "https://" + linkHref;
+  }
+  const isUrl = z.string().url().safeParse(linkHref);
+  if (!isUrl.success) {
+    linkError = "URL invalide";
+    return;
+  }
+  editor.chain().focus().setLink({ href: linkHref }).run();
+  dialogLink.close();
+}
+function handleRemoveLink() {
+  editor.chain().focus().unsetLink().run();
+  dialogLink.close();
+}
+function handleKeyDown(event) {
+  if (event.key !== "Enter")
+    return;
+  event.preventDefault();
+  handleNewLink();
+}
+</script>
+
+<ToolMark
+	{editor}
+	key="link"
+	label="Lien"
+	icon={mdiLinkVariant}
+	action={() => {
+		const firstChild = editor.state.selection.content().content.firstChild
+		linkHref = editor.getAttributes('link').href || firstChild?.textContent || ''
+		dialogLink.showModal()
+	}}
+/>
+
+<Dialog bind:dialog={dialogLink}>
+	<h3 slot="header" class="title">Éditer un lien</h3>
+	<div class="flex flex-col gap-2">
+		<InputText bind:value={linkHref} bind:error={linkError} on:keydown={handleKeyDown} />
+		<div class="flex flex-row-reverse gap-2">
+			<button type="button" class="btn" on:click={handleNewLink}> Valider </button>
+			<button type="button" class="btn btn-ghost text-error" on:click={handleRemoveLink}>
+				Supprimer
+			</button>
+		</div>
+	</div>
+</Dialog>

package/dist/ui/input/textRich/ToolMarkLink.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { Editor } from '@tiptap/core';
+declare const __propDef: {
+    props: {
+        editor: Editor;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToolMarkLinkProps = typeof __propDef.props;
+export type ToolMarkLinkEvents = typeof __propDef.events;
+export type ToolMarkLinkSlots = typeof __propDef.slots;
+export default class ToolMarkLink extends SvelteComponent<ToolMarkLinkProps, ToolMarkLinkEvents, ToolMarkLinkSlots> {
+}
+export {};

package/dist/ui/input/textRich/ToolMenu.svelte

@@ -0,0 +1,50 @@
+<script>import { mdiChevronDown } from "@mdi/js";
+import { Icon, DropDown } from "../../index.js";
+export let editor;
+export let tools;
+export let hideLabel = false;
+let dropdown;
+function handleClick(tool) {
+  tool.action();
+  dropdown.hide();
+}
+$:
+  toolSelected = tools.find((t) => {
+    if (t.key)
+      return editor.isActive(t.key, t.attributes);
+    if (t.attributes)
+      return editor.isActive(t.attributes);
+    return false;
+  }) || tools[0];
+</script>
+
+<DropDown hideOnBlur bind:this={dropdown}>
+	<button slot="activator" type="button" class="menu-item gap-2">
+		<slot name="activator">
+			<Icon path={toolSelected.icon} size={20} class="opacity-70" />
+			{#if !hideLabel}
+				<span class="text-sm font-light">{toolSelected.label}</span>
+			{/if}
+		</slot>
+		<Icon path={mdiChevronDown} size={20} class="translate-y-[1px] opacity-70" />
+	</button>
+
+	{#each tools as tool}
+		{#if tool.newSection}
+			<hr class="my-2" />
+		{/if}
+		<button
+			disabled={tool.disable}
+			type="button"
+			class="menu-item w-full"
+			class:disabled={tool.disable}
+			class:opacity-60={tool.disable}
+			on:click={() => handleClick(tool)}
+		>
+			<Icon path={tool.icon} size={20} class="opacity-70" />
+			<span>
+				{tool.label}
+			</span>
+		</button>
+	{/each}
+</DropDown>

package/dist/ui/input/textRich/ToolMenu.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import type { Editor } from '@tiptap/core';
+declare const __propDef: {
+    props: {
+        editor: Editor;
+        tools: {
+            key?: string | undefined;
+            attributes?: {} | undefined;
+            label: string;
+            icon: string;
+            action: () => unknown;
+            newSection?: true | undefined;
+            disable?: boolean | undefined;
+        }[];
+        hideLabel?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        activator: {};
+    };
+};
+export type ToolMenuProps = typeof __propDef.props;
+export type ToolMenuEvents = typeof __propDef.events;
+export type ToolMenuSlots = typeof __propDef.slots;
+export default class ToolMenu extends SvelteComponent<ToolMenuProps, ToolMenuEvents, ToolMenuSlots> {
+}
+export {};

package/dist/ui/input/textRich/ToolMenuAlign.svelte

@@ -0,0 +1,46 @@
+<script>import {
+  mdiAlignHorizontalLeft,
+  mdiAlignHorizontalCenter,
+  mdiAlignHorizontalRight,
+  mdiFormatIndentIncrease,
+  mdiFormatIndentDecrease
+} from "@mdi/js";
+import ToolMenu from "./ToolMenu.svelte";
+export let editor;
+</script>
+
+<ToolMenu
+	{editor}
+	hideLabel
+	tools={[
+		{
+			attributes: { textAlign: 'left' },
+			label: 'Aligner à gauche',
+			icon: mdiAlignHorizontalLeft,
+			action: () => editor.commands.setTextAlign('left'),
+		},
+		{
+			attributes: { textAlign: 'center' },
+			label: 'Aligner au centre',
+			icon: mdiAlignHorizontalCenter,
+			action: () => editor.commands.setTextAlign('center'),
+		},
+		{
+			attributes: { textAlign: 'right' },
+			label: 'Aligner à droite',
+			icon: mdiAlignHorizontalRight,
+			action: () => editor.commands.setTextAlign('right'),
+		},
+		{
+			newSection: true,
+			label: 'Retrait à droite',
+			icon: mdiFormatIndentIncrease,
+			action: () => editor.commands.indent(),
+		},
+		{
+			label: 'Retrait à droite',
+			icon: mdiFormatIndentDecrease,
+			action: () => editor.commands.outdent(),
+		},
+	]}
+/>

package/dist/ui/input/textRich/ToolMenuAlign.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { Editor } from '@tiptap/core';
+declare const __propDef: {
+    props: {
+        editor: Editor;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToolMenuAlignProps = typeof __propDef.props;
+export type ToolMenuAlignEvents = typeof __propDef.events;
+export type ToolMenuAlignSlots = typeof __propDef.slots;
+export default class ToolMenuAlign extends SvelteComponent<ToolMenuAlignProps, ToolMenuAlignEvents, ToolMenuAlignSlots> {
+}
+export {};

package/dist/ui/input/textRich/ToolMenuInsert.svelte

@@ -0,0 +1,49 @@
+<script>import { createEventDispatcher } from "svelte";
+import { mdiPlus, mdiMinus, mdiImageOutline, mdiYoutube, mdiAt } from "@mdi/js";
+import { Icon } from "../../index.js";
+import ToolMenu from "./ToolMenu.svelte";
+import { suggestionItems } from "./suggestion.js";
+export let editor;
+const dispatch = createEventDispatcher();
+</script>
+
+<ToolMenu
+	{editor}
+	tools={[
+		{
+			label: 'Séparateur',
+			icon: mdiMinus,
+			action: () => editor.commands.setHorizontalRule()
+		},
+		{
+			label: 'Image',
+			icon: mdiImageOutline,
+			action: () => dispatch('insertMedia')
+		},
+		{
+			label: 'Vidéo',
+			icon: mdiYoutube,
+			action: () => {
+				const src = prompt('Lien youtube')
+				if (!src) return
+				editor.commands.setYoutubeVideo({ src })
+			}
+		},
+		{
+			label: 'Valeur dynamic',
+			icon: mdiAt,
+			disable: !$suggestionItems.length,
+			action: () => {
+				const { from } = editor.state.selection
+				const lastChar = editor.state.doc.textBetween(from - 1, from)
+				const charToAdd = lastChar === '' || lastChar === ' ' ? '@' : ' @'
+				editor.chain().insertContent(charToAdd).focus().run()
+			}
+		}
+	]}
+	hideLabel
+>
+	<svelte:fragment slot="activator">
+		<Icon path={mdiPlus} size={20} class="opacity-70" />
+	</svelte:fragment>
+</ToolMenu>

package/dist/ui/input/textRich/ToolMenuInsert.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { Editor } from '@tiptap/core';
+declare const __propDef: {
+    props: {
+        editor: Editor;
+    };
+    events: {
+        insertMedia: CustomEvent<void>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToolMenuInsertProps = typeof __propDef.props;
+export type ToolMenuInsertEvents = typeof __propDef.events;
+export type ToolMenuInsertSlots = typeof __propDef.slots;
+export default class ToolMenuInsert extends SvelteComponent<ToolMenuInsertProps, ToolMenuInsertEvents, ToolMenuInsertSlots> {
+}
+export {};