@tunji_xy/ui 0.0.0-stage → 0.10.0

package/app/components/DropdownMenu.vue

@@ -0,0 +1,444 @@
+<template>
+  <!-- display: contents, so wrapping the trigger never changes its layout. -->
+  <span
+    ref="wrapper"
+    class="contents"
+    @click="onClick"
+    @keydown="onTriggerKeydown"
+    @focusout="onFocusout"
+  >
+    <slot :open="open" />
+    <!-- mousedown.prevent: clicking in the menu keeps focus where it is, so focusout doesn't close it. -->
+    <span
+      :id="menuId"
+      ref="menu"
+      :aria-labelledby="triggerId"
+      v-bind="menuAttrs"
+      popover="manual"
+      role="menu"
+      tabindex="-1"
+      :class="menuClasses"
+      @keydown="onMenuKeydown"
+      @mousedown.prevent
+    >
+      <template
+        v-for="(item, index) in items"
+        :key="item.type === 'divider' ? `divider-${index}` : item.id"
+      >
+        <span
+          v-if="item.type === 'divider'"
+          role="separator"
+          class="-mx-1 my-1 block h-px bg-border"
+        />
+        <button
+          v-else
+          type="button"
+          role="menuitem"
+          tabindex="-1"
+          :disabled="item.disabled"
+          :class="itemClasses(item)"
+          @click="select(item)"
+          @pointermove="onItemPointermove"
+          @pointerleave="onItemPointerleave"
+        >
+          <!-- Rendered empty on items without an icon, so every label lines up. -->
+          <span
+            v-if="hasIcons"
+            :class="
+              cn(
+                'inline-flex h-5 w-4 shrink-0 items-center justify-center [&>svg]:size-4',
+                !item.danger && 'text-muted-foreground',
+              )
+            "
+          >
+            <ItemIcon v-if="item.icon" :icon="item.icon" />
+          </span>
+          <span class="flex min-w-0 flex-1 flex-col">
+            <span class="truncate">{{ item.label }}</span>
+            <span
+              v-if="item.description"
+              :class="
+                cn(
+                  'text-xs',
+                  item.danger ? 'text-danger/75' : 'text-muted-foreground',
+                )
+              "
+            >
+              {{ item.description }}
+            </span>
+          </span>
+        </button>
+      </template>
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  h,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  useAttrs,
+  useId,
+  useTemplateRef,
+  watch,
+  type Component,
+  type FunctionalComponent,
+} from "vue";
+import { cn } from "../lib/cn";
+
+export interface DropdownMenuAction {
+  type?: "item";
+  id: string | number;
+  label: string;
+  icon?: string | Component;
+  description?: string;
+  danger?: boolean;
+  disabled?: boolean;
+}
+
+export interface DropdownMenuDivider {
+  type: "divider";
+}
+
+export type DropdownMenuItem = DropdownMenuAction | DropdownMenuDivider;
+
+export interface DropdownMenuProps {
+  items: DropdownMenuItem[];
+  placement?: "start" | "end" | "top-start" | "top-end";
+}
+
+const props = withDefaults(defineProps<DropdownMenuProps>(), {
+  placement: "start",
+});
+
+const open = defineModel<boolean>("open", { default: false });
+
+const emit = defineEmits<{
+  select: [item: DropdownMenuAction];
+}>();
+
+defineSlots<{
+  /** The element that opens the menu, e.g. a <UiButton>. */
+  default?: (props: { open: boolean }) => unknown;
+}>();
+
+// `class` and other attributes go on the menu panel.
+defineOptions({ inheritAttrs: false });
+const attrs = useAttrs();
+const menuAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs;
+  return rest;
+});
+
+const menuId = `ui-dropdown-menu-${useId()}`;
+const triggerId = ref<string>();
+const wrapperEl = useTemplateRef<HTMLSpanElement>("wrapper");
+const menuEl = useTemplateRef<HTMLSpanElement>("menu");
+
+const actions = computed(() =>
+  props.items.filter(
+    (item): item is DropdownMenuAction => item.type !== "divider",
+  ),
+);
+const hasIcons = computed(() => actions.value.some((item) => item.icon));
+
+const ItemIcon: FunctionalComponent<{ icon: string | Component }> = ({
+  icon,
+}) => (typeof icon === "string" ? icon : h(icon));
+
+const FOCUSABLE = "a[href], button, input, select, textarea, [tabindex]";
+
+// The slot's root, or the first focusable element in it when the root only
+// wraps the control (a <UiTooltip> around a button, say).
+function target() {
+  const root = wrapperEl.value?.firstElementChild;
+  if (!root || root === menuEl.value) return null;
+  return (
+    root.matches(FOCUSABLE) ? root : (root.querySelector(FOCUSABLE) ?? root)
+  ) as HTMLElement;
+}
+
+// The trigger is whatever the app put in the slot, so ARIA is set on it
+// directly. One that can't take focus is made into a button for keyboards.
+function wire() {
+  const el = target();
+  if (!el) return;
+  if (!el.matches(FOCUSABLE)) {
+    el.tabIndex = 0;
+    el.setAttribute("role", "button");
+  }
+  el.id ||= `${menuId}-trigger`;
+  el.setAttribute("aria-haspopup", "menu");
+  el.setAttribute("aria-controls", menuId);
+  el.setAttribute("aria-expanded", String(open.value));
+  triggerId.value = el.id;
+}
+
+const buttons = () => [
+  ...(menuEl.value?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]') ??
+    []),
+];
+const focusedIndex = () =>
+  buttons().indexOf(document.activeElement as HTMLButtonElement);
+
+// The next enabled item after `from`, wrapping round, or -1.
+function nextEnabled(from: number, step: 1 | -1) {
+  const count = actions.value.length;
+  for (let i = 1; i <= count; i++) {
+    const index = (((from + step * i) % count) + count) % count;
+    if (!actions.value[index]!.disabled) return index;
+  }
+  return -1;
+}
+
+const first = () => nextEnabled(-1, 1);
+const last = () => nextEnabled(0, -1);
+
+const focusItem = (index: number) => (buttons()[index] ?? menuEl.value)?.focus();
+
+type Focus = "menu" | "first" | "last";
+let focusOnOpen: Focus = "menu";
+
+function focusInto(focus: Focus) {
+  if (focus === "menu") menuEl.value?.focus({ preventScroll: true });
+  else focusItem(focus === "first" ? first() : last());
+}
+
+function show(focus: Focus = "menu") {
+  if (open.value) return focusInto(focus);
+  focusOnOpen = focus;
+  open.value = true;
+}
+
+function returnFocus() {
+  if (menuEl.value?.contains(document.activeElement)) target()?.focus();
+}
+
+function close() {
+  returnFocus();
+  open.value = false;
+}
+
+function select(item: DropdownMenuAction) {
+  if (item.disabled) return;
+  // Closing first puts focus back on the trigger, so a handler that moves it
+  // (by opening a <UiModal>, say) isn't undone afterwards.
+  close();
+  emit("select", item);
+}
+
+// detail is 0 for a click made with Enter or Space, which opens on the first item.
+function onClick(event: MouseEvent) {
+  if (menuEl.value?.contains(event.target as Node)) return;
+  if (open.value) close();
+  else show(event.detail === 0 ? "first" : "menu");
+}
+
+function onTriggerKeydown(event: KeyboardEvent) {
+  const el = event.target as HTMLElement;
+  if (menuEl.value?.contains(el)) return;
+  switch (event.key) {
+    case "ArrowDown":
+      show("first");
+      break;
+    case "ArrowUp":
+      show("last");
+      break;
+    case "Enter":
+    case " ":
+      // These already turn Enter and Space into a click.
+      if (el.matches("button, a[href], input, summary")) return;
+      if (open.value) close();
+      else show("first");
+      break;
+    default:
+      return;
+  }
+  event.preventDefault();
+}
+
+let search = "";
+let searchTimer: ReturnType<typeof setTimeout> | undefined;
+
+// Jumps to the next item starting with what's been typed. Pressing the same
+// letter again cycles through the items starting with it.
+function typeahead(char: string) {
+  clearTimeout(searchTimer);
+  searchTimer = setTimeout(() => (search = ""), 500);
+  search += char.toLowerCase();
+
+  const repeated = [...search].every((c) => c === search[0]);
+  const prefix = repeated ? search[0]! : search;
+  const from = focusedIndex();
+  const start = repeated ? from + 1 : Math.max(from, 0);
+  const count = actions.value.length;
+  for (let i = 0; i < count; i++) {
+    const index = (start + i) % count;
+    const item = actions.value[index]!;
+    if (!item.disabled && item.label.toLowerCase().startsWith(prefix)) {
+      focusItem(index);
+      return;
+    }
+  }
+}
+
+function onMenuKeydown(event: KeyboardEvent) {
+  const { key } = event;
+  const from = focusedIndex();
+  switch (key) {
+    case "ArrowDown":
+      focusItem(from === -1 ? first() : nextEnabled(from, 1));
+      break;
+    case "ArrowUp":
+      focusItem(from === -1 ? last() : nextEnabled(from, -1));
+      break;
+    case "Home":
+      focusItem(first());
+      break;
+    case "End":
+      focusItem(last());
+      break;
+    case "Escape":
+      // With preventDefault below, stops a <UiModal> around the menu closing too.
+      event.stopPropagation();
+      close();
+      break;
+    case "Tab":
+      // close() moves focus back to the trigger, and the browser tabs on from there.
+      close();
+      return;
+    default:
+      if (
+        key.length !== 1 ||
+        key === " " ||
+        event.ctrlKey ||
+        event.metaKey ||
+        event.altKey
+      )
+        return;
+      typeahead(key);
+  }
+  event.preventDefault();
+}
+
+// Hovering focuses the item, so the pointer and keyboard share one highlight.
+function onItemPointermove(event: PointerEvent) {
+  const item = event.currentTarget as HTMLButtonElement;
+  if (event.pointerType !== "touch" && document.activeElement !== item) {
+    item.focus({ preventScroll: true });
+  }
+}
+
+function onItemPointerleave(event: PointerEvent) {
+  if (document.activeElement === event.currentTarget) {
+    menuEl.value?.focus({ preventScroll: true });
+  }
+}
+
+// Focus is always inside while it's open, so this also covers outside clicks.
+function onFocusout(event: FocusEvent) {
+  if (
+    open.value &&
+    !wrapperEl.value?.contains(event.relatedTarget as Node | null)
+  ) {
+    close();
+  }
+}
+
+const GAP = 6;
+const EDGE = 8;
+
+// Below the trigger (above for `top-*`), flipping when the other side has
+// more room. `start`/`end` line it up with the trigger's left/right edge,
+// mirrored in right-to-left text, and it slides along to stay on screen.
+function position() {
+  const anchor = target();
+  const menu = menuEl.value;
+  if (!anchor || !menu) return;
+  // Measured at the top-left, where nothing squeezes its width.
+  Object.assign(menu.style, {
+    left: "0px",
+    top: "0px",
+    bottom: "auto",
+    maxHeight: "",
+  });
+  const rect = anchor.getBoundingClientRect();
+  const { offsetWidth: width, offsetHeight: height } = menu;
+  const { clientWidth: vw, clientHeight: vh } = document.documentElement;
+  const below = vh - rect.bottom - GAP - EDGE;
+  const above = rect.top - GAP - EDGE;
+
+  const wantsTop = props.placement.startsWith("top");
+  const [wanted, other] = wantsTop ? [above, below] : [below, above];
+  const up = wantsTop !== (height > wanted && other > wanted);
+  const rtl = getComputedStyle(anchor).direction === "rtl";
+  const alignEnd = props.placement.endsWith("end") !== rtl;
+  const x = alignEnd ? rect.right - width : rect.left;
+
+  Object.assign(menu.style, {
+    left: `${Math.max(EDGE, Math.min(x, vw - width - EDGE))}px`,
+    top: up ? "auto" : `${rect.bottom + GAP}px`,
+    bottom: up ? `${vh - rect.top + GAP}px` : "auto",
+    maxHeight: `${up ? above : below}px`,
+  });
+}
+
+const onScroll = (event: Event) => {
+  if (event.target !== menuEl.value) position();
+};
+
+function stopTracking() {
+  window.removeEventListener("scroll", onScroll, true);
+  window.removeEventListener("resize", position);
+}
+
+function sync(isOpen: boolean) {
+  const menu = menuEl.value;
+  if (!menu) return;
+  wire();
+  if (isOpen) {
+    if (!menu.matches(":popover-open")) menu.showPopover();
+    position();
+    focusInto(focusOnOpen);
+    focusOnOpen = "menu";
+    window.addEventListener("scroll", onScroll, {
+      capture: true,
+      passive: true,
+    });
+    window.addEventListener("resize", position);
+  } else {
+    returnFocus();
+    if (menu.matches(":popover-open")) menu.hidePopover();
+    stopTracking();
+  }
+}
+
+onMounted(() => sync(open.value));
+watch(open, sync, { flush: "post" });
+
+onBeforeUnmount(() => {
+  stopTracking();
+  clearTimeout(searchTimer);
+});
+
+const menuClasses = computed(() =>
+  cn(
+    "inset-auto m-0 w-max min-w-48 max-w-[min(20rem,calc(100vw_-_1rem))] animate-fade-in overflow-y-auto overscroll-contain " +
+      "rounded-control border border-border bg-surface p-1 text-foreground shadow-lg outline-none dark:scheme-dark motion-reduce:animate-none",
+    attrs.class as string,
+  ),
+);
+
+// Inner radius = outer radius - padding, so the corners stay concentric.
+// focus:outline-hidden still draws an outline in Windows high-contrast mode,
+// which drops the background highlight.
+const itemClasses = (item: DropdownMenuAction) =>
+  cn(
+    "flex w-full cursor-pointer items-start gap-2 rounded-[calc(var(--radius-control)_-_0.25rem)] px-2.5 py-1.5 text-left text-sm " +
+      "select-none focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+    item.danger ? "text-danger focus:bg-danger/10" : "focus:bg-muted",
+  );
+</script>

package/app/components/Input.vue

@@ -0,0 +1,172 @@
+<template>
+  <div
+    :class="cn('flex flex-col gap-1 text-foreground', attrs.class as string)"
+  >
+    <label v-if="label" :for="inputId" class="text-sm font-semibold">
+      {{ label }}
+      <span v-if="required" class="ml-0.5 text-danger" aria-hidden="true"
+        >*</span
+      >
+    </label>
+
+    <div :class="controlClasses">
+      <span
+        v-if="$slots.leading"
+        class="inline-flex items-center text-muted-foreground"
+      >
+        <slot name="leading" />
+      </span>
+
+      <input
+        :id="inputId"
+        ref="input"
+        v-bind="inputAttrs"
+        class="h-full min-w-0 flex-1 bg-transparent p-0 text-inherit outline-none placeholder:text-muted-foreground/80 disabled:cursor-not-allowed"
+        :type="type"
+        :name="name"
+        :value="model ?? ''"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :readonly="readonly"
+        :required="required"
+        :autocomplete="autocomplete"
+        :aria-invalid="error ? true : undefined"
+        :aria-describedby="message ? messageId : undefined"
+        @input="onInput"
+        @blur="emit('blur', $event)"
+        @focus="emit('focus', $event)"
+      />
+
+      <span
+        v-if="$slots.trailing"
+        class="inline-flex items-center text-muted-foreground"
+      >
+        <slot name="trailing" />
+      </span>
+    </div>
+
+    <p
+      v-if="message"
+      :id="messageId"
+      :class="cn('text-sm', error ? 'text-danger' : 'text-muted-foreground')"
+      :role="error ? 'alert' : undefined"
+    >
+      {{ message }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs, useId, useTemplateRef } from "vue";
+import { cn } from "../lib/cn";
+
+export interface InputProps {
+  label?: string;
+  type?: "text" | "email" | "password" | "search" | "tel" | "url" | "number";
+  placeholder?: string;
+  hint?: string;
+  error?: string;
+  variant?: "outline" | "filled" | "ghost";
+  size?: "sm" | "md" | "lg";
+  radius?: "none" | "sm" | "md" | "lg" | "full";
+  disabled?: boolean;
+  readonly?: boolean;
+  required?: boolean;
+  id?: string;
+  name?: string;
+  autocomplete?: string;
+}
+
+const props = withDefaults(defineProps<InputProps>(), {
+  type: "text",
+  variant: "outline",
+  size: "md",
+});
+
+const model = defineModel<string | number | null>({ default: "" });
+
+const emit = defineEmits<{
+  blur: [event: FocusEvent];
+  focus: [event: FocusEvent];
+}>();
+
+defineSlots<{
+  leading?: () => unknown;
+  trailing?: () => unknown;
+}>();
+
+// `class` styles the outer wrapper (e.g. class="w-64"); every other attribute
+// (maxlength, min, step, autofocus, data-*) goes to the <input> itself.
+defineOptions({ inheritAttrs: false });
+const attrs = useAttrs();
+const inputAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs;
+  return rest;
+});
+
+const autoId = useId();
+const inputId = computed(() => props.id ?? `ui-input-${autoId}`);
+const messageId = computed(() => `${inputId.value}-message`);
+const message = computed(() => props.error || props.hint);
+
+const variants = {
+  outline: "border border-border bg-surface focus-within:ring-3",
+  filled: "border border-transparent bg-foreground/5 focus-within:ring-3",
+  ghost:
+    "rounded-none border-b border-border px-0 focus-within:shadow-[0_1px_0_0]",
+} as const;
+
+const hovers = {
+  outline: "hover:border-border-strong",
+  filled: "hover:bg-foreground/10",
+  // A clicked field is still under the pointer, so don't grey out its underline.
+  ghost: "hover:not-focus-within:border-border-strong",
+} as const;
+
+const sizes = {
+  sm: "h-8 px-2 text-sm",
+  md: "h-10 px-3 text-base sm:text-sm",
+  lg: "h-12 px-4 text-base",
+} as const;
+
+const radii = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  full: "rounded-full",
+} as const;
+
+const controlClasses = computed(() =>
+  cn(
+    "flex items-center gap-2 rounded-control transition-[background-color,border-color,box-shadow]",
+    sizes[props.size],
+    props.radius && radii[props.radius],
+    // After the radius, so ghost stays square whatever `radius` says.
+    variants[props.variant],
+    props.error
+      ? "border-danger focus-within:ring-danger/30 focus-within:shadow-danger"
+      : "focus-within:border-primary focus-within:ring-primary/35 focus-within:shadow-primary",
+    !props.error && !props.disabled && hovers[props.variant],
+    props.disabled && "cursor-not-allowed opacity-60",
+    props.disabled && props.variant !== "ghost" && "bg-muted",
+  ),
+);
+
+const inputEl = useTemplateRef<HTMLInputElement>("input");
+
+const onInput = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  if (props.type === "number") {
+    model.value = target.value === "" ? null : target.valueAsNumber;
+  } else {
+    model.value = target.value;
+  }
+};
+
+defineExpose({
+  focus: () => inputEl.value?.focus(),
+  select: () => inputEl.value?.select(),
+  el: inputEl,
+});
+</script>