@inkbar/svelte 0.3.0 → 0.4.0

package/dist/components/InkSignatureMenu.svelte

@@ -0,0 +1,263 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  /**
+   * A split button for the signature tool. The main part activates the tool with the chosen
+   * signature, or opens the menu when none is chosen; the chevron opens the saved signatures
+   * as previews, each with a remove button, and "Create signature", which opens
+   * `InkSignatureDialog`. Choosing a signature switches to the tool with it.
+   */
+  export interface InkSignatureMenuProps extends Omit<
+    HTMLAttributes<HTMLDivElement>,
+    'children'
+  > {
+    /** Replaces the main button's icon. */
+    children?: Snippet | undefined
+    /** The fonts the dialog's Type tab offers. Default: InkRoot's `signatureFonts`. */
+    fonts?: readonly string[] | undefined
+  }
+</script>
+
+<script lang="ts">
+  import {
+    focusInitialMenuItem,
+    handleMenuKeys,
+    menuItems,
+    SIGNATURE_LABELS,
+    signatureMenuModel,
+    signaturePreview,
+  } from '@inkbar/core/dom'
+  import { ChevronDown, Plus, Signature, Trash2 } from '@inkbar/icons'
+  import { Popover, Toolbar } from 'bits-ui'
+  import { tick, untrack } from 'svelte'
+
+  import { useInkContext } from '../context.js'
+  import { useTool } from '../hooks/useTool.svelte.js'
+  import { useToolOptions } from '../hooks/useToolOptions.svelte.js'
+  import { useReadable } from '../use-readable.svelte.js'
+
+  import InkIcon from './InkIcon.svelte'
+  import InkSignatureDialog from './InkSignatureDialog.svelte'
+
+  import type { SignatureOptions, SignatureTemplate } from '@inkbar/core'
+
+  let { class: className, children, fonts, ...rest }: InkSignatureMenuProps = $props()
+
+  const NO_TEMPLATES: readonly SignatureTemplate[] = []
+
+  const ctx = useInkContext('InkSignatureMenu')
+  const current = useTool()
+  const signature = useToolOptions<SignatureOptions>('signature')
+  const templates = useReadable(() => ctx.signatures.templates, NO_TEMPLATES)
+  const removeError = useReadable(() => ctx.signatures.removeError, undefined)
+  // An old removal error is not news when the menu opens again.
+  $effect(() => {
+    if (open) untrack(() => ctx.signatures.clearRemoveError())
+  })
+  const model = $derived(signatureMenuModel(templates.current, signature.options))
+  const active = $derived(current.tool === 'signature')
+  let open = $state(false)
+  let creating = $state(false)
+  let menu = $state<HTMLElement | null>(null)
+  let main = $state<HTMLElement | null>(null)
+
+  /** ArrowDown opens on the first item; a click opens on the checked one. */
+  let focusFirst = false
+  // Bits runs the open-focus callback more than once, so the flag outlives it; reset on close.
+  $effect(() => {
+    if (!open) focusFirst = false
+  })
+  /** Set while the menu closes for the dialog, which takes focus instead of the trigger. */
+  let toDialog = false
+
+  function onTriggerKeydown(e: KeyboardEvent): void {
+    if (e.key !== 'ArrowDown' || e.defaultPrevented || open) return
+    e.preventDefault()
+    focusFirst = true
+    open = true
+  }
+
+  function onMain(): void {
+    if (model.selected) current.setTool('signature')
+    else open = true
+  }
+
+  function choose(id: string): void {
+    signature.setOptions({ templateId: id })
+    current.setTool('signature')
+    open = false
+  }
+
+  /** Removes a template; focus moves to the signature now in its row, else "Create signature". */
+  function remove(id: string, row: number): void {
+    ctx.signatures.remove(id).then(
+      async () => {
+        await tick()
+        if (!menu) return
+        const rows = menu.querySelectorAll<HTMLElement>('.ink-signature-item')
+        const next =
+          rows[Math.min(row, rows.length - 1)] ??
+          menu.querySelector<HTMLElement>('[data-ink-signature-create]')
+        next?.focus({ preventScroll: true })
+      },
+      () => {
+        // The host's store refused: the signature stays.
+      }
+    )
+  }
+
+  function create(): void {
+    toDialog = true
+    open = false
+    creating = true
+  }
+</script>
+
+<div
+  role="group"
+  aria-label={SIGNATURE_LABELS.sign}
+  class={['ink-split-button ink-signature-menu', className]}
+  data-ink-signature-menu=""
+  {...rest}
+>
+  <Toolbar.Button
+    bind:ref={main}
+    class="ink-tool-button ink-signature-button"
+    data-ink-tool-button=""
+    data-ink-signature-button=""
+    data-tool="signature"
+    data-state={active ? 'on' : 'off'}
+    aria-pressed={active}
+    aria-label={SIGNATURE_LABELS.sign}
+    title={SIGNATURE_LABELS.sign}
+    onclick={onMain}
+  >
+    {#if children}{@render children()}{:else}<InkIcon icon={Signature} />{/if}
+  </Toolbar.Button>
+  <Popover.Root bind:open>
+    <Popover.Trigger>
+      {#snippet child({ props })}
+        <Toolbar.Button
+          {...props}
+          class="ink-menu-trigger ink-signature-menu-trigger"
+          data-ink-signature-menu-trigger=""
+          data-state={open ? 'open' : 'closed'}
+          aria-label={SIGNATURE_LABELS.trigger}
+          title={SIGNATURE_LABELS.trigger}
+          aria-haspopup="menu"
+          onkeydown={onTriggerKeydown}
+        >
+          <InkIcon icon={ChevronDown} />
+        </Toolbar.Button>
+      {/snippet}
+    </Popover.Trigger>
+    <Popover.Portal>
+      <Popover.Content
+        bind:ref={menu}
+        role="menu"
+        aria-label={SIGNATURE_LABELS.menu}
+        class="ink-select-content ink-menu-content"
+        data-ink-select-content=""
+        data-ink-menu="signature"
+        side="bottom"
+        align="start"
+        sideOffset={4}
+        collisionPadding={8}
+        onOpenAutoFocus={(e) => {
+          e.preventDefault()
+          if (menu) {
+            if (focusFirst) menuItems(menu)[0]?.focus({ preventScroll: true })
+            else focusInitialMenuItem(menu)
+          }
+        }}
+        onCloseAutoFocus={(e) => {
+          if (toDialog) e.preventDefault()
+          toDialog = false
+        }}
+        onkeydown={(e) => menu && handleMenuKeys(e, menu)}
+      >
+        {#if model.items.length > 0}
+          <div
+            role="group"
+            aria-label={SIGNATURE_LABELS.saved}
+            class="ink-signature-list"
+            data-ink-menu-columns="2"
+          >
+            {#each model.items as item, row (item.id)}
+              {@const preview =
+                item.template.kind === 'ink' ? signaturePreview(item.template) : null}
+              <button
+                type="button"
+                role="menuitemradio"
+                aria-checked={item.checked}
+                aria-label={item.label}
+                tabindex={-1}
+                class="ink-select-item ink-menu-item ink-signature-item"
+                data-ink-select-item=""
+                data-key={item.id}
+                data-state={item.checked ? 'checked' : 'unchecked'}
+                onclick={() => choose(item.id)}
+              >
+                <span class="ink-signature-preview" data-kind={item.template.kind}>
+                  {#if item.template.kind === 'image'}
+                    <img src={item.template.imagedata} alt="" draggable="false" />
+                  {:else if preview}
+                    <svg viewBox={preview.viewBox} aria-hidden="true">
+                      {#each preview.paths as d, i (i)}
+                        <path {d} fill="currentColor" />
+                      {/each}
+                    </svg>
+                  {/if}
+                </span>
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                aria-label={item.removeLabel}
+                title={item.removeLabel}
+                tabindex={-1}
+                class="ink-menu-item ink-signature-remove"
+                data-ink-signature-remove=""
+                data-key={item.id}
+                onclick={() => remove(item.id, row)}
+              >
+                <InkIcon icon={Trash2} size={16} />
+              </button>
+            {/each}
+          </div>
+          <div role="separator" class="ink-select-separator"></div>
+        {/if}
+        <button
+          type="button"
+          role="menuitem"
+          tabindex={-1}
+          class="ink-select-item ink-menu-item ink-signature-create"
+          data-ink-select-item=""
+          data-ink-signature-create=""
+          onclick={create}
+        >
+          <InkIcon icon={Plus} size={16} />
+          {SIGNATURE_LABELS.create}
+        </button>
+        {#if removeError.current}
+          <p
+            class="ink-field-error ink-signature-remove-error"
+            role="alert"
+            data-ink-signature-remove-error=""
+          >
+            {removeError.current}
+          </p>
+        {/if}
+      </Popover.Content>
+    </Popover.Portal>
+  </Popover.Root>
+  <InkSignatureDialog
+    bind:open={creating}
+    {fonts}
+    onCloseAutoFocus={(e) => {
+      e.preventDefault()
+      main?.focus({ preventScroll: true })
+    }}
+  />
+</div>

package/dist/components/InkSignatureMenu.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * A split button for the signature tool. The main part activates the tool with the chosen
+ * signature, or opens the menu when none is chosen; the chevron opens the saved signatures
+ * as previews, each with a remove button, and "Create signature", which opens
+ * `InkSignatureDialog`. Choosing a signature switches to the tool with it.
+ */
+export interface InkSignatureMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Replaces the main button's icon. */
+    children?: Snippet | undefined;
+    /** The fonts the dialog's Type tab offers. Default: InkRoot's `signatureFonts`. */
+    fonts?: readonly string[] | undefined;
+}
+declare const InkSignatureMenu: import("svelte").Component<InkSignatureMenuProps, {}, "">;
+type InkSignatureMenu = ReturnType<typeof InkSignatureMenu>;
+export default InkSignatureMenu;
+//# sourceMappingURL=InkSignatureMenu.svelte.d.ts.map

package/dist/components/InkSignatureMenu.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkSignatureMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkSignatureMenu.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD;;;;;GAKG;AACH,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,mFAAmF;IACnF,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAA;CACtC;AAuLH,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/InkTextStyleMenu.svelte

@@ -0,0 +1,225 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+
+  /**
+   * Font, size, text colour, bold, italic, underline and alignment for the selected text
+   * boxes or the text tool. A popover panel rather than a menu list: it holds a select, a
+   * number input with a stepper, toggle buttons and a radio group, each named and operable on
+   * its own. The trigger carries `data-mixed` when the selection disagrees on any of them.
+   */
+  export interface InkTextStyleMenuProps extends Omit<HTMLButtonAttributes, 'children'> {
+    children?: Snippet | undefined
+  }
+</script>
+
+<script lang="ts">
+  import { handleRadioKeys, textStyleMenuModel } from '@inkbar/core/dom'
+  import {
+    ALargeSmall,
+    AlignCenter,
+    AlignJustify,
+    AlignLeft,
+    AlignRight,
+    Bold,
+    Italic,
+    Minus,
+    Plus,
+    Underline,
+  } from '@inkbar/icons'
+  import { Popover, Toolbar } from 'bits-ui'
+
+  import { useInkContext } from '../context.js'
+  import { useToolStyle } from '../hooks/useToolStyle.svelte.js'
+
+  import { asBitsProps, composeHandlers } from './child-snippet.js'
+  import InkColorMenu from './InkColorMenu.svelte'
+  import InkIcon from './InkIcon.svelte'
+
+  let {
+    class: className,
+    children,
+    disabled,
+    onclick,
+    onkeydown,
+    ...rest
+  }: InkTextStyleMenuProps = $props()
+
+  const ctx = useInkContext('InkTextStyleMenu')
+  const style = useToolStyle()
+  let open = $state(false)
+  let trigger = $state<HTMLElement | null>(null)
+  /** The size as typed, until it is committed with Enter or blur. */
+  let draft = $state<string | null>(null)
+
+  const model = $derived(textStyleMenuModel(style.current, style.supported, ctx.fonts))
+  const sizeShown = $derived(
+    draft ?? (model.size.value === null ? '' : String(model.size.value))
+  )
+
+  const TOGGLE_ICONS = { bold: Bold, italic: Italic, underline: Underline }
+  const ALIGN_ICONS = {
+    left: AlignLeft,
+    center: AlignCenter,
+    right: AlignRight,
+    justify: AlignJustify,
+  }
+
+  // The menu closes when the control disables (the selection cleared while it was open).
+  $effect(() => {
+    if (!model.enabled) open = false
+  })
+
+  function onTriggerKeydown(e: KeyboardEvent): void {
+    if (e.key !== 'ArrowDown' || e.defaultPrevented || open || !model.enabled) return
+    e.preventDefault()
+    open = true
+  }
+
+  function commitSize(): void {
+    if (draft === null) return
+    if (draft.trim() !== '') {
+      const patch = model.size.commit(Number(draft))
+      if (patch) style.set(patch)
+    }
+    draft = null
+  }
+  function nudge(direction: 1 | -1): void {
+    const patch = model.size.nudge(direction)
+    if (patch) style.set(patch)
+    draft = null
+  }
+</script>
+
+<Popover.Root bind:open>
+  <Popover.Trigger>
+    {#snippet child({ props })}
+      <Toolbar.Button
+        bind:ref={trigger}
+        {...props}
+        {...asBitsProps(rest)}
+        class={['ink-menu-trigger ink-text-style-menu', className]}
+        data-ink-text-style-menu=""
+        data-state={open ? 'open' : 'closed'}
+        data-mixed={model.mixed ? '' : undefined}
+        aria-label={model.label}
+        title={model.label}
+        aria-haspopup="dialog"
+        onclick={composeHandlers(onclick, props.onclick)}
+        onkeydown={composeHandlers(onkeydown, props.onkeydown, onTriggerKeydown)}
+        disabled={!!disabled || !model.enabled}
+      >
+        {#if children}{@render children()}{:else}<InkIcon icon={ALargeSmall} />{/if}
+      </Toolbar.Button>
+    {/snippet}
+  </Popover.Trigger>
+  <Popover.Portal>
+    <Popover.Content
+      role="dialog"
+      aria-label={model.label}
+      class="ink-select-content ink-menu-content ink-text-style-content"
+      data-ink-select-content=""
+      data-ink-menu="text-style"
+      side="bottom"
+      align="start"
+      sideOffset={4}
+      collisionPadding={8}
+      onCloseAutoFocus={(e) => {
+        // Focus may be inside the nested colour menu when the panel closes.
+        e.preventDefault()
+        trigger?.focus()
+      }}
+    >
+      <select
+        class="ink-text-style-font"
+        aria-label={model.font.label}
+        value={model.font.value}
+        onchange={(e) => style.set(model.font.patch(e.currentTarget.value))}
+      >
+        {#if model.font.value === ''}
+          <option value="" disabled hidden>Mixed</option>
+        {/if}
+        {#each model.font.options as f (f)}
+          <option value={f}>{f}</option>
+        {/each}
+      </select>
+      <div class="ink-text-style-row">
+        <InkColorMenu property="textColor" standalone />
+        <div class="ink-text-style-size" role="group" aria-label="Size">
+          <button
+            type="button"
+            class="ink-text-style-button"
+            aria-label="Decrease font size"
+            onclick={() => nudge(-1)}
+          >
+            <InkIcon icon={Minus} size={16} />
+          </button>
+          <input
+            type="number"
+            class="ink-text-style-input"
+            aria-label={model.size.label}
+            min={model.size.min}
+            max={model.size.max}
+            step={model.size.step}
+            value={sizeShown}
+            oninput={(e) => (draft = e.currentTarget.value)}
+            onblur={commitSize}
+            onkeydown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault()
+                commitSize()
+              }
+            }}
+          />
+          <button
+            type="button"
+            class="ink-text-style-button"
+            aria-label="Increase font size"
+            onclick={() => nudge(1)}
+          >
+            <InkIcon icon={Plus} size={16} />
+          </button>
+        </div>
+      </div>
+      <div class="ink-text-style-row" role="group" aria-label="Emphasis">
+        {#each model.toggles as t (t.key)}
+          <button
+            type="button"
+            class="ink-text-style-button"
+            aria-label={t.label}
+            title={t.label}
+            aria-pressed={t.pressed}
+            data-state={t.pressed === true ? 'on' : 'off'}
+            data-mixed={t.pressed === 'mixed' ? '' : undefined}
+            onclick={() => style.set(t.patch)}
+          >
+            <InkIcon icon={TOGGLE_ICONS[t.key]} size={16} />
+          </button>
+        {/each}
+      </div>
+      <div
+        class="ink-text-style-row"
+        role="radiogroup"
+        aria-label={model.align.label}
+        tabindex="-1"
+        onkeydown={(e) => handleRadioKeys(e, e.currentTarget)}
+      >
+        {#each model.align.choices as c (c.key)}
+          <button
+            type="button"
+            role="radio"
+            class="ink-text-style-button"
+            aria-label={c.label}
+            title={c.label}
+            aria-checked={c.checked}
+            tabindex={c.tabStop ? 0 : -1}
+            data-state={c.checked ? 'on' : 'off'}
+            onclick={() => style.set(c.patch)}
+          >
+            <InkIcon icon={ALIGN_ICONS[c.key]} size={16} />
+          </button>
+        {/each}
+      </div>
+    </Popover.Content>
+  </Popover.Portal>
+</Popover.Root>

package/dist/components/InkTextStyleMenu.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+/**
+ * Font, size, text colour, bold, italic, underline and alignment for the selected text
+ * boxes or the text tool. A popover panel rather than a menu list: it holds a select, a
+ * number input with a stepper, toggle buttons and a radio group, each named and operable on
+ * its own. The trigger carries `data-mixed` when the selection disagrees on any of them.
+ */
+export interface InkTextStyleMenuProps extends Omit<HTMLButtonAttributes, 'children'> {
+    children?: Snippet | undefined;
+}
+declare const InkTextStyleMenu: import("svelte").Component<InkTextStyleMenuProps, {}, "">;
+type InkTextStyleMenu = ReturnType<typeof InkTextStyleMenu>;
+export default InkTextStyleMenu;
+//# sourceMappingURL=InkTextStyleMenu.svelte.d.ts.map

package/dist/components/InkTextStyleMenu.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkTextStyleMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkTextStyleMenu.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AAE3D;;;;;GAKG;AACH,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC;IACnF,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC/B;AAyJH,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}