@marwes-ui/svelte 1.3.0

package/dist/components/input/RichText.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+  import {
+    createRichTextRecipe,
+    isRichTextHtmlEmpty,
+    normalizeRichTextHtml,
+    resolveRichTextAllowedFormats,
+    richTextCommandByFormat,
+  } from "@marwes-ui/core";
+  import type { RichTextFormat, RichTextOptions } from "@marwes-ui/core";
+  import { cssVarsToStyle } from "../../internal/css-vars.js";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import Icon from "../icon/Icon.svelte";
+  import type { RichTextProps } from "./types.js";
+
+  let {
+    value: controlledValue,
+    defaultValue,
+    onvaluechange,
+    class: className,
+    ...options
+  }: RichTextProps = $props();
+
+  const kit = $derived(createRichTextRecipe({
+    ...options,
+    ...(controlledValue !== undefined ? { value: controlledValue } : {}),
+    ...(defaultValue !== undefined ? { defaultValue } : {}),
+  }));
+  const allowedFormats = $derived(resolveRichTextAllowedFormats(options.allowedFormats));
+  const isControlled = $derived(controlledValue !== undefined);
+  const mergedClass = $derived(mergeClass(kit.className, className));
+  const mergedStyle = $derived(cssVarsToStyle(kit.vars));
+  const showToolbar = $derived(!options.readOnly);
+
+  let editorElement: HTMLDivElement | undefined = $state(undefined);
+  let uncontrolledHtml = $state(normalizeRichTextHtml(defaultValue));
+  let isEditorEmpty = $state(isRichTextHtmlEmpty(isControlled ? normalizeRichTextHtml(controlledValue) : uncontrolledHtml));
+  let activeFormats = $state<RichTextFormat[]>([]);
+
+  const editorHtml = $derived(isControlled ? normalizeRichTextHtml(controlledValue) : uncontrolledHtml);
+
+  const formatLabels: Record<RichTextFormat, string> = {
+    bold: "Bold",
+    italic: "Italic",
+    underline: "Underline",
+  };
+
+  function syncEditorState(nextHtml: string): string {
+    const normalized = normalizeRichTextHtml(nextHtml);
+    const empty = isRichTextHtmlEmpty(normalized);
+    if (!isControlled) uncontrolledHtml = normalized;
+    isEditorEmpty = empty;
+    onvaluechange?.(normalized);
+    return normalized;
+  }
+
+  function getActiveFormatsFromSelection(): RichTextFormat[] {
+    if (!editorElement || typeof window === "undefined" || typeof document === "undefined") return [];
+    const doc = document as any;
+    const selection = window.getSelection();
+    const anchorNode = selection?.anchorNode ?? null;
+    if (!anchorNode || !editorElement.contains(anchorNode.nodeType === Node.TEXT_NODE ? anchorNode.parentNode : anchorNode)) return [];
+
+    const active = new Set<RichTextFormat>();
+    if (typeof doc.queryCommandState === "function") {
+      for (const format of Object.keys(richTextCommandByFormat) as RichTextFormat[]) {
+        try { if (doc.queryCommandState(richTextCommandByFormat[format])) active.add(format); } catch {}
+      }
+    }
+    if (active.size > 0) return Array.from(active);
+
+    let node: Node | null = anchorNode.nodeType === Node.TEXT_NODE ? anchorNode.parentNode : anchorNode;
+    while (node && node !== editorElement) {
+      if (node instanceof HTMLElement) {
+        const tag = node.tagName.toLowerCase();
+        if (tag === "strong" || tag === "b") active.add("bold");
+        if (tag === "em" || tag === "i") active.add("italic");
+        if (tag === "u") active.add("underline");
+      }
+      node = node.parentNode;
+    }
+    return Array.from(active);
+  }
+
+  function refreshActiveFormats(): void {
+    activeFormats = getActiveFormatsFromSelection();
+  }
+
+  function toggleFormat(format: RichTextFormat): void {
+    if (options.disabled || options.readOnly || typeof document === "undefined" || !editorElement) return;
+    const doc = document as any;
+    editorElement.focus();
+    if (typeof doc.execCommand === "function") doc.execCommand(richTextCommandByFormat[format]);
+    syncEditorState(editorElement.innerHTML);
+    refreshActiveFormats();
+  }
+
+  function handleInput(): void {
+    if (!editorElement || options.disabled || options.readOnly) return;
+    syncEditorState(editorElement.innerHTML);
+    refreshActiveFormats();
+  }
+
+  function handleKeyDown(e: KeyboardEvent): void {
+    if (!(e.metaKey || e.ctrlKey) || e.altKey) return;
+    const formatByKey: Partial<Record<string, RichTextFormat>> = { b: "bold", i: "italic", u: "underline" };
+    const requested = formatByKey[e.key.toLowerCase()];
+    if (!requested || !allowedFormats.includes(requested)) return;
+    e.preventDefault();
+    toggleFormat(requested);
+  }
+
+  $effect(() => {
+    if (!editorElement) return;
+    const normalizedDom = normalizeRichTextHtml(editorElement.innerHTML);
+    if (normalizedDom !== editorHtml) editorElement.innerHTML = editorHtml;
+    isEditorEmpty = isRichTextHtmlEmpty(editorHtml);
+  });
+
+  $effect(() => {
+    if (typeof document === "undefined") return;
+    const handler = () => refreshActiveFormats();
+    document.addEventListener("selectionchange", handler);
+    return () => document.removeEventListener("selectionchange", handler);
+  });
+</script>
+
+<div class={mergedClass} style={mergedStyle} {...kit.dataAttributes}>
+  {#if showToolbar}
+    <div class="mw-rich-text__toolbar" data-rich-text-toolbar>
+      {#each allowedFormats as format (format)}
+        {@const isActive = activeFormats.includes(format)}
+        {@const iconName = format === "bold" ? "bold" : format === "italic" ? "italic" : "underline"}
+        <button
+          type="button"
+          class="mw-rich-text__toolbar-button"
+          data-format={format}
+          data-active={isActive ? "true" : undefined}
+          aria-label={formatLabels[format]}
+          aria-pressed={isActive}
+          disabled={options.disabled}
+          onmousedown={(e) => e.preventDefault()}
+          onclick={() => toggleFormat(format)}
+        >
+          <Icon name={iconName} size="xs" decorative />
+        </button>
+      {/each}
+    </div>
+  {/if}
+
+  <div
+    bind:this={editorElement}
+    class="mw-rich-text__editor"
+    data-rich-text-editor
+    data-empty={isEditorEmpty ? "true" : undefined}
+    data-placeholder={options.placeholder}
+    id={kit.a11y.id}
+    role={kit.a11y.role}
+    tabindex={kit.a11y.tabIndex}
+    aria-label={kit.a11y.ariaLabel}
+    aria-labelledby={kit.a11y.ariaLabelledBy}
+    aria-describedby={kit.a11y.ariaDescribedBy}
+    aria-invalid={kit.a11y.ariaInvalid}
+    aria-disabled={kit.a11y.ariaDisabled}
+    aria-readonly={kit.a11y.ariaReadOnly}
+    aria-required={kit.a11y.ariaRequired}
+    aria-multiline={kit.a11y.ariaMultiline}
+    contenteditable={!options.disabled && !options.readOnly}
+    oninput={handleInput}
+    onkeydown={handleKeyDown}
+    onfocus={refreshActiveFormats}
+    onblur={() => { syncEditorState(editorElement?.innerHTML ?? ""); activeFormats = []; }}
+  ></div>
+
+  {#if options.name}
+    <input type="hidden" name={options.name} value={editorHtml} disabled={options.disabled} />
+  {/if}
+</div>

package/dist/components/input/RichText.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { RichTextProps } from "./types.js";
+declare const RichText: import("svelte").Component<RichTextProps, {}, "">;
+type RichText = ReturnType<typeof RichText>;
+export default RichText;

package/dist/components/input/RichTextField.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { buildRichTextFieldA11yIds } from "@marwes-ui/core";
+  import type { RichTextOptions } from "@marwes-ui/core";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import RichText from "./RichText.svelte";
+  import type { RichTextFieldProps } from "./types.js";
+
+  let {
+    id: userProvidedId,
+    label,
+    helperText,
+    error,
+    editor,
+    ariaDescribedBy,
+  }: RichTextFieldProps = $props();
+
+  const uniqueId = $props.id();
+  const fieldId = $derived(userProvidedId ?? `mw-rich-text-${uniqueId}`);
+
+  function hasTextContent(text: string | undefined): boolean {
+    return text !== undefined && text.trim().length > 0;
+  }
+
+  const hasHelperText = $derived(hasTextContent(helperText));
+  const hasError = $derived(hasTextContent(error));
+  const invalid = $derived(hasError || editor.invalid || false);
+  const disabled = $derived(editor.disabled || false);
+  const readOnly = $derived(editor.readOnly || false);
+
+  const a11yIds = $derived(
+    buildRichTextFieldA11yIds({
+      id: fieldId,
+      hasHelperText,
+      hasError,
+      externalDescribedBy: ariaDescribedBy,
+    })
+  );
+
+  const wrapperClass = $derived(
+    mergeClass(
+      "mw-input-field",
+      "mw-input-field--rich-text",
+      disabled && "mw-input-field--disabled",
+      invalid && "mw-input-field--invalid",
+      readOnly && "mw-input-field--readonly",
+    )
+  );
+</script>
+
+<div class={wrapperClass}>
+  <button
+    type="button"
+    class="mw-input-field__label"
+    id={a11yIds.labelId}
+    onclick={() => {
+      const el = document.getElementById(fieldId);
+      el?.focus();
+    }}
+  >
+    <p class="mw-p mw-p--md">{label}</p>
+  </button>
+
+  <div class="mw-input-field__input-wrapper">
+    <RichText
+      {...editor}
+      id={fieldId}
+      {invalid}
+      labelledBy={a11yIds.labelId}
+      {...(a11yIds.describedBy ? { describedBy: a11yIds.describedBy } : {})}
+    />
+  </div>
+
+  {#if hasHelperText && !hasError}
+    <div class="mw-input-field__helper" id={a11yIds.helperTextId}>
+      <p class="mw-p mw-p--sm">{helperText}</p>
+    </div>
+  {/if}
+
+  {#if hasError}
+    <div class="mw-input-field__error" id={a11yIds.errorId} aria-live="polite">
+      <p class="mw-p mw-p--sm">{error}</p>
+    </div>
+  {/if}
+</div>

package/dist/components/input/RichTextField.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { RichTextFieldProps } from "./types.js";
+declare const RichTextField: import("svelte").Component<RichTextFieldProps, {}, "">;
+type RichTextField = ReturnType<typeof RichTextField>;
+export default RichTextField;

package/dist/components/input/SearchField.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import InputField from "./InputField.svelte";
+  import type { InputFieldProps } from "./types.js";
+  type Props = Omit<InputFieldProps, "input"> & { input?: Omit<InputFieldProps["input"], "type" | "inputMode"> };
+  let { input = {}, ...props }: Props = $props();
+</script>
+<div data-purpose="search">
+  <InputField {...props} input={{ ...input, type: "search", inputMode: "search" }} />
+</div>

package/dist/components/input/SearchField.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { InputFieldProps } from "./types.js";
+type Props = Omit<InputFieldProps, "input"> & {
+    input?: Omit<InputFieldProps["input"], "type" | "inputMode">;
+};
+declare const SearchField: import("svelte").Component<Props, {}, "">;
+type SearchField = ReturnType<typeof SearchField>;
+export default SearchField;

package/dist/components/input/Select.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import { createSelectRecipe, resolveSelectMode } from "@marwes-ui/core";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import type { SelectProps } from "./types.js";
+
+  let {
+    value = $bindable(""),
+    onchange,
+    onvaluechange,
+    class: className,
+    style,
+    describedBy,
+    options,
+    placeholder,
+    ...rest
+  }: SelectProps = $props();
+
+  const kit = $derived(
+    createSelectRecipe({
+      ...rest,
+      options,
+      ...(placeholder ? { placeholder } : {}),
+      value,
+      ...(describedBy ? { describedBy } : {}),
+    })
+  );
+  const mode = $derived(resolveSelectMode(rest));
+  const mergedClass = $derived(mergeClass(kit.className, className));
+
+  const placeholderSelected = $derived(!!placeholder && value === "");
+
+  function handleChange(e: Event & { currentTarget: HTMLSelectElement }): void {
+    value = e.currentTarget.value;
+    onchange?.(e);
+    onvaluechange?.(value);
+  }
+</script>
+
+{#if mode === "native"}
+  <select
+    class={mergedClass}
+    {style}
+    id={kit.a11y.id}
+    name={kit.a11y.name}
+    disabled={kit.a11y.disabled}
+    required={kit.a11y.required}
+    aria-label={kit.a11y.ariaLabel}
+    aria-invalid={kit.a11y.ariaInvalid}
+    aria-describedby={kit.a11y.ariaDescribedBy}
+    data-placeholder-selected={placeholderSelected ? "true" : undefined}
+    {value}
+    onchange={handleChange}
+  >
+    {#if placeholder}
+      <option value="" disabled={rest.required ? true : undefined}>{placeholder}</option>
+    {/if}
+    {#each options as opt}
+      <option value={opt.value} disabled={opt.disabled}>{opt.label}</option>
+    {/each}
+  </select>
+{:else}
+  <span class="mw-select__control">
+    <select
+      class={mergedClass}
+      {style}
+      id={kit.a11y.id}
+      name={kit.a11y.name}
+      disabled={kit.a11y.disabled}
+      required={kit.a11y.required}
+      aria-label={kit.a11y.ariaLabel}
+      aria-invalid={kit.a11y.ariaInvalid}
+      aria-describedby={kit.a11y.ariaDescribedBy}
+      data-placeholder-selected={placeholderSelected ? "true" : undefined}
+      {value}
+      onchange={handleChange}
+    >
+      {#if placeholder}
+        <option value="" disabled={rest.required ? true : undefined}>{placeholder}</option>
+      {/if}
+      {#each options as opt}
+        <option value={opt.value} disabled={opt.disabled}>{opt.label}</option>
+      {/each}
+    </select>
+    <svg class="mw-select__control-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+      <path d="M11.5288 5.52876C11.7891 5.26841 12.2111 5.26841 12.4715 5.52876C12.7318 5.78911 12.7318 6.21114 12.4715 6.47147L8.47148 10.4715C8.21115 10.7318 7.78912 10.7318 7.52877 10.4715L3.52876 6.47147C3.26841 6.21112 3.26841 5.78911 3.52876 5.52876C3.78911 5.26841 4.21112 5.26841 4.47147 5.52876L6.58591 7.6432C7.36696 8.42425 8.63329 8.42425 9.41434 7.6432L11.5288 5.52876Z" fill="currentColor" />
+    </svg>
+  </span>
+{/if}

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

@@ -0,0 +1,4 @@
+import type { SelectProps } from "./types.js";
+declare const Select: import("svelte").Component<SelectProps, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;