firstly 0.0.1 → 0.0.3

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

@@ -0,0 +1,238 @@
+<script>import { createCombobox, createSync } from "@melt-ui/svelte";
+import { createEventDispatcher, onMount, tick } from "svelte";
+import { fly } from "svelte/transition";
+import {
+  Button,
+  LibIcon_Check,
+  LibIcon_Cross,
+  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 focus = false;
+const focusNow = (node) => {
+  if (focus) {
+    tick().then(() => {
+      node.focus();
+    });
+  }
+};
+export let loadOptions = void 0;
+export let value = void 0;
+export let clearable = false;
+export let createOptionWhenNoResult = false;
+export let default_select_if_one_item = false;
+const dispatch = createEventDispatcher();
+function dispatchSelectedValue(_data) {
+  dispatch("selected", _data);
+}
+function dispatchIssue(msg) {
+  dispatch("issue", msg);
+}
+function dispatchCreateRequest(e, input2) {
+  e.preventDefault();
+  dispatch("createRequest", input2);
+}
+let lastSearch = void 0;
+const localLoadOptions = async (str) => {
+  if (str === lastSearch) {
+    return;
+  }
+  lastSearch = str;
+  if (loadOptions) {
+    const lo = await loadOptions(str);
+    items = lo.items;
+    totalCount = lo.totalCount;
+    filteredItems = items;
+  }
+};
+onMount(async () => {
+  localLoadOptions("");
+  sync.selected(getDefaultValue(value));
+});
+const getDefaultValue = (_selectedValue) => {
+  if (!items) {
+    return;
+  }
+  const found = items.find((c) => String(c?.id) === String(_selectedValue));
+  if (found) {
+    return toOption(found);
+  } else {
+    if (value !== null && value !== void 0 && items.length > 0) {
+      dispatchIssue("VALUE_NOT_IN_ITEMS");
+    }
+  }
+};
+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,
+  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(getDefaultValue(value), (v) => {
+    if (v?.value?.id !== value) {
+      dispatchSelectedValue(v?.value);
+    }
+    value = v?.value?.id;
+  });
+$:
+  if (!$open) {
+    $inputValue = $localSelected?.label ?? "";
+  }
+$:
+  filteredItems = items;
+$: {
+  if (items.length === 1 && default_select_if_one_item) {
+    sync.selected(toOption(items[0]));
+  }
+}
+const calcFilteredItems = (touched, str, value2) => {
+  if (touched) {
+    debounce(async () => {
+      const normalizedInput = str.toLowerCase();
+      updateFilteredItems(normalizedInput);
+    });
+  } else {
+    updateFilteredItems("");
+  }
+};
+const updateFilteredItems = async (normalizedInput) => {
+  if (loadOptions) {
+    await localLoadOptions(normalizedInput);
+  } else {
+    filteredItems = items.filter((item) => {
+      return item.caption?.toLowerCase().includes(normalizedInput);
+    });
+  }
+};
+$:
+  calcFilteredItems($touchedInput, $inputValue, value);
+</script>
+
+<div class="input input-bordered flex min-w-0 items-center {disabled && 'opacity-40'}">
+  <div class="relative">
+    {#if $localSelected?.value?.icon?.data}
+      <Icon
+        data={$localSelected.value.icon.data}
+        class={tw(['relative', $localSelected.value.icon.class])}
+        style={$localSelected.value.icon.style}
+        size={$localSelected.value.icon.size}
+      ></Icon>
+    {:else}
+      <Icon data={LibIcon_Search} class="relative"></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}
+    use:focusNow
+  />
+  <div class="pointer-events-none relative right-0 flex gap-2">
+    {#if clearable && $localSelected}
+      <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 $localSelected?.value?.id === item.id}
+            <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">
+            <span class="font-medium">{item.caption}</span>
+          </div>
+        </li>
+      {:else}
+        {#if createOptionWhenNoResult}
+          <div class="p-4">
+            <Button
+              class="w-full"
+              on:click={(e) => {
+                dispatchCreateRequest(e, $inputValue)
+              }}>Créer "{$inputValue}"</Button
+            >
+          </div>
+        {:else}
+          <li class="relative cursor-pointer rounded-md py-1 pl-8 pr-4">Aucun résultat</li>
+        {/if}
+      {/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/SelectMelt.svelte.d.ts

@@ -0,0 +1,35 @@
+import { SvelteComponent } from "svelte";
+import { type KitBaseItem } from '../../../';
+declare const __propDef: {
+    props: {
+        id: string;
+        disabled?: boolean | undefined;
+        placeholder?: string | undefined;
+        items?: KitBaseItem[] | undefined;
+        focus?: boolean | undefined;
+        loadOptions?: ((str: string) => Promise<{
+            items: KitBaseItem[];
+            totalCount: number;
+        }>) | undefined;
+        value?: string | undefined;
+        clearable?: boolean | undefined;
+        createOptionWhenNoResult?: boolean | undefined;
+        default_select_if_one_item?: boolean | undefined;
+    };
+    events: {
+        selected: CustomEvent<any>;
+        issue: CustomEvent<any>;
+        createRequest: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SelectMeltProps = typeof __propDef.props;
+export type SelectMeltEvents = typeof __propDef.events;
+export type SelectMeltSlots = typeof __propDef.slots;
+export default class SelectMelt extends SvelteComponent<SelectMeltProps, SelectMeltEvents, SelectMeltSlots> {
+}
+export {};

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

@@ -0,0 +1,37 @@
+<script>import { createEventDispatcher } from "svelte";
+import Icon from "../../../ui/Icon.svelte";
+export let id;
+export let disabled = false;
+export let placeholder = "";
+export let items = [];
+export let value = void 0;
+const dispatch = createEventDispatcher();
+function dispatchSelected(_data) {
+  dispatch("selected", _data);
+}
+</script>
+
+<div {id} class="input input-bordered flex w-fit min-w-0 items-center">
+  <div class="-mx-2 flex gap-2" title={placeholder}>
+    {#each items as item}
+      <button
+        {disabled}
+        on:click={() => {
+          value = item.id
+          dispatchSelected(items.find((i) => i.id === item.id))
+        }}
+        type="button"
+        class="min-w-0 cursor-pointer rounded-md px-1.5 py-1 {value === item.id
+          ? 'bg-primary text-primary-content'
+          : ''}"
+      >
+        <div class="flex gap-2">
+          {#if item.icon}
+            <Icon {...item.icon} />
+          {/if}
+          {item.caption}
+        </div>
+      </button>
+    {/each}
+  </div>
+</div>

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

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { KitBaseItem } from '../../../';
+declare const __propDef: {
+    props: {
+        id: string;
+        disabled?: boolean | undefined;
+        placeholder?: string | undefined;
+        items?: KitBaseItem[] | undefined;
+        value?: string | number | undefined;
+    };
+    events: {
+        selected: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SelectRadioProps = typeof __propDef.props;
+export type SelectRadioEvents = typeof __propDef.events;
+export type SelectRadioSlots = typeof __propDef.slots;
+export default class SelectRadio extends SvelteComponent<SelectRadioProps, SelectRadioEvents, SelectRadioSlots> {
+}
+export {};

package/esm/ui/link/Link.svelte

@@ -0,0 +1,28 @@
+<script>export let href;
+export let target = void 0;
+export let kind = "info";
+const daisy = { info: "link-info", ghost: "" };
+let className = void 0;
+export { className as class };
+</script>
+
+<a
+  class={`${daisy[kind]} link no-underline hover:underline ${className ?? ''}`}
+  {href}
+  rel="noopener"
+  {target}
+  {...$$restProps}
+>
+  <slot />
+</a>
+
+<style>
+  a[target='_blank']::after {
+    display: inline-block;
+    content: '⇱';
+    position: relative;
+    top: -3px;
+    margin-left: 3px;
+    transform: rotate(90deg);
+  }
+</style>

package/esm/ui/link/Link.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        href: string;
+        target?: HTMLAnchorAttributes['target'];
+        kind?: "info" | "ghost" | undefined;
+        class?: string | undefined | null;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: undefined;
+    bindings?: undefined;
+};
+export type LinkProps = typeof __propDef.props;
+export type LinkEvents = typeof __propDef.events;
+export type LinkSlots = typeof __propDef.slots;
+export default class Link extends SvelteComponent<LinkProps, LinkEvents, LinkSlots> {
+}
+export {};

package/esm/ui/link/LinkPlus.svelte

@@ -0,0 +1,44 @@
+<script>import { tw } from "../..";
+import Icon from "../Icon.svelte";
+import Tooltip from "../Tooltip.svelte";
+import Link from "./Link.svelte";
+export let item;
+export let noIcon = false;
+export let captionSubStyle = "under";
+</script>
+
+<div class="flex items-center gap-4">
+  {#if item}
+    {#if item.icon?.data && !noIcon}
+      <Tooltip text={item.icon.caption}>
+        <Icon
+          data={item.icon.data}
+          class={tw('flex-shrink-0', item.icon.class)}
+          size={item.icon.size}
+        />
+      </Tooltip>
+    {/if}
+    <div class="flex flex-col items-start">
+      {#if item.href}
+        <div>
+          <Link href={item.href}>{item.caption}</Link>
+          {#if item.captionSub && captionSubStyle === 'inline'}
+            <span class="text-base-content/70 text-xs italic">{item.captionSub}</span>
+          {/if}
+        </div>
+      {:else}
+        <!-- 20 is a cool value ! -->
+        <span
+          class="text-base-content {item.class} {(item.caption ?? '').length < 20
+            ? 'text-nowrap'
+            : ''}"
+        >
+          {item.caption ?? '-'}
+        </span>
+      {/if}
+      {#if item.captionSub && captionSubStyle === 'under'}
+        <span class="text-base-content/70 text-xs italic">{item.captionSub}</span>
+      {/if}
+    </div>
+  {/if}
+</div>

package/esm/ui/link/LinkPlus.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import { type KitBaseItemLight } from '../..';
+declare const __propDef: {
+    props: {
+        item: KitBaseItemLight | undefined;
+        noIcon?: boolean | undefined;
+        captionSubStyle?: "none" | "under" | "inline" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type LinkPlusProps = typeof __propDef.props;
+export type LinkPlusEvents = typeof __propDef.events;
+export type LinkPlusSlots = typeof __propDef.slots;
+export default class LinkPlus extends SvelteComponent<LinkPlusProps, LinkPlusEvents, LinkPlusSlots> {
+}
+export {};

package/esm/utils/tailwind.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare const tw: (...inputs: ClassValue[]) => string;

package/esm/utils/tailwind.js

@@ -0,0 +1,3 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export const tw = (...inputs) => twMerge(clsx(...inputs));

package/esm/utils/transition.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="svelte" />
+import type { TransitionConfig } from 'svelte/transition';
+type FlyAndScaleOptions = {
+    y: number;
+    start: number;
+    duration?: number;
+};
+export declare const flyAndScale: (node: HTMLElement, options: FlyAndScaleOptions) => TransitionConfig;
+export type StyleObject = Record<string, number | string | undefined>;
+export {};

package/esm/utils/transition.js

@@ -0,0 +1,33 @@
+// From https://github.com/melt-ui/melt-ui/blob/develop/src/docs/utils/transition.ts
+import { cubicOut } from 'svelte/easing';
+const scaleConversion = (valueA, scaleA, scaleB) => {
+    const [minA, maxA] = scaleA;
+    const [minB, maxB] = scaleB;
+    const percentage = (valueA - minA) / (maxA - minA);
+    const valueB = percentage * (maxB - minB) + minB;
+    return valueB;
+};
+export const flyAndScale = (node, options) => {
+    const style = getComputedStyle(node);
+    const transform = style.transform === 'none' ? '' : style.transform;
+    return {
+        duration: options.duration ?? 150,
+        delay: 0,
+        css: (t) => {
+            const y = scaleConversion(t, [0, 1], [options.y, 0]);
+            const scale = scaleConversion(t, [0, 1], [options.start, 1]);
+            return styleToString({
+                transform: `${transform} translate3d(0, ${y}px, 0) scale(${scale})`,
+                opacity: t,
+            });
+        },
+        easing: cubicOut,
+    };
+};
+function styleToString(style) {
+    return Object.keys(style).reduce((str, key) => {
+        if (style[key] === undefined)
+            return str;
+        return str + `${key}:${style[key]};`;
+    }, '');
+}

package/esm/utils/types.d.ts

@@ -0,0 +1,17 @@
+/**
+ *
+ * ```ts
+ * type KnownTypes = 'password' | 'otp' | 'oAuths' | 'demo'
+ *
+ * // literal or string
+ * const knownType = litOrStr<KnownTypes>('demo')
+ * const escapedType = litOrStr('coucou')
+ *
+ * // literal[] or string[]
+ * const knownType = litOrStr<KnownTypes[]>(['demo', 'oAuths'])
+ * const escapedType = litOrStr(['hello', 'coucou'])
+ * ```
+ */
+export declare function litOrStr<T extends string | string[]>(value: T): T;
+export type ResolvedType<T> = T extends Promise<infer R> ? R : T;
+export type UnArray<T extends any[]> = T extends (infer U)[] ? U : never;

package/esm/utils/types.js

@@ -0,0 +1,17 @@
+/**
+ *
+ * ```ts
+ * type KnownTypes = 'password' | 'otp' | 'oAuths' | 'demo'
+ *
+ * // literal or string
+ * const knownType = litOrStr<KnownTypes>('demo')
+ * const escapedType = litOrStr('coucou')
+ *
+ * // literal[] or string[]
+ * const knownType = litOrStr<KnownTypes[]>(['demo', 'oAuths'])
+ * const escapedType = litOrStr(['hello', 'coucou'])
+ * ```
+ */
+export function litOrStr(value) {
+    return value;
+}

package/esm/virtual/Customer.d.ts

@@ -0,0 +1,4 @@
+export declare class Customer {
+    id: string;
+    name: string;
+}

package/esm/virtual/Customer.js

@@ -0,0 +1,24 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Entity, Fields } from 'remult';
+import { KitFields } from '../KitFields';
+let Customer = class Customer {
+    id;
+    name;
+};
+__decorate([
+    Fields.cuid()
+], Customer.prototype, "id", void 0);
+__decorate([
+    KitFields.string({ caption: 'Nom de la société', placeholder: 'Dynamic Process' })
+], Customer.prototype, "name", void 0);
+Customer = __decorate([
+    Entity('customers', {
+        allowApiCrud: true,
+    })
+], Customer);
+export { Customer };

package/esm/virtual/FilterEntity.d.ts

@@ -0,0 +1,7 @@
+export declare class FilterEntity {
+    search: string;
+    title: string;
+    is: boolean;
+    sameAdress: boolean;
+    number: number;
+}

package/esm/virtual/FilterEntity.js

@@ -0,0 +1,34 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Entity, Fields } from 'remult';
+// import { KitFields } from '../KitFields.js'
+let FilterEntity = class FilterEntity {
+    search = '';
+    title = '';
+    is = true;
+    sameAdress = true;
+    number = 200;
+};
+__decorate([
+    Fields.string({ allowNull: true, caption: 'Rechercher par' })
+], FilterEntity.prototype, "search", void 0);
+__decorate([
+    Fields.string({ allowNull: false, caption: 'Titre' })
+], FilterEntity.prototype, "title", void 0);
+__decorate([
+    Fields.boolean()
+], FilterEntity.prototype, "is", void 0);
+__decorate([
+    Fields.boolean({ caption: 'Même adresse', allowNull: true })
+], FilterEntity.prototype, "sameAdress", void 0);
+__decorate([
+    Fields.number({ allowNull: false, caption: 'number' })
+], FilterEntity.prototype, "number", void 0);
+FilterEntity = __decorate([
+    Entity('filterEntities', {})
+], FilterEntity);
+export { FilterEntity };

package/esm/virtual/StateDemoEnum.d.ts

@@ -0,0 +1,9 @@
+import { KitBaseEnum } from '../KitBaseEnum';
+import type { KitBaseEnumOptions } from '../KitBaseEnum';
+import '../ui/LibIcon';
+export declare class StateDemoEnum extends KitBaseEnum {
+    static CHECK: StateDemoEnum;
+    static EDIT: StateDemoEnum;
+    static DELETE: StateDemoEnum;
+    constructor(id: string, options?: KitBaseEnumOptions<StateDemoEnum>);
+}

package/esm/virtual/StateDemoEnum.js

@@ -0,0 +1,42 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var StateDemoEnum_1;
+import { ValueListFieldType } from 'remult';
+import { KitBaseEnum } from '../KitBaseEnum';
+import '../ui/LibIcon';
+import { LibIcon_Add, LibIcon_Delete, LibIcon_Edit } from '../ui/LibIcon';
+let StateDemoEnum = class StateDemoEnum extends KitBaseEnum {
+    static { StateDemoEnum_1 = this; }
+    static CHECK = new StateDemoEnum_1('CHECK', {
+        caption: 'Check',
+        icon: {
+            data: LibIcon_Add,
+            class: 'text-primary',
+        },
+    });
+    static EDIT = new StateDemoEnum_1('EDIT', {
+        caption: 'Edit',
+        icon: {
+            data: LibIcon_Edit,
+            class: 'text-secondary',
+        },
+    });
+    static DELETE = new StateDemoEnum_1('DELETE', {
+        caption: 'Delete',
+        icon: {
+            data: LibIcon_Delete,
+            class: 'text-error',
+        },
+    });
+    constructor(id, options) {
+        super(id, options);
+    }
+};
+StateDemoEnum = StateDemoEnum_1 = __decorate([
+    ValueListFieldType()
+], StateDemoEnum);
+export { StateDemoEnum };