firstly 0.0.1 → 0.0.3

package/esm/ui/internals/FieldContainer.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        label?: string | undefined;
+        forId: string;
+        required?: boolean | undefined;
+        error?: string | undefined;
+        /**
+           * example usage for paginate
+           * classes={{ label: 'justify-end' }}
+           */ classes?: {
+            label?: string | undefined;
+            slot?: string | undefined;
+        } | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type FieldContainerProps = typeof __propDef.props;
+export type FieldContainerEvents = typeof __propDef.events;
+export type FieldContainerSlots = typeof __propDef.slots;
+export default class FieldContainer extends SvelteComponent<FieldContainerProps, FieldContainerEvents, FieldContainerSlots> {
+}
+export {};

package/esm/ui/internals/Input.svelte

@@ -0,0 +1,98 @@
+<script>import { createEventDispatcher, tick } from "svelte";
+import { tw } from "../../utils/tailwind";
+export let value = void 0;
+const dispatch = createEventDispatcher();
+export let focus = false;
+const focusNow = (node) => {
+  if (focus) {
+    tick().then(() => {
+      node.focus();
+    });
+  }
+};
+export let withDedounce = false;
+let timer = null;
+const debounce = (fn) => {
+  clearTimeout(timer);
+  timer = setTimeout(() => {
+    fn();
+  }, 444);
+};
+function dispatchInput(value2) {
+  if ($$restProps.type === "date") {
+    if (value2) {
+      dispatch("input", { value: transformDate(value2) });
+    }
+  } else {
+    dispatch("input", { value: value2 });
+  }
+}
+let className = void 0;
+export { className as class };
+const handleInput = (e) => {
+  const target = e.target;
+  if ($$restProps.type === "number") {
+    if (e.data === "." || e.data === ",") {
+      e.preventDefault();
+    } else {
+      value = +target.value;
+    }
+  } else {
+    value = target.value;
+  }
+  if (withDedounce) {
+    return debounce(() => {
+      dispatchInput(value);
+    });
+  } else {
+    dispatchInput(value);
+  }
+};
+const transformDate = (input) => {
+  const rawDateSplited = input.split("-");
+  if (rawDateSplited.length === 3) {
+    const yearSplited = rawDateSplited[0].split("");
+    if (yearSplited.length === 4 && yearSplited[0] === "0" && yearSplited[1] === "0" && yearSplited[2] !== "0") {
+      return `20${yearSplited[2]}${yearSplited[3]}-${rawDateSplited[1]}-${rawDateSplited[2]}`;
+    }
+  }
+  return input;
+};
+const handleKeyup = (event) => {
+  if ($$restProps.type === "date") {
+    value = transformDate(event.target.value);
+  }
+};
+</script>
+
+<input
+  use:focusNow
+  class={tw('w-full px-2', className)}
+  on:input={handleInput}
+  bind:value
+  on:blur
+  on:change
+  on:click
+  on:focus
+  on:keydown
+  on:keypress
+  on:keyup={handleKeyup}
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:paste
+  {...$$restProps}
+/>
+
+<style>
+  input[type='number'] {
+    -webkit-appearance: textfield;
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number']::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+  }
+</style>

package/esm/ui/internals/Input.svelte.d.ts

@@ -0,0 +1,35 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLInputAttributes } from 'svelte/elements';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value?: HTMLInputAttributes['value'];
+        focus?: boolean | undefined;
+        withDedounce?: boolean | undefined;
+        class?: string | undefined | null;
+    };
+    events: {
+        blur: FocusEvent;
+        change: Event;
+        click: MouseEvent;
+        focus: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        mouseover: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        paste: ClipboardEvent;
+        input: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export type InputProps = typeof __propDef.props;
+export type InputEvents = typeof __propDef.events;
+export type InputSlots = typeof __propDef.slots;
+export default class Input extends SvelteComponent<InputProps, InputEvents, InputSlots> {
+}
+export {};

package/esm/ui/internals/Textarea.svelte

@@ -0,0 +1,61 @@
+<script>import { createEventDispatcher, onMount } from "svelte";
+import { scrollbar } from "../../theme";
+export let name = null;
+export let id = "";
+export let rows = 6;
+export let placeholder = "";
+export let focus = false;
+export let value = "";
+export let readonly = false;
+export const error = false;
+export let align = `left`;
+const _tmp = align;
+const dispatch = createEventDispatcher();
+let reference;
+const focusNow = (node) => {
+  if (focus) {
+    node.focus();
+  }
+};
+onMount(() => {
+  if (!reference) {
+    return;
+  }
+  if (!focus) {
+    return;
+  }
+  reference.focus();
+});
+function dispatchInput(value2) {
+  dispatch("input", { value: value2 });
+}
+</script>
+
+{#if readonly}
+  <span class="flex min-h-8 max-w-full items-center px-3 py-1 text-sm md:min-h-[2.5rem]">
+    <div class="overflow-hidden">
+      {@html value ?? '-'}
+    </div>
+  </span>
+{:else}
+  <textarea
+    use:focusNow
+    {...$$restProps}
+    class="textarea textarea-bordered
+			shadow-neutral-focus md:rounded-xls flex h-max min-h-8
+			w-full items-center rounded-lg bg-transparent text-xs
+			shadow-sm md:text-sm lg:min-h-[2.5rem]
+			{scrollbar.thin}"
+    id={id || name || 'default-textarea-id'}
+    {name}
+    {placeholder}
+    autocomplete="off"
+    bind:this={reference}
+    bind:value
+    {rows}
+    on:input={(e) => {
+      // @ts-ignore
+      dispatchInput(e.target.value)
+    }}
+  />
+{/if}

package/esm/ui/internals/Textarea.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        name?: string | null | undefined;
+        id?: string | undefined;
+        rows?: number | undefined;
+        placeholder?: string | undefined;
+        focus?: boolean | undefined;
+        value?: string | undefined;
+        readonly?: boolean | undefined;
+        error?: false | undefined;
+        align?: "left" | "right" | undefined;
+    };
+    events: {
+        input: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export type TextareaProps = typeof __propDef.props;
+export type TextareaEvents = typeof __propDef.events;
+export type TextareaSlots = typeof __propDef.slots;
+export default class Textarea extends SvelteComponent<TextareaProps, TextareaEvents, TextareaSlots> {
+    get error(): false;
+}
+export {};

package/esm/ui/internals/select/MultiSelectMelt.svelte

@@ -0,0 +1,217 @@
+<script>import { createCombobox, createSync } from "@melt-ui/svelte";
+import { createEventDispatcher, onMount } from "svelte";
+import { fly } from "svelte/transition";
+import {
+  LibIcon_Check,
+  LibIcon_Cross,
+  LibIcon_MultiCheck,
+  LibIcon_Search,
+  tw
+} from "../../..";
+import Icon from "../../Icon.svelte";
+export let id;
+export let disabled = false;
+export let placeholder = "";
+export let items = [];
+let totalCount = void 0;
+export let loadOptions = void 0;
+export let values = void 0;
+export let clearable = false;
+const dispatch = createEventDispatcher();
+function dispatchSelectedValues(_data) {
+  values = _data?.map((_data2) => _data2.id);
+  dispatch("selected", _data);
+}
+onMount(async () => {
+  if (loadOptions) {
+    const lo = await loadOptions("");
+    items = lo.items;
+    totalCount = lo.totalCount;
+    filteredItems = items;
+  }
+});
+const getDefaultValues = (_selectedValue) => {
+  if (!items) {
+    return [];
+  }
+  const f = items.filter((c) => (_selectedValue ?? []).includes(String(c.id)));
+  if (f) {
+    return f.map((c) => toOption(c));
+  }
+  return [];
+};
+const toOption = (item) => ({
+  value: item,
+  label: item.caption
+  // icon: item.icon,
+  // disabled: item.disabled,
+});
+const {
+  elements: { menu, input, option },
+  states: { open, inputValue, touchedInput, selected: localSelected },
+  helpers: { isSelected }
+} = createCombobox({
+  forceVisible: true,
+  multiple: true,
+  disabled,
+  ids: { label: id }
+});
+const clearSelection = () => {
+  sync.selected(void 0);
+};
+let debounceTimer;
+const debounce = (callback) => {
+  clearTimeout(debounceTimer);
+  debounceTimer = setTimeout(
+    callback,
+    // debounce only if we have a load option
+    loadOptions ? 444 : 0
+  );
+};
+const sync = createSync({ selected: localSelected });
+$:
+  items && sync.selected(getDefaultValues(values), (v) => {
+    const list = (v ?? []).map((c) => c.value.id);
+    const countMap = /* @__PURE__ */ new Map();
+    list.forEach((item) => {
+      countMap.set(item, (countMap.get(item) || 0) + 1);
+    });
+    const uniqueList = list.filter((item) => countMap.get(item) === 1);
+    const newIds = uniqueList.sort().join(",");
+    const oldSelectedValues = (values ?? []).sort().join(",");
+    if (newIds !== oldSelectedValues) {
+      dispatchSelectedValues(
+        v === void 0 ? void 0 : v.filter((c) => uniqueList.includes(c.value.id)).map((c) => c.value)
+      );
+    }
+  });
+const labelToDisplayInInput = (_localSelected) => {
+  if (_localSelected === void 0 || _localSelected.length === 0) {
+    return "";
+  }
+  if (_localSelected.length === 1) {
+    return _localSelected[0].label ?? "";
+  }
+  return `${_localSelected.length} \xE9l\xE9ments`;
+};
+$:
+  $inputValue = labelToDisplayInInput($localSelected);
+const iconToDisplayInInput = (_localSelected) => {
+  if (_localSelected === void 0 || _localSelected.length === 0) {
+    return { data: LibIcon_Search };
+  }
+  if (_localSelected.length === 1) {
+    return _localSelected[0].value.icon ?? { data: LibIcon_Search };
+  }
+  return { data: LibIcon_MultiCheck };
+};
+const isChecked = (_localSelected, _item) => {
+  const f = (_localSelected ?? []).filter((c) => c.value?.id === _item.id);
+  if (f.length > 0) {
+    return true;
+  }
+  return false;
+};
+let filteredItems = items;
+const calcFilteredItems = (touched, str, values2) => {
+  if (touched && !str.endsWith(" \xE9l\xE9ments")) {
+    debounce(async () => {
+      const normalizedInput = str.toLowerCase();
+      filteredItems = items.filter((item) => {
+        return item.caption?.toLowerCase().includes(normalizedInput);
+      });
+    });
+  } else {
+    filteredItems = items;
+  }
+};
+$:
+  calcFilteredItems($touchedInput, $inputValue, values);
+</script>
+
+<div class="input input-bordered flex min-w-0 items-center">
+  <div class="relative">
+    {#if iconToDisplayInInput($localSelected)}
+      {@const ico = iconToDisplayInInput($localSelected)}
+      <Icon
+        data={ico?.data}
+        class={tw(['relative', ico?.class])}
+        style={ico?.style}
+        size={ico?.size}
+      ></Icon>
+    {/if}
+  </div>
+  <!-- {id} -->
+  <input
+    {...$input}
+    use:$input.action
+    class="-ml-8 -mr-5 h-full min-w-0 flex-grow bg-transparent px-10"
+    {placeholder}
+  />
+  <div class="pointer-events-none relative right-0 flex gap-2">
+    {#if clearable && $localSelected && $localSelected.length > 0}
+      <button on:click={clearSelection} class="pointer-events-auto">
+        <Icon data={LibIcon_Cross}></Icon>
+      </button>
+    {/if}
+    <!-- {#if $open}
+      <Icon data={LibIcon_ChevronUp}></Icon>
+    {:else}
+      <Icon data={LibIcon_ChevronDown}></Icon>
+    {/if} -->
+  </div>
+</div>
+
+{#if $open}
+  <ul
+    class="border-base-content/20 z-50 flex max-h-[300px] flex-col overflow-hidden rounded-lg border"
+    {...$menu}
+    use:$menu.action
+    transition:fly={{ duration: 150, y: -5 }}
+  >
+    <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+    <div class="bg-base-100 flex max-h-full flex-col gap-0 overflow-y-auto py-2" tabindex="0">
+      {#each filteredItems as item, index (index)}
+        <li
+          {...$option(toOption(item))}
+          use:$option.action
+          class="data-[highlighted]:bg-primary data-[highlighted]:text-primary-content relative flex cursor-pointer scroll-my-2 items-center
+          rounded-md
+          px-1
+          py-2
+					data-[disabled]:opacity-50"
+        >
+          {#if isChecked($localSelected, item)}
+            <Icon data={LibIcon_Check} class="w-6"></Icon>
+          {:else}
+            <!-- just to book the place -->
+            <span class="w-6"></span>
+          {/if}
+          {#if item.icon?.data}
+            <Icon
+              data={item.icon.data}
+              class={tw(['flex-shrink-0', item.icon.class])}
+              style={item.icon.style}
+              size={item.icon.size}
+            ></Icon>
+          {/if}
+          <div class="pl-2 {item.class}">
+            <span class="font-medium">{item.caption}</span>
+          </div>
+        </li>
+      {:else}
+        <li class="relative cursor-pointer rounded-md py-1 pl-8 pr-4">Aucun résultat</li>
+      {/each}
+    </div>
+    {#if totalCount}
+      <div class="bg-base-300 z-50 text-center text-xs">
+        {#if items.length < totalCount}
+          ({items.length} / {totalCount})
+        {:else}
+          <!-- yes, items.length can be bigger if the selected item is not in the limit -->
+          ({items.length})
+        {/if}
+      </div>
+    {/if}
+  </ul>
+{/if}

package/esm/ui/internals/select/MultiSelectMelt.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+import { type KitBaseItem } from '../../..';
+declare const __propDef: {
+    props: {
+        id: string;
+        disabled?: boolean | undefined;
+        placeholder?: string | undefined;
+        items?: KitBaseItem[] | undefined;
+        loadOptions?: ((str: string) => Promise<{
+            items: KitBaseItem[];
+            totalCount: number;
+        }>) | undefined;
+        values?: string[] | undefined;
+        clearable?: boolean | undefined;
+    };
+    events: {
+        selected: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type MultiSelectMeltProps = typeof __propDef.props;
+export type MultiSelectMeltEvents = typeof __propDef.events;
+export type MultiSelectMeltSlots = typeof __propDef.slots;
+export default class MultiSelectMelt extends SvelteComponent<MultiSelectMeltProps, MultiSelectMeltEvents, MultiSelectMeltSlots> {
+}
+export {};