@antelopejs/dms 0.5.6 → 0.6.1

package/frontend-vue/layers/dms-ui/app/components/record-card/RecordCard.vue

@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import type { ButtonProps } from "@nuxt/ui";
+import { tv } from "tailwind-variants";
+import DmsIconWell from "../icon-well/IconWell.vue";
+import DmsStatusPill from "../status-pill/StatusPill.vue";
+import type { Tone } from "../../types/tone";
+
+/** The pill at the card's top right ("Builder", "Local", "Legacy"). */
+export interface RecordCardBadge {
+  label: string;
+  tone?: Tone;
+}
+
+interface RecordCardProps {
+  /** Icon drawn in a tinted well before the title. */
+  icon?: string;
+  /** Tone of the icon well. Defaults to `primary`. */
+  tone?: Tone;
+  title: string;
+  /** Mono line under the title (a package, a slug, an order). */
+  subtitle?: string;
+  badge?: RecordCardBadge;
+  description?: string;
+  /** Small chips in the card's footer. */
+  tags?: string[];
+  /** Mono note at the footer's end ("31 uses"). */
+  meta?: string;
+  /** Buttons in the footer, after the tags. */
+  actions?: ButtonProps[];
+  /** Draws the card selected (accent ring). */
+  selected?: boolean;
+  /** Draws the card dimmed (a record set aside). */
+  muted?: boolean;
+  /**
+   * The whole card opens the record: hover state, keyboard focus, `open`
+   * emitted on a click or Enter.
+   */
+  interactive?: boolean;
+}
+
+interface RecordCardSlots {
+  /** Content between the description and the footer. */
+  default?: () => unknown;
+  /** Replaces the badge (a switch, a menu). */
+  aside?: () => unknown;
+  /** Replaces the footer's buttons. */
+  actions?: () => unknown;
+}
+
+const props = withDefaults(defineProps<RecordCardProps>(), {
+  icon: undefined,
+  tone: "primary",
+  subtitle: undefined,
+  badge: undefined,
+  description: undefined,
+  tags: () => [],
+  meta: undefined,
+  actions: () => [],
+  selected: false,
+  muted: false,
+  interactive: false,
+});
+const emit = defineEmits<{ open: [] }>();
+const slots = defineSlots<RecordCardSlots>();
+
+// v2 record card (ai skills, saas plans): icon well and mono identity on top,
+// a short description, then tags, a mono note and actions on a ruled footer.
+const theme = tv({
+  slots: {
+    root: "dms-card flex min-w-0 flex-col gap-3 p-[18px] text-start transition-colors",
+    head: "flex min-w-0 items-start gap-3",
+    identity: "flex min-w-0 flex-1 flex-col gap-0.5",
+    title: "truncate font-mono text-[13.5px] font-semibold text-highlighted",
+    subtitle: "truncate font-mono text-[11.5px] text-dimmed",
+    description: "line-clamp-3 text-[13px] leading-5 text-muted",
+    footer:
+      "mt-auto flex min-w-0 items-center gap-2 border-t border-default pt-3",
+    tags: "flex min-w-0 flex-1 flex-wrap items-center gap-1.5",
+    tag: "rounded-[5px] bg-elevated px-1.5 py-0.5 text-[11.5px] font-medium text-toned",
+    meta: "ms-auto shrink-0 font-mono text-[11.5px] text-dimmed",
+    actions: "flex shrink-0 items-center gap-1",
+  },
+  variants: {
+    interactive: {
+      true: {
+        root: "cursor-pointer hover:border-accented focus-visible:outline-2 focus-visible:outline-(--dms-accent-line)",
+      },
+    },
+    selected: {
+      true: { root: "ring-2 ring-(--dms-accent-line)" },
+    },
+    muted: {
+      true: { root: "opacity-70" },
+    },
+  },
+});
+
+const ui = computed(() =>
+  theme({
+    interactive: props.interactive,
+    selected: props.selected,
+    muted: props.muted,
+  }),
+);
+
+const hasFooter = computed(
+  () =>
+    props.tags.length > 0 ||
+    !!props.meta ||
+    props.actions.length > 0 ||
+    !!slots.actions,
+);
+
+const open = () => {
+  if (props.interactive) emit("open");
+};
+</script>
+
+<template>
+  <article
+    :class="ui.root()"
+    :tabindex="interactive ? 0 : undefined"
+    :aria-selected="interactive ? selected : undefined"
+    @click="open"
+    @keydown.enter.self="open"
+  >
+    <div :class="ui.head()">
+      <DmsIconWell v-if="icon" :icon="icon" :tone="tone" size="sm" />
+      <div :class="ui.identity()">
+        <span :class="ui.title()" :title="title">{{ title }}</span>
+        <span v-if="subtitle" :class="ui.subtitle()">{{ subtitle }}</span>
+      </div>
+      <slot name="aside">
+        <DmsStatusPill
+          v-if="badge"
+          :label="badge.label"
+          :tone="badge.tone ?? 'neutral'"
+          dot="none"
+          size="sm"
+        />
+      </slot>
+    </div>
+    <p v-if="description" :class="ui.description()">{{ description }}</p>
+    <slot />
+    <div v-if="hasFooter" :class="ui.footer()">
+      <div v-if="tags.length > 0" :class="ui.tags()">
+        <span v-for="tag in tags" :key="tag" :class="ui.tag()">{{ tag }}</span>
+      </div>
+      <span v-if="meta" :class="ui.meta()">{{ meta }}</span>
+      <!-- A button acts on the record without opening it. -->
+      <div
+        v-if="actions.length > 0 || slots.actions"
+        :class="ui.actions()"
+        @click.stop
+        @keydown.enter.stop
+      >
+        <slot name="actions">
+          <UButton
+            v-for="(action, index) in actions"
+            :key="index"
+            size="xs"
+            color="neutral"
+            variant="outline"
+            v-bind="action"
+          />
+        </slot>
+      </div>
+    </div>
+  </article>
+</template>

package/frontend-vue/layers/dms-ui/app/components/save-bar/InstantSaveBadge.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { SaveStatusState } from "./SaveStatus.vue";
+
+interface InstantSaveBadgeProps {
+  /**
+   * Save activity of the page, for a subtle "just saved" flash: the icon
+   * spins while a change is being written and turns into a tick once it is,
+   * and the pill turns red while a save failed (the control says which).
+   * The wording never changes. Defaults to `idle` (a lightning bolt).
+   */
+  state?: SaveStatusState;
+}
+
+const props = withDefaults(defineProps<InstantSaveBadgeProps>(), {
+  state: "idle",
+});
+const { t } = useI18n();
+
+const ICONS: Record<SaveStatusState, string> = {
+  idle: "i-ph-lightning",
+  saving: "i-ph-circle-notch",
+  saved: "i-ph-check",
+  error: "i-ph-warning-circle",
+};
+
+const TONE_CLASSES = {
+  ok: "border-success/40 bg-success/10 text-success",
+  error: "border-error/40 bg-error/10 text-error",
+};
+</script>
+
+<template>
+  <!--
+    v2 .cs-instant: the one header pill of every instant-save page (no save
+    bar). Rendered through usePageHeaderActions, identical everywhere.
+  -->
+  <span
+    class="inline-flex h-7 items-center gap-[7px] rounded-full border px-[11px] text-xs font-[550] whitespace-nowrap transition-shadow duration-300"
+    :class="[
+      TONE_CLASSES[props.state === 'error' ? 'error' : 'ok'],
+      { 'ring-success/25 ring-2': props.state === 'saved' },
+    ]"
+    :title="t('dms.save_bar.instant_hint')"
+    :data-state="props.state"
+    data-instant-save-badge
+  >
+    <UIcon
+      :name="ICONS[props.state]"
+      class="size-3.5 shrink-0"
+      :class="{ 'animate-spin': props.state === 'saving' }"
+    />
+    {{ t("dms.save_bar.instant") }}
+  </span>
+</template>

package/frontend-vue/layers/dms-ui/app/components/save-bar/SaveBar.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { tv } from "tailwind-variants";
+import {
+  type FormKind,
+  saveBarState,
+} from "../../build/composables/form/formFooter";
+import DmsUnsavedStatus from "../../build/components/form/UnsavedStatus.vue";
+
+/**
+ * `floating`: the v2 save bar, a card that sticks to the bottom of the panel
+ * while the form runs past it. `band`: the footer band of a form card, a
+ * drawer or a modal (its surface classes come from the form).
+ */
+export type SaveBarVariant = "floating" | "band";
+
+interface SaveBarProps {
+  /** Whether there is something to save: "Unsaved changes", Discard, Save. */
+  dirty: boolean;
+  /** Spinner on the save button; both buttons are held. */
+  saving?: boolean;
+  /** Labels of the changed fields, listed after "Unsaved changes". */
+  changes?: string[];
+  /** Id of a form the save button submits, instead of emitting `save`. */
+  form?: string;
+  /** Save button label (i18n key with `$` or literal). */
+  saveLabel?: string;
+  /**
+   * With nothing to save, the bar shows a Cancel button (emitting `cancel`)
+   * instead of hiding: a form page the user leaves from there.
+   */
+  cancellable?: boolean;
+  variant?: SaveBarVariant;
+  /**
+   * What the form edits (see `FormKind`): an `action` form's bar has no
+   * "Unsaved changes", and resets instead of discarding.
+   */
+  kind?: FormKind;
+  /**
+   * Whether anything in the form can be changed: an `action` form nothing in
+   * which can be changed shows its submit alone, all the time.
+   */
+  resettable?: boolean;
+}
+
+const props = withDefaults(defineProps<SaveBarProps>(), {
+  saving: false,
+  changes: () => [],
+  form: undefined,
+  saveLabel: undefined,
+  cancellable: false,
+  variant: "floating",
+  kind: "record",
+  resettable: true,
+});
+
+const emit = defineEmits<{
+  discard: [];
+  save: [];
+  cancel: [];
+}>();
+
+const SECONDARY_LABELS: Record<FormKind, string> = {
+  record: "dms.save_bar.discard",
+  action: "dms.button.reset",
+};
+
+// Its states have the same height, and hidden it keeps its place (one line,
+// whatever the changes): switching never moves the content around it.
+const theme = tv({
+  slots: {
+    root: "flex items-center transition-[opacity,translate,visibility] duration-200 ease-out",
+    actions: "ms-auto flex shrink-0 items-center gap-2",
+  },
+  variants: {
+    variant: {
+      floating: {
+        root: "border-accented sticky bottom-4 z-5 mt-5 gap-3 rounded-[10px] border bg-(--ui-bg) py-2.5 ps-4 pe-3 text-[13px] shadow-lg",
+      },
+      band: {
+        root: "gap-2",
+      },
+    },
+    hidden: {
+      true: { root: "invisible translate-y-2 opacity-0" },
+    },
+  },
+});
+
+const BUTTONS = {
+  floating: { size: "sm", discardVariant: "ghost" },
+  band: { size: "lg", discardVariant: "outline" },
+} as const;
+
+const { t } = useI18n();
+const { processI18n } = useTranslation();
+
+const state = computed(() =>
+  saveBarState({
+    kind: props.kind,
+    dirty: props.dirty,
+    cancellable: props.cancellable,
+    resettable: props.resettable,
+  }),
+);
+const ui = computed(() =>
+  theme({ variant: props.variant, hidden: state.value.isHidden }),
+);
+const buttons = computed(() => BUTTONS[props.variant]);
+
+// Empty while there is nothing to save: the hidden bar keeps its line.
+const statusText = computed(() => {
+  if (!props.dirty) return "";
+  const changed = props.changes.map((label) => processI18n(label)).join(", ");
+  const unsaved = t("dms.save_bar.unsaved");
+  return changed ? `${unsaved} · ${changed}` : unsaved;
+});
+const saveText = computed(() => {
+  if (props.saving) return t("dms.save_bar.saving");
+  return props.saveLabel
+    ? processI18n(props.saveLabel)
+    : t("dms.save_bar.save");
+});
+</script>
+
+<template>
+  <div
+    :class="ui.root()"
+    :inert="state.isHidden || undefined"
+    :aria-hidden="state.isHidden || undefined"
+  >
+    <DmsUnsavedStatus
+      v-if="state.showsStatus"
+      :text="statusText"
+      :is-band="props.variant === 'band'"
+    />
+    <div :class="ui.actions()">
+      <UButton
+        v-if="state.secondary === 'discard'"
+        :label="t(SECONDARY_LABELS[props.kind])"
+        color="neutral"
+        :variant="buttons.discardVariant"
+        :size="buttons.size"
+        :disabled="props.saving"
+        @click="emit('discard')"
+      />
+      <UButton
+        v-else-if="state.secondary === 'cancel'"
+        :label="t('dms.button.cancel')"
+        color="neutral"
+        variant="outline"
+        :size="buttons.size"
+        @click="emit('cancel')"
+      />
+      <UButton
+        v-if="state.showsSubmit"
+        :label="saveText"
+        :size="buttons.size"
+        :loading="props.saving"
+        :disabled="state.isSubmitHeld"
+        :type="props.form ? 'submit' : 'button'"
+        :form="props.form"
+        @click="props.form ? undefined : emit('save')"
+      />
+    </div>
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/components/save-bar/SaveStatus.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+export type SaveStatusState = "idle" | "saving" | "saved" | "error";
+
+interface SaveStatusProps {
+  /**
+   * Instant-save feedback: nothing, a spinner while saving, a tick once
+   * saved, "Not saved" and a Retry button once a save failed.
+   */
+  state: SaveStatusState;
+}
+
+const props = defineProps<SaveStatusProps>();
+const emit = defineEmits<{
+  /** Retry asked for, after a failed save. */
+  retry: [];
+}>();
+const { t } = useI18n();
+
+interface SaveStatusLook {
+  icon: string;
+  label: string;
+  class: string;
+}
+
+const LOOKS: Record<Exclude<SaveStatusState, "idle">, SaveStatusLook> = {
+  saving: {
+    icon: "i-ph-circle-notch",
+    label: "dms.save_bar.saving",
+    class: "text-muted",
+  },
+  saved: {
+    icon: "i-ph-check",
+    label: "dms.save_bar.saved",
+    class: "text-success",
+  },
+  error: {
+    icon: "i-ph-warning-circle",
+    label: "dms.save_bar.not_saved",
+    class: "text-error",
+  },
+};
+</script>
+
+<template>
+  <!-- v2 .st-saved / .cs-saving: a mono stamp next to an instant-save control. -->
+  <span
+    v-if="props.state !== 'idle'"
+    class="inline-flex items-center gap-1.5 font-mono text-[11.5px] font-medium"
+    :class="LOOKS[props.state].class"
+    role="status"
+  >
+    <UIcon
+      :name="LOOKS[props.state].icon"
+      class="size-3"
+      :class="{ 'animate-spin': props.state === 'saving' }"
+    />
+    {{ t(LOOKS[props.state].label) }}
+    <UButton
+      v-if="props.state === 'error'"
+      :label="t('dms.save_bar.retry')"
+      icon="i-ph-arrows-clockwise"
+      color="neutral"
+      variant="link"
+      size="xs"
+      class="font-sans"
+      @click="emit('retry')"
+    />
+  </span>
+</template>

package/frontend-vue/layers/dms-ui/app/components/section/Section.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed, provide } from "vue";
+import { tv } from "tailwind-variants";
+import DmsSectionHeader from "../section-header/SectionHeader.vue";
+import { DMS_SECTION_SURFACE_KEY } from "../../build/components/section/context";
+import { useWatch } from "../../../../dms-core/app/composables/watch/useWatch";
+import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
+
+// The renderer's props are optional: DmsSection is both the backend `Section`
+// block (`dms-section-block`) and a template component.
+interface SectionProps extends Partial<DefaultComponentProps> {
+  /** Heading (i18n key with `$` or literal). */
+  title?: string;
+  /** One line under the heading. */
+  description?: string;
+  /** Destructive actions: the frame and title turn to the error color. */
+  danger?: boolean;
+  /** The card frame around the content; off for custom layouts and grids. */
+  card?: boolean;
+}
+
+interface SectionSlots {
+  /** The card content: field rows, list rows… */
+  default?: () => unknown;
+  /** Inline after the title (a count, a status pill). */
+  badge?: () => unknown;
+  /** Right of the heading (a section-level action). */
+  trail?: () => unknown;
+  /** Muted band at the bottom of the card. */
+  footer?: () => unknown;
+}
+
+const props = withDefaults(defineProps<SectionProps>(), {
+  title: undefined,
+  description: undefined,
+  danger: false,
+  card: true,
+});
+const slots = defineSlots<SectionSlots>();
+
+useWatch(props.watchActions || [], props.componentId);
+
+// v2 .st-block: a 15px title and one line of description (the generic
+// section header) above a card whose rows are set apart by hairlines.
+const theme = tv({
+  slots: {
+    root: "mt-7 first:mt-0",
+    // Clip, not hidden: a sticky save bar or form footer inside the card
+    // keeps sticking to the panel instead of to the card.
+    card: "dms-card overflow-clip",
+    footer:
+      "flex flex-wrap items-center gap-3 border-t border-default bg-(--dms-bg-muted) px-4 py-2.5 text-[12.5px] text-muted",
+  },
+  variants: {
+    danger: {
+      true: {
+        card: "border-error/40",
+      },
+    },
+  },
+});
+
+const ui = computed(() => theme({ danger: props.danger }));
+const { processI18n } = useTranslation();
+
+provide(DMS_SECTION_SURFACE_KEY, props.card);
+</script>
+
+<template>
+  <section :class="ui.root()">
+    <DmsSectionHeader
+      v-if="props.title || props.description || slots.trail || slots.badge"
+      class="mb-2.5"
+      :title="props.title ? processI18n(props.title) : undefined"
+      :description="
+        props.description ? processI18n(props.description) : undefined
+      "
+      :danger="props.danger"
+    >
+      <template v-if="slots.badge" #badge>
+        <slot name="badge" />
+      </template>
+      <template v-if="slots.trail" #trailing>
+        <slot name="trail" />
+      </template>
+    </DmsSectionHeader>
+
+    <slot v-if="!props.card" />
+    <div v-else :class="ui.card()">
+      <slot />
+      <footer v-if="slots.footer" :class="ui.footer()">
+        <slot name="footer" />
+      </footer>
+    </div>
+  </section>
+</template>

package/frontend-vue/layers/dms-ui/app/components/section-header/Eyebrow.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { tv } from "tailwind-variants";
+
+export type EyebrowTone = "dimmed" | "muted" | "primary" | "error";
+export type EyebrowSize = "xs" | "sm";
+
+interface EyebrowProps {
+  /** Element to render (`p`, `span`, `h3`, `dt`…). */
+  as?: string;
+  /** Text (the default slot overrides it). */
+  label?: string;
+  /**
+   * `dimmed` (v2 .eyebrow default), `muted` (card heads), `primary` (stage
+   * kicker), `error` (danger zone).
+   */
+  tone?: EyebrowTone;
+  /** `sm` 10.5px (v2 --text-2xs), `xs` 9.5px (dense meta labels). */
+  size?: EyebrowSize;
+  /** Single line with an ellipsis. */
+  truncate?: boolean;
+}
+
+interface EyebrowSlots {
+  default?: () => unknown;
+}
+
+const props = withDefaults(defineProps<EyebrowProps>(), {
+  as: "p",
+  label: undefined,
+  tone: "dimmed",
+  size: "sm",
+  truncate: false,
+});
+defineSlots<EyebrowSlots>();
+
+// v2 .eyebrow: the signature label, mono, uppercase and tracked.
+const theme = tv({
+  base: "font-mono font-semibold tracking-[0.12em] uppercase",
+  variants: {
+    tone: {
+      dimmed: "text-dimmed",
+      muted: "text-muted",
+      primary: "text-primary",
+      error: "text-error",
+    },
+    size: {
+      // The line height follows the size: tailwind-merge drops a `leading-*`
+      // that precedes a `text-*` size.
+      xs: "text-[9.5px] leading-[1.2]",
+      sm: "text-[10.5px] leading-[1.2]",
+    },
+    truncate: {
+      true: "truncate",
+    },
+  },
+});
+
+const classes = computed(() =>
+  theme({ tone: props.tone, size: props.size, truncate: props.truncate }),
+);
+</script>
+
+<template>
+  <component :is="props.as" :class="classes">
+    <slot>{{ props.label }}</slot>
+  </component>
+</template>