nuxt-ui-tools 1.24.0 → 1.25.1

package/dist/module.d.mts

@@ -1,6 +1,7 @@
 import * as _nuxt_schema from '@nuxt/schema';
 import { ModuleOptions as ModuleOptions$1 } from 'nuxt-viewport';
 import { DashboardUiConfig } from '../dist/runtime/dashboard/types/index.js';
+import { DisplayUiConfig } from '../dist/runtime/display/types/index.js';
 import { FormUiConfig } from '../dist/runtime/form/types/index.js';
 import { DataListUiConfig } from '../dist/runtime/table/types/index.js';
 
@@ -12,6 +13,7 @@ declare module '@nuxt/schema' {
         nuxtUiTools?: {
             dashboard?: DashboardUiConfig;
             dataList?: DataListUiConfig;
+            display?: DisplayUiConfig;
             form?: FormUiConfig;
         };
     }
@@ -19,6 +21,7 @@ declare module '@nuxt/schema' {
         nuxtUiTools?: {
             dashboard?: DashboardUiConfig;
             dataList?: DataListUiConfig;
+            display?: DisplayUiConfig;
             form?: FormUiConfig;
         };
     }

package/dist/module.json

@@ -5,7 +5,7 @@
   "configKey": "nuxtUiTools",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "name": "nuxt-ui-tools",
-  "version": "1.24.0",
+  "version": "1.25.1",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -120,6 +120,12 @@ function getPublicComponents(runtimeDir, options) {
       global: options.global,
       name: `${prefix}Dashboard${part}`
     })),
+    // Display
+    {
+      filePath: `${runtimeDir}/display/components/display.vue`,
+      global: options.global,
+      name: `${prefix}Display`
+    },
     // File preview
     {
       filePath: `${runtimeDir}/file-preview/components/provider/file-preview-provider.vue`,
@@ -417,6 +423,7 @@ const viewportDefaults = {
 };
 const publicRuntimeDomains = [
   "dashboard",
+  "display",
   "file-preview",
   "form",
   "i18n",
@@ -490,6 +497,7 @@ const module$1 = defineNuxtModule({
     addPlugin(resolve("./runtime/query-prefetch/plugins/link-prefetch.client"));
     addPlugin(resolve("./runtime/form/plugins/form-api"));
     addPlugin(resolve("./runtime/file-preview/plugins/file-preview-api"));
+    addPlugin(resolve("./runtime/display/plugins/display-tones"));
     addVitePlugin({
       enforce: "pre",
       name: "nuxt-ui-tools:query-prefetch-macro",

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

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

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

@@ -0,0 +1,96 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed, defineAsyncComponent, ref, useId } from "vue";
+import { useDisplayAppUi } from "../../composables/use-display-config";
+import { useDisplayIcons } from "../../composables/use-display-icons";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
+import { resolveDisplayClasses } from "../../utils/classes";
+import DisplayRender from "../parts/display-render";
+import DisplaySkeleton from "../parts/display-skeleton.vue";
+const {
+  variant = "separated",
+  items,
+  multiple = false,
+  loading = false,
+  ui = void 0
+} = defineProps({
+  variant: { type: String, required: false },
+  items: { type: Array, required: true },
+  multiple: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const DisplayBlock = defineAsyncComponent(() => import("../display.vue"));
+const id = useId();
+const icons = useDisplayIcons();
+const appUi = useDisplayAppUi("accordion");
+const open = ref(
+  items.flatMap((item, index) => item.defaultOpen ? [index] : []).slice(0, multiple ? void 0 : 1)
+);
+const classes = computed(
+  () => resolveDisplayClasses(
+    {
+      chevron: "size-4 shrink-0 text-muted transition-transform duration-200",
+      content: variant === "flush" ? "pb-3 text-sm text-toned" : "px-3 pb-3 text-sm text-toned",
+      icon: "size-4 shrink-0 text-muted",
+      item: variant === "flush" ? "" : "overflow-hidden rounded-[var(--nut-display-radius)] border border-default",
+      label: "min-w-0 flex-1",
+      root: variant === "flush" ? "flex min-w-0 flex-col divide-y divide-default border-y border-default" : "flex min-w-0 flex-col gap-1.5",
+      trigger: `flex w-full cursor-pointer items-center gap-2 py-2.5 text-start text-sm font-semibold text-highlighted ${variant === "flush" ? "" : "px-3 hover:bg-elevated"}`
+    },
+    appUi.value,
+    ui
+  )
+);
+function toggle(index) {
+  const isOpen = open.value.includes(index);
+  if (multiple)
+    open.value = isOpen ? open.value.filter((entry) => entry !== index) : [...open.value, index];
+  else open.value = isOpen ? [] : [index];
+}
+</script>
+
+<template>
+  <DisplaySkeleton v-if="loading" layout="rows" :count="Math.max(items.length, 2)" />
+  <div v-else :class="classes.root" data-display="accordion" :data-variant="variant">
+    <div
+      v-for="(item, index) in items"
+      :key="index"
+      :class="classes.item"
+      :data-state="open.includes(index) ? 'open' : 'closed'"
+    >
+      <button
+        :id="`${id}-trigger-${index}`"
+        type="button"
+        :class="classes.trigger"
+        :aria-expanded="open.includes(index)"
+        :aria-controls="`${id}-panel-${index}`"
+        @click="toggle(index)"
+      >
+        <UIcon v-if="item.icon" :name="item.icon" :class="classes.icon" />
+        <span v-reveal-truncated :class="classes.label"
+          ><DisplayRender :content="item.label"
+        /></span>
+        <UIcon
+          :name="icons.chevronDown"
+          :class="[classes.chevron, open.includes(index) ? 'rotate-180' : '']"
+        />
+      </button>
+      <div
+        v-if="open.includes(index)"
+        :id="`${id}-panel-${index}`"
+        role="region"
+        :aria-labelledby="`${id}-trigger-${index}`"
+        :class="classes.content"
+      >
+        <DisplayBlock
+          v-if="item.block"
+          :display="item.block.display"
+          :props="item.block.props"
+          :preset="item.block.preset"
+        />
+        <DisplayRender v-else :content="item.content" />
+      </div>
+    </div>
+  </div>
+</template>

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

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

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

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

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

@@ -0,0 +1,136 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed, ref } from "vue";
+import { useDisplayAppUi } from "../../composables/use-display-config";
+import { toneIcon, useDisplayIcons } from "../../composables/use-display-icons";
+import { useDisplayLocale } from "../../composables/use-display-locale";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
+import { resolveDisplayClasses } from "../../utils/classes";
+import { isDisplayContentEmpty } from "../../utils/content";
+import { displayToneClass } from "../../utils/tone";
+import DisplayActions from "../parts/display-actions.vue";
+import DisplayRender from "../parts/display-render";
+import DisplaySkeleton from "../parts/display-skeleton.vue";
+const {
+  tone = "info",
+  appearance = "soft",
+  icon = void 0,
+  title = void 0,
+  message = void 0,
+  items = void 0,
+  list = void 0,
+  details = void 0,
+  defaultOpen = false,
+  actions = void 0,
+  loading = false,
+  ui = void 0
+} = defineProps({
+  tone: { type: String, required: false },
+  appearance: { type: String, required: false },
+  icon: { type: [String, Boolean], required: false },
+  title: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  message: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  items: { type: Array, required: false },
+  list: { type: Array, required: false },
+  details: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  defaultOpen: { type: Boolean, required: false },
+  actions: { type: Array, required: false },
+  loading: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const BOX = "flex items-start gap-2.5 rounded-[var(--nut-display-radius)] px-3.5 py-3 text-sm";
+const ROOT_CLASSES = {
+  banner: "flex flex-wrap items-center gap-3 rounded-[var(--nut-display-radius)] border border-default bg-default p-3.5 text-sm text-default",
+  callout: "flex items-start gap-2.5 rounded-e-[var(--nut-display-radius)] border-s-[3px] border-[var(--nut-tone)] bg-elevated px-3.5 py-3 text-sm text-default",
+  inline: "flex items-start gap-2 text-sm text-toned",
+  outline: `${BOX} border border-[var(--nut-tone-line)] text-[var(--nut-tone-ink)]`,
+  soft: `${BOX} bg-[var(--nut-tone-soft)] text-[var(--nut-tone-ink)]`,
+  solid: `${BOX} bg-[var(--nut-tone)] text-[var(--nut-tone-contrast)]`,
+  subtle: `${BOX} border border-[var(--nut-tone-line)] bg-[var(--nut-tone-soft)] text-[var(--nut-tone-ink)]`
+};
+const { t } = useDisplayLocale();
+const icons = useDisplayIcons();
+const appUi = useDisplayAppUi("alert");
+const open = ref(defaultOpen);
+const resolvedIcon = computed(
+  () => icon === false ? void 0 : icon ?? toneIcon(icons.value, tone)
+);
+const plain = computed(() => ["banner", "callout", "inline"].includes(appearance));
+const titled = computed(() => !isDisplayContentEmpty(title));
+const classes = computed(
+  () => resolveDisplayClasses(
+    {
+      actions: appearance === "banner" ? "ms-auto flex flex-wrap gap-2" : "mt-2.5 flex flex-wrap gap-2",
+      body: "min-w-0 flex-1",
+      details: "mt-1.5 text-xs opacity-90",
+      icon: appearance === "banner" ? "grid size-9 shrink-0 place-items-center rounded-[var(--nut-display-radius)] bg-[var(--nut-tone-soft)] text-[var(--nut-tone-ink)]" : `mt-px size-4.5 shrink-0 ${plain.value ? "text-[var(--nut-tone-ink)]" : ""}`,
+      item: "flex items-start gap-2",
+      itemIcon: "mt-0.5 size-3.5 shrink-0",
+      items: "mt-1.5 flex flex-col gap-1",
+      list: "mt-1 list-disc ps-4.5 marker:opacity-60",
+      message: appearance === "banner" ? "mt-0.5 text-muted" : titled.value ? "mt-0.5 opacity-90" : "",
+      root: ROOT_CLASSES[appearance],
+      title: appearance === "banner" ? "font-semibold text-highlighted" : "font-semibold",
+      toggle: "mt-1.5 inline-flex cursor-pointer items-center gap-1 text-xs font-semibold underline underline-offset-2"
+    },
+    appUi.value,
+    ui
+  )
+);
+</script>
+
+<template>
+  <DisplaySkeleton v-if="loading" layout="block" />
+  <div
+    v-else
+    :class="[classes.root, displayToneClass(tone)]"
+    :role="tone === 'error' || tone === 'warning' ? 'status' : void 0"
+    :data-tone="tone"
+    :data-appearance="appearance"
+    data-display="alert"
+  >
+    <span v-if="resolvedIcon && appearance === 'banner'" :class="classes.icon">
+      <UIcon :name="resolvedIcon" class="size-4.5" />
+    </span>
+    <UIcon v-else-if="resolvedIcon" :name="resolvedIcon" :class="classes.icon" />
+    <div :class="classes.body">
+      <div v-if="titled" v-reveal-truncated :class="classes.title">
+        <DisplayRender :content="title" />
+      </div>
+      <div v-if="!isDisplayContentEmpty(message)" v-reveal-truncated :class="classes.message">
+        <DisplayRender :content="message" />
+      </div>
+      <div v-if="items?.length" :class="classes.items">
+        <div v-for="(item, index) in items" :key="index" :class="classes.item">
+          <UIcon :name="item.icon ?? resolvedIcon ?? icons.info" :class="classes.itemIcon" />
+          <span class="min-w-0"><DisplayRender :content="item.text" /></span>
+        </div>
+      </div>
+      <ul v-if="list?.length" :class="classes.list">
+        <li v-for="(content, index) in list" :key="index"><DisplayRender :content="content" /></li>
+      </ul>
+      <template v-if="!isDisplayContentEmpty(details)">
+        <button type="button" :class="classes.toggle" :aria-expanded="open" @click="open = !open">
+          {{ open ? t("display.hideDetails") : t("display.showDetails") }}
+          <UIcon
+            :name="icons.chevronDown"
+            class="size-3.5 transition-transform"
+            :class="open ? 'rotate-180' : ''"
+          />
+        </button>
+        <div v-if="open" :class="classes.details"><DisplayRender :content="details" /></div>
+      </template>
+      <DisplayActions
+        v-if="actions?.length && appearance !== 'banner'"
+        :actions="actions"
+        size="xs"
+        :class="classes.actions"
+      />
+    </div>
+    <DisplayActions
+      v-if="actions?.length && appearance === 'banner'"
+      :actions="actions"
+      :class="classes.actions"
+    />
+  </div>
+</template>

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

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

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

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

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

@@ -0,0 +1,184 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { twMerge } from "tailwind-merge";
+import { computed, ref } from "vue";
+import { useDisplayAppUi } from "../../composables/use-display-config";
+import { useDisplayIcons } from "../../composables/use-display-icons";
+import { useDisplayLocale } from "../../composables/use-display-locale";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
+import { resolveDisplayClasses } from "../../utils/classes";
+import { isDisplayContentEmpty } from "../../utils/content";
+import { DISPLAY_SURFACE_CLASSES, displayToneClass } from "../../utils/tone";
+import DisplayChip from "../parts/display-chip.vue";
+import DisplayRender from "../parts/display-render";
+import DisplaySkeleton from "../parts/display-skeleton.vue";
+const {
+  mode = "open",
+  title = void 0,
+  lines,
+  total = void 0,
+  columns = void 0,
+  footnote = void 0,
+  defaultOpen = false,
+  surface = "bordered",
+  loading = false,
+  ui = void 0
+} = defineProps({
+  mode: { type: String, required: false },
+  title: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  lines: { type: Array, required: true },
+  total: { type: Object, required: false },
+  columns: { type: Array, required: false },
+  footnote: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  defaultOpen: { type: Boolean, required: false },
+  surface: { type: String, required: false },
+  loading: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const { t } = useDisplayLocale();
+const icons = useDisplayIcons();
+const appUi = useDisplayAppUi("breakdown");
+const open = ref(defaultOpen);
+const boxed = computed(() => surface !== "plain");
+const classes = computed(
+  () => resolveDisplayClasses(
+    {
+      body: "mx-2 mb-2 rounded-[calc(var(--nut-display-radius)*0.75)] bg-elevated px-3 py-1",
+      detail: "ms-1.5 text-xs text-dimmed tabular-nums",
+      footnote: "mt-1.5 text-xs text-dimmed",
+      header: "bg-elevated",
+      headerCell: "px-4 py-2 text-end text-[11px] font-bold tracking-[0.07em] text-muted uppercase first:text-start",
+      label: "min-w-0 text-toned",
+      line: "flex flex-wrap items-baseline justify-between gap-x-3 gap-y-0.5 py-1.5",
+      root: `min-w-0 text-sm ${DISPLAY_SURFACE_CLASSES[surface]} ${boxed.value && mode === "open" ? "px-4 pt-1" : ""}`,
+      title: "pt-2 pb-1 text-[11px] font-bold tracking-[0.07em] text-muted uppercase",
+      toggle: "inline-flex cursor-pointer items-center gap-1 text-xs font-semibold text-primary",
+      total: mode === "collapsible" ? "flex items-center gap-3 px-4 py-2.5" : "mt-1 flex flex-wrap items-center justify-between gap-x-3 gap-y-1 border-t border-dashed border-accented py-2.5",
+      totalLabel: "flex items-center gap-2 font-bold text-highlighted",
+      totalValue: "text-lg font-extrabold whitespace-nowrap text-highlighted tabular-nums",
+      value: "ms-auto shrink-0 whitespace-nowrap text-default tabular-nums"
+    },
+    appUi.value,
+    ui
+  )
+);
+function lineClass(line) {
+  return [
+    classes.value.line,
+    line.subtotal ? "mt-1 border-t border-muted pt-2 font-semibold" : "",
+    line.muted ? "opacity-55" : ""
+  ];
+}
+function valueClass(line) {
+  return twMerge(
+    classes.value.value,
+    line.subtotal ? "text-highlighted" : "",
+    line.tone ? `${displayToneClass(line.tone)} text-[var(--nut-tone-ink)]` : ""
+  );
+}
+</script>
+
+<template>
+  <DisplaySkeleton
+    v-if="loading"
+    layout="rows"
+    :count="Math.min(Math.max(lines.length + 1, 3), 6)"
+  />
+  <div v-else data-display="breakdown" :data-mode="mode">
+    <div v-if="mode === 'compare'" :class="[classes.root, 'overflow-hidden']">
+      <table class="w-full border-collapse">
+        <thead :class="classes.header">
+          <tr>
+            <th :class="classes.headerCell"><DisplayRender :content="title" /></th>
+            <th v-for="(column, index) in columns ?? []" :key="index" :class="classes.headerCell">
+              <DisplayRender :content="column" />
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(line, index) in lines" :key="index" class="border-t border-muted">
+            <td :class="['px-4 py-2', classes.label]"><DisplayRender :content="line.label" /></td>
+            <td
+              v-for="(cell, cellIndex) in line.values ?? []"
+              :key="cellIndex"
+              v-reveal-truncated
+              :class="['px-4 py-2 text-end', valueClass(line)]"
+            >
+              <DisplayRender :content="cell" />
+            </td>
+          </tr>
+          <tr v-if="total" class="border-t border-dashed border-accented">
+            <td :class="['px-4 py-2.5', classes.totalLabel]">
+              <DisplayRender :content="total.label" />
+            </td>
+            <td
+              v-for="(cell, cellIndex) in total.values ?? []"
+              :key="cellIndex"
+              :class="['px-4 py-2.5 text-end', classes.totalValue, 'text-base']"
+            >
+              <DisplayRender :content="cell" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div v-else-if="mode === 'collapsible'" :class="classes.root">
+      <div :class="classes.total">
+        <span v-reveal-truncated :class="classes.totalLabel">
+          <DisplayRender :content="total?.label ?? title" />
+          <DisplayChip v-if="total?.chip" :chip="total.chip" />
+        </span>
+        <button type="button" :class="classes.toggle" :aria-expanded="open" @click="open = !open">
+          {{ t("display.details") }}
+          <UIcon
+            :name="icons.chevronDown"
+            class="size-3.5 transition-transform"
+            :class="open ? 'rotate-180' : ''"
+          />
+        </button>
+        <span :class="['ms-auto', classes.totalValue]"
+          ><DisplayRender :content="total?.value"
+        /></span>
+      </div>
+      <div v-if="open" :class="classes.body">
+        <div v-for="(line, index) in lines" :key="index" :class="lineClass(line)">
+          <span v-reveal-truncated :class="classes.label">
+            <DisplayRender :content="line.label" />
+            <span v-if="!isDisplayContentEmpty(line.detail)" :class="classes.detail"
+              ><DisplayRender :content="line.detail"
+            /></span>
+          </span>
+          <span v-reveal-truncated :class="valueClass(line)"
+            ><DisplayRender :content="line.value"
+          /></span>
+        </div>
+      </div>
+    </div>
+    <div v-else :class="classes.root">
+      <div v-if="!isDisplayContentEmpty(title)" v-reveal-truncated :class="classes.title">
+        <DisplayRender :content="title" />
+      </div>
+      <div v-for="(line, index) in lines" :key="index" :class="lineClass(line)">
+        <span v-reveal-truncated :class="classes.label">
+          <DisplayRender :content="line.label" />
+          <span v-if="!isDisplayContentEmpty(line.detail)" :class="classes.detail"
+            ><DisplayRender :content="line.detail"
+          /></span>
+        </span>
+        <span v-reveal-truncated :class="valueClass(line)"
+          ><DisplayRender :content="line.value"
+        /></span>
+      </div>
+      <div v-if="total" :class="classes.total">
+        <span v-reveal-truncated :class="classes.totalLabel">
+          <DisplayRender :content="total.label" />
+          <DisplayChip v-if="total.chip" :chip="total.chip" />
+        </span>
+        <span :class="classes.totalValue"><DisplayRender :content="total.value" /></span>
+      </div>
+    </div>
+    <p v-if="!isDisplayContentEmpty(footnote)" :class="classes.footnote">
+      <DisplayRender :content="footnote" />
+    </p>
+  </div>
+</template>

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

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

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

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