@celestia-island/hikari 0.4.4

package/src/components/HkRadio.tsx

@@ -0,0 +1,75 @@
+import { computed, defineComponent, type PropType } from "vue";
+import "./HkRadio.scss";
+
+export interface HkRadioOption {
+  value: string | number;
+  label: string;
+  disabled?: boolean;
+}
+
+export default defineComponent({
+  name: "HkRadio",
+  props: {
+    modelValue: {
+      type: [String, Number] as PropType<string | number | null>,
+      default: null,
+    },
+    options: {
+      type: Array as PropType<HkRadioOption[]>,
+      required: true,
+    },
+    disabled: { type: Boolean, default: false },
+    direction: {
+      type: String as PropType<"horizontal" | "vertical">,
+      default: "horizontal",
+    },
+    size: {
+      type: String as PropType<"sm" | "md" | "lg">,
+      default: "md",
+    },
+  },
+  emits: {
+    "update:modelValue": (_value: string | number) => true,
+  },
+  setup(props, { emit }) {
+    return () => (
+      <div
+        class={[
+          "hk-radio-group",
+          `hk-radio-group-${props.direction}`,
+          `hk-radio-group-${props.size}`,
+        ]}
+      >
+        {props.options.map((opt) => {
+          const isSelected = props.modelValue === opt.value;
+          const isDisabled = props.disabled || opt.disabled === true;
+
+          return (
+            <label
+              key={opt.value}
+              class="hk-radio"
+              data-disabled={isDisabled ? "" : undefined}
+              data-size={props.size}
+            >
+              <span
+                class="hk-radio-box"
+                data-checked={isSelected ? "" : undefined}
+              >
+                <input
+                  class="hk-radio-input"
+                  type="radio"
+                  value={opt.value}
+                  checked={isSelected}
+                  disabled={isDisabled}
+                  onChange={() => emit("update:modelValue", opt.value)}
+                />
+                {isSelected && <span class="hk-radio-dot" />}
+              </span>
+              <span class="hk-radio-label-text">{opt.label}</span>
+            </label>
+          );
+        })}
+      </div>
+    );
+  },
+});

package/src/components/HkRollingNumber.scss

@@ -0,0 +1,37 @@
+.hk-rolling-number {
+  display: inline-flex;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+
+  [data-el="char"] {
+    display: inline-block;
+  }
+
+  [data-el="slot"] {
+    display: inline-block;
+    position: relative;
+    overflow: hidden;
+    vertical-align: baseline;
+    height: 1em;
+  }
+
+  [data-el="roll"] {
+    display: flex;
+    flex-direction: column;
+    animation: hk-rolling-number-up var(--hi-duration-instant, 0.1s) cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  }
+
+  [data-el="digit"] {
+    display: block;
+    height: 1em;
+  }
+}
+
+@keyframes hk-rolling-number-up {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-1em);
+  }
+}

package/src/components/HkRollingNumber.tsx

@@ -0,0 +1,97 @@
+import { defineComponent, onBeforeUnmount, ref, watch, type PropType } from "vue";
+
+import { useReportedTransition } from "../composables/useReportedTransition";
+import "./HkRollingNumber.scss";
+
+export default defineComponent({
+  name: "HkRollingNumber",
+  props: {
+    value: { type: [Number, String] as PropType<number | string>, required: true },
+  },
+  setup(props) {
+    interface CharState {
+      current: string;
+      prev: string;
+      animating: boolean;
+    }
+
+    const chars = ref<CharState[]>([]);
+
+    const ROLL_ANIM_MS = 100;
+    const rollAnim = useReportedTransition(ROLL_ANIM_MS);
+
+    function update(newStr: string): boolean {
+      const newChars = newStr.split("");
+      const oldLen = chars.value.length;
+
+      if (newChars.length !== oldLen) {
+        chars.value = newChars.map((ch) => ({
+          current: ch,
+          prev: ch,
+          animating: false,
+        }));
+        return false;
+      }
+
+      let anyRolled = false;
+      for (let i = 0; i < newChars.length; i++) {
+        const prev = chars.value[i].current;
+        const next = newChars[i];
+        if (prev !== next) {
+          chars.value[i] = {
+            current: next,
+            prev,
+            animating: true,
+          };
+          anyRolled = true;
+        }
+      }
+      return anyRolled;
+    }
+
+    const stopWatch = watch(
+      () => String(props.value),
+      (val) => {
+        if (update(val)) rollAnim.run();
+      },
+      { immediate: true },
+    );
+    onBeforeUnmount(stopWatch);
+
+    function onAnimEnd(i: number) {
+      if (chars.value[i]) {
+        chars.value[i].animating = false;
+      }
+    }
+
+    return () => (
+      <span class="hk-rolling-number">
+        {chars.value.map((ch, i) => {
+          const isDigit = /^[0-9]$/.test(ch.current);
+          if (!isDigit || !ch.animating) {
+            return (
+              <span key={i} data-el="char">
+                {ch.current}
+              </span>
+            );
+          }
+          return (
+            <span key={i} data-el="slot">
+              <span
+                data-el="roll"
+                onAnimationend={() => onAnimEnd(i)}
+              >
+                <span data-el="digit" data-variant="old">
+                  {ch.prev}
+                </span>
+                <span data-el="digit" data-variant="new">
+                  {ch.current}
+                </span>
+              </span>
+            </span>
+          );
+        })}
+      </span>
+    );
+  },
+});

package/src/components/HkScrollContainer.scss

@@ -0,0 +1,101 @@
+.hk-scroll-container {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.hk-scroll-container-viewport {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  scrollbar-width: none !important;
+
+  &::-webkit-scrollbar {
+    display: none !important;
+  }
+}
+
+.hk-scroll-container[data-axis="horizontal"] > .hk-scroll-container-viewport {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.hk-scroll-container-autofollow-content {
+  display: block;
+  flex-shrink: 0;
+}
+
+.hk-scroll-container-autotag {
+  position: absolute;
+  right: 0.625rem;
+  bottom: 0.625rem;
+  z-index: 6;
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
+  padding: 2px 8px;
+  font-size: 0.625rem;
+  letter-spacing: 0.04em;
+  color: var(--hi-color-muted);
+  background: color-mix(in srgb, var(--hi-color-surface) 78%, transparent);
+  border: 1px solid color-mix(in srgb, var(--hi-color-border) 12%, transparent);
+  border-radius: var(--hi-radius-full, 9999px);
+  backdrop-filter: blur(4px);
+  opacity: 0.85;
+  transition: opacity var(--hi-duration-fast, 0.15s) ease;
+}
+
+.hk-scrollbar-track {
+  position: absolute;
+  z-index: 10;
+  background: transparent;
+  pointer-events: auto;
+  opacity: 0;
+  transition: opacity var(--hi-duration-fast, 0.15s) ease;
+
+  &[data-axis="horizontal"] {
+    left: 4px;
+    right: 4px;
+    bottom: 2px;
+    height: 6px;
+  }
+
+  &:not([data-axis="horizontal"]) {
+    top: 4px;
+    bottom: 4px;
+    right: 2px;
+    width: 6px;
+  }
+
+  &.is-scrolling,
+  &.is-hovering {
+    opacity: 1;
+  }
+}
+
+.hk-scrollbar-thumb {
+  position: absolute;
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--hi-color-muted) 35%, transparent);
+  transition: background var(--hi-duration-fast, 0.15s) ease;
+
+  .is-hovering &,
+  &.is-dragging {
+    background: color-mix(in srgb, var(--hi-color-muted) 55%, transparent);
+  }
+}
+
+.hk-scrollbar-track[data-axis="horizontal"] .hk-scrollbar-thumb {
+  top: 0;
+  left: 0;
+  height: 100%;
+  min-width: 20px;
+}
+
+.hk-scrollbar-track:not([data-axis="horizontal"]) .hk-scrollbar-thumb {
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-height: 20px;
+}

package/src/components/HkScrollContainer.tsx

@@ -0,0 +1,362 @@
+import {
+  computed,
+  defineComponent,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  type PropType,
+} from "vue";
+
+import { useI18n } from "../i18n/context";
+import "./HkScrollContainer.scss";
+import { provideScrollWindow } from "../composables/useScrollWindow";
+import { scheduleCronAfter, type CronHandle } from "../runtime/cronBus";
+import { notifyScrollStart, onceFrame, scheduleFrame, type AnimationHandle } from "../runtime/animationBus";
+
+type ScrollAxis = "vertical" | "horizontal" | "both";
+type ScrollMode = "traditional" | "windowed";
+
+interface AxisState {
+  track: HTMLElement;
+  thumb: HTMLElement;
+  dragging: boolean;
+  dragStartClient: number;
+  dragStartScroll: number;
+  hideTimer: CronHandle;
+}
+
+interface DragHandlers {
+  onDown: (e: MouseEvent) => void;
+  onMove: (e: MouseEvent) => void;
+  onUp: () => void;
+  onTrackClick: (e: MouseEvent) => void;
+  onEnter: () => void;
+  onLeave: () => void;
+}
+
+export default defineComponent({
+  name: "HkScrollContainer",
+  props: {
+    as: { type: String, default: "div" },
+    axis: { type: String as PropType<ScrollAxis>, default: "vertical" },
+    mode: { type: String as PropType<ScrollMode>, default: "traditional" },
+    scrollbar: { type: Boolean, default: true },
+    autoFollow: { type: Boolean, default: false },
+    overscanScreens: { type: Number, default: 1 },
+  },
+  setup(props, { slots, expose }) {
+    const { t } = useI18n();
+    const viewportRef = ref<HTMLElement>();
+    let ro: ResizeObserver;
+    let scheduled: AnimationHandle | null = null;
+    let vState: AxisState | null = null;
+    let hState: AxisState | null = null;
+    let vDrag: DragHandlers | null = null;
+    let hDrag: DragHandlers | null = null;
+
+    const pinned = ref(true);
+    const FOLLOW_THRESHOLD = 24;
+    const autoFollowContent = shallowRef<HTMLElement | null>(null);
+    let followRO: ResizeObserver | null = null;
+    const showAutoTag = computed(() => props.autoFollow && props.scrollbar && pinned.value);
+
+    if (props.mode === "windowed") {
+      provideScrollWindow(viewportRef as unknown as import("vue").Ref<HTMLElement | null>, props.overscanScreens);
+    }
+
+    const hasV = () => props.axis !== "horizontal";
+    const hasH = () => props.axis !== "vertical";
+
+    function recomputePinned() {
+      const vp = viewportRef.value;
+      if (!vp) return;
+      pinned.value = vp.scrollHeight - vp.scrollTop - vp.clientHeight < FOLLOW_THRESHOLD;
+    }
+
+    function pinToBottomIfPinned() {
+      const vp = viewportRef.value;
+      if (!vp || !pinned.value) return;
+      vp.scrollTop = vp.scrollHeight;
+    }
+
+    const SETTLE_FRAMES = 4;
+    let settleRemaining = 0;
+    let settleHandle: AnimationHandle | null = null;
+
+    function runSettleFrame() {
+      settleHandle = null;
+      pinToBottomIfPinned();
+      if (settleRemaining > 0) {
+        settleRemaining--;
+        settleHandle = scheduleFrame(runSettleFrame);
+      }
+    }
+
+    function kickSettle() {
+      settleRemaining = SETTLE_FRAMES;
+      if (settleHandle) return;
+      settleHandle = scheduleFrame(runSettleFrame);
+    }
+
+    function makeState(horizontal: boolean): AxisState {
+      const track = document.createElement("div");
+      track.className = "hk-scrollbar-track";
+      if (horizontal) track.setAttribute("data-axis", "horizontal");
+      const thumb = document.createElement("div");
+      thumb.className = "hk-scrollbar-thumb";
+      track.appendChild(thumb);
+      return {
+        track,
+        thumb,
+        dragging: false,
+        dragStartClient: 0,
+        dragStartScroll: 0,
+        hideTimer: undefined as unknown as CronHandle,
+      };
+    }
+
+    function scheduleUpdate() {
+      scheduled?.disconnect();
+      scheduled = scheduleFrame(() => {
+        scheduled = null;
+        update();
+      });
+    }
+
+    function update() {
+      const vp = viewportRef.value;
+      if (!vp) return;
+      if (vState) updateAxis(vp, vState, false);
+      if (hState) updateAxis(vp, hState, true);
+    }
+
+    function updateAxis(vp: HTMLElement, s: AxisState, horizontal: boolean) {
+      const scrollSize = horizontal ? vp.scrollWidth : vp.scrollHeight;
+      const clientSize = horizontal ? vp.clientWidth : vp.clientHeight;
+      const scrollPos = horizontal ? vp.scrollLeft : vp.scrollTop;
+      if (scrollSize <= clientSize) {
+        s.track.style.display = "none";
+        return;
+      }
+      s.track.style.display = "";
+      const trackSize = horizontal ? s.track.clientWidth : s.track.clientHeight;
+      const ratio = clientSize / scrollSize;
+      const thumbSize = Math.max(ratio * trackSize, 20);
+      const maxScroll = scrollSize - clientSize;
+      const maxTrack = trackSize - thumbSize;
+      const offset = maxScroll > 0 ? (scrollPos / maxScroll) * maxTrack : 0;
+      if (horizontal) {
+        s.thumb.style.width = `${thumbSize}px`;
+        s.thumb.style.transform = `translateX(${offset}px)`;
+      } else {
+        s.thumb.style.height = `${thumbSize}px`;
+        s.thumb.style.transform = `translateY(${offset}px)`;
+      }
+    }
+
+    function flash(s: AxisState | null) {
+      if (!s) return;
+      s.track.classList.add("is-scrolling");
+      s.hideTimer?.disconnect();
+      s.hideTimer = scheduleCronAfter(() => s.track.classList.remove("is-scrolling"), 1200);
+    }
+
+    function onScroll() {
+      if (!viewportRef.value) return;
+      scheduleUpdate();
+      if (props.scrollbar) notifyScrollStart();
+      flash(vState);
+      flash(hState);
+      if (props.autoFollow) recomputePinned();
+    }
+
+    function onWheel(e: WheelEvent) {
+      const vp = viewportRef.value;
+      if (!vp || !hasH()) return;
+      if (vp.scrollWidth <= vp.clientWidth) return;
+      const delta = e.deltaX !== 0 ? e.deltaX : e.deltaY;
+      if (delta === 0) return;
+      const prev = vp.scrollLeft;
+      vp.scrollLeft += delta;
+      if (vp.scrollLeft !== prev) {
+        e.preventDefault();
+      }
+    }
+
+    function makeDragHandlers(s: AxisState, horizontal: boolean): DragHandlers {
+      const onDown = (e: MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const vp = viewportRef.value;
+        if (!vp) return;
+        s.dragging = true;
+        s.dragStartClient = horizontal ? e.clientX : e.clientY;
+        s.dragStartScroll = horizontal ? vp.scrollLeft : vp.scrollTop;
+        s.thumb.classList.add("is-dragging");
+        document.addEventListener("mousemove", onMove);
+        document.addEventListener("mouseup", onUp);
+      };
+      const onMove = (e: MouseEvent) => {
+        const vp = viewportRef.value;
+        if (!vp || !s.dragging) return;
+        const scrollSize = horizontal ? vp.scrollWidth : vp.scrollHeight;
+        const clientSize = horizontal ? vp.clientWidth : vp.clientHeight;
+        const delta = (horizontal ? e.clientX : e.clientY) - s.dragStartClient;
+        const thumbSize = Math.max((clientSize / scrollSize) * clientSize, 20);
+        const trackRange = clientSize - thumbSize;
+        if (trackRange <= 0) return;
+        const target = s.dragStartScroll + (delta / trackRange) * (scrollSize - clientSize);
+        if (horizontal) vp.scrollLeft = target;
+        else vp.scrollTop = target;
+      };
+      const onUp = () => {
+        s.dragging = false;
+        s.thumb.classList.remove("is-dragging");
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onUp);
+      };
+      const onTrackClick = (e: MouseEvent) => {
+        if (e.target === s.thumb) return;
+        const vp = viewportRef.value;
+        if (!vp) return;
+        const rect = s.track.getBoundingClientRect();
+        const ratio = horizontal
+          ? (e.clientX - rect.left) / rect.width
+          : (e.clientY - rect.top) / rect.height;
+        const max = (horizontal ? vp.scrollWidth : vp.scrollHeight) - (horizontal ? vp.clientWidth : vp.clientHeight);
+        if (horizontal) vp.scrollLeft = ratio * max;
+        else vp.scrollTop = ratio * max;
+      };
+      const onEnter = () => s.track.classList.add("is-hovering");
+      const onLeave = () => s.track.classList.remove("is-hovering");
+      return { onDown, onMove, onUp, onTrackClick, onEnter, onLeave };
+    }
+
+    function attachAxis(s: AxisState, d: DragHandlers) {
+      s.thumb.addEventListener("mousedown", d.onDown);
+      s.track.addEventListener("click", d.onTrackClick);
+      s.track.addEventListener("mouseenter", d.onEnter);
+      s.track.addEventListener("mouseleave", d.onLeave);
+    }
+
+    function detachAxis(s: AxisState | null, d: DragHandlers | null) {
+      if (!s || !d) return;
+      s.thumb.removeEventListener("mousedown", d.onDown);
+      s.track.removeEventListener("click", d.onTrackClick);
+      s.track.removeEventListener("mouseenter", d.onEnter);
+      s.track.removeEventListener("mouseleave", d.onLeave);
+      document.removeEventListener("mousemove", d.onMove);
+      document.removeEventListener("mouseup", d.onUp);
+      s.hideTimer?.disconnect();
+      s.track.remove();
+    }
+
+    onMounted(() => {
+      const vp = viewportRef.value;
+      if (!vp) return;
+      const containerEl = vp.parentElement;
+      if (!containerEl) return;
+
+      if (props.scrollbar) {
+        if (hasV()) {
+          vState = makeState(false);
+          containerEl.appendChild(vState.track);
+          vDrag = makeDragHandlers(vState, false);
+          attachAxis(vState, vDrag);
+        }
+        if (hasH()) {
+          hState = makeState(true);
+          containerEl.appendChild(hState.track);
+          hDrag = makeDragHandlers(hState, true);
+          attachAxis(hState, hDrag);
+        }
+      }
+
+      vp.addEventListener("scroll", onScroll, { passive: true });
+      vp.addEventListener("wheel", onWheel, { passive: false });
+
+      ro = new ResizeObserver(scheduleUpdate);
+      ro.observe(vp);
+
+      if (props.autoFollow && autoFollowContent.value) {
+        pinned.value = true;
+        onceFrame(() => {
+          pinToBottomIfPinned();
+          recomputePinned();
+        });
+        followRO = new ResizeObserver(() => {
+          pinToBottomIfPinned();
+          kickSettle();
+        });
+        followRO.observe(autoFollowContent.value!);
+      }
+
+      update();
+    });
+
+    onBeforeUnmount(() => {
+      const vp = viewportRef.value;
+      if (vp) {
+        vp.removeEventListener("scroll", onScroll);
+        vp.removeEventListener("wheel", onWheel);
+      }
+      detachAxis(vState, vDrag);
+      detachAxis(hState, hDrag);
+      scheduled?.disconnect();
+      settleHandle?.disconnect();
+      settleHandle = null;
+      ro?.disconnect();
+      followRO?.disconnect();
+      followRO = null;
+    });
+
+    function scrollTo(top: number, behavior: ScrollBehavior = "auto") {
+      const vp = viewportRef.value;
+      if (!vp) return;
+      vp.scrollTo({ top, behavior });
+    }
+
+    function scrollToElement(el: HTMLElement | null, behavior: ScrollBehavior = "auto") {
+      if (!el) return;
+      const vp = viewportRef.value;
+      if (!vp) {
+        el.scrollIntoView({ behavior, block: "start" });
+        return;
+      }
+      const target = el.getBoundingClientRect().top - vp.getBoundingClientRect().top + vp.scrollTop;
+      vp.scrollTo({ top: target, behavior });
+    }
+
+    function getScrollElement(): HTMLElement | undefined {
+      return viewportRef.value;
+    }
+
+    function getScrollTop(): number {
+      return viewportRef.value?.scrollTop ?? 0;
+    }
+
+    expose({ scrollTo, scrollToElement, getScrollElement, getScrollTop });
+
+    return () => {
+      const Tag = props.as as "div" | "section" | "nav" | "main" | "aside";
+      const content = props.autoFollow ? (
+        <div ref={autoFollowContent} class="hk-scroll-container-autofollow-content">
+          {slots.default?.()}
+        </div>
+      ) : (
+        slots.default?.()
+      );
+      return (
+        <Tag class="hk-scroll-container" data-axis={props.axis}>
+          <div ref={viewportRef} class="hk-scroll-container-viewport">
+            {content}
+          </div>
+          {showAutoTag.value && (
+            <span class="hk-scroll-container-autotag" aria-hidden="true">{t("hk.scrollContainer.auto", "Auto")}</span>
+          )}
+        </Tag>
+      );
+    };
+  },
+});