nuxt-ui-tools 1.23.0 → 1.25.0

package/dist/runtime/display/components/blocks/display-meter.vue

@@ -0,0 +1,301 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed } from "vue";
+import { isPlainObject } from "../../../shared/utils/predicate";
+import { useDisplayAppUi } from "../../composables/use-display-config";
+import { useDisplayNumber } from "../../composables/use-display-number";
+import { resolveDisplayClasses } from "../../utils/classes";
+import { displayContentText, isDisplayContentEmpty, resolveDisplayText } from "../../utils/content";
+import { meterShare, meterTone } from "../../utils/meter";
+import { displayToneClass } from "../../utils/tone";
+import DisplayRender from "../parts/display-render";
+import DisplaySkeleton from "../parts/display-skeleton.vue";
+const {
+  variant = "bar",
+  label = void 0,
+  value = 0,
+  max = void 0,
+  valueLabel = void 0,
+  tone = void 0,
+  thresholds = void 0,
+  parts = void 0,
+  caption = void 0,
+  levels = void 0,
+  current = void 0,
+  target = void 0,
+  size = "md",
+  loading = false,
+  ui = void 0
+} = defineProps({
+  variant: { type: String, required: false },
+  label: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  value: { type: Number, required: false },
+  max: { type: Number, required: false },
+  valueLabel: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  tone: { type: String, required: false },
+  thresholds: { type: Object, required: false },
+  parts: { type: Array, required: false },
+  caption: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  levels: { type: Array, required: false },
+  current: { type: Number, required: false },
+  target: { type: Number, required: false },
+  size: { type: String, required: false },
+  loading: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const PALETTE = ["primary", "info", "success", "warning", "secondary", "neutral"];
+const RING_SIZES = { lg: 112, md: 88, sm: 64 };
+const format = useDisplayNumber();
+const appUi = useDisplayAppUi("meter");
+const partTotal = computed(() => (parts ?? []).reduce((sum, part) => sum + part.value, 0));
+const resolvedMax = computed(
+  () => max ?? (variant === "segments" || variant === "split" ? partTotal.value : 100)
+);
+const share = computed(() => meterShare(value, resolvedMax.value));
+const resolvedTone = computed(() => meterTone(share.value, tone, thresholds));
+const resolvedParts = computed(
+  () => (parts ?? []).map((part, index) => ({
+    ...part,
+    tone: part.tone ?? (variant === "ring" ? resolvedTone.value : PALETTE[index % PALETTE.length] ?? "primary"),
+    width: meterShare(part.value, resolvedMax.value) * 100
+  }))
+);
+const headerValue = computed(() => valueLabel ?? `${format(value)} / ${format(resolvedMax.value)}`);
+const ariaLabel = computed(() => displayContentText(label));
+const ring = computed(() => {
+  const diameter = RING_SIZES[size];
+  const stroke = Math.round(diameter / 11);
+  const radius = (diameter - stroke) / 2;
+  const circumference = 2 * Math.PI * radius;
+  return { circumference, diameter, radius, stroke, filled: circumference * share.value };
+});
+const resolvedLevels = computed(
+  () => (levels ?? []).map(
+    (level) => isMeterLevel(level) ? level : { label: level }
+  )
+);
+const classes = computed(
+  () => resolveDisplayClasses(
+    {
+      bar: "h-full bg-[var(--nut-tone)] transition-[width] duration-300 ease-out first:rounded-s-full last:rounded-e-full",
+      caption: "mt-1.5 text-xs text-dimmed",
+      header: "flex items-baseline justify-between gap-3 text-sm",
+      label: "flex min-w-0 items-center gap-1.5 font-semibold text-toned",
+      legend: "mt-2 flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted",
+      legendItem: "inline-flex items-center gap-1.5",
+      level: "grid h-8 place-items-center rounded-[calc(var(--nut-display-radius)*0.75)] text-xs font-bold",
+      levelCaption: "text-center text-[10.5px] text-dimmed",
+      levels: "mt-2 grid gap-1",
+      parts: "flex min-w-0 flex-1 flex-col gap-2.5",
+      ring: "flex items-center gap-4",
+      root: "min-w-0",
+      track: "mt-2 flex h-2 gap-0.5 overflow-hidden rounded-full bg-[var(--nut-display-track)]",
+      value: "shrink-0 font-semibold text-highlighted tabular-nums"
+    },
+    appUi.value,
+    ui
+  )
+);
+function levelClass(index) {
+  if (index === current) return "bg-[var(--nut-tone)] text-[var(--nut-tone-contrast)]";
+  if (index === target)
+    return "text-[var(--nut-tone-ink)] outline-dashed outline-[1.5px] -outline-offset-[1.5px] outline-[var(--nut-tone)]";
+  if (current !== void 0 && index < current)
+    return "bg-[var(--nut-tone-soft)] text-[var(--nut-tone-ink)]";
+  return "bg-elevated text-dimmed";
+}
+function isMeterLevel(level) {
+  return isPlainObject(level);
+}
+function partTone(partToneName) {
+  return displayToneClass(partToneName);
+}
+</script>
+
+<template>
+  <DisplaySkeleton v-if="loading" :layout="variant === 'ring' ? 'ring' : 'lines'" :count="2" />
+  <div
+    v-else
+    :class="[classes.root, displayToneClass(resolvedTone)]"
+    data-display="meter"
+    :data-variant="variant"
+  >
+    <div v-if="variant === 'ring'" :class="classes.ring">
+      <svg
+        :width="ring.diameter"
+        :height="ring.diameter"
+        :viewBox="`0 0 ${ring.diameter} ${ring.diameter}`"
+        class="shrink-0"
+        role="meter"
+        :aria-valuenow="value"
+        aria-valuemin="0"
+        :aria-valuemax="resolvedMax"
+        :aria-label="ariaLabel"
+      >
+        <circle
+          :cx="ring.diameter / 2"
+          :cy="ring.diameter / 2"
+          :r="ring.radius"
+          fill="none"
+          stroke="var(--nut-display-track)"
+          :stroke-width="ring.stroke"
+        />
+        <circle
+          :cx="ring.diameter / 2"
+          :cy="ring.diameter / 2"
+          :r="ring.radius"
+          fill="none"
+          stroke="var(--nut-tone)"
+          :stroke-width="ring.stroke"
+          stroke-linecap="round"
+          :stroke-dasharray="`${ring.filled} ${ring.circumference}`"
+          :transform="`rotate(-90 ${ring.diameter / 2} ${ring.diameter / 2})`"
+        />
+        <text
+          :x="ring.diameter / 2"
+          :y="ring.diameter / 2 + ring.diameter * 0.04"
+          text-anchor="middle"
+          class="fill-[var(--ui-text-highlighted)] font-extrabold"
+          :font-size="ring.diameter * 0.22"
+        >
+          {{ displayContentText(valueLabel) ?? format(value) }}
+        </text>
+        <text
+          :x="ring.diameter / 2"
+          :y="ring.diameter / 2 + ring.diameter * 0.2"
+          text-anchor="middle"
+          class="fill-[var(--ui-text-dimmed)]"
+          :font-size="ring.diameter * 0.115"
+        >
+          / {{ format(resolvedMax) }}
+        </text>
+      </svg>
+      <div :class="classes.parts">
+        <div v-if="!isDisplayContentEmpty(label)" :class="classes.label">
+          <DisplayRender :content="label" />
+        </div>
+        <div v-for="(part, index) in resolvedParts" :key="index" :class="partTone(part.tone)">
+          <div :class="classes.header">
+            <span :class="classes.label">
+              <UIcon v-if="part.icon" :name="part.icon" class="size-3.5" />
+              <DisplayRender :content="part.label" />
+            </span>
+            <span :class="classes.value"
+              ><DisplayRender :content="part.valueLabel ?? format(part.value)"
+            /></span>
+          </div>
+          <div :class="[classes.track, 'mt-1 h-1.5']">
+            <i
+              :class="classes.bar"
+              :style="{ width: `${meterShare(part.value, part.max ?? resolvedMax) * 100}%` }"
+            />
+          </div>
+        </div>
+        <div v-if="!isDisplayContentEmpty(caption)" :class="classes.caption">
+          <DisplayRender :content="caption" />
+        </div>
+      </div>
+    </div>
+    <template v-else-if="variant === 'scale'">
+      <div :class="classes.header">
+        <span :class="classes.label"><DisplayRender :content="label" /></span>
+        <span v-if="!isDisplayContentEmpty(valueLabel)" :class="classes.value"
+          ><DisplayRender :content="valueLabel"
+        /></span>
+      </div>
+      <div
+        :class="classes.levels"
+        :style="{ gridTemplateColumns: `repeat(${resolvedLevels.length || 1}, minmax(0, 1fr))` }"
+      >
+        <div
+          v-for="(level, index) in resolvedLevels"
+          :key="index"
+          :class="[classes.level, levelClass(index)]"
+          :data-state="
+  index === current ? 'current' : index === target ? 'target' : current !== void 0 && index < current ? 'reached' : 'idle'
+"
+        >
+          {{ resolveDisplayText(level.label) }}
+        </div>
+      </div>
+      <div
+        v-if="resolvedLevels.some((level2) => level2.caption !== void 0)"
+        class="mt-1 grid gap-1"
+        :style="{ gridTemplateColumns: `repeat(${resolvedLevels.length}, minmax(0, 1fr))` }"
+      >
+        <span v-for="(level, index) in resolvedLevels" :key="index" :class="classes.levelCaption">
+          {{ resolveDisplayText(level.caption) }}
+        </span>
+      </div>
+      <div v-if="!isDisplayContentEmpty(caption)" :class="classes.caption">
+        <DisplayRender :content="caption" />
+      </div>
+    </template>
+    <template v-else-if="variant === 'split'">
+      <div class="mb-1.5 flex items-end justify-between gap-3 text-xs">
+        <span
+          v-for="(part, index) in resolvedParts.slice(0, 2)"
+          :key="index"
+          :class="['flex items-baseline gap-1.5', index === 1 ? 'text-end' : '']"
+        >
+          <b class="text-base font-extrabold text-highlighted tabular-nums"
+            >{{ Math.round(part.width) }} %</b
+          >
+          <span class="text-muted"><DisplayRender :content="part.label" /></span>
+        </span>
+      </div>
+      <div :class="[classes.track, 'mt-0']" role="img" :aria-label="ariaLabel">
+        <i
+          v-for="(part, index) in resolvedParts.slice(0, 2)"
+          :key="index"
+          :class="[classes.bar, partTone(part.tone)]"
+          :style="{ width: `${part.width}%` }"
+        />
+      </div>
+      <div v-if="!isDisplayContentEmpty(caption)" :class="classes.caption">
+        <DisplayRender :content="caption" />
+      </div>
+    </template>
+    <template v-else>
+      <div v-if="!isDisplayContentEmpty(label) || variant === 'bar'" :class="classes.header">
+        <span :class="classes.label"><DisplayRender :content="label" /></span>
+        <span :class="classes.value"
+          ><DisplayRender :content="variant === 'bar' ? headerValue : valueLabel"
+        /></span>
+      </div>
+      <div
+        :class="classes.track"
+        role="meter"
+        :aria-valuenow="variant === 'bar' ? value : partTotal"
+        aria-valuemin="0"
+        :aria-valuemax="resolvedMax"
+        :aria-label="ariaLabel"
+      >
+        <i v-if="variant === 'bar'" :class="classes.bar" :style="{ width: `${share * 100}%` }" />
+        <i
+          v-for="(part, index) in variant === 'segments' ? resolvedParts : []"
+          v-else
+          :key="index"
+          :class="[classes.bar, partTone(part.tone)]"
+          :style="{ width: `${part.width}%` }"
+        />
+      </div>
+      <div v-if="variant === 'segments' && resolvedParts.length" :class="classes.legend">
+        <span
+          v-for="(part, index) in resolvedParts"
+          :key="index"
+          :class="[classes.legendItem, partTone(part.tone)]"
+        >
+          <i class="size-2 rounded-[2px] bg-[var(--nut-tone)]" />
+          <DisplayRender :content="part.label" />
+          <b class="font-semibold text-default tabular-nums"
+            ><DisplayRender :content="part.valueLabel ?? format(part.value)"
+          /></b>
+        </span>
+      </div>
+      <div v-if="!isDisplayContentEmpty(caption)" :class="classes.caption">
+        <DisplayRender :content="caption" />
+      </div>
+    </template>
+  </div>
+</template>

package/dist/runtime/display/components/blocks/display-meter.vue.d.ts

@@ -0,0 +1,4 @@
+import type { DisplayMeterProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<DisplayMeterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DisplayMeterProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/display/components/blocks/display-person.d.vue.ts

@@ -0,0 +1,4 @@
+import type { DisplayPersonProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<DisplayPersonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DisplayPersonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/display/components/blocks/display-person.vue

@@ -0,0 +1,146 @@
+<script setup>
+import UAvatar from "@nuxt/ui/components/Avatar.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import ULink from "@nuxt/ui/components/Link.vue";
+import { computed } from "vue";
+import { useDisplayAppUi } from "../../composables/use-display-config";
+import { resolveDisplayClasses } from "../../utils/classes";
+import { isDisplayContentEmpty, resolveDisplayText } from "../../utils/content";
+import {
+  DISPLAY_SURFACE_CLASSES,
+  displayToneClass,
+  initialsOf,
+  toneFromName
+} from "../../utils/tone";
+import DisplayChip from "../parts/display-chip.vue";
+import DisplayCopy from "../parts/display-copy.vue";
+import DisplayRender from "../parts/display-render";
+import DisplaySkeleton from "../parts/display-skeleton.vue";
+const {
+  variant = "user",
+  people = void 0,
+  max = 4,
+  label = void 0,
+  contacts = void 0,
+  size = "md",
+  loading = false,
+  ui = void 0,
+  ...person
+} = defineProps({
+  variant: { type: String, required: false },
+  people: { type: Array, required: false },
+  max: { type: Number, required: false },
+  label: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  contacts: { type: Array, required: false },
+  size: { type: String, required: false },
+  loading: { type: Boolean, required: false },
+  ui: { type: Object, required: false },
+  name: { type: [String, Number, Function], required: false },
+  description: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  avatar: { type: Object, required: false },
+  tone: { type: String, required: false },
+  chip: { type: Object, required: false }
+});
+const AVATAR_SIZES = {
+  contact: { lg: "2xl", md: "xl", sm: "lg" },
+  group: { lg: "lg", md: "md", sm: "sm" },
+  user: { lg: "xl", md: "lg", sm: "md" }
+};
+const appUi = useDisplayAppUi("person");
+const self = computed(() => ({ ...person, name: person.name ?? "" }));
+const shown = computed(() => (people ?? []).slice(0, max));
+const overflow = computed(() => Math.max(0, (people?.length ?? 0) - shown.value.length));
+const classes = computed(
+  () => resolveDisplayClasses(
+    {
+      avatar: variant === "group" ? "ring-2 ring-[var(--ui-bg)]" : "",
+      body: "min-w-0 flex-1",
+      chip: "shrink-0",
+      contact: "flex min-w-0 items-center gap-2 text-sm text-toned",
+      contactIcon: "size-3.5 shrink-0 text-muted",
+      contactValue: "min-w-0 flex-1 truncate",
+      contacts: "mt-3 flex flex-col gap-1",
+      description: "truncate text-xs text-muted",
+      group: "flex -space-x-2",
+      label: "text-sm text-toned",
+      name: `truncate font-semibold text-highlighted ${size === "lg" ? "text-base" : "text-sm"}`,
+      root: variant === "contact" ? `min-w-0 ${DISPLAY_SURFACE_CLASSES.bordered} p-3.5` : "flex min-w-0 items-center gap-3"
+    },
+    appUi.value,
+    ui
+  )
+);
+function avatarOf(entry) {
+  const name = resolveDisplayText(entry.name) ?? "";
+  const tone = entry.tone ?? toneFromName(name);
+  return {
+    alt: name,
+    text: initialsOf(name),
+    ...entry.avatar,
+    class: [displayToneClass(tone), classes.value.avatar, "shrink-0"],
+    ui: {
+      fallback: "text-[0.8em] font-semibold text-[var(--nut-tone-ink)]",
+      root: "bg-[var(--nut-tone-soft)]"
+    }
+  };
+}
+</script>
+
+<template>
+  <DisplaySkeleton v-if="loading" layout="card" />
+  <div
+    v-else-if="variant === 'group'"
+    :class="classes.root"
+    data-display="person"
+    data-variant="group"
+  >
+    <div :class="classes.group">
+      <UAvatar
+        v-for="(person, index) in shown"
+        :key="index"
+        v-bind="avatarOf(person)"
+        :size="AVATAR_SIZES.group[size]"
+        :title="resolveDisplayText(person.name)"
+      />
+      <UAvatar
+        v-if="overflow"
+        :text="`+${overflow}`"
+        :size="AVATAR_SIZES.group[size]"
+        :class="[classes.avatar, 'nut-display-tone-neutral']"
+        :ui="{ fallback: 'font-semibold text-toned', root: 'bg-elevated' }"
+      />
+    </div>
+    <span v-if="!isDisplayContentEmpty(label)" :class="classes.label"
+      ><DisplayRender :content="label"
+    /></span>
+  </div>
+  <div v-else :class="classes.root" data-display="person" :data-variant="variant">
+    <div class="flex min-w-0 items-center gap-3">
+      <UAvatar
+        v-bind="avatarOf(self)"
+        :size="AVATAR_SIZES[variant === 'contact' ? 'contact' : 'user'][size]"
+      />
+      <div :class="classes.body">
+        <div :class="classes.name">{{ resolveDisplayText(self.name) }}</div>
+        <div v-if="!isDisplayContentEmpty(self.description)" :class="classes.description">
+          <DisplayRender :content="self.description" />
+        </div>
+      </div>
+      <DisplayChip v-if="self.chip" :chip="self.chip" :class="classes.chip" />
+    </div>
+    <div v-if="variant === 'contact' && contacts?.length" :class="classes.contacts">
+      <div v-for="(contact, index) in contacts" :key="index" :class="classes.contact">
+        <UIcon v-if="contact.icon" :name="contact.icon" :class="classes.contactIcon" />
+        <ULink
+          v-if="contact.href"
+          :to="contact.href"
+          :class="[classes.contactValue, 'hover:text-highlighted']"
+        >
+          {{ contact.value }}
+        </ULink>
+        <span v-else :class="classes.contactValue">{{ contact.value }}</span>
+        <DisplayCopy v-if="contact.copy !== false" :value="contact.value" class="-my-1" />
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/display/components/blocks/display-person.vue.d.ts

@@ -0,0 +1,4 @@
+import type { DisplayPersonProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<DisplayPersonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DisplayPersonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/display/components/blocks/display-record.d.vue.ts

@@ -0,0 +1,4 @@
+import type { DisplayRecordProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<DisplayRecordProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DisplayRecordProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;