<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from "vue";

const props = withDefaults(
  defineProps<{
    maxLength?: number;
    warnAt?: number;
    accent?: string;
    placeholder?: string;
    punch?: number;
    label?: string;
    initialValue?: string;
  }>(),
  {
    maxLength: 140,
    warnAt: 20,
    accent: "#FF4D8D",
    placeholder: "Share an update with your team",
    punch: 1,
    label: "Update",
    initialValue: "",
  },
);

const NEUTRAL = "#98A0AC";
const SURFACE = "#14181d";

function mixHex(a: string, b: string, t: number): string {
  const pa = parseInt(a.slice(1), 16);
  const pb = parseInt(b.slice(1), 16);
  const ch = (shift: number) => Math.round(((pa >> shift) & 255) * (1 - t) + ((pb >> shift) & 255) * t);
  return `rgb(${ch(16)}, ${ch(8)}, ${ch(0)})`;
}

const value = ref(props.initialValue);
const readout = ref<HTMLElement | null>(null);
const live = ref<HTMLElement | null>(null);
let reduced = false;
let media: MediaQueryList | null = null;

onMounted(() => {
  media = window.matchMedia("(prefers-reduced-motion: reduce)");
  reduced = media.matches;
  media.addEventListener("change", onMotionChange);
});
onBeforeUnmount(() => media?.removeEventListener("change", onMotionChange));
function onMotionChange(event: MediaQueryListEvent) {
  reduced = event.matches;
}

const remaining = computed(() => Math.max(0, props.maxLength - value.value.length));
const tone = computed(() =>
  remaining.value >= props.warnAt ? 0 : props.warnAt <= 0 ? 1 : 1 - remaining.value / props.warnAt,
);
const color = computed(() => mixHex(NEUTRAL, props.accent, tone.value));

function onInput(event: Event) {
  const el = event.target as HTMLInputElement;
  const next = el.value.slice(0, props.maxLength);
  const prev = value.value.length;
  if (next !== el.value) el.value = next;
  value.value = next;
  const after = Math.max(0, props.maxLength - next.length);
  const tAfter = after >= props.warnAt ? 0 : props.warnAt <= 0 ? 1 : 1 - after / props.warnAt;
  if (next.length > prev && (tAfter > 0 || after === 0) && !reduced && props.punch > 0 && readout.value) {
    const amount = props.punch * (0.06 + 0.2 * Math.max(tAfter, after === 0 ? 1 : 0));
    readout.value.animate(
      [{ transform: `scale(${1 + amount})` }, { transform: "scale(1)" }],
      { duration: 220, easing: "cubic-bezier(0.22, 1, 0.36, 1)" },
    );
  }
  if (live.value) {
    if (tAfter > 0 && after > 0) live.value.textContent = `${after} characters left`;
    else if (after === 0 && prev > 0) live.value.textContent = "No characters left";
    else live.value.textContent = "";
  }
}
</script>

<template>
  <label class="budget-counter" :style="{ '--cbc-accent': accent }">
    <span class="budget-counter__labeltext">{{ label }}</span>
    <span class="budget-counter__field">
      <input
        type="text"
        class="budget-counter__input"
        :value="value"
        :placeholder="placeholder"
        :maxlength="maxLength"
        @input="onInput"
      />
      <span class="budget-counter__fade" aria-hidden="true"></span>
      <span class="budget-counter__readout-wrap" aria-hidden="true">
        <span ref="readout" class="budget-counter__readout" :style="{ color }">{{ remaining }}</span>
      </span>
      <span ref="live" class="budget-counter__live" aria-live="polite"></span>
    </span>
  </label>
</template>

<style scoped>
.budget-counter {
  display: block;
  width: 100%;
}
.budget-counter__labeltext {
  display: block;
  margin-bottom: 6px;
  font: 500 12px/16px system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}
.budget-counter__field {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid rgb(255 255 255 / 0.15);
  border-radius: 12px;
  background: v-bind("SURFACE");
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}
.budget-counter__field:focus-within {
  border-color: var(--cbc-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cbc-accent) 22%, transparent);
}
.budget-counter__input {
  height: 44px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0 calc(3.2ch + 52px) 0 14px;
  color: rgb(255 255 255 / 0.9);
  font: 400 15px/22px system-ui, sans-serif;
  outline: none;
}
.budget-counter__input::placeholder {
  color: rgb(255 255 255 / 0.35);
}
.budget-counter__fade {
  position: absolute;
  top: 0;
  right: calc(3.2ch + 16px);
  height: 100%;
  width: 24px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, #14181d);
}
.budget-counter__readout-wrap {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.budget-counter__readout {
  display: block;
  width: 3.2ch;
  text-align: right;
  font: 600 13px/18px system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
.budget-counter__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
</style>
Nearby
