runeforge 0.0.1

package/dist/components/crud/views/Update.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { ActionConfiguration, FieldDefinition } from '../../../types/crud.js';
+declare function $$render<T extends object = Record<string, unknown>>(): {
+    props: {
+        labelOne?: string;
+        labelMany?: string;
+        icon?: any;
+        fields?: FieldDefinition<T>[];
+        instance?: T;
+        update?: ActionConfiguration<T>;
+        serverError?: string;
+        onCancel?: () => void;
+        onSuccess?: () => void;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object = Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object = Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object = Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Update: $$IsomorphicComponent;
+type Update<T extends object = Record<string, unknown>> = InstanceType<typeof Update<T>>;
+export default Update;

package/dist/components/form/Button.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+
+  let {
+    type = 'button',
+    disabled = false,
+    btn = true,
+    variant,
+    class: additionalClass,
+    children,
+    ...rest
+  }: {
+    btn?: boolean;
+    variant?: string;
+    children?: Snippet;
+  } & HTMLButtonAttributes = $props();
+</script>
+
+<button
+  {type}
+  class={[btn && 'btn', variant && `btn-${variant}`, additionalClass]}
+  {disabled}
+  {...rest}
+>
+  {#if children}{@render children()}{/if}
+</button>

package/dist/components/form/Button.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type $$ComponentProps = {
+    btn?: boolean;
+    variant?: string;
+    children?: Snippet;
+} & HTMLButtonAttributes;
+declare const Button: import("svelte").Component<$$ComponentProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/form/Label.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { ClassValue } from 'svelte/elements';
+  import Required from './Required.svelte';
+
+  let {
+    text,
+    for: labelFor,
+    capitalize = false,
+    required = false,
+    ariaLabel,
+    class: additionalClass,
+    children,
+  }: {
+    text?: string;
+    for?: string;
+    capitalize?: boolean;
+    required?: boolean;
+    ariaLabel?: string;
+    class?: ClassValue;
+    children?: Snippet;
+  } = $props();
+
+  const derivedAriaLabel = $derived(ariaLabel ?? text);
+  const labelClasses = 'text-sm font-medium text-base-content/60';
+  const derivedClasses = $derived(additionalClass ?? labelClasses);
+</script>
+
+<label
+  class={[derivedClasses, capitalize && 'capitalize']}
+  for={labelFor}
+  aria-label={derivedAriaLabel}
+>
+  {#if text}{text}{/if}
+  {#if required}<Required />{/if}
+  {#if children}{@render children()}{/if}
+</label>

package/dist/components/form/Label.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+type $$ComponentProps = {
+    text?: string;
+    for?: string;
+    capitalize?: boolean;
+    required?: boolean;
+    ariaLabel?: string;
+    class?: ClassValue;
+    children?: Snippet;
+};
+declare const Label: import("svelte").Component<$$ComponentProps, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/components/form/PasswordInput.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { FullAutoFill } from 'svelte/elements';
+  import Label from './Label.svelte';
+  import Button from './Button.svelte';
+  import { getIconSet } from '../../icons/context.js';
+  import { defaultIconSet } from '../../icons/sets/default.js';
+
+  let {
+    name,
+    id,
+    value = '',
+    autocomplete,
+    required = true,
+    placeholder = '',
+    invalid = false,
+  }: {
+    name?: string;
+    id?: string;
+    value?: string;
+    autocomplete?: FullAutoFill;
+    required?: boolean;
+    placeholder?: string;
+    invalid?: boolean;
+  } = $props();
+
+  const icons = $derived(getIconSet() ?? defaultIconSet);
+  let visible = $state(false);
+</script>
+
+<Label
+  class={[
+    'input input-bordered w-full',
+    { 'input-error': invalid }
+  ]}
+>
+  <input
+    {name}
+    {id}
+    {required}
+    {placeholder}
+    {value}
+    {autocomplete}
+    type={visible ? 'text' : 'password'}
+    class="grow"
+  />
+  <Button
+    btn={false}
+    class="cursor-pointer opacity-60 hover:opacity-100"
+    aria-label={visible ? 'Ocultar contraseña' : 'Mostrar contraseña'}
+    aria-pressed={visible}
+    onclick={() => (visible = !visible)}
+  >
+    {#if visible}
+      {@const HideIcon = icons.passwordHide}
+      <HideIcon class="size-4" />
+    {:else}
+      {@const ShowIcon = icons.passwordShow}
+      <ShowIcon class="size-4" />
+    {/if}
+  </Button>
+</Label>

package/dist/components/form/PasswordInput.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { FullAutoFill } from 'svelte/elements';
+type $$ComponentProps = {
+    name?: string;
+    id?: string;
+    value?: string;
+    autocomplete?: FullAutoFill;
+    required?: boolean;
+    placeholder?: string;
+    invalid?: boolean;
+};
+declare const PasswordInput: import("svelte").Component<$$ComponentProps, {}, "">;
+type PasswordInput = ReturnType<typeof PasswordInput>;
+export default PasswordInput;

package/dist/components/form/Required.svelte

@@ -0,0 +1 @@
+<span class="text-error ml-0.5">*</span>

package/dist/components/form/Required.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Required;
+type Required = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Required: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/form/Select.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+  import { getStrings } from '../../i18n/context.js';
+
+  const strings = getStrings();
+
+  let {
+    name,
+    value = $bindable(''),
+    options = [],
+    placeholder = strings.selectPlaceholder,
+    error = '',
+    disabled = false,
+  }: {
+    name?: string;
+    value?: string;
+    options?: { value: string; label: string }[];
+    placeholder?: string;
+    error?: string;
+    disabled?: boolean;
+  } = $props();
+
+  let open = $state(false);
+  let search = $state('');
+  let container: HTMLDivElement;
+
+  const filtered = $derived(
+    search.trim()
+      ? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))
+      : options
+  );
+
+  const selectedLabel = $derived(
+    options.find((o) => o.value === value)?.label ?? placeholder
+  );
+
+  function toggle() {
+    if (disabled) return;
+    open = !open;
+    if (!open) search = '';
+  }
+
+  function pick(val: string) {
+    value = val;
+    open = false;
+    search = '';
+  }
+
+  function onWindowClick(e: MouseEvent) {
+    if (open && !container.contains(e.target as Node)) {
+      open = false;
+      search = '';
+    }
+  }
+</script>
+
+<svelte:window onclick={onWindowClick} />
+
+<div class="relative w-full" bind:this={container}>
+  {#if name}
+    <input type="hidden" {name} {value} />
+  {/if}
+
+  <button
+    type="button"
+    class="select select-bordered w-full text-left font-normal"
+    class:select-error={!!error}
+    class:opacity-40={!value}
+    {disabled}
+    onclick={toggle}
+  >
+    {selectedLabel}
+  </button>
+
+  {#if open}
+    <div class="absolute z-50 mt-1 w-full rounded-box border border-base-content/10 bg-base-100 shadow-lg">
+      <div class="p-2">
+        <input
+          type="text"
+          class="input input-bordered input-sm w-full"
+          placeholder={strings.selectSearch}
+          bind:value={search}
+          autocomplete="off"
+        />
+      </div>
+      <ul class="max-h-48 overflow-y-auto p-1">
+        <li>
+          <button
+            type="button"
+            class="w-full rounded-btn px-3 py-2 text-left text-sm text-base-content/40 hover:bg-base-200"
+            onclick={() => pick('')}
+          >
+            {placeholder}
+          </button>
+        </li>
+        {#each filtered as option (option.value)}
+          <li>
+            <button
+              type="button"
+              class="w-full rounded-btn px-3 py-2 text-left text-sm hover:bg-base-200"
+              class:bg-primary={value === option.value}
+              class:text-primary-content={value === option.value}
+              onclick={() => pick(option.value)}
+            >
+              {option.label}
+            </button>
+          </li>
+        {/each}
+        {#if filtered.length === 0}
+          <li class="px-3 py-2 text-sm text-base-content/40">{strings.selectNoResults}</li>
+        {/if}
+      </ul>
+    </div>
+  {/if}
+</div>

package/dist/components/form/Select.svelte.d.ts

@@ -0,0 +1,14 @@
+type $$ComponentProps = {
+    name?: string;
+    value?: string;
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    placeholder?: string;
+    error?: string;
+    disabled?: boolean;
+};
+declare const Select: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/navigation/Breadcrumbs.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { getIconSet } from '../../icons/context.js';
+  import { defaultIconSet } from '../../icons/sets/default.js';
+  import type { BreadcrumbItem } from '../../types/breadcrumb.js';
+
+  let {
+    items = [],
+    admin = false,
+    homeHref,
+  }: {
+    items?: BreadcrumbItem[];
+    admin?: boolean;
+    homeHref?: string;
+  } = $props();
+
+  const icons = $derived(getIconSet() ?? defaultIconSet);
+
+  const home: BreadcrumbItem = $derived({
+    label: 'Inicio',
+    icon: icons.home,
+    link: { href: homeHref ?? (admin ? '/admin' : '/') },
+  });
+
+  const allItems = $derived([home, ...items]);
+</script>
+
+<div class="breadcrumbs text-sm">
+  <ul>
+    {#each allItems as item, i (i)}
+      <li>
+        {#if item.link !== undefined}
+          <a class="inline-flex items-center gap-2" {...item.link}>
+            {#if item.icon}
+              {@const ItemIcon = item.icon}
+              <ItemIcon class="size-4" />
+            {/if}
+            <span class={item.prominent ? '' : 'hidden sm:inline'}>{item.label}</span>
+          </a>
+        {:else}
+          <span class="inline-flex items-center gap-2">
+            {#if item.icon}
+              {@const ItemIcon = item.icon}
+              <ItemIcon class="size-4" />
+            {/if}
+            <span class={item.prominent ? '' : 'hidden sm:inline'}>{item.label}</span>
+          </span>
+        {/if}
+      </li>
+    {/each}
+  </ul>
+</div>

package/dist/components/navigation/Breadcrumbs.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { BreadcrumbItem } from '../../types/breadcrumb.js';
+type $$ComponentProps = {
+    items?: BreadcrumbItem[];
+    admin?: boolean;
+    homeHref?: string;
+};
+declare const Breadcrumbs: import("svelte").Component<$$ComponentProps, {}, "">;
+type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
+export default Breadcrumbs;

package/dist/components/table/ColumnFilter.svelte

@@ -0,0 +1,140 @@
+<script lang="ts" generics="T extends object">
+  import Label from '../form/Label.svelte';
+  import Button from '../form/Button.svelte';
+  import { getIconSet } from '../../icons/context.js';
+  import { defaultIconSet } from '../../icons/sets/default.js';
+  import { getStrings } from '../../i18n/context.js';
+
+  const strings = getStrings();
+  import type { DistinctEntry } from '../../types/table.js';
+  import type { FilterState } from './state.svelte.js';
+  import type { ColumnDefinition } from '../../types/crud.js';
+
+  let {
+    column,
+    entries = [],
+    filter,
+    maxCheckboxValues = 20,
+    onchange,
+  }: {
+    column: ColumnDefinition<T>;
+    entries?: DistinctEntry<T>[];
+    filter: FilterState;
+    maxCheckboxValues?: number;
+    onchange?: () => void;
+  } = $props();
+
+  const icons = $derived(getIconSet() ?? defaultIconSet);
+  const popId = $derived(`filter-pop-${column.attribute}`);
+  const anchor = $derived(`--filter-anchor-${column.attribute}`);
+  const isDatetime = $derived(column.type === 'datetime');
+
+  const dateRange = $derived(filter.dateRangeFor(column.attribute));
+  const calendarValue = $derived(
+    dateRange.from || dateRange.to ? `${dateRange.from}/${dateRange.to}` : ''
+  );
+
+  let calendarEl: HTMLElement | undefined = $state();
+
+  $effect(() => {
+    if (!calendarEl) return;
+    function handler(e: Event) {
+      const value = (e as CustomEvent<{ value: string }>).detail?.value ?? '';
+      const [from = '', to = ''] = value.split('/');
+      filter.setDateRange(column.attribute, from, to);
+      onchange?.();
+    }
+    calendarEl.addEventListener('change', handler);
+    return () => calendarEl?.removeEventListener('change', handler);
+  });
+
+  function setText(value: string) {
+    filter.setText(column.attribute, value);
+    onchange?.();
+  }
+  function toggle(value: string) {
+    filter.toggleValue(column.attribute, value);
+    onchange?.();
+  }
+  function clear() {
+    filter.clear(column.attribute);
+    onchange?.();
+  }
+</script>
+
+<Button
+  variant="ghost"
+  class={[
+    'btn-xs btn-square',
+    filter.hasActive(column.attribute) && 'text-primary'
+  ]}
+  popovertarget={popId}
+  style="anchor-name:{anchor}"
+  aria-label={strings.filterColumn(column.title ?? column.attribute)}
+  title={strings.filter}
+>
+  {#if filter.hasActive(column.attribute)}
+    {@const Icon = icons.filterActive}
+    <Icon class="size-3.5" />
+  {:else}
+    {@const Icon = icons.filter}
+    <Icon class="size-3.5" />
+  {/if}
+</Button>
+
+<div
+  popover="auto"
+  id={popId}
+  style="position-anchor:{anchor}"
+  class="dropdown dropdown-end rounded-box border border-base-content/10 bg-base-100 p-3 shadow-lg"
+  class:w-56={!isDatetime}
+>
+  {#if isDatetime}
+    <calendar-range
+      class="cally bg-base-100"
+      value={calendarValue}
+      bind:this={calendarEl}
+    >
+      <svg aria-label={strings.previous} class="fill-current size-4" {...{"slot": "previous"}} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M15.75 19.5 8.25 12l7.5-7.5"/></svg>
+      <svg aria-label={strings.next} class="fill-current size-4" {...{"slot": "next"}} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg>
+      <calendar-month></calendar-month>
+    </calendar-range>
+    {#if dateRange.from || dateRange.to}
+      <p class="mt-2 text-xs text-base-content/60">
+        {dateRange.from || '…'} → {dateRange.to || '…'}
+      </p>
+    {/if}
+  {:else}
+    <input
+      type="text"
+      class="input input-bordered input-sm w-full"
+      placeholder={strings.filterPlaceholder}
+      value={filter.textFor(column.attribute)}
+      oninput={(e) => setText(e.currentTarget.value)}
+    />
+
+    {#if entries.length > 0 && entries.length < maxCheckboxValues}
+      <div class="mt-2 flex max-h-60 flex-col gap-1 overflow-y-auto">
+        {#each entries as entry (entry.key)}
+          <Label class="flex cursor-pointer items-center gap-2 text-sm font-normal normal-case">
+            <input
+              type="checkbox"
+              class="checkbox checkbox-xs shrink-0"
+              checked={filter.isChecked(column.attribute, entry.key)}
+              onchange={() => toggle(entry.key)}
+            />
+            <span class="truncate">
+              {entry.key === '' ? strings.emptyValue : entry.key}
+            </span>
+          </Label>
+        {/each}
+      </div>
+    {/if}
+  {/if}
+
+  {#if filter.hasActive(column.attribute)}
+    <Button variant="ghost" class="btn-sm mt-2 w-full" onclick={clear}>
+      {strings.clearFilter}
+    </Button>
+  {/if}
+</div>

package/dist/components/table/ColumnFilter.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { DistinctEntry } from '../../types/table.js';
+import type { FilterState } from './state.svelte.js';
+import type { ColumnDefinition } from '../../types/crud.js';
+declare function $$render<T extends object>(): {
+    props: {
+        column: ColumnDefinition<T>;
+        entries?: DistinctEntry<T>[];
+        filter: FilterState;
+        maxCheckboxValues?: number;
+        onchange?: () => void;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ColumnFilter: $$IsomorphicComponent;
+type ColumnFilter<T extends object> = InstanceType<typeof ColumnFilter<T>>;
+export default ColumnFilter;