@cahyo-dimas/freeday 1.7.0

package/adapters/vue/components/FdyAutocomplete.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch, type ComputedRef, type Ref } from 'vue';
+import { usePopover } from '../usePopover';
+
+// A controlled Vue port of freeday's autocomplete (src/freeday-autocomplete.js +
+// autocomplete.css): a WAI-ARIA APG *editable* combobox — a text input filters a listbox of
+// options as you type; picking one fills the input. A real `v-model` in place of the enhancer's
+// DOM mutation, so Vue owns the input. Filtering mirrors the enhancer exactly (case-insensitive
+// substring on the trimmed query); pass server-filtered `options` and it stays a no-op re-filter.
+// `select` is emitted only on commit (the enhancer's fdy-autocomplete-select event).
+
+const props = defineProps<{
+  modelValue: string;
+  options: ReadonlyArray<string>;
+  emptyText?: string;
+  placeholder?: string;
+  id?: string;
+  ariaLabel?: string;
+  ariaLabelledby?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  describedby?: string;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+  select: [value: string];
+}>();
+
+const baseId: string = useId();
+const inputId: ComputedRef<string> = computed((): string => props.id ?? `${baseId}-input`);
+const listboxId: string = `${baseId}-listbox`;
+function optionId(index: number): string {
+  return `${baseId}-opt-${index}`;
+}
+
+const rootEl: Ref<HTMLDivElement | null> = ref(null);
+const inputEl: Ref<HTMLInputElement | null> = ref(null);
+const listboxEl: Ref<HTMLUListElement | null> = ref(null);
+const open: Ref<boolean> = ref(false);
+const active: Ref<number> = ref(-1);
+
+// Render the listbox in the top layer so it escapes any ancestor overflow clip.
+usePopover(listboxEl, inputEl, open);
+
+const isDisabled: ComputedRef<boolean> = computed((): boolean => props.disabled === true);
+const isInvalid: ComputedRef<boolean> = computed((): boolean => props.invalid === true);
+
+const filtered: ComputedRef<string[]> = computed((): string[] => {
+  const q: string = props.modelValue.trim().toLowerCase();
+  return q === '' ? props.options.slice() : props.options.filter((o: string): boolean => o.toLowerCase().includes(q));
+});
+
+const activeDescendant: ComputedRef<string | undefined> = computed((): string | undefined =>
+  open.value && active.value >= 0 && active.value < filtered.value.length ? optionId(active.value) : undefined,
+);
+
+function openList(): void {
+  if (!isDisabled.value) open.value = true;
+}
+function closeList(): void {
+  open.value = false;
+  active.value = -1;
+}
+function choose(label: string): void {
+  emit('update:modelValue', label);
+  emit('select', label);
+  closeList();
+  inputEl.value?.focus();
+}
+function onInput(e: Event): void {
+  const target: HTMLInputElement = e.target as HTMLInputElement;
+  emit('update:modelValue', target.value);
+  active.value = -1;
+  openList();
+}
+
+function onKeydown(e: KeyboardEvent): void {
+  if (isDisabled.value) return;
+  const len: number = filtered.value.length;
+  switch (e.key) {
+    case 'ArrowDown':
+      e.preventDefault();
+      if (!open.value) { openList(); active.value = len > 0 ? 0 : -1; }
+      else active.value = active.value + 1 < len ? active.value + 1 : 0;
+      break;
+    case 'ArrowUp':
+      e.preventDefault();
+      if (!open.value) { openList(); active.value = len - 1; }
+      else active.value = active.value - 1 >= 0 ? active.value - 1 : len - 1;
+      break;
+    case 'Enter':
+      if (open.value && active.value >= 0 && active.value < len) { e.preventDefault(); choose(filtered.value[active.value]); }
+      break;
+    case 'Escape':
+      if (open.value) { e.preventDefault(); closeList(); }
+      break;
+    case 'Tab':
+      if (open.value) closeList();
+      break;
+    default:
+      break;
+  }
+}
+
+// Close when a pointer lands outside the whole component.
+function onDocPointerDown(e: MouseEvent): void {
+  const target: EventTarget | null = e.target;
+  if (rootEl.value !== null && target instanceof Node && !rootEl.value.contains(target)) closeList();
+}
+onMounted((): void => {
+  document.addEventListener('mousedown', onDocPointerDown);
+});
+onBeforeUnmount((): void => {
+  document.removeEventListener('mousedown', onDocPointerDown);
+});
+
+// Keep the highlighted option in view.
+watch(active, async (i: number): Promise<void> => {
+  if (!open.value || i < 0) return;
+  await nextTick();
+  const items: NodeListOf<Element> | undefined = listboxEl.value?.querySelectorAll('[role="option"]');
+  const el: Element | undefined = items?.[i];
+  if (el instanceof HTMLElement) el.scrollIntoView({ block: 'nearest' });
+});
+</script>
+
+<template>
+  <div ref="rootEl" class="fdy-autocomplete" @keydown="onKeydown">
+    <input
+      :id="inputId"
+      ref="inputEl"
+      :class="isInvalid ? 'fdy-input fdy-input--error' : 'fdy-input'"
+      type="text"
+      role="combobox"
+      :aria-expanded="open"
+      aria-autocomplete="list"
+      :aria-controls="listboxId"
+      :aria-activedescendant="activeDescendant"
+      :aria-label="ariaLabel"
+      :aria-labelledby="ariaLabelledby"
+      :aria-invalid="isInvalid ? 'true' : undefined"
+      :aria-describedby="describedby"
+      autocomplete="off"
+      :placeholder="placeholder"
+      :disabled="isDisabled"
+      :value="modelValue"
+      @input="onInput"
+      @focus="openList"
+    >
+    <ul
+      :id="listboxId"
+      ref="listboxEl"
+      class="fdy-autocomplete__listbox"
+      role="listbox"
+      :aria-label="ariaLabel"
+      popover="manual"
+      :hidden="!open"
+    >
+      <li
+        v-for="(opt, i) in filtered"
+        :id="optionId(i)"
+        :key="opt"
+        :class="i === active ? 'fdy-autocomplete__option is-highlighted' : 'fdy-autocomplete__option'"
+        role="option"
+        :aria-selected="opt === modelValue"
+        @mousedown.prevent
+        @mousemove="active = i"
+        @click="choose(opt)"
+      >{{ opt }}</li>
+      <li v-if="filtered.length === 0" class="fdy-autocomplete__empty">{{ emptyText ?? 'Tak ada hasil.' }}</li>
+    </ul>
+  </div>
+</template>

package/adapters/vue/components/FdyCascade.vue

@@ -0,0 +1,241 @@
+<script lang="ts">
+export interface CascadeNode {
+  label: string;
+  value: string;
+  /** Present = branch (drills in); absent = leaf (selectable). */
+  children?: ReadonlyArray<CascadeNode>;
+}
+
+// Depth-first search for the stack of nodes leading to a leaf value.
+function pathTo(nodes: ReadonlyArray<CascadeNode>, value: string, trail: CascadeNode[]): CascadeNode[] | null {
+  for (const node of nodes) {
+    const here: CascadeNode[] = trail.concat([node]);
+    if (node.children === undefined && node.value === value) return here;
+    if (node.children !== undefined) {
+      const found: CascadeNode[] | null = pathTo(node.children, value, here);
+      if (found !== null) return found;
+    }
+  }
+  return null;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch, type ComputedRef, type Ref } from 'vue';
+import { usePopover } from '../usePopover';
+
+// A controlled Vue port of freeday's cascade select (src/freeday-cascade.js + cascade.css):
+// a hierarchical drill-down picker showing one level at a time — branches drill in, a back
+// control ascends, a leaf selects and the value is the leaf's value (the display is the full
+// path). The enhancer's data model is a hidden nested <ul>; here it is a typed tree, which is
+// what a framework app actually has. A real `v-model` in place of the DOM mutation.
+
+const props = defineProps<{
+  /** The selected LEAF value ('' = nothing selected). */
+  modelValue: string;
+  options: ReadonlyArray<CascadeNode>;
+  /** Path separator in the display, default " / " (matches the enhancer). */
+  separator?: string;
+  placeholder?: string;
+  /** Accessible name for the trigger + listbox (the enhancer's data-label). */
+  label?: string;
+  id?: string;
+  ariaLabelledby?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  describedby?: string;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+  /** Fired when a leaf is picked; `labels` is the full path (root → leaf). */
+  change: [value: string, labels: string[]];
+}>();
+
+const baseId: string = useId();
+const triggerId: ComputedRef<string> = computed((): string => props.id ?? `${baseId}-trigger`);
+const listId: string = `${baseId}-list`;
+function optionId(index: number): string {
+  return `${baseId}-opt-${index}`;
+}
+
+const rootEl: Ref<HTMLDivElement | null> = ref(null);
+const triggerEl: Ref<HTMLButtonElement | null> = ref(null);
+const panelEl: Ref<HTMLDivElement | null> = ref(null);
+const listEl: Ref<HTMLUListElement | null> = ref(null);
+
+const open: Ref<boolean> = ref(false);
+const stack: Ref<CascadeNode[]> = ref([]) as Ref<CascadeNode[]>;
+const active: Ref<number> = ref(-1);
+
+usePopover(panelEl, triggerEl, open);
+
+const sep: ComputedRef<string> = computed((): string => props.separator ?? ' / ');
+const name: ComputedRef<string> = computed((): string => props.label ?? 'Pilih');
+const isDisabled: ComputedRef<boolean> = computed((): boolean => props.disabled === true);
+const isInvalid: ComputedRef<boolean> = computed((): boolean => props.invalid === true);
+
+const current: ComputedRef<ReadonlyArray<CascadeNode>> = computed((): ReadonlyArray<CascadeNode> =>
+  stack.value.length === 0 ? props.options : (stack.value[stack.value.length - 1].children ?? []),
+);
+const selectedTrail: ComputedRef<CascadeNode[] | null> = computed((): CascadeNode[] | null =>
+  props.modelValue === '' ? null : pathTo(props.options, props.modelValue, []),
+);
+const isPlaceholder: ComputedRef<boolean> = computed((): boolean => selectedTrail.value === null);
+const displayValue: ComputedRef<string> = computed((): string =>
+  selectedTrail.value !== null
+    ? selectedTrail.value.map((n: CascadeNode): string => n.label).join(sep.value)
+    : (props.placeholder ?? 'Pilih…'),
+);
+const crumb: ComputedRef<string> = computed((): string =>
+  stack.value.length > 0 ? stack.value.map((n: CascadeNode): string => n.label).join(sep.value) : name.value,
+);
+const activeDescendant: ComputedRef<string | undefined> = computed((): string | undefined =>
+  active.value >= 0 ? optionId(active.value) : undefined,
+);
+
+function openPanel(): void {
+  if (isDisabled.value) return;
+  // Re-open at the selected leaf's level for quick re-selection (matches the enhancer).
+  const trail: CascadeNode[] | null = selectedTrail.value;
+  stack.value = trail !== null && trail.length > 1 ? trail.slice(0, -1) : [];
+  active.value = 0;
+  open.value = true;
+}
+function closePanel(returnFocus: boolean): void {
+  open.value = false;
+  active.value = -1;
+  if (returnFocus) triggerEl.value?.focus();
+}
+function drill(index: number): void {
+  const node: CascadeNode | undefined = current.value[index];
+  if (node === undefined || node.children === undefined) return;
+  stack.value = stack.value.concat([node]);
+  active.value = 0;
+}
+function ascend(): void {
+  if (stack.value.length === 0) return;
+  stack.value = stack.value.slice(0, -1);
+  active.value = 0;
+}
+function activate(index: number): void {
+  const node: CascadeNode | undefined = current.value[index];
+  if (node === undefined) return;
+  if (node.children !== undefined) { drill(index); return; }
+  const labels: string[] = stack.value.map((n: CascadeNode): string => n.label).concat([node.label]);
+  emit('update:modelValue', node.value);
+  emit('change', node.value, labels);
+  closePanel(true);
+}
+
+function onListKeydown(e: KeyboardEvent): void {
+  const len: number = current.value.length;
+  switch (e.key) {
+    case 'ArrowDown': e.preventDefault(); active.value = Math.min(len - 1, active.value + 1); break;
+    case 'ArrowUp': e.preventDefault(); active.value = Math.max(0, active.value - 1); break;
+    case 'Home': e.preventDefault(); active.value = 0; break;
+    case 'End': e.preventDefault(); active.value = len - 1; break;
+    case 'ArrowRight':
+    case 'Enter':
+    case ' ': e.preventDefault(); if (active.value >= 0) activate(active.value); break;
+    case 'ArrowLeft':
+    case 'Backspace': e.preventDefault(); ascend(); break;
+    case 'Escape': e.preventDefault(); closePanel(true); break;
+    case 'Tab': closePanel(false); break;
+    default: break;
+  }
+}
+function onTriggerKeydown(e: KeyboardEvent): void {
+  if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openPanel(); }
+}
+
+// Move focus into the list when the panel opens (the enhancer does list.focus()).
+watch(open, async (isOpen: boolean): Promise<void> => {
+  if (!isOpen) return;
+  await nextTick();
+  listEl.value?.focus();
+});
+
+// Keep the active option in view.
+watch([active, stack], async (): Promise<void> => {
+  if (!open.value || active.value < 0) return;
+  await nextTick();
+  const items: NodeListOf<Element> | undefined = listEl.value?.querySelectorAll('[role="option"]');
+  const el: Element | undefined = items?.[active.value];
+  if (el instanceof HTMLElement) el.scrollIntoView({ block: 'nearest' });
+});
+
+// Close when a pointer lands outside the whole component.
+function onDocPointerDown(e: MouseEvent): void {
+  const target: EventTarget | null = e.target;
+  if (rootEl.value !== null && target instanceof Node && !rootEl.value.contains(target)) closePanel(false);
+}
+onMounted((): void => {
+  document.addEventListener('mousedown', onDocPointerDown);
+});
+onBeforeUnmount((): void => {
+  document.removeEventListener('mousedown', onDocPointerDown);
+});
+</script>
+
+<template>
+  <div ref="rootEl" :class="isInvalid ? 'fdy-cascade fdy-cascade--error' : 'fdy-cascade'">
+    <button
+      :id="triggerId"
+      ref="triggerEl"
+      type="button"
+      :class="open ? 'fdy-cascade__trigger is-open' : 'fdy-cascade__trigger'"
+      aria-haspopup="true"
+      :aria-expanded="open"
+      :aria-label="ariaLabelledby === undefined ? name : undefined"
+      :aria-labelledby="ariaLabelledby"
+      :aria-invalid="isInvalid ? 'true' : undefined"
+      :aria-describedby="describedby"
+      :disabled="isDisabled"
+      @click="open ? closePanel(true) : openPanel()"
+      @keydown="onTriggerKeydown"
+    >
+      <span :class="isPlaceholder ? 'fdy-cascade__value fdy-cascade__value--placeholder' : 'fdy-cascade__value'">{{ displayValue }}</span>
+    </button>
+
+    <div ref="panelEl" class="fdy-cascade__panel" popover="manual" :hidden="!open">
+      <div class="fdy-cascade__head">
+        <button
+          type="button"
+          class="fdy-cascade__back"
+          aria-label="Kembali satu tingkat"
+          :hidden="stack.length === 0"
+          @click="ascend(); listEl?.focus()"
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6" /></svg>
+        </button>
+        <span class="fdy-cascade__crumb" aria-live="polite">{{ crumb }}</span>
+      </div>
+      <ul
+        :id="listId"
+        ref="listEl"
+        class="fdy-cascade__list"
+        role="listbox"
+        :aria-label="name"
+        tabindex="-1"
+        :aria-activedescendant="activeDescendant"
+        @keydown="onListKeydown"
+      >
+        <li
+          v-for="(node, i) in current"
+          :id="optionId(i)"
+          :key="node.value"
+          role="option"
+          :class="i === active ? 'fdy-cascade__opt is-active' : 'fdy-cascade__opt'"
+          :aria-selected="node.children === undefined && node.value === modelValue"
+          :aria-label="node.children !== undefined ? `${node.label}, submenu` : undefined"
+          @mousemove="active = i"
+          @click="activate(i)"
+        >
+          <span class="fdy-cascade__opt-label">{{ node.label }}</span>
+          <span v-if="node.children !== undefined" class="fdy-cascade__opt-arrow" aria-hidden="true" />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>