spaper 1.4.0 → 2.0.0

package/dist/components/Form/Checkbox.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+interface Props {
+  label?: string
+  value?: string
+  name?: string
+  group?: string[]
+  checked?: boolean
+  disabled?: boolean
+  onchange?: (checked: boolean) => void
+  onfocus?: (e: FocusEvent) => void
+  onblur?: (e: FocusEvent) => void
+  [key: string]: any
+}
+
+let {
+  label = '',
+  value = '',
+  name = '',
+  group = $bindable([]),
+  checked = $bindable(false),
+  disabled = false,
+  onchange,
+  onfocus,
+  onblur,
+  ...rest
+}: Props = $props()
+
+function handleChange({ target }: Event) {
+  const el = target as HTMLInputElement
+  const { value: nextValue, checked: nextChecked } = el
+  checked = nextChecked
+  if (nextChecked) {
+    group = [...group, nextValue]
+  } else {
+    group = group.filter((item) => item !== nextValue)
+  }
+
+  onchange?.(checked)
+}
+</script>
+
+<label {...rest} class={['paper-check', rest.class]}>
+  <input
+    type="checkbox"
+    {value}
+    {name}
+    {disabled}
+    checked={group.includes(value) || checked}
+    {onfocus}
+    {onblur}
+    onchange={handleChange}
+  />
+  <span>{label}</span>
+</label>

package/dist/components/Form/Checkbox.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    label?: string;
+    value?: string;
+    name?: string;
+    group?: string[];
+    checked?: boolean;
+    disabled?: boolean;
+    onchange?: (checked: boolean) => void;
+    onfocus?: (e: FocusEvent) => void;
+    onblur?: (e: FocusEvent) => void;
+    [key: string]: any;
+}
+declare const Checkbox: import("svelte").Component<Props, {}, "group" | "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/Form/Input.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+import { getDomAttributes } from '../../utils'
+import type { InputType } from './'
+import type { Attributes } from '../../types'
+
+interface Props {
+  label?: string
+  value?: string
+  /** @deprecated Use `class="w-full"` instead. */
+  block?: boolean
+  type?: InputType
+  /** Receives the value and returns `true` if it is valid. */
+  valid?: ((val: string) => boolean) | null
+  /** For textarea, does not allow resizing. */
+  noResize?: boolean
+  class?: string
+  oninput?: (value: string) => void
+  onfocus?: (e: FocusEvent) => void
+  onblur?: (e: FocusEvent) => void
+  onchange?: (e: Event) => void
+  [key: string]: unknown
+}
+
+let {
+  label = '',
+  value = $bindable(''),
+  block = false,
+  type = 'text',
+  valid = null,
+  noResize = false,
+  class: className = '',
+  oninput,
+  onfocus,
+  onblur,
+  onchange,
+  ...rest
+}: Props = $props()
+
+const isTextarea = $derived(type === 'textarea')
+const isValid = $derived(valid ? valid(value) : true)
+
+const classes = $derived([
+  isTextarea ? 'textarea-paper' : 'input-paper',
+  {
+    'w-full': block,
+    'border-danger': !isTextarea && !isValid && !!value,
+    'border-success': !isTextarea && isValid && !!value && !!valid,
+    'resize-none': isTextarea && noResize,
+  },
+  className,
+])
+
+const attr: Attributes = $derived(
+  getDomAttributes({
+    props: { ...rest, type },
+    classes: '',
+    toOmit: [
+      'block',
+      'value',
+      'valid',
+      'noResize',
+      'label',
+      'oninput',
+      'onfocus',
+      'onblur',
+      'onchange',
+    ],
+  }),
+)
+
+function handleInput(e: Event) {
+  const target = e.target as HTMLInputElement | HTMLTextAreaElement
+  oninput?.(target.value)
+}
+</script>
+
+{#snippet field()}
+  <input
+    {...attr}
+    class={classes}
+    bind:value
+    oninput={handleInput}
+    {onfocus}
+    {onblur}
+    {onchange}
+  />
+{/snippet}
+
+{#if isTextarea}
+  <textarea
+    {...attr}
+    class={classes}
+    bind:value
+    oninput={handleInput}
+    {onfocus}
+    {onblur}
+    {onchange}></textarea>
+{:else if label}
+  <label>
+    {label}
+    {@render field()}
+  </label>
+{:else}
+  {@render field()}
+{/if}

package/dist/components/Form/Input.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { InputType } from './';
+interface Props {
+    label?: string;
+    value?: string;
+    /** @deprecated Use `class="w-full"` instead. */
+    block?: boolean;
+    type?: InputType;
+    /** Receives the value and returns `true` if it is valid. */
+    valid?: ((val: string) => boolean) | null;
+    /** For textarea, does not allow resizing. */
+    noResize?: boolean;
+    class?: string;
+    oninput?: (value: string) => void;
+    onfocus?: (e: FocusEvent) => void;
+    onblur?: (e: FocusEvent) => void;
+    onchange?: (e: Event) => void;
+    [key: string]: unknown;
+}
+declare const Input: import("svelte").Component<Props, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/components/Form/NumberInput/DecrementButton.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+import type { PaperType } from '../../../types'
+import Button from '../../Button.svelte'
+
+interface Props {
+  clickHandler: (e: MouseEvent) => any
+  type: PaperType
+  [key: string]: any
+}
+
+let { clickHandler, type, ...rest }: Props = $props()
+</script>
+
+<Button {...rest} {type} onclick={clickHandler}>-</Button>

package/dist/components/Form/NumberInput/DecrementButton.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { PaperType } from '../../../types';
+interface Props {
+    clickHandler: (e: MouseEvent) => any;
+    type: PaperType;
+    [key: string]: any;
+}
+declare const DecrementButton: import("svelte").Component<Props, {}, "">;
+type DecrementButton = ReturnType<typeof DecrementButton>;
+export default DecrementButton;

package/dist/components/Form/NumberInput/IncrementButton.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+import type { PaperType } from '../../../types'
+import Button from '../../Button.svelte'
+
+interface Props {
+  clickHandler: (e: MouseEvent) => any
+  type: PaperType
+  [key: string]: any
+}
+
+let { clickHandler, type, ...rest }: Props = $props()
+</script>
+
+<Button {...rest} {type} onclick={clickHandler}>+</Button>

package/dist/components/Form/NumberInput/IncrementButton.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { PaperType } from '../../../types';
+interface Props {
+    clickHandler: (e: MouseEvent) => any;
+    type: PaperType;
+    [key: string]: any;
+}
+declare const IncrementButton: import("svelte").Component<Props, {}, "">;
+type IncrementButton = ReturnType<typeof IncrementButton>;
+export default IncrementButton;

package/dist/components/Form/NumberInput/NumberInput.svelte

@@ -0,0 +1,227 @@
+<script lang="ts">
+import { DecrementButton, IncrementButton } from './'
+import { getDomAttributes } from '../../../utils'
+import type { Attributes, PaperType } from '../../../types'
+
+interface Props {
+  label?: string
+  value?: number | null
+  step?: number
+  min?: number | null
+  max?: number | null
+  disabled?: boolean
+  controls?: boolean
+  controlsType?: PaperType
+  /** @deprecated Use `class="w-full"` instead. */
+  block?: boolean
+  /** Receives the value and returns `true` if it is valid. */
+  valid?: ((val: number | null) => boolean) | null
+  prefix?: string
+  suffix?: string
+  /**
+   * Either an `Intl` locale, or a function that receives the value and returns
+   * the text. `"locale"` uses the browser locale. Any other string is a locale
+   * tag (`"fr-FR"`).
+   */
+  format?: string | ((val: number | null) => string) | null
+  /** Passed to `Intl.NumberFormat` when `format` is a locale string. */
+  formatOptions?: Intl.NumberFormatOptions
+  class?: string
+  oninput?: (value: string) => void
+  onfocus?: (e: FocusEvent) => void
+  onblur?: (e: FocusEvent) => void
+  onchange?: (e: Event) => void
+  [key: string]: unknown
+}
+
+let {
+  label = '',
+  value = $bindable(null),
+  step = 1,
+  min = null,
+  max = null,
+  disabled = false,
+  controls = true,
+  controlsType = 'secondary',
+  block = false,
+  valid = null,
+  prefix = '',
+  suffix = '',
+  format = null,
+  formatOptions = undefined,
+  class: className = '',
+  oninput,
+  onfocus,
+  onblur,
+  onchange,
+  ...rest
+}: Props = $props()
+
+const isValid = $derived(valid ? valid(value) : true)
+
+const classes = $derived([
+  'input-paper',
+  {
+    'w-full': block,
+    'border-danger': !isValid && value !== null,
+    'border-success': isValid && value !== null && !!valid,
+  },
+  className,
+])
+
+const attr: Attributes = $derived(
+  getDomAttributes({
+    props: { ...rest, disabled },
+    classes: '',
+    toOmit: [
+      'block',
+      'value',
+      'valid',
+      'noResize',
+      'min',
+      'max',
+      'label',
+      'step',
+      'controls',
+      'controlsType',
+      'prefix',
+      'suffix',
+      'format',
+      'formatOptions',
+      'oninput',
+      'onfocus',
+      'onblur',
+      'onchange',
+    ],
+  }),
+)
+
+const canDecrement = $derived(
+  !disabled && (min !== null && value !== null ? value - step >= min : true),
+)
+const canIncrement = $derived(
+  !disabled && (max !== null && value !== null ? value + step <= max : true),
+)
+
+const formattedValue = $derived.by(() => {
+  if (value === null) return ''
+
+  let next = String(value)
+
+  if (format) {
+    if (typeof format === 'string') {
+      next = new Intl.NumberFormat(
+        format === 'locale' ? undefined : format,
+        formatOptions,
+      ).format(value)
+    } else {
+      next = format(value)
+    }
+  }
+
+  return [prefix, next, suffix].join(' ').trim()
+})
+
+function parseInput(raw: string): number | null {
+  let text = raw.trim()
+  if (prefix && text.startsWith(prefix)) text = text.slice(prefix.length).trim()
+  if (suffix && text.endsWith(suffix))
+    text = text.slice(0, -suffix.length).trim()
+  text = text.replace(/\s/g, '')
+  if (text === '' || text === '-' || text === '.' || text === '-.') return null
+  const n = Number(text)
+  return Number.isFinite(n) ? n : null
+}
+
+function clamp(n: number) {
+  if (max !== null && n > max) return max
+  if (min !== null && n < min) return min
+  return n
+}
+
+function commit(target: HTMLInputElement) {
+  const n = parseInput(target.value)
+  if (n === null) {
+    target.value = formattedValue
+    return
+  }
+  value = clamp(n)
+  target.value = formattedValue
+}
+
+function handleInput(e: Event) {
+  const target = e.target as HTMLInputElement
+  oninput?.(target.value)
+  const n = parseInput(target.value)
+  if (n !== null && max !== null && n > max) commit(target)
+}
+
+function handleBlur(e: FocusEvent) {
+  commit(e.currentTarget as HTMLInputElement)
+  onblur?.(e)
+}
+
+function stepBy(direction: 1 | -1) {
+  if (disabled || value === null) return
+  if (direction === 1 && !canIncrement) return
+  if (direction === -1 && !canDecrement) return
+  value += direction * step
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return
+  e.preventDefault()
+  stepBy(e.key === 'ArrowUp' ? 1 : -1)
+}
+</script>
+
+<div class="flex gap-1">
+  {#if controls}
+    <DecrementButton
+      class="self-end! p-2!"
+      clickHandler={() => {
+        if (value !== null) value -= step
+      }}
+      type={controlsType}
+      disabled={!canDecrement}
+    />
+  {/if}
+
+  {#snippet field()}
+    <input
+      {...attr}
+      class={classes}
+      inputmode="numeric"
+      role="spinbutton"
+      value={formattedValue}
+      aria-valuemin={min ?? undefined}
+      aria-valuemax={max ?? undefined}
+      aria-valuenow={value ?? undefined}
+      onkeydown={handleKeydown}
+      oninput={handleInput}
+      {onfocus}
+      onblur={handleBlur}
+      {onchange}
+    />
+  {/snippet}
+
+  {#if label}
+    <label>
+      {label}
+      {@render field()}
+    </label>
+  {:else}
+    {@render field()}
+  {/if}
+
+  {#if controls}
+    <IncrementButton
+      class="self-end! p-2!"
+      clickHandler={() => {
+        if (value !== null) value += step
+      }}
+      type={controlsType}
+      disabled={!canIncrement}
+    />
+  {/if}
+</div>

package/dist/components/Form/NumberInput/NumberInput.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { PaperType } from '../../../types';
+interface Props {
+    label?: string;
+    value?: number | null;
+    step?: number;
+    min?: number | null;
+    max?: number | null;
+    disabled?: boolean;
+    controls?: boolean;
+    controlsType?: PaperType;
+    /** @deprecated Use `class="w-full"` instead. */
+    block?: boolean;
+    /** Receives the value and returns `true` if it is valid. */
+    valid?: ((val: number | null) => boolean) | null;
+    prefix?: string;
+    suffix?: string;
+    /**
+     * Either an `Intl` locale, or a function that receives the value and returns
+     * the text. `"locale"` uses the browser locale. Any other string is a locale
+     * tag (`"fr-FR"`).
+     */
+    format?: string | ((val: number | null) => string) | null;
+    /** Passed to `Intl.NumberFormat` when `format` is a locale string. */
+    formatOptions?: Intl.NumberFormatOptions;
+    class?: string;
+    oninput?: (value: string) => void;
+    onfocus?: (e: FocusEvent) => void;
+    onblur?: (e: FocusEvent) => void;
+    onchange?: (e: Event) => void;
+    [key: string]: unknown;
+}
+declare const NumberInput: import("svelte").Component<Props, {}, "value">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;

package/dist/components/Form/Radio.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+interface Props {
+  label?: string
+  value?: string
+  group?: string
+  onfocus?: (e: FocusEvent) => void
+  onblur?: (e: FocusEvent) => void
+  onchange?: (e: Event) => void
+  children?: import('svelte').Snippet
+  [key: string]: any
+}
+
+let {
+  label = '',
+  value = '',
+  group = $bindable(''),
+  onfocus,
+  onblur,
+  onchange,
+  children,
+  ...rest
+}: Props = $props()
+</script>
+
+<label class="paper-radio">
+  <input
+    type="radio"
+    {value}
+    {...rest}
+    bind:group
+    {onfocus}
+    {onblur}
+    {onchange}
+  />
+  <span>
+    {#if children}
+      {@render children?.()}
+    {:else}
+      {label}
+    {/if}
+  </span>
+</label>

package/dist/components/Form/Radio.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    label?: string;
+    value?: string;
+    group?: string;
+    onfocus?: (e: FocusEvent) => void;
+    onblur?: (e: FocusEvent) => void;
+    onchange?: (e: Event) => void;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+}
+declare const Radio: import("svelte").Component<Props, {}, "group">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;

package/dist/components/Form/Select.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+interface Props {
+  label?: string
+  value?: string
+  onchange?: (value: string) => void
+  onblur?: (e: FocusEvent) => void
+  onfocus?: (e: FocusEvent) => void
+  children?: import('svelte').Snippet
+  [key: string]: any
+}
+
+let {
+  label = '',
+  value = $bindable(''),
+  onchange,
+  onblur,
+  onfocus,
+  children,
+  ...rest
+}: Props = $props()
+
+let selectElement: HTMLSelectElement | undefined = $state()
+
+function handleChange({ target }: Event) {
+  onchange?.((target as HTMLSelectElement).value)
+}
+
+$effect(() => {
+  if (selectElement && value !== undefined) {
+    const options = selectElement.querySelectorAll('option')
+    const opt = Array.from(options).find((opt: HTMLOptionElement) => {
+      return opt.value == value
+    })
+
+    if (opt) opt.selected = true
+  }
+})
+</script>
+
+{#snippet field()}
+  <select
+    bind:this={selectElement}
+    bind:value
+    {...rest}
+    class={['select-paper', rest.class]}
+    onchange={handleChange}
+    {onblur}
+    {onfocus}
+  >
+    {@render children?.()}
+  </select>
+{/snippet}
+
+{#if label}
+  <label>
+    {label}
+    {@render field()}
+  </label>
+{:else}
+  {@render field()}
+{/if}

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

@@ -0,0 +1,12 @@
+interface Props {
+    label?: string;
+    value?: string;
+    onchange?: (value: string) => void;
+    onblur?: (e: FocusEvent) => void;
+    onfocus?: (e: FocusEvent) => void;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+}
+declare const Select: import("svelte").Component<Props, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;