@cahyo-dimas/freeday 1.7.0

package/adapters/vue/components/FdyCfl.vue

@@ -0,0 +1,354 @@
+<script setup lang="ts" generic="Row extends Record<string, unknown>">
+import { computed, nextTick, onBeforeUnmount, ref, useId, type ComputedRef, type Ref } from 'vue';
+
+// A Vue-native, *controlled async* choose-from-list over freeday's `.fdy-cfl*` +
+// `.fdy-input-group` classes (see src/components/cfl.css, input-group.css). freeday
+// ships a framework-agnostic enhancer (freeday-cfl.js) that scans static `.fdy-cfl__row`
+// markup; its own header says a framework app should "drive the dialog as a controlled
+// component (fetchPage callback + server cache), not a store." This component does exactly
+// that: a real `v-model:Row|null` over a native <dialog> whose rows come from an async
+// `fetchPage(query, page)`. It re-implements the enhancer's open/close + search + dense
+// sticky-header results + single-commit-on-click + keyboard, and adds the pieces a server
+// picker needs — loading/empty/error states, retry, pagination, an out-of-order guard, and
+// an optional in-memory cache. The enhancer is NOT mounted here (it would fight Vue's DOM).
+
+interface CflColumn {
+  key: keyof Row & string;
+  label: string;
+}
+
+interface CflPage {
+  rows: Row[];
+  hasMore: boolean;
+}
+
+const props = defineProps<{
+  modelValue: Row | null;
+  fetchPage: (query: string, page: number) => Promise<CflPage>;
+  columns: ReadonlyArray<CflColumn>;
+  display: (row: Row) => string;
+  rowKey: (row: Row) => string;
+  /** Advisory only — the caller's `fetchPage` owns paging; kept for API documentation. */
+  pageSize?: number;
+  placeholder?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  describedby?: string;
+  id?: string;
+  ariaLabelledby?: string;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: Row];
+  change: [value: Row];
+}>();
+
+const baseId: string = useId();
+const fieldId: ComputedRef<string> = computed((): string => props.id ?? `${baseId}-field`);
+const titleId: string = `${baseId}-title`;
+const resultsId: string = `${baseId}-results`;
+function rowId(index: number): string {
+  return `${baseId}-row-${index}`;
+}
+
+const dialogEl: Ref<HTMLDialogElement | null> = ref(null);
+const triggerEl: Ref<HTMLButtonElement | null> = ref(null);
+const searchEl: Ref<HTMLInputElement | null> = ref(null);
+
+const query: Ref<string> = ref('');
+const rows: Ref<Row[]> = ref([]) as Ref<Row[]>;
+const page: Ref<number> = ref(0);
+const hasMore: Ref<boolean> = ref(false);
+const loading: Ref<boolean> = ref(false);
+const error: Ref<Error | null> = ref(null);
+const activeIndex: Ref<number> = ref(-1);
+
+const isDisabled: ComputedRef<boolean> = computed((): boolean => props.disabled === true);
+const isInvalid: ComputedRef<boolean> = computed((): boolean => props.invalid === true);
+const displayValue: ComputedRef<string> = computed((): string =>
+  props.modelValue !== null ? props.display(props.modelValue) : '',
+);
+// The results <table> (owner of `resultsId`) only renders in the rows branch, so gate the
+// search input's aria refs on rows existing — otherwise they'd dangle during loading/empty/error.
+const hasRows: ComputedRef<boolean> = computed((): boolean => rows.value.length > 0);
+const controlsId: ComputedRef<string | undefined> = computed((): string | undefined =>
+  hasRows.value ? resultsId : undefined,
+);
+const activeDescendant: ComputedRef<string | undefined> = computed((): string | undefined =>
+  hasRows.value && activeIndex.value >= 0 ? rowId(activeIndex.value) : undefined,
+);
+const isInitialLoading: ComputedRef<boolean> = computed((): boolean => loading.value && rows.value.length === 0);
+const isBlockingError: ComputedRef<boolean> = computed((): boolean => error.value !== null && rows.value.length === 0);
+const isEmpty: ComputedRef<boolean> = computed(
+  (): boolean => !loading.value && error.value === null && rows.value.length === 0,
+);
+
+// --- Async engine ---------------------------------------------------------
+// Out-of-order guard: every fetch takes a monotonically increasing token; a
+// resolved/rejected page is discarded unless it still owns the latest token
+// (a newer search, a load-more, or a dialog reset all bump it). This keeps a
+// slow stale response from overwriting fresh results.
+let reqToken: number = 0;
+// Optional in-memory cache, keyed by `${query}::${page}`, cleared on close.
+const cache: Map<string, CflPage> = new Map<string, CflPage>();
+let lastPage: number = 0;
+let lastAppend: boolean = false;
+let searchTimer: ReturnType<typeof setTimeout> | null = null;
+
+async function loadPage(targetPage: number, append: boolean): Promise<void> {
+  const q: string = query.value;
+  lastPage = targetPage;
+  lastAppend = append;
+  const token: number = ++reqToken;
+  const key = `${q}::${targetPage}`;
+  error.value = null;
+  loading.value = true;
+  try {
+    const cached: CflPage | undefined = cache.get(key);
+    const res: CflPage = cached ?? (await props.fetchPage(q, targetPage));
+    if (token !== reqToken) return; // stale — a newer request has started
+    if (cached === undefined) cache.set(key, res);
+    const copy: Row[] = res.rows.slice(); // never mutate the caller's array
+    rows.value = append ? rows.value.concat(copy) : copy;
+    hasMore.value = res.hasMore;
+    page.value = targetPage;
+    if (!append) activeIndex.value = rows.value.length > 0 ? 0 : -1;
+  } catch (err: unknown) {
+    if (token !== reqToken) return;
+    error.value = err instanceof Error ? err : new Error(String(err));
+  } finally {
+    if (token === reqToken) loading.value = false;
+  }
+}
+
+function retry(): void {
+  void loadPage(lastPage, lastAppend);
+}
+
+function loadMore(): void {
+  if (loading.value || !hasMore.value) return;
+  void loadPage(page.value + 1, true);
+}
+
+function onSearchInput(e: Event): void {
+  query.value = (e.target as HTMLInputElement).value;
+  if (searchTimer !== null) clearTimeout(searchTimer);
+  searchTimer = setTimeout((): void => {
+    void loadPage(0, false);
+  }, 250);
+}
+
+// --- Active-row / keyboard ------------------------------------------------
+function setActive(index: number): void {
+  if (rows.value.length === 0) {
+    activeIndex.value = -1;
+    return;
+  }
+  const clamped: number = Math.max(0, Math.min(index, rows.value.length - 1));
+  activeIndex.value = clamped;
+  void nextTick((): void => {
+    document.getElementById(rowId(clamped))?.scrollIntoView({ block: 'nearest' });
+  });
+}
+
+function commit(row: Row): void {
+  emit('update:modelValue', row);
+  emit('change', row);
+  closeDialog();
+}
+
+function onKeydown(e: KeyboardEvent): void {
+  switch (e.key) {
+    case 'ArrowDown':
+      e.preventDefault();
+      setActive(activeIndex.value + 1);
+      break;
+    case 'ArrowUp':
+      e.preventDefault();
+      setActive(activeIndex.value - 1);
+      break;
+    case 'Home':
+      if (rows.value.length > 0) {
+        e.preventDefault();
+        setActive(0);
+      }
+      break;
+    case 'End':
+      if (rows.value.length > 0) {
+        e.preventDefault();
+        setActive(rows.value.length - 1);
+      }
+      break;
+    case 'Enter': {
+      const row: Row | undefined = activeIndex.value >= 0 ? rows.value[activeIndex.value] : undefined;
+      if (row !== undefined) {
+        e.preventDefault();
+        commit(row);
+      }
+      break;
+    }
+    default:
+      break; // Escape is left to the native <dialog> cancel/close
+  }
+}
+
+// --- Open / close ---------------------------------------------------------
+function openDialog(): void {
+  if (isDisabled.value) return;
+  if (searchTimer !== null) {
+    clearTimeout(searchTimer);
+    searchTimer = null;
+  }
+  cache.clear();
+  query.value = '';
+  rows.value = [];
+  page.value = 0;
+  hasMore.value = false;
+  error.value = null;
+  activeIndex.value = -1;
+  dialogEl.value?.showModal();
+  void nextTick((): void => searchEl.value?.focus());
+  void loadPage(0, false);
+}
+
+function closeDialog(): void {
+  dialogEl.value?.close();
+}
+
+// Fires for every close path (button, Esc, commit); centralise cleanup here.
+function onClose(): void {
+  reqToken++; // invalidate any in-flight fetch so it can't apply after close
+  if (searchTimer !== null) {
+    // Cancel a debounce armed just before close (e.g. typed a char then clicked a
+    // row) so it can't fire a stray fetchPage after the dialog is gone.
+    clearTimeout(searchTimer);
+    searchTimer = null;
+  }
+  cache.clear();
+  loading.value = false;
+  triggerEl.value?.focus();
+}
+
+function cellText(row: Row, key: keyof Row & string): string {
+  const value: unknown = row[key];
+  return value === null || value === undefined ? '' : String(value);
+}
+
+onBeforeUnmount((): void => {
+  if (searchTimer !== null) clearTimeout(searchTimer);
+});
+</script>
+
+<template>
+  <div class="fdy-input-group">
+    <input
+      :id="fieldId"
+      class="fdy-input"
+      type="text"
+      readonly
+      :value="displayValue"
+      :placeholder="placeholder"
+      :aria-labelledby="ariaLabelledby"
+      :aria-invalid="isInvalid ? 'true' : undefined"
+      :aria-describedby="describedby"
+      :disabled="isDisabled"
+    />
+    <button
+      ref="triggerEl"
+      type="button"
+      class="fdy-input-group__btn"
+      aria-haspopup="dialog"
+      :aria-labelledby="ariaLabelledby"
+      :aria-label="ariaLabelledby ? undefined : 'Buka pencarian'"
+      :disabled="isDisabled"
+      @click="openDialog"
+    >
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="11" cy="11" r="7"></circle>
+        <path d="m21 21-4.35-4.35"></path>
+      </svg>
+    </button>
+
+    <dialog ref="dialogEl" class="fdy-modal fdy-modal--cfl" :aria-labelledby="titleId" @close="onClose" @keydown="onKeydown">
+      <div class="fdy-modal__header">
+        <h3 :id="titleId" class="fdy-modal__title">Pilih data</h3>
+        <button class="fdy-modal__close" type="button" aria-label="Tutup" @click="closeDialog">&times;</button>
+      </div>
+
+      <div class="fdy-modal__body">
+        <div class="fdy-cfl__search">
+          <div class="fdy-input-group" style="max-width:none">
+            <span class="fdy-input-group__addon fdy-input-group__addon--icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <circle cx="11" cy="11" r="7"></circle>
+                <path d="m21 21-4.35-4.35"></path>
+              </svg>
+            </span>
+            <input
+              ref="searchEl"
+              class="fdy-input"
+              type="search"
+              :value="query"
+              placeholder="Cari…"
+              aria-label="Cari data"
+              :aria-controls="controlsId"
+              :aria-activedescendant="activeDescendant"
+              @input="onSearchInput"
+            />
+          </div>
+        </div>
+
+        <div class="fdy-cfl__results">
+          <p v-if="isInitialLoading" class="fdy-cfl__empty" role="status">Memuat…</p>
+
+          <div v-else-if="isBlockingError" class="fdy-cfl__empty" role="alert">
+            <p style="margin:0 0 var(--space-3)">{{ error?.message }}</p>
+            <button class="fdy-btn fdy-btn--sm" type="button" @click="retry">Coba lagi</button>
+          </div>
+
+          <p v-else-if="isEmpty" class="fdy-cfl__empty">Tidak ada hasil.</p>
+
+          <template v-else>
+            <table :id="resultsId" class="fdy-table" aria-label="Hasil pencarian">
+              <thead>
+                <tr>
+                  <th v-for="col in columns" :key="col.key" scope="col">{{ col.label }}</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="(row, i) in rows"
+                  :id="rowId(i)"
+                  :key="rowKey(row)"
+                  class="fdy-cfl__row"
+                  :aria-selected="i === activeIndex ? 'true' : undefined"
+                  @click="commit(row)"
+                  @mousemove="setActive(i)"
+                >
+                  <td v-for="col in columns" :key="col.key">{{ cellText(row, col.key) }}</td>
+                </tr>
+              </tbody>
+            </table>
+
+            <div v-if="error !== null" class="fdy-cfl__empty" role="alert" style="padding:var(--space-4) var(--space-5)">
+              <p style="margin:0 0 var(--space-3)">{{ error.message }}</p>
+              <button class="fdy-btn fdy-btn--sm" type="button" @click="retry">Coba lagi</button>
+            </div>
+            <div v-else-if="hasMore" style="padding:var(--space-3) var(--space-4);text-align:center">
+              <button class="fdy-btn fdy-btn--ghost fdy-btn--sm" type="button" :disabled="loading" @click="loadMore">
+                {{ loading ? 'Memuat…' : 'Muat lebih banyak' }}
+              </button>
+            </div>
+          </template>
+        </div>
+      </div>
+
+      <div class="fdy-modal__footer">
+        <span class="fdy-cfl__count">Klik baris untuk memilih</span>
+        <div class="fdy-cfl__actions">
+          <button class="fdy-btn fdy-btn--ghost" type="button" @click="closeDialog">Tutup</button>
+        </div>
+      </div>
+    </dialog>
+  </div>
+</template>

package/adapters/vue/components/FdyChart.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch, nextTick, type ComputedRef, type Ref } from 'vue';
+
+// A Vue-native wrapper over freeday's zero-dependency chart renderer (freeday-chart.js).
+// Unlike the input components, charts are not form controls, so re-implementing them in Vue
+// would only duplicate the SVG maths. Instead this thin wrapper binds the renderer's data-*
+// API reactively and re-invokes window.FreedayChart.update() whenever the data changes — giving
+// reactive, typed charts (a drop-in replacement for hand-rolled Chart.js wrappers) with no
+// external dependency. Because the renderer paints with CSS var()/--chart-* tokens, charts also
+// recolour on data-theme change for free. Requires the freeday enhancers (dist/freeday.js) to be
+// loaded so window.FreedayChart exists; until then the slotted fallback content stays visible.
+
+interface FdyChartSeries {
+  label: string;
+  values: number[];
+  role?: string;
+}
+
+// Note: no `ariaLabel` prop — pass `aria-label` (and any other native attribute) directly; it
+// falls through onto the root element. `role="img"` is set below. Give every chart an aria-label.
+const props = defineProps<{
+  type: 'line' | 'area' | 'bar' | 'sparkline' | 'donut';
+  series?: ReadonlyArray<FdyChartSeries>;
+  values?: ReadonlyArray<number>;
+  labels?: ReadonlyArray<string>;
+  format?: 'number' | 'percent' | 'currency';
+  stacked?: boolean;
+  legend?: 'auto' | 'always' | 'none';
+  colors?: ReadonlyArray<string>;
+  color?: string;
+  center?: string | number;
+}>();
+
+interface FreedayChartApi { update: (el: HTMLElement) => void; }
+function chartApi(): FreedayChartApi | null {
+  const api: FreedayChartApi | undefined = (window as unknown as { FreedayChart?: FreedayChartApi }).FreedayChart;
+  return api !== undefined && typeof api.update === 'function' ? api : null;
+}
+
+const rootEl: Ref<HTMLDivElement | null> = ref(null);
+
+// Cartesian (axes) when line/area, or a bar with multiple series / stacking; those get their
+// layout class from the renderer. sparkline/donut/simple-bar need their layout class up front.
+const isCartesian: ComputedRef<boolean> = computed((): boolean =>
+  props.type === 'line' || props.type === 'area' || (props.type === 'bar' && (props.series !== undefined || props.stacked === true)),
+);
+const rootClass: ComputedRef<string> = computed((): string => {
+  if (props.type === 'sparkline') return 'fdy-sparkline';
+  if (props.type === 'donut') return 'fdy-donut';
+  if (props.type === 'bar' && !isCartesian.value) return 'fdy-bars';
+  return '';
+});
+
+function render(): void {
+  const el: HTMLDivElement | null = rootEl.value;
+  const api: FreedayChartApi | null = chartApi();
+  if (el === null || api === null) return;
+  api.update(el);
+  el.dataset.fdyChartReady = '1'; // claim it so the global auto-init won't render it again
+}
+
+onMounted((): void => { void nextTick(render); });
+watch(
+  (): unknown[] => [props.type, props.series, props.values, props.labels, props.format, props.stacked, props.legend, props.colors, props.color, props.center],
+  (): void => { void nextTick(render); },
+  { deep: true },
+);
+onBeforeUnmount((): void => { const el: HTMLDivElement | null = rootEl.value; if (el !== null) el.innerHTML = ''; });
+</script>
+
+<template>
+  <div
+    ref="rootEl"
+    :class="rootClass"
+    :data-fdy-chart="type"
+    :data-series="series !== undefined ? JSON.stringify(series) : undefined"
+    :data-values="values !== undefined ? values.join(',') : undefined"
+    :data-labels="labels !== undefined ? labels.join(',') : undefined"
+    :data-fdy-format="format ?? undefined"
+    :data-fdy-stacked="stacked === true ? '' : undefined"
+    :data-fdy-legend="legend ?? undefined"
+    :data-fdy-colors="colors !== undefined ? colors.join(',') : undefined"
+    :data-fdy-color="color ?? undefined"
+    :data-fdy-center="center !== undefined ? String(center) : undefined"
+    role="img"
+  >
+    <slot />
+  </div>
+</template>

package/adapters/vue/components/FdyCombo.vue

@@ -0,0 +1,232 @@
+<script setup lang="ts" generic="T extends string">
+import { computed, onBeforeUnmount, onMounted, ref, useId, type ComputedRef, type Ref } from 'vue';
+import { usePopover } from '../usePopover';
+
+// A Vue-native binding over freeday's `.fdy-combo` classes. freeday ships the styled
+// listbox (combo.css) plus a framework-agnostic enhancer (freeday-select.js) whose own
+// header says: "In a Vue app you would bind your own state instead." Letting that enhancer
+// own the DOM would fight Vue's rendering, so this component re-implements the WAI-ARIA
+// APG "select-only combobox" interaction in Vue, giving a real `v-model` and a themed
+// popup that replaces the native <select> whose open list is an unthemeable OS menu.
+// Generic over the value type so a union like RangePreset binds through v-model unchanged.
+
+interface ComboOption {
+  value: T;
+  label: string;
+}
+
+const props = defineProps<{
+  modelValue: T;
+  options: ReadonlyArray<ComboOption>;
+  id?: string;
+  ariaLabelledby?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  describedby?: string;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: T];
+  change: [value: T];
+}>();
+
+const baseId: string = useId();
+const buttonId: ComputedRef<string> = computed((): string => props.id ?? `${baseId}-btn`);
+const listboxId: string = `${baseId}-listbox`;
+function optionId(index: number): string {
+  return `${baseId}-opt-${index}`;
+}
+
+const rootEl: Ref<HTMLDivElement | null> = ref(null);
+const buttonEl: Ref<HTMLButtonElement | null> = ref(null);
+const listboxEl: Ref<HTMLUListElement | null> = ref(null);
+const open: Ref<boolean> = ref(false);
+
+// Render the listbox in the top layer (popover) so it escapes any ancestor overflow clip
+// (a .fdy-card, a scroll container) and positions against the button.
+usePopover(listboxEl, buttonEl, open);
+const highlighted: Ref<number> = ref(-1);
+
+const selectedIndex: ComputedRef<number> = computed((): number =>
+  props.options.findIndex((o: ComboOption): boolean => o.value === props.modelValue),
+);
+const selectedLabel: ComputedRef<string> = computed((): string => {
+  const opt: ComboOption | undefined = props.options[selectedIndex.value];
+  return opt !== undefined ? opt.label : (props.placeholder ?? '');
+});
+const isPlaceholder: ComputedRef<boolean> = computed((): boolean => selectedIndex.value < 0);
+const isDisabled: ComputedRef<boolean> = computed((): boolean => props.disabled === true);
+const isInvalid: ComputedRef<boolean> = computed((): boolean => props.invalid === true);
+const activeDescendant: ComputedRef<string | undefined> = computed((): string | undefined =>
+  open.value && highlighted.value >= 0 ? optionId(highlighted.value) : undefined,
+);
+
+function setHighlight(index: number): void {
+  const len: number = props.options.length;
+  highlighted.value = len === 0 ? -1 : ((index % len) + len) % len;
+}
+
+function openList(): void {
+  if (isDisabled.value || open.value) return;
+  open.value = true;
+  setHighlight(selectedIndex.value >= 0 ? selectedIndex.value : 0);
+}
+
+function closeList(focusButton: boolean): void {
+  if (!open.value) return;
+  open.value = false;
+  highlighted.value = -1;
+  if (focusButton) buttonEl.value?.focus();
+}
+
+function toggle(): void {
+  if (open.value) closeList(false);
+  else openList();
+}
+
+function choose(index: number): void {
+  const opt: ComboOption | undefined = props.options[index];
+  if (opt === undefined) return;
+  if (opt.value !== props.modelValue) {
+    emit('update:modelValue', opt.value);
+    emit('change', opt.value);
+  }
+  closeList(true);
+}
+
+// Type-to-select: buffer keystrokes for 500ms and jump to the first matching label.
+let typed: string = '';
+let typedTimer: ReturnType<typeof setTimeout> | null = null;
+function typeahead(char: string): void {
+  typed += char.toLowerCase();
+  if (typedTimer !== null) clearTimeout(typedTimer);
+  typedTimer = setTimeout((): void => {
+    typed = '';
+  }, 500);
+  const match: number = props.options.findIndex((o: ComboOption): boolean =>
+    o.label.toLowerCase().startsWith(typed),
+  );
+  if (match >= 0) {
+    if (!open.value) openList();
+    setHighlight(match);
+  }
+}
+
+function onKeydown(e: KeyboardEvent): void {
+  if (isDisabled.value) return;
+  switch (e.key) {
+    case 'ArrowDown':
+      e.preventDefault();
+      if (open.value) setHighlight(highlighted.value + 1);
+      else openList();
+      break;
+    case 'ArrowUp':
+      e.preventDefault();
+      if (open.value) setHighlight(highlighted.value - 1);
+      else openList();
+      break;
+    case 'Home':
+      if (open.value) {
+        e.preventDefault();
+        setHighlight(0);
+      }
+      break;
+    case 'End':
+      if (open.value) {
+        e.preventDefault();
+        setHighlight(props.options.length - 1);
+      }
+      break;
+    case 'Enter':
+    case ' ':
+      e.preventDefault();
+      if (open.value && highlighted.value >= 0) choose(highlighted.value);
+      else openList();
+      break;
+    case 'Escape':
+      if (open.value) {
+        e.preventDefault();
+        closeList(true);
+      }
+      break;
+    case 'Tab':
+      if (open.value) closeList(false);
+      break;
+    default:
+      if (e.key.length === 1 && /\S/.test(e.key) && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        typeahead(e.key);
+      }
+  }
+}
+
+// Close when a pointer lands outside the whole combo.
+function onDocPointerDown(e: MouseEvent): void {
+  const target: EventTarget | null = e.target;
+  if (rootEl.value !== null && target instanceof Node && !rootEl.value.contains(target)) {
+    closeList(false);
+  }
+}
+
+// Close when focus leaves the combo entirely (e.g. Shift+Tab off the button).
+function onFocusout(e: FocusEvent): void {
+  const next: EventTarget | null = e.relatedTarget;
+  if (rootEl.value !== null && !(next instanceof Node && rootEl.value.contains(next))) {
+    closeList(false);
+  }
+}
+
+onMounted((): void => {
+  document.addEventListener('mousedown', onDocPointerDown);
+});
+onBeforeUnmount((): void => {
+  document.removeEventListener('mousedown', onDocPointerDown);
+  if (typedTimer !== null) clearTimeout(typedTimer);
+});
+</script>
+
+<template>
+  <div
+    ref="rootEl"
+    class="fdy-combo"
+    :class="{ 'fdy-combo--error': isInvalid }"
+    :data-value="modelValue"
+    @keydown="onKeydown"
+    @focusout="onFocusout"
+  >
+    <button
+      :id="buttonId"
+      ref="buttonEl"
+      type="button"
+      class="fdy-combo__button"
+      :class="{ 'is-open': open }"
+      role="combobox"
+      aria-haspopup="listbox"
+      :aria-controls="listboxId"
+      :aria-expanded="open"
+      :aria-activedescendant="activeDescendant"
+      :aria-labelledby="ariaLabelledby"
+      :aria-invalid="isInvalid ? 'true' : undefined"
+      :aria-describedby="describedby"
+      :disabled="isDisabled"
+      @click="toggle"
+    >
+      <span class="fdy-combo__value" :class="{ 'fdy-combo__value--placeholder': isPlaceholder }">{{ selectedLabel }}</span>
+    </button>
+    <ul :id="listboxId" ref="listboxEl" class="fdy-combo__listbox" role="listbox" popover="manual" :hidden="!open">
+      <li
+        v-for="(opt, i) in options"
+        :id="optionId(i)"
+        :key="opt.value"
+        class="fdy-combo__option"
+        :class="{ 'is-highlighted': i === highlighted }"
+        role="option"
+        :aria-selected="opt.value === modelValue"
+        @click="choose(i)"
+        @mousemove="setHighlight(i)"
+      >
+        <span class="fdy-combo__check">{{ opt.value === modelValue ? '✓' : '' }}</span>{{ opt.label }}
+      </li>
+    </ul>
+  </div>
+</template>