@celestia-island/hikari 0.32.4 → 0.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.32.4",
+  "version": "0.33.0",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkAffixPicker.scss

@@ -0,0 +1,277 @@
+/* HkAffixPicker — the shared "affix chip + searchable popup list".
+ * Field hosts drop this into an HkInput prefix/suffix slot; the chip
+ * visuals come from the host through the scoped chip slot (hosts layer
+ * their own class on top via chipClass), while the popup — search,
+ * selected tags, option rows, custom row — is fully standardized here. */
+
+/* ── chip base ────────────────────────────────────────────────────────
+ * Neutral clickable chip; hosts override visually via their own class
+ * (HkPhoneInput's dial chip, HkLocalizedInput's badge chip, …). */
+.hk-affix-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  max-width: 11rem;
+  padding: 2px 6px 2px 4px;
+  border: none;
+  border-radius: var(--radius-sm, 6px);
+  background: transparent;
+  color: rgb(var(--color-text));
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
+
+  &:hover:not(:disabled),
+  &:focus-visible:not(:disabled) {
+    background: rgb(var(--color-primary) / 14%);
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.6;
+  }
+}
+
+.hk-affix-chip-label {
+  font-weight: 600;
+  font-size: var(--text-sm, 14px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.hk-affix-chip-caret {
+  flex: none;
+  color: rgb(var(--color-muted));
+}
+
+/* ── popup head: tags (multi) + search ─────────────────────────────── */
+.hk-affix-head {
+  display: flex;
+  flex-direction: column;
+}
+
+.hk-affix-search {
+  padding: 8px 10px 6px;
+}
+
+.hk-affix-tags {
+  padding: 10px 10px 8px;
+  border-bottom: 1px solid var(--border-faint);
+}
+
+.hk-affix-tag-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: min(18rem, 100%);
+  max-width: 24rem;
+}
+
+/* One selected entry: [flag] label (meta) •active-dot   ×]
+ * The × arms on the first activation (danger tint) and erases on the
+ * second; desktop hover previews the × so the row reads as deletable. */
+.hk-affix-tag {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 2.25rem;
+  padding: 4px var(--space-16);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  background: rgb(var(--color-surface) / var(--opacity-half, 50%));
+  transition: border-color 0.12s ease, background 0.12s ease;
+
+  &:hover {
+    border-color: rgb(var(--color-primary) / 40%);
+  }
+
+  &[data-active] {
+    border-color: rgb(var(--color-primary) / 45%);
+    background: rgb(var(--color-primary) / 12%);
+
+    .hk-affix-tag-text {
+      font-weight: 600;
+    }
+  }
+
+  &[data-armed] {
+    border-color: rgb(var(--color-danger, 240 70 80) / 55%);
+    background: rgb(var(--color-danger, 240 70 80) / 12%);
+  }
+}
+
+.hk-affix-tag-body {
+  flex: 1;
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: rgb(var(--color-text));
+  font-size: var(--text-sm);
+  line-height: 1.4;
+  text-align: left;
+  cursor: pointer;
+  appearance: none;
+}
+
+.hk-affix-tag-flag {
+  flex-shrink: 0;
+  font-size: var(--text-sm);
+  line-height: 1;
+  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji",
+    sans-serif;
+}
+
+.hk-affix-tag-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hk-affix-tag-meta {
+  flex-shrink: 0;
+  color: rgb(var(--color-muted));
+  font-size: calc(var(--text-xs) * 0.92);
+  font-variant-numeric: tabular-nums;
+}
+
+.hk-affix-tag-dot {
+  flex-shrink: 0;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: rgb(var(--color-primary));
+}
+
+.hk-affix-tag-x {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: rgb(var(--color-muted));
+  cursor: pointer;
+  appearance: none;
+  transition: color 0.12s ease, background 0.12s ease;
+
+  &:hover,
+  &:focus-visible {
+    color: rgb(var(--color-danger, 240 70 80));
+    background: rgb(var(--color-danger, 240 70 80) / 12%);
+  }
+
+  [data-armed] & {
+    color: rgb(var(--color-danger, 240 70 80));
+    background: rgb(var(--color-danger, 240 70 80) / 18%);
+  }
+}
+
+/* ── option rows ────────────────────────────────────────────────────── */
+.hk-affix-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding: 4px 6px 8px;
+  min-width: 13rem;
+  max-width: min(19rem, calc(100vw - 2rem));
+  max-height: 17rem;
+  overflow-y: auto;
+}
+
+.hk-affix-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 2.25rem;
+  padding: 4px 8px;
+  border: none;
+  border-radius: var(--radius-sm, 6px);
+  background: transparent;
+  color: rgb(var(--color-text));
+  font-size: var(--text-sm, 14px);
+  text-align: left;
+  cursor: pointer;
+  appearance: none;
+  transition: background 0.1s ease;
+
+  &:hover,
+  &:focus-visible {
+    background: rgb(var(--color-primary) / 10%);
+    outline: none;
+  }
+
+  &[data-active] {
+    background: rgb(var(--color-primary) / 16%);
+    font-weight: 600;
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: default;
+
+    &:hover {
+      background: transparent;
+    }
+  }
+
+  /* The "Use <query>" free-text row reads as an add affordance. */
+  &[data-custom="true"] {
+    color: rgb(var(--color-primary));
+
+    .hk-affix-row-label {
+      font-weight: 600;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+
+.hk-affix-row-flag {
+  flex: none;
+  font-size: calc(var(--text-base, 15px) * 1.05);
+  line-height: 1;
+  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji",
+    sans-serif;
+}
+
+.hk-affix-row-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hk-affix-row-meta {
+  flex: none;
+  color: rgb(var(--color-muted));
+  font-size: calc(var(--text-sm, 14px) * 0.9);
+  font-variant-numeric: tabular-nums;
+}
+
+.hk-affix-empty {
+  padding: 14px 12px;
+  color: rgb(var(--color-muted));
+  font-size: var(--text-sm, 14px);
+  text-align: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hk-affix-chip,
+  .hk-affix-row,
+  .hk-affix-tag,
+  .hk-affix-tag-x {
+    transition: none;
+  }
+}

package/src/components/HkAffixPicker.test.tsx

@@ -0,0 +1,237 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h, nextTick } from "vue";
+
+import HkAffixPicker, { type HkAffixOption } from "./HkAffixPicker";
+
+const OPTIONS: HkAffixOption[] = [
+  { key: "cn", label: "China", meta: "+86", flag: "🇨🇳", keywords: "zhongguo 中国 0086" },
+  { key: "jp", label: "Japan", meta: "+81", flag: "🇯🇵" },
+  { key: "us", label: "United States", meta: "+1", flag: "🇺🇸" },
+];
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+interface MountOptions {
+  mode?: "single" | "multi";
+  selected?: string | string[];
+  activeKey?: string;
+  allowCustom?: boolean;
+  searchable?: boolean;
+  closeOnSelect?: boolean;
+  disabled?: boolean;
+}
+
+function mountPicker(opts: MountOptions = {}) {
+  const events = {
+    select: [] as string[],
+    remove: [] as string[],
+    custom: [] as string[],
+    open: [] as boolean[],
+  };
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({
+    render: () =>
+      h(HkAffixPicker, {
+        options: OPTIONS,
+        mode: opts.mode ?? "single",
+        selected: opts.selected ?? "",
+        activeKey: opts.activeKey,
+        allowCustom: opts.allowCustom ?? false,
+        searchable: opts.searchable ?? true,
+        closeOnSelect: opts.closeOnSelect,
+        disabled: opts.disabled ?? false,
+        onSelect: (key: string) => events.select.push(key),
+        onRemove: (key: string) => events.remove.push(key),
+        onCustom: (q: string) => events.custom.push(q),
+        "onUpdate:open": (v: boolean) => events.open.push(v),
+      }),
+  });
+  app.mount(container);
+  mounts.push({ app, container });
+  return { events, container };
+}
+
+function queryChip(container: HTMLElement): HTMLButtonElement {
+  const chip = container.querySelector<HTMLButtonElement>(".hk-affix-chip");
+  expect(chip, "affix chip renders").toBeTruthy();
+  return chip!;
+}
+
+async function openPopup(container: HTMLElement) {
+  queryChip(container).click();
+  await nextTick();
+  await nextTick();
+}
+
+function rows(): HTMLButtonElement[] {
+  return [...document.querySelectorAll<HTMLButtonElement>(".hk-affix-row")];
+}
+
+function tags(): HTMLElement[] {
+  return [...document.querySelectorAll<HTMLElement>(".hk-affix-tag")];
+}
+
+function tag(label: string): HTMLElement | undefined {
+  return tags().find(
+    (t) => (t.querySelector(".hk-affix-tag-text")?.textContent ?? "") === label,
+  );
+}
+
+function searchInput(): HTMLInputElement {
+  const input = document.querySelector<HTMLInputElement>(".hk-affix-search input");
+  expect(input, "search field renders").toBeTruthy();
+  return input!;
+}
+
+async function typeQuery(value: string) {
+  const input = searchInput();
+  input.value = value;
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+  await nextTick();
+  await nextTick();
+}
+
+async function untilSettled(check: () => number): Promise<void> {
+  const deadline = Date.now() + 800;
+  while (check() > 0 && Date.now() < deadline) {
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    await nextTick();
+  }
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+  document.body.innerHTML = "";
+});
+
+describe("HkAffixPicker", () => {
+  it("renders the default chip content with the selected option's label", () => {
+    const { container } = mountPicker({ selected: "jp" });
+    expect(queryChip(container).textContent).toContain("Japan");
+  });
+
+  it("single mode lists every option, marks the active one, closes on pick", async () => {
+    const { events, container } = mountPicker({ selected: "cn" });
+    await openPopup(container);
+    expect(rows()).toHaveLength(3);
+    expect(rows()[0].hasAttribute("data-active")).toBe(true);
+    rows()[1].click();
+    await nextTick();
+    expect(events.select.at(-1)).toBe("jp");
+    // Single mode closes after the pick (leave transition may linger).
+    await untilSettled(() => rows().length);
+    expect(rows()).toHaveLength(0);
+  });
+
+  it("filters rows by label, meta and keywords", async () => {
+    const { container } = mountPicker();
+    await openPopup(container);
+    await typeQuery("+81");
+    expect(rows().map((r) => r.textContent)).toEqual([expect.stringContaining("Japan")]);
+    await typeQuery("0086");
+    expect(rows().map((r) => r.textContent)).toEqual([expect.stringContaining("China")]);
+    await typeQuery("zzz");
+    expect(rows()).toHaveLength(0);
+    expect(document.querySelector(".hk-affix-empty")?.textContent).toContain("No matches");
+  });
+
+  it("multi mode renders selected tags and offers only the remaining rows", async () => {
+    const { container } = mountPicker({ mode: "multi", selected: ["cn", "jp"], activeKey: "cn" });
+    await openPopup(container);
+    expect(tags().map((t) => t.querySelector(".hk-affix-tag-text")?.textContent)).toEqual([
+      "China",
+      "Japan",
+    ]);
+    // The active key's tag carries the dot.
+    expect(tags()[0].querySelector(".hk-affix-tag-dot")).toBeTruthy();
+    expect(tags()[1].querySelector(".hk-affix-tag-dot")).toBeNull();
+    // Rows exclude the already-selected keys.
+    expect(rows().map((r) => r.textContent)).toEqual([expect.stringContaining("United States")]);
+  });
+
+  it("multi mode keeps the popup open when a row is picked", async () => {
+    const { events, container } = mountPicker({ mode: "multi", selected: ["cn"] });
+    await openPopup(container);
+    rows()[0].click();
+    await nextTick();
+    expect(events.select.at(-1)).toBe("jp");
+    expect(rows().length).toBeGreaterThan(0);
+  });
+
+  it("two-step tag delete: × arms, × again confirms; body click disarms", async () => {
+    const { events, container } = mountPicker({ mode: "multi", selected: ["cn", "jp"] });
+    await openPopup(container);
+    const x = tags()[0].querySelector<HTMLButtonElement>(".hk-affix-tag-x")!;
+    x.click();
+    await nextTick();
+    expect(tags()[0].hasAttribute("data-armed")).toBe(true);
+    expect(events.remove).toHaveLength(0);
+    // Second activation confirms — the tag leaves the list.
+    x.click();
+    await nextTick();
+    expect(events.remove).toEqual(["cn"]);
+    // Body click on an ARMED tag disarms it instead of picking.
+    const jpBody = tag("Japan")!.querySelector<HTMLButtonElement>(".hk-affix-tag-body")!;
+    tag("Japan")!.querySelector<HTMLButtonElement>(".hk-affix-tag-x")!.click();
+    await nextTick();
+    expect(tag("Japan")?.hasAttribute("data-armed")).toBe(true);
+    jpBody.click();
+    await nextTick();
+    expect(tag("Japan")?.hasAttribute("data-armed")).toBe(false);
+    expect(events.select).toHaveLength(0);
+  });
+
+  it("tag body click emits select; close-on-select default keeps multi open", async () => {
+    const { events, container } = mountPicker({ mode: "multi", selected: ["cn", "jp"] });
+    await openPopup(container);
+    tags()[1].querySelector<HTMLButtonElement>(".hk-affix-tag-body")!.click();
+    await nextTick();
+    expect(events.select.at(-1)).toBe("jp");
+    expect(rows().length).toBeGreaterThan(0);
+  });
+
+  it("allowCustom offers a Use-row for unmatched queries and suppresses it on exact matches", async () => {
+    const { events, container } = mountPicker({ allowCustom: true });
+    await openPopup(container);
+    await typeQuery("gitee.com");
+    const custom = document.querySelector<HTMLButtonElement>('.hk-affix-row[data-custom="true"]');
+    expect(custom?.textContent).toContain('Use "gitee.com"');
+    custom!.click();
+    await nextTick();
+    expect(events.custom).toEqual(["gitee.com"]);
+    // Single mode closed on the custom pick — wait out the leave ghost,
+    // then reopen for the exact-match phase.
+    await untilSettled(() => rows().length);
+    await openPopup(container);
+    await typeQuery("Japan");
+    expect(document.querySelector('.hk-affix-row[data-custom="true"]')).toBeNull();
+    expect(rows().map((r) => r.textContent)).toEqual([expect.stringContaining("Japan")]);
+  });
+
+  it("Enter in the search picks the first row, or the custom row when nothing matches", async () => {
+    const { events, container } = mountPicker({ allowCustom: true });
+    await openPopup(container);
+    await typeQuery("uni");
+    searchInput().dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    await nextTick();
+    expect(events.select.at(-1)).toBe("us");
+    // Single mode closed on the pick — reopen before the custom phase.
+    await untilSettled(() => rows().length);
+    await openPopup(container);
+    await typeQuery("gitee.com");
+    searchInput().dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    await nextTick();
+    expect(events.custom.at(-1)).toBe("gitee.com");
+  });
+
+  it("disables the chip and ignores interaction while disabled", async () => {
+    const { container } = mountPicker({ disabled: true });
+    expect(queryChip(container).disabled).toBe(true);
+    await openPopup(container);
+    expect(rows()).toHaveLength(0);
+  });
+});