@antelopejs/dms 0.5.6 → 0.6.0

package/frontend-vue/layers/dms-ui/app/build/components/form/FormSectionNav.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type {
+  FormSectionLayout,
+  FormSectionState,
+} from "../../composables/form/formSections";
+
+type FormSectionNavVariant = "list" | "chips";
+
+interface FormSectionNavProps {
+  sections: FormSectionLayout[];
+  states: Record<string, FormSectionState>;
+  activeId?: string;
+  /** `list`: the side column; `chips`: a row above the sections. */
+  variant: FormSectionNavVariant;
+  /** DOM id of a section's card, which its entry links to. */
+  anchorId: (sectionId: string) => string;
+}
+
+const props = defineProps<FormSectionNavProps>();
+const emit = defineEmits<{ select: [sectionId: string] }>();
+const { t } = useI18n();
+const { processI18n } = useTranslation();
+
+const VARIANT_CLASSES: Record<FormSectionNavVariant, string> = {
+  list: "flex flex-col gap-0.5",
+  chips: "flex gap-1.5 overflow-x-auto pb-1",
+};
+
+const ITEM_CLASSES: Record<FormSectionNavVariant, string> = {
+  list: "text-muted hover:bg-elevated/60 hover:text-default flex h-8 items-center gap-2.5 rounded-md px-2.5 text-[13px]",
+  chips:
+    "border-default text-muted hover:text-default flex h-7 shrink-0 items-center gap-1.5 rounded-full border px-3 text-[12.5px]",
+};
+
+const ACTIVE_CLASSES: Record<FormSectionNavVariant, string> = {
+  list: "bg-elevated text-highlighted font-[550]",
+  chips: "border-accented bg-elevated text-highlighted",
+};
+
+function stateLabel(state: FormSectionState | undefined): string | undefined {
+  if (state?.invalidCount) {
+    const count = state.invalidCount;
+    return t("dms.form.sections.invalid", { count }, count);
+  }
+  return state?.dirty ? t("dms.form.sections.changed") : undefined;
+}
+
+function onSelect(event: MouseEvent, sectionId: string): void {
+  event.preventDefault();
+  emit("select", sectionId);
+}
+</script>
+
+<template>
+  <nav :aria-label="t('dms.form.sections.nav')">
+    <ul :class="VARIANT_CLASSES[props.variant]">
+      <li v-for="section in props.sections" :key="section.id">
+        <a
+          :href="`#${props.anchorId(section.id)}`"
+          :class="[
+            ITEM_CLASSES[props.variant],
+            section.id === props.activeId && ACTIVE_CLASSES[props.variant],
+          ]"
+          :aria-current="section.id === props.activeId ? 'location' : undefined"
+          @click="onSelect($event, section.id)"
+        >
+          <UIcon
+            v-if="section.icon && props.variant === 'list'"
+            :name="section.icon"
+            class="size-4 shrink-0"
+          />
+          <span class="truncate">{{ processI18n(section.label) }}</span>
+          <!-- Read by its sr-only label below, not twice. -->
+          <span
+            v-if="props.states[section.id]?.invalidCount"
+            class="text-error ms-auto inline-flex items-center gap-1 font-mono text-[11px]"
+            aria-hidden="true"
+          >
+            <span class="bg-error size-1.5 rounded-full" aria-hidden="true" />
+            {{ props.states[section.id]?.invalidCount }}
+          </span>
+          <span
+            v-else-if="props.states[section.id]?.dirty"
+            class="bg-warning ms-auto size-1.5 shrink-0 rounded-full"
+            aria-hidden="true"
+          />
+          <span v-if="stateLabel(props.states[section.id])" class="sr-only">
+            {{ stateLabel(props.states[section.id]) }}
+          </span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</template>

package/frontend-vue/layers/dms-ui/app/build/components/form/FormSections.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import type { FormSectionNav } from "../../../composables/form/types/field";
+import type {
+  FormSectionState,
+  FormSectionsLayout,
+} from "../../composables/form/formSections";
+import DmsFormEntries from "./FormEntries.vue";
+import DmsFormSectionNav from "./FormSectionNav.vue";
+
+interface FormSectionsProps {
+  layout: FormSectionsLayout;
+  nav: FormSectionNav;
+  states: Record<string, FormSectionState>;
+  /** Id of the form, prefixing its sections' anchors. */
+  formId: string;
+}
+
+const props = defineProps<FormSectionsProps>();
+
+// A section is current once its top passes this band near the top of the
+// viewport: the one being read, not the one merely peeking in at the bottom.
+const SPY_ROOT_MARGIN = "0px 0px -65% 0px";
+
+const activeId = ref(props.layout.sections[0]?.id);
+const sectionElements = useTemplateRef<HTMLElement[]>("sectionElements");
+
+function anchorId(sectionId: string): string {
+  return `${props.formId}-section-${sectionId}`;
+}
+
+function scrollToSection(sectionId: string): void {
+  activeId.value = sectionId;
+  document
+    .getElementById(anchorId(sectionId))
+    ?.scrollIntoView({ behavior: "smooth", block: "start" });
+  history.replaceState(history.state, "", `#${anchorId(sectionId)}`);
+}
+
+let observer: IntersectionObserver | undefined;
+const visible = new Set<string>();
+
+function onIntersect(entries: IntersectionObserverEntry[]): void {
+  for (const entry of entries) {
+    const id = (entry.target as HTMLElement).dataset.section;
+    if (!id) continue;
+    if (entry.isIntersecting) visible.add(id);
+    else visible.delete(id);
+  }
+  const first = props.layout.sections.find((section) =>
+    visible.has(section.id),
+  );
+  if (first) activeId.value = first.id;
+}
+
+onMounted(() => {
+  if (props.nav === "none" || typeof IntersectionObserver === "undefined") {
+    return;
+  }
+  observer = new IntersectionObserver(onIntersect, {
+    rootMargin: SPY_ROOT_MARGIN,
+  });
+  for (const element of sectionElements.value ?? []) observer.observe(element);
+  const linked = props.layout.sections.find(
+    (section) => location.hash === `#${anchorId(section.id)}`,
+  );
+  if (linked) scrollToSection(linked.id);
+});
+
+onBeforeUnmount(() => observer?.disconnect());
+</script>
+
+<template>
+  <!-- The side list needs room beside the sections: the form's own width
+    decides, so a narrow drawer or a split view gets the chips. -->
+  <div class="@container">
+    <div
+      class="grid gap-6"
+      :class="
+        props.nav === 'side' &&
+        '@min-[880px]:grid-cols-[200px_minmax(0,1fr)] @min-[880px]:gap-8'
+      "
+    >
+      <div v-if="props.nav === 'side'" class="hidden @min-[880px]:block">
+        <div class="sticky top-4 grid gap-3">
+          <DmsFormSectionNav
+            variant="list"
+            :sections="props.layout.sections"
+            :states="props.states"
+            :active-id="activeId"
+            :anchor-id="anchorId"
+            @select="scrollToSection"
+          />
+          <slot name="nav-footer" />
+        </div>
+      </div>
+
+      <div class="min-w-0">
+        <DmsFormSectionNav
+          v-if="props.nav !== 'none'"
+          variant="chips"
+          class="mb-4"
+          :class="props.nav === 'side' && '@min-[880px]:hidden'"
+          :sections="props.layout.sections"
+          :states="props.states"
+          :active-id="activeId"
+          :anchor-id="anchorId"
+          @select="scrollToSection"
+        />
+
+        <DmsSection v-if="props.layout.lead.length">
+          <DmsFormEntries :entries="props.layout.lead" in-section />
+        </DmsSection>
+
+        <div
+          v-for="section in props.layout.sections"
+          :id="anchorId(section.id)"
+          ref="sectionElements"
+          :key="section.id"
+          :data-section="section.id"
+          class="mt-7 scroll-mt-14 first:mt-0"
+        >
+          <DmsSection :title="section.label" :description="section.description">
+            <DmsFormEntries :entries="section.entries" in-section />
+          </DmsSection>
+        </div>
+
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/build/components/form/OtpInput.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { computed, useId, useTemplateRef } from "vue";
+import DmsFieldError from "../../../components/field-error/FieldError.vue";
+import { fieldErrorId } from "#dms-core/app/composables/useFieldErrors";
+import { focusFirstEmptyCell } from "../../utils/codeCells";
+
+// The one code entry of the DMS (sign-in and e-mail codes, two-factor codes
+// in the security settings): UPinInput cells, the refused code's message
+// under them.
+
+type OtpInputSize = "md" | "lg" | "xl";
+
+interface OtpInputProps {
+  /** Accessible name of the cells. */
+  label: string;
+  length?: number;
+  type?: "text" | "number";
+  size?: OtpInputSize;
+  disabled?: boolean;
+  /** A one-time code sent by e-mail or an app: the browser may offer it. */
+  isOtp?: boolean;
+  /** Reads the code as two halves, with a gap after the middle cell. */
+  isSplit?: boolean;
+  /** Centres the cells and the error under them. */
+  isCentered?: boolean;
+  /** A code the API refused, shown under the cells (marked invalid). */
+  error?: string;
+}
+
+const DEFAULT_CODE_LENGTH = 6;
+
+// Six cells at their desktop size outgrow a 320px card or modal: on a phone
+// they narrow and close up.
+const PHONE_UI: Record<OtpInputSize, { root: string; base: string }> = {
+  md: { root: "max-sm:gap-1", base: "max-sm:w-8" },
+  lg: { root: "max-sm:gap-1", base: "max-sm:w-8" },
+  xl: { root: "", base: "max-[22.5rem]:w-9" },
+};
+const SPLIT_CELL = "[&:nth-child(3)]:me-3 max-sm:[&:nth-child(3)]:me-2";
+
+const props = withDefaults(defineProps<OtpInputProps>(), {
+  length: DEFAULT_CODE_LENGTH,
+  type: "text",
+  size: "md",
+  disabled: false,
+  isOtp: false,
+  isSplit: false,
+  isCentered: false,
+  error: undefined,
+});
+
+const emit = defineEmits<{
+  /** Every cell is filled. */
+  complete: [];
+}>();
+
+const model = defineModel<string[] | undefined>();
+const root = useTemplateRef<HTMLElement>("root");
+const errorId = fieldErrorId(`otp-${useId()}`);
+
+const ui = computed(() => ({
+  root: PHONE_UI[props.size].root,
+  base: [PHONE_UI[props.size].base, props.isSplit && SPLIT_CELL],
+}));
+
+/**
+ * Puts the caret in the first empty cell. A form disables the cells while
+ * it submits: the focus waits a task for them to be enabled again.
+ */
+function focus(): void {
+  setTimeout(() => focusFirstEmptyCell(root.value));
+}
+
+defineExpose({ focus });
+</script>
+
+<template>
+  <div class="grid gap-2">
+    <div
+      ref="root"
+      role="group"
+      :aria-label="props.label"
+      :aria-describedby="props.error ? errorId : undefined"
+      class="flex"
+      :class="props.isCentered && 'justify-center'"
+    >
+      <UPinInput
+        v-model="model"
+        :length="props.length"
+        :disabled="props.disabled"
+        :otp="props.isOtp"
+        :type="props.type"
+        :size="props.size"
+        :color="props.error ? 'error' : undefined"
+        :highlight="!!props.error"
+        :aria-invalid="!!props.error || undefined"
+        :aria-describedby="props.error ? errorId : undefined"
+        :ui="ui"
+        @complete="emit('complete')"
+      />
+    </div>
+    <DmsFieldError
+      :id="errorId"
+      :class="props.isCentered && 'justify-center'"
+      :message="props.error"
+    />
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/build/components/form/PasswordInput.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import type { InputProps } from "@nuxt/ui/components/Input.vue";
+
+// The one password input of the DMS (sign-in, new password, security
+// settings, the form's PasswordType): a UInput whose Phosphor eye toggles
+// the value's visibility. Attributes (`id`, `autocomplete`, `placeholder`,
+// `size`, `aria-describedby`, listeners) go to the UInput.
+
+interface PasswordInputProps {
+  /** Rings the field in the error ink and marks it invalid. */
+  invalid?: boolean;
+  /** Writes "Show" / "Hide" on the toggle (a new password being chosen). */
+  labelledToggle?: boolean;
+  /** The lock icon before the value. */
+  hasLockIcon?: boolean;
+  disabled?: boolean;
+}
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<PasswordInputProps>(), {
+  invalid: false,
+  labelledToggle: false,
+  hasLockIcon: false,
+  disabled: false,
+});
+
+const model = defineModel<InputProps["modelValue"]>();
+/** Whether the value shows in clear; shared by a password and its confirmation. */
+const isVisible = defineModel<boolean>("visible", { default: false });
+
+const LOCK_ICON = "i-ph-lock-simple";
+const SHOW_ICON = "i-ph-eye";
+const HIDE_ICON = "i-ph-eye-slash";
+const INVALID_BINDINGS = {
+  color: "error",
+  highlight: true,
+  "aria-invalid": true,
+} as const;
+
+const attrs = useAttrs();
+const controlledId = computed(() =>
+  typeof attrs.id === "string" ? attrs.id : undefined,
+);
+const { t } = useI18n();
+
+// Built on the attributes, not after them: a colour or an icon the caller
+// passes stays unless this input has its own.
+const inputBindings = computed(() => ({
+  ...attrs,
+  type: isVisible.value ? "text" : "password",
+  ...(props.invalid && INVALID_BINDINGS),
+  ...(props.hasLockIcon && { icon: LOCK_ICON }),
+}));
+
+const toggleAriaLabel = computed(() =>
+  t(
+    isVisible.value
+      ? "dms.form.input.hide_password"
+      : "dms.form.input.show_password",
+  ),
+);
+const toggleLabel = computed(() =>
+  props.labelledToggle
+    ? t(isVisible.value ? "dms.form.input.hide" : "dms.form.input.show")
+    : undefined,
+);
+</script>
+
+<template>
+  <UInput
+    v-bind="inputBindings"
+    v-model="model"
+    :disabled="props.disabled"
+    class="w-full"
+    :ui="{ trailing: 'pe-1' }"
+  >
+    <template #trailing>
+      <UButton
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        :square="!props.labelledToggle"
+        :icon="isVisible ? HIDE_ICON : SHOW_ICON"
+        :label="toggleLabel"
+        :aria-label="toggleAriaLabel"
+        :aria-pressed="isVisible"
+        :aria-controls="controlledId"
+        :disabled="props.disabled"
+        @click="isVisible = !isVisible"
+      />
+    </template>
+  </UInput>
+</template>

package/frontend-vue/layers/dms-ui/app/build/components/form/SearchInput.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed, useTemplateRef } from "vue";
+import {
+  buildNavSearchShortcuts,
+  buildPageSearchShortcuts,
+  NAV_SEARCH_SHORTCUT,
+  PAGE_SEARCH_HINT_KEYS,
+  pageSearchAriaKeyshortcuts,
+} from "../../composables/global/searchShortcuts";
+import {
+  keyboardKeyLabel,
+  type KeyboardPlatform,
+  useKeyboardPlatform,
+} from "../../../composables/global/keyboardPlatform";
+
+// The one search field of the DMS (settings menu, pages, lists, tables): a
+// UInput with the magnifier, named by its placeholder, and the keys that
+// focus it as a hint. Attributes (`id`, `size`, `class`, listeners) go to
+// the UInput.
+
+/**
+ * The keys that focus the field: `nav` is "/" (the navigation search, one
+ * per page), `page` is ⌘ / or Ctrl / (a page's own search).
+ */
+export type SearchInputShortcut = "nav" | "page";
+
+interface SearchInputProps {
+  /** Placeholder, already translated; also the field's accessible name. */
+  placeholder: string;
+  shortcut?: SearchInputShortcut;
+  /** Platform the key hint is drawn for, when the page lets one be picked. */
+  hintPlatform?: KeyboardPlatform;
+}
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<SearchInputProps>(), {
+  shortcut: undefined,
+  hintPlatform: undefined,
+});
+
+const query = defineModel<string>({ default: "" });
+
+const SEARCH_ICON = "i-ph-magnifying-glass";
+const SHORTCUT_BINDINGS: Record<
+  SearchInputShortcut,
+  (focus: () => void) => Record<string, () => void>
+> = {
+  nav: buildNavSearchShortcuts,
+  page: buildPageSearchShortcuts,
+};
+
+const input = useTemplateRef<{ inputRef?: HTMLInputElement }>("input");
+const { platform, isMac } = useKeyboardPlatform();
+
+function focus(): void {
+  input.value?.inputRef?.focus();
+}
+
+if (props.shortcut) defineShortcuts(SHORTCUT_BINDINGS[props.shortcut](focus));
+
+const hintKeys = computed(() => {
+  if (props.shortcut === "nav") return [NAV_SEARCH_SHORTCUT];
+  if (props.shortcut !== "page") return [];
+  const hintPlatform = props.hintPlatform ?? platform.value;
+  return PAGE_SEARCH_HINT_KEYS.map((key) =>
+    keyboardKeyLabel(key, hintPlatform),
+  );
+});
+const ariaKeyshortcuts = computed(() => {
+  if (props.shortcut === "nav") return NAV_SEARCH_SHORTCUT;
+  return props.shortcut === "page"
+    ? pageSearchAriaKeyshortcuts(isMac.value)
+    : undefined;
+});
+
+defineExpose({
+  focus,
+  get inputRef() {
+    return input.value?.inputRef;
+  },
+});
+</script>
+
+<template>
+  <UInput
+    ref="input"
+    v-model="query"
+    :icon="SEARCH_ICON"
+    :placeholder="props.placeholder"
+    :aria-label="props.placeholder"
+    :aria-keyshortcuts="ariaKeyshortcuts"
+    v-bind="$attrs"
+  >
+    <!-- No key hint on phones: it covered the placeholder there. -->
+    <template v-if="hintKeys.length" #trailing>
+      <span class="flex items-center gap-0.5 max-sm:hidden">
+        <UKbd v-for="key in hintKeys" :key="key" :value="key" size="sm" />
+      </span>
+    </template>
+  </UInput>
+</template>

package/frontend-vue/layers/dms-ui/app/build/components/form/UnsavedStatus.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+// "Unsaved changes" with its amber dot: the save bar's status, and the
+// footer of a form that keeps its own buttons (a security panel).
+
+interface UnsavedStatusProps {
+  /** What is unsaved; empty, the line keeps its place (a hidden save bar). */
+  text: string;
+  /** The footer band's look: a ringed dot and 12.5px text. */
+  isBand?: boolean;
+}
+
+const props = withDefaults(defineProps<UnsavedStatusProps>(), {
+  isBand: false,
+});
+</script>
+
+<template>
+  <span
+    class="text-muted flex min-w-0 items-center gap-2"
+    :class="props.isBand && 'text-[12.5px]'"
+    role="status"
+  >
+    <span
+      class="bg-warning size-[7px] shrink-0 rounded-full"
+      :class="props.isBand && 'ring-warning/15 ring-3'"
+      aria-hidden="true"
+    />
+    <span class="truncate">{{ props.text }}</span>
+  </span>
+</template>