nuxt-ui-tools 1.23.0 → 1.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (226) hide show
  1. package/dist/module.d.mts +3 -0
  2. package/dist/module.json +1 -1
  3. package/dist/module.mjs +8 -0
  4. package/dist/runtime/display/components/blocks/display-accordion.d.vue.ts +4 -0
  5. package/dist/runtime/display/components/blocks/display-accordion.vue +93 -0
  6. package/dist/runtime/display/components/blocks/display-accordion.vue.d.ts +4 -0
  7. package/dist/runtime/display/components/blocks/display-alert.d.vue.ts +4 -0
  8. package/dist/runtime/display/components/blocks/display-alert.vue +133 -0
  9. package/dist/runtime/display/components/blocks/display-alert.vue.d.ts +4 -0
  10. package/dist/runtime/display/components/blocks/display-breakdown.d.vue.ts +4 -0
  11. package/dist/runtime/display/components/blocks/display-breakdown.vue +178 -0
  12. package/dist/runtime/display/components/blocks/display-breakdown.vue.d.ts +4 -0
  13. package/dist/runtime/display/components/blocks/display-chart.d.vue.ts +4 -0
  14. package/dist/runtime/display/components/blocks/display-chart.vue +237 -0
  15. package/dist/runtime/display/components/blocks/display-chart.vue.d.ts +4 -0
  16. package/dist/runtime/display/components/blocks/display-code.d.vue.ts +4 -0
  17. package/dist/runtime/display/components/blocks/display-code.vue +143 -0
  18. package/dist/runtime/display/components/blocks/display-code.vue.d.ts +4 -0
  19. package/dist/runtime/display/components/blocks/display-date.d.vue.ts +4 -0
  20. package/dist/runtime/display/components/blocks/display-date.vue +174 -0
  21. package/dist/runtime/display/components/blocks/display-date.vue.d.ts +4 -0
  22. package/dist/runtime/display/components/blocks/display-diff.d.vue.ts +4 -0
  23. package/dist/runtime/display/components/blocks/display-diff.vue +142 -0
  24. package/dist/runtime/display/components/blocks/display-diff.vue.d.ts +4 -0
  25. package/dist/runtime/display/components/blocks/display-empty.d.vue.ts +4 -0
  26. package/dist/runtime/display/components/blocks/display-empty.vue +74 -0
  27. package/dist/runtime/display/components/blocks/display-empty.vue.d.ts +4 -0
  28. package/dist/runtime/display/components/blocks/display-facts.d.vue.ts +4 -0
  29. package/dist/runtime/display/components/blocks/display-facts.vue +180 -0
  30. package/dist/runtime/display/components/blocks/display-facts.vue.d.ts +4 -0
  31. package/dist/runtime/display/components/blocks/display-heading.d.vue.ts +4 -0
  32. package/dist/runtime/display/components/blocks/display-heading.vue +96 -0
  33. package/dist/runtime/display/components/blocks/display-heading.vue.d.ts +4 -0
  34. package/dist/runtime/display/components/blocks/display-list.d.vue.ts +4 -0
  35. package/dist/runtime/display/components/blocks/display-list.vue +295 -0
  36. package/dist/runtime/display/components/blocks/display-list.vue.d.ts +4 -0
  37. package/dist/runtime/display/components/blocks/display-media.d.vue.ts +4 -0
  38. package/dist/runtime/display/components/blocks/display-media.vue +326 -0
  39. package/dist/runtime/display/components/blocks/display-media.vue.d.ts +4 -0
  40. package/dist/runtime/display/components/blocks/display-meter.d.vue.ts +4 -0
  41. package/dist/runtime/display/components/blocks/display-meter.vue +301 -0
  42. package/dist/runtime/display/components/blocks/display-meter.vue.d.ts +4 -0
  43. package/dist/runtime/display/components/blocks/display-person.d.vue.ts +4 -0
  44. package/dist/runtime/display/components/blocks/display-person.vue +146 -0
  45. package/dist/runtime/display/components/blocks/display-person.vue.d.ts +4 -0
  46. package/dist/runtime/display/components/blocks/display-record.d.vue.ts +4 -0
  47. package/dist/runtime/display/components/blocks/display-record.vue +208 -0
  48. package/dist/runtime/display/components/blocks/display-record.vue.d.ts +4 -0
  49. package/dist/runtime/display/components/blocks/display-stat.d.vue.ts +4 -0
  50. package/dist/runtime/display/components/blocks/display-stat.vue +178 -0
  51. package/dist/runtime/display/components/blocks/display-stat.vue.d.ts +4 -0
  52. package/dist/runtime/display/components/blocks/display-table.d.vue.ts +4 -0
  53. package/dist/runtime/display/components/blocks/display-table.vue +132 -0
  54. package/dist/runtime/display/components/blocks/display-table.vue.d.ts +4 -0
  55. package/dist/runtime/display/components/blocks/display-text.d.vue.ts +4 -0
  56. package/dist/runtime/display/components/blocks/display-text.vue +135 -0
  57. package/dist/runtime/display/components/blocks/display-text.vue.d.ts +4 -0
  58. package/dist/runtime/display/components/blocks/display-timeline.d.vue.ts +4 -0
  59. package/dist/runtime/display/components/blocks/display-timeline.vue +232 -0
  60. package/dist/runtime/display/components/blocks/display-timeline.vue.d.ts +4 -0
  61. package/dist/runtime/display/components/display.d.vue.ts +24 -0
  62. package/dist/runtime/display/components/display.vue +21 -0
  63. package/dist/runtime/display/components/display.vue.d.ts +24 -0
  64. package/dist/runtime/display/components/parts/display-actions.d.vue.ts +9 -0
  65. package/dist/runtime/display/components/parts/display-actions.vue +24 -0
  66. package/dist/runtime/display/components/parts/display-actions.vue.d.ts +9 -0
  67. package/dist/runtime/display/components/parts/display-chip.d.vue.ts +11 -0
  68. package/dist/runtime/display/components/parts/display-chip.vue +45 -0
  69. package/dist/runtime/display/components/parts/display-chip.vue.d.ts +11 -0
  70. package/dist/runtime/display/components/parts/display-copy.d.vue.ts +6 -0
  71. package/dist/runtime/display/components/parts/display-copy.vue +27 -0
  72. package/dist/runtime/display/components/parts/display-copy.vue.d.ts +6 -0
  73. package/dist/runtime/display/components/parts/display-empty-line.d.vue.ts +7 -0
  74. package/dist/runtime/display/components/parts/display-empty-line.vue +21 -0
  75. package/dist/runtime/display/components/parts/display-empty-line.vue.d.ts +7 -0
  76. package/dist/runtime/display/components/parts/display-fact-value.d.vue.ts +7 -0
  77. package/dist/runtime/display/components/parts/display-fact-value.vue +35 -0
  78. package/dist/runtime/display/components/parts/display-fact-value.vue.d.ts +7 -0
  79. package/dist/runtime/display/components/parts/display-load-error.d.vue.ts +7 -0
  80. package/dist/runtime/display/components/parts/display-load-error.vue +29 -0
  81. package/dist/runtime/display/components/parts/display-load-error.vue.d.ts +7 -0
  82. package/dist/runtime/display/components/parts/display-more.d.vue.ts +10 -0
  83. package/dist/runtime/display/components/parts/display-more.vue +23 -0
  84. package/dist/runtime/display/components/parts/display-more.vue.d.ts +10 -0
  85. package/dist/runtime/display/components/parts/display-record-media.d.vue.ts +9 -0
  86. package/dist/runtime/display/components/parts/display-record-media.vue +59 -0
  87. package/dist/runtime/display/components/parts/display-record-media.vue.d.ts +9 -0
  88. package/dist/runtime/display/components/parts/display-render.d.ts +10 -0
  89. package/dist/runtime/display/components/parts/display-render.js +5 -0
  90. package/dist/runtime/display/components/parts/display-skeleton.d.vue.ts +7 -0
  91. package/dist/runtime/display/components/parts/display-skeleton.vue +67 -0
  92. package/dist/runtime/display/components/parts/display-skeleton.vue.d.ts +7 -0
  93. package/dist/runtime/display/composables/use-display-config.d.ts +6 -0
  94. package/dist/runtime/display/composables/use-display-config.js +11 -0
  95. package/dist/runtime/display/composables/use-display-file-preview.d.ts +9 -0
  96. package/dist/runtime/display/composables/use-display-file-preview.js +11 -0
  97. package/dist/runtime/display/composables/use-display-icons.d.ts +8 -0
  98. package/dist/runtime/display/composables/use-display-icons.js +62 -0
  99. package/dist/runtime/display/composables/use-display-locale.d.ts +5 -0
  100. package/dist/runtime/display/composables/use-display-locale.js +5 -0
  101. package/dist/runtime/display/composables/use-display-number.d.ts +2 -0
  102. package/dist/runtime/display/composables/use-display-number.js +7 -0
  103. package/dist/runtime/display/composables/use-display-reveal.d.ts +14 -0
  104. package/dist/runtime/display/composables/use-display-reveal.js +15 -0
  105. package/dist/runtime/display/composables/use-display-url.d.ts +26 -0
  106. package/dist/runtime/display/composables/use-display-url.js +46 -0
  107. package/dist/runtime/display/index.d.ts +4 -0
  108. package/dist/runtime/display/index.js +3 -0
  109. package/dist/runtime/display/plugins/display-tones.d.ts +3 -0
  110. package/dist/runtime/display/plugins/display-tones.js +17 -0
  111. package/dist/runtime/display/types/blocks/accordion.d.ts +18 -0
  112. package/dist/runtime/display/types/blocks/accordion.js +0 -0
  113. package/dist/runtime/display/types/blocks/alert.d.ts +31 -0
  114. package/dist/runtime/display/types/blocks/alert.js +0 -0
  115. package/dist/runtime/display/types/blocks/breakdown.d.ts +36 -0
  116. package/dist/runtime/display/types/blocks/breakdown.js +0 -0
  117. package/dist/runtime/display/types/blocks/chart.d.ts +23 -0
  118. package/dist/runtime/display/types/blocks/chart.js +0 -0
  119. package/dist/runtime/display/types/blocks/code.d.ts +21 -0
  120. package/dist/runtime/display/types/blocks/code.js +0 -0
  121. package/dist/runtime/display/types/blocks/date.d.ts +27 -0
  122. package/dist/runtime/display/types/blocks/date.js +0 -0
  123. package/dist/runtime/display/types/blocks/diff.d.ts +20 -0
  124. package/dist/runtime/display/types/blocks/diff.js +0 -0
  125. package/dist/runtime/display/types/blocks/empty.d.ts +13 -0
  126. package/dist/runtime/display/types/blocks/empty.js +0 -0
  127. package/dist/runtime/display/types/blocks/facts.d.ts +50 -0
  128. package/dist/runtime/display/types/blocks/facts.js +0 -0
  129. package/dist/runtime/display/types/blocks/heading.d.ts +19 -0
  130. package/dist/runtime/display/types/blocks/heading.js +0 -0
  131. package/dist/runtime/display/types/blocks/list.d.ts +36 -0
  132. package/dist/runtime/display/types/blocks/list.js +0 -0
  133. package/dist/runtime/display/types/blocks/media.d.ts +42 -0
  134. package/dist/runtime/display/types/blocks/media.js +0 -0
  135. package/dist/runtime/display/types/blocks/meter.d.ts +48 -0
  136. package/dist/runtime/display/types/blocks/meter.js +0 -0
  137. package/dist/runtime/display/types/blocks/person.d.ts +32 -0
  138. package/dist/runtime/display/types/blocks/person.js +0 -0
  139. package/dist/runtime/display/types/blocks/record.d.ts +42 -0
  140. package/dist/runtime/display/types/blocks/record.js +0 -0
  141. package/dist/runtime/display/types/blocks/stat.d.ts +44 -0
  142. package/dist/runtime/display/types/blocks/stat.js +0 -0
  143. package/dist/runtime/display/types/blocks/table.d.ts +28 -0
  144. package/dist/runtime/display/types/blocks/table.js +0 -0
  145. package/dist/runtime/display/types/blocks/text.d.ts +22 -0
  146. package/dist/runtime/display/types/blocks/text.js +0 -0
  147. package/dist/runtime/display/types/blocks/timeline.d.ts +37 -0
  148. package/dist/runtime/display/types/blocks/timeline.js +0 -0
  149. package/dist/runtime/display/types/config.d.ts +53 -0
  150. package/dist/runtime/display/types/config.js +0 -0
  151. package/dist/runtime/display/types/index.d.ts +22 -0
  152. package/dist/runtime/display/types/index.js +0 -0
  153. package/dist/runtime/display/types/registry.d.ts +57 -0
  154. package/dist/runtime/display/types/registry.js +0 -0
  155. package/dist/runtime/display/types/shared.d.ts +71 -0
  156. package/dist/runtime/display/types/shared.js +0 -0
  157. package/dist/runtime/display/utils/classes.d.ts +3 -0
  158. package/dist/runtime/display/utils/classes.js +7 -0
  159. package/dist/runtime/display/utils/config.d.ts +6 -0
  160. package/dist/runtime/display/utils/config.js +7 -0
  161. package/dist/runtime/display/utils/content.d.ts +7 -0
  162. package/dist/runtime/display/utils/content.js +13 -0
  163. package/dist/runtime/display/utils/dates.d.ts +16 -0
  164. package/dist/runtime/display/utils/dates.js +34 -0
  165. package/dist/runtime/display/utils/json.d.ts +7 -0
  166. package/dist/runtime/display/utils/json.js +15 -0
  167. package/dist/runtime/display/utils/meter.d.ts +7 -0
  168. package/dist/runtime/display/utils/meter.js +13 -0
  169. package/dist/runtime/display/utils/registry.d.ts +47 -0
  170. package/dist/runtime/display/utils/registry.js +64 -0
  171. package/dist/runtime/display/utils/tone-css.d.ts +7 -0
  172. package/dist/runtime/display/utils/tone-css.js +38 -0
  173. package/dist/runtime/display/utils/tone.d.ts +26 -0
  174. package/dist/runtime/display/utils/tone.js +38 -0
  175. package/dist/runtime/display/utils/urls.d.ts +10 -0
  176. package/dist/runtime/display/utils/urls.js +33 -0
  177. package/dist/runtime/file-preview/components/shell/file-preview-stage.vue +5 -3
  178. package/dist/runtime/file-preview/composables/use-file-preview-source.d.ts +7 -0
  179. package/dist/runtime/file-preview/composables/use-file-preview-source.js +7 -1
  180. package/dist/runtime/file-preview/index.d.ts +1 -0
  181. package/dist/runtime/file-preview/index.js +1 -0
  182. package/dist/runtime/file-preview/types/file.d.ts +9 -0
  183. package/dist/runtime/file-preview/utils/errors.d.ts +30 -0
  184. package/dist/runtime/file-preview/utils/errors.js +26 -0
  185. package/dist/runtime/form/components/utils/form-file-preview.vue +7 -2
  186. package/dist/runtime/form/composables/use-form-root.js +2 -0
  187. package/dist/runtime/form/composables/use-form-runtime.js +7 -2
  188. package/dist/runtime/form/fields/index.d.ts +5 -0
  189. package/dist/runtime/form/fields/info/component.vue +51 -19
  190. package/dist/runtime/form/fields/info/config.d.ts +5 -0
  191. package/dist/runtime/form/fields/info/config.js +2 -1
  192. package/dist/runtime/form/fields/info/types.d.ts +78 -4
  193. package/dist/runtime/form/fields/info/use-info-display.d.ts +20 -0
  194. package/dist/runtime/form/fields/info/use-info-display.js +82 -0
  195. package/dist/runtime/form/fields/upload/upload-item.vue +10 -2
  196. package/dist/runtime/form/types/api.d.ts +6 -0
  197. package/dist/runtime/form/types/runtime.d.ts +2 -0
  198. package/dist/runtime/form/utils/dynamic.d.ts +6 -0
  199. package/dist/runtime/form/utils/dynamic.js +7 -0
  200. package/dist/runtime/i18n/locales/en.js +32 -0
  201. package/dist/runtime/i18n/locales/fr.js +32 -0
  202. package/dist/runtime/i18n/types.d.ts +40 -0
  203. package/dist/runtime/shared/styles/tokens.css +1 -1
  204. package/dist/runtime/shared/utils/file.d.ts +1 -1
  205. package/dist/runtime/table/components/data-list/data-list-root.vue +2 -0
  206. package/dist/runtime/table/components/data-list/data-list-selection-actions.d.vue.ts +1 -1
  207. package/dist/runtime/table/components/data-list/data-list-selection-actions.vue +32 -5
  208. package/dist/runtime/table/components/data-list/data-list-selection-actions.vue.d.ts +1 -1
  209. package/dist/runtime/table/components/data-list/data-list-selection-sheet.d.vue.ts +10 -0
  210. package/dist/runtime/table/components/data-list/data-list-selection-sheet.vue +238 -0
  211. package/dist/runtime/table/components/data-list/data-list-selection-sheet.vue.d.ts +10 -0
  212. package/dist/runtime/table/components/grid/grid-renderer.vue +2 -0
  213. package/dist/runtime/table/components/summary/summary-renderer.vue +2 -0
  214. package/dist/runtime/table/components/table/table-renderer.vue +2 -0
  215. package/dist/runtime/table/components/utils/overlay-inset-spacer.d.vue.ts +3 -0
  216. package/dist/runtime/table/components/utils/overlay-inset-spacer.vue +13 -0
  217. package/dist/runtime/table/components/utils/overlay-inset-spacer.vue.d.ts +3 -0
  218. package/dist/runtime/table/composables/use-data-list-overlay-inset.d.ts +10 -0
  219. package/dist/runtime/table/composables/use-data-list-overlay-inset.js +11 -0
  220. package/dist/runtime/table/composables/use-table-actions.js +11 -2
  221. package/dist/runtime/table/constants/mobile.d.ts +0 -7
  222. package/dist/runtime/table/constants/mobile.js +0 -1
  223. package/dist/runtime/table/types/actions.d.ts +7 -0
  224. package/dist/runtime/table/types/data-list.d.ts +8 -1
  225. package/dist/runtime/table/utils/data-list-ui.d.ts +1 -1
  226. package/package.json +16 -1
package/dist/module.d.mts CHANGED
@@ -1,6 +1,7 @@
1
1
  import * as _nuxt_schema from '@nuxt/schema';
2
2
  import { ModuleOptions as ModuleOptions$1 } from 'nuxt-viewport';
3
3
  import { DashboardUiConfig } from '../dist/runtime/dashboard/types/index.js';
4
+ import { DisplayUiConfig } from '../dist/runtime/display/types/index.js';
4
5
  import { FormUiConfig } from '../dist/runtime/form/types/index.js';
5
6
  import { DataListUiConfig } from '../dist/runtime/table/types/index.js';
6
7
 
@@ -12,6 +13,7 @@ declare module '@nuxt/schema' {
12
13
  nuxtUiTools?: {
13
14
  dashboard?: DashboardUiConfig;
14
15
  dataList?: DataListUiConfig;
16
+ display?: DisplayUiConfig;
15
17
  form?: FormUiConfig;
16
18
  };
17
19
  }
@@ -19,6 +21,7 @@ declare module '@nuxt/schema' {
19
21
  nuxtUiTools?: {
20
22
  dashboard?: DashboardUiConfig;
21
23
  dataList?: DataListUiConfig;
24
+ display?: DisplayUiConfig;
22
25
  form?: FormUiConfig;
23
26
  };
24
27
  }
package/dist/module.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "configKey": "nuxtUiTools",
6
6
  "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
7
7
  "name": "nuxt-ui-tools",
8
- "version": "1.23.0",
8
+ "version": "1.25.0",
9
9
  "builder": {
10
10
  "@nuxt/module-builder": "1.0.3",
11
11
  "unbuild": "unknown"
package/dist/module.mjs CHANGED
@@ -120,6 +120,12 @@ function getPublicComponents(runtimeDir, options) {
120
120
  global: options.global,
121
121
  name: `${prefix}Dashboard${part}`
122
122
  })),
123
+ // Display
124
+ {
125
+ filePath: `${runtimeDir}/display/components/display.vue`,
126
+ global: options.global,
127
+ name: `${prefix}Display`
128
+ },
123
129
  // File preview
124
130
  {
125
131
  filePath: `${runtimeDir}/file-preview/components/provider/file-preview-provider.vue`,
@@ -417,6 +423,7 @@ const viewportDefaults = {
417
423
  };
418
424
  const publicRuntimeDomains = [
419
425
  "dashboard",
426
+ "display",
420
427
  "file-preview",
421
428
  "form",
422
429
  "i18n",
@@ -490,6 +497,7 @@ const module$1 = defineNuxtModule({
490
497
  addPlugin(resolve("./runtime/query-prefetch/plugins/link-prefetch.client"));
491
498
  addPlugin(resolve("./runtime/form/plugins/form-api"));
492
499
  addPlugin(resolve("./runtime/file-preview/plugins/file-preview-api"));
500
+ addPlugin(resolve("./runtime/display/plugins/display-tones"));
493
501
  addVitePlugin({
494
502
  enforce: "pre",
495
503
  name: "nuxt-ui-tools:query-prefetch-macro",
@@ -0,0 +1,4 @@
1
+ import type { DisplayAccordionProps } from '../../types/index.js';
2
+ 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>;
3
+ declare const _default: typeof __VLS_export;
4
+ export default _default;
@@ -0,0 +1,93 @@
1
+ <script setup>
2
+ import UIcon from "@nuxt/ui/components/Icon.vue";
3
+ import { computed, defineAsyncComponent, ref, useId } from "vue";
4
+ import { useDisplayAppUi } from "../../composables/use-display-config";
5
+ import { useDisplayIcons } from "../../composables/use-display-icons";
6
+ import { resolveDisplayClasses } from "../../utils/classes";
7
+ import DisplayRender from "../parts/display-render";
8
+ import DisplaySkeleton from "../parts/display-skeleton.vue";
9
+ const {
10
+ variant = "separated",
11
+ items,
12
+ multiple = false,
13
+ loading = false,
14
+ ui = void 0
15
+ } = defineProps({
16
+ variant: { type: String, required: false },
17
+ items: { type: Array, required: true },
18
+ multiple: { type: Boolean, required: false },
19
+ loading: { type: Boolean, required: false },
20
+ ui: { type: Object, required: false }
21
+ });
22
+ const DisplayBlock = defineAsyncComponent(() => import("../display.vue"));
23
+ const id = useId();
24
+ const icons = useDisplayIcons();
25
+ const appUi = useDisplayAppUi("accordion");
26
+ const open = ref(
27
+ items.flatMap((item, index) => item.defaultOpen ? [index] : []).slice(0, multiple ? void 0 : 1)
28
+ );
29
+ const classes = computed(
30
+ () => resolveDisplayClasses(
31
+ {
32
+ chevron: "size-4 shrink-0 text-muted transition-transform duration-200",
33
+ content: variant === "flush" ? "pb-3 text-sm text-toned" : "px-3 pb-3 text-sm text-toned",
34
+ icon: "size-4 shrink-0 text-muted",
35
+ item: variant === "flush" ? "" : "overflow-hidden rounded-[var(--nut-display-radius)] border border-default",
36
+ label: "min-w-0 flex-1",
37
+ 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",
38
+ 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"}`
39
+ },
40
+ appUi.value,
41
+ ui
42
+ )
43
+ );
44
+ function toggle(index) {
45
+ const isOpen = open.value.includes(index);
46
+ if (multiple)
47
+ open.value = isOpen ? open.value.filter((entry) => entry !== index) : [...open.value, index];
48
+ else open.value = isOpen ? [] : [index];
49
+ }
50
+ </script>
51
+
52
+ <template>
53
+ <DisplaySkeleton v-if="loading" layout="rows" :count="Math.max(items.length, 2)" />
54
+ <div v-else :class="classes.root" data-display="accordion" :data-variant="variant">
55
+ <div
56
+ v-for="(item, index) in items"
57
+ :key="index"
58
+ :class="classes.item"
59
+ :data-state="open.includes(index) ? 'open' : 'closed'"
60
+ >
61
+ <button
62
+ :id="`${id}-trigger-${index}`"
63
+ type="button"
64
+ :class="classes.trigger"
65
+ :aria-expanded="open.includes(index)"
66
+ :aria-controls="`${id}-panel-${index}`"
67
+ @click="toggle(index)"
68
+ >
69
+ <UIcon v-if="item.icon" :name="item.icon" :class="classes.icon" />
70
+ <span :class="classes.label"><DisplayRender :content="item.label" /></span>
71
+ <UIcon
72
+ :name="icons.chevronDown"
73
+ :class="[classes.chevron, open.includes(index) ? 'rotate-180' : '']"
74
+ />
75
+ </button>
76
+ <div
77
+ v-if="open.includes(index)"
78
+ :id="`${id}-panel-${index}`"
79
+ role="region"
80
+ :aria-labelledby="`${id}-trigger-${index}`"
81
+ :class="classes.content"
82
+ >
83
+ <DisplayBlock
84
+ v-if="item.block"
85
+ :display="item.block.display"
86
+ :props="item.block.props"
87
+ :preset="item.block.preset"
88
+ />
89
+ <DisplayRender v-else :content="item.content" />
90
+ </div>
91
+ </div>
92
+ </div>
93
+ </template>
@@ -0,0 +1,4 @@
1
+ import type { DisplayAccordionProps } from '../../types/index.js';
2
+ 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>;
3
+ declare const _default: typeof __VLS_export;
4
+ export default _default;
@@ -0,0 +1,4 @@
1
+ import type { DisplayAlertProps } from '../../types/index.js';
2
+ 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>;
3
+ declare const _default: typeof __VLS_export;
4
+ export default _default;
@@ -0,0 +1,133 @@
1
+ <script setup>
2
+ import UIcon from "@nuxt/ui/components/Icon.vue";
3
+ import { computed, ref } from "vue";
4
+ import { useDisplayAppUi } from "../../composables/use-display-config";
5
+ import { toneIcon, useDisplayIcons } from "../../composables/use-display-icons";
6
+ import { useDisplayLocale } from "../../composables/use-display-locale";
7
+ import { resolveDisplayClasses } from "../../utils/classes";
8
+ import { isDisplayContentEmpty } from "../../utils/content";
9
+ import { displayToneClass } from "../../utils/tone";
10
+ import DisplayActions from "../parts/display-actions.vue";
11
+ import DisplayRender from "../parts/display-render";
12
+ import DisplaySkeleton from "../parts/display-skeleton.vue";
13
+ const {
14
+ tone = "info",
15
+ appearance = "soft",
16
+ icon = void 0,
17
+ title = void 0,
18
+ message = void 0,
19
+ items = void 0,
20
+ list = void 0,
21
+ details = void 0,
22
+ defaultOpen = false,
23
+ actions = void 0,
24
+ loading = false,
25
+ ui = void 0
26
+ } = defineProps({
27
+ tone: { type: String, required: false },
28
+ appearance: { type: String, required: false },
29
+ icon: { type: [String, Boolean], required: false },
30
+ title: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
31
+ message: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
32
+ items: { type: Array, required: false },
33
+ list: { type: Array, required: false },
34
+ details: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
35
+ defaultOpen: { type: Boolean, required: false },
36
+ actions: { type: Array, required: false },
37
+ loading: { type: Boolean, required: false },
38
+ ui: { type: Object, required: false }
39
+ });
40
+ const BOX = "flex items-start gap-2.5 rounded-[var(--nut-display-radius)] px-3.5 py-3 text-sm";
41
+ const ROOT_CLASSES = {
42
+ 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",
43
+ 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",
44
+ inline: "flex items-start gap-2 text-sm text-toned",
45
+ outline: `${BOX} border border-[var(--nut-tone-line)] text-[var(--nut-tone-ink)]`,
46
+ soft: `${BOX} bg-[var(--nut-tone-soft)] text-[var(--nut-tone-ink)]`,
47
+ solid: `${BOX} bg-[var(--nut-tone)] text-[var(--nut-tone-contrast)]`,
48
+ subtle: `${BOX} border border-[var(--nut-tone-line)] bg-[var(--nut-tone-soft)] text-[var(--nut-tone-ink)]`
49
+ };
50
+ const { t } = useDisplayLocale();
51
+ const icons = useDisplayIcons();
52
+ const appUi = useDisplayAppUi("alert");
53
+ const open = ref(defaultOpen);
54
+ const resolvedIcon = computed(
55
+ () => icon === false ? void 0 : icon ?? toneIcon(icons.value, tone)
56
+ );
57
+ const plain = computed(() => ["banner", "callout", "inline"].includes(appearance));
58
+ const titled = computed(() => !isDisplayContentEmpty(title));
59
+ const classes = computed(
60
+ () => resolveDisplayClasses(
61
+ {
62
+ actions: appearance === "banner" ? "ms-auto flex flex-wrap gap-2" : "mt-2.5 flex flex-wrap gap-2",
63
+ body: "min-w-0 flex-1",
64
+ details: "mt-1.5 text-xs opacity-90",
65
+ 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)]" : ""}`,
66
+ item: "flex items-start gap-2",
67
+ itemIcon: "mt-0.5 size-3.5 shrink-0",
68
+ items: "mt-1.5 flex flex-col gap-1",
69
+ list: "mt-1 list-disc ps-4.5 marker:opacity-60",
70
+ message: appearance === "banner" ? "mt-0.5 text-muted" : titled.value ? "mt-0.5 opacity-90" : "",
71
+ root: ROOT_CLASSES[appearance],
72
+ title: appearance === "banner" ? "font-semibold text-highlighted" : "font-semibold",
73
+ toggle: "mt-1.5 inline-flex cursor-pointer items-center gap-1 text-xs font-semibold underline underline-offset-2"
74
+ },
75
+ appUi.value,
76
+ ui
77
+ )
78
+ );
79
+ </script>
80
+
81
+ <template>
82
+ <DisplaySkeleton v-if="loading" layout="block" />
83
+ <div
84
+ v-else
85
+ :class="[classes.root, displayToneClass(tone)]"
86
+ :role="tone === 'error' || tone === 'warning' ? 'status' : void 0"
87
+ :data-tone="tone"
88
+ :data-appearance="appearance"
89
+ data-display="alert"
90
+ >
91
+ <span v-if="resolvedIcon && appearance === 'banner'" :class="classes.icon">
92
+ <UIcon :name="resolvedIcon" class="size-4.5" />
93
+ </span>
94
+ <UIcon v-else-if="resolvedIcon" :name="resolvedIcon" :class="classes.icon" />
95
+ <div :class="classes.body">
96
+ <div v-if="titled" :class="classes.title"><DisplayRender :content="title" /></div>
97
+ <div v-if="!isDisplayContentEmpty(message)" :class="classes.message">
98
+ <DisplayRender :content="message" />
99
+ </div>
100
+ <div v-if="items?.length" :class="classes.items">
101
+ <div v-for="(item, index) in items" :key="index" :class="classes.item">
102
+ <UIcon :name="item.icon ?? resolvedIcon ?? icons.info" :class="classes.itemIcon" />
103
+ <span class="min-w-0"><DisplayRender :content="item.text" /></span>
104
+ </div>
105
+ </div>
106
+ <ul v-if="list?.length" :class="classes.list">
107
+ <li v-for="(content, index) in list" :key="index"><DisplayRender :content="content" /></li>
108
+ </ul>
109
+ <template v-if="!isDisplayContentEmpty(details)">
110
+ <button type="button" :class="classes.toggle" :aria-expanded="open" @click="open = !open">
111
+ {{ open ? t("display.hideDetails") : t("display.showDetails") }}
112
+ <UIcon
113
+ :name="icons.chevronDown"
114
+ class="size-3.5 transition-transform"
115
+ :class="open ? 'rotate-180' : ''"
116
+ />
117
+ </button>
118
+ <div v-if="open" :class="classes.details"><DisplayRender :content="details" /></div>
119
+ </template>
120
+ <DisplayActions
121
+ v-if="actions?.length && appearance !== 'banner'"
122
+ :actions="actions"
123
+ size="xs"
124
+ :class="classes.actions"
125
+ />
126
+ </div>
127
+ <DisplayActions
128
+ v-if="actions?.length && appearance === 'banner'"
129
+ :actions="actions"
130
+ :class="classes.actions"
131
+ />
132
+ </div>
133
+ </template>
@@ -0,0 +1,4 @@
1
+ import type { DisplayAlertProps } from '../../types/index.js';
2
+ 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>;
3
+ declare const _default: typeof __VLS_export;
4
+ export default _default;
@@ -0,0 +1,4 @@
1
+ import type { DisplayBreakdownProps } from '../../types/index.js';
2
+ 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>;
3
+ declare const _default: typeof __VLS_export;
4
+ export default _default;
@@ -0,0 +1,178 @@
1
+ <script setup>
2
+ import UIcon from "@nuxt/ui/components/Icon.vue";
3
+ import { twMerge } from "tailwind-merge";
4
+ import { computed, ref } from "vue";
5
+ import { useDisplayAppUi } from "../../composables/use-display-config";
6
+ import { useDisplayIcons } from "../../composables/use-display-icons";
7
+ import { useDisplayLocale } from "../../composables/use-display-locale";
8
+ import { resolveDisplayClasses } from "../../utils/classes";
9
+ import { isDisplayContentEmpty } from "../../utils/content";
10
+ import { DISPLAY_SURFACE_CLASSES, displayToneClass } from "../../utils/tone";
11
+ import DisplayChip from "../parts/display-chip.vue";
12
+ import DisplayRender from "../parts/display-render";
13
+ import DisplaySkeleton from "../parts/display-skeleton.vue";
14
+ const {
15
+ mode = "open",
16
+ title = void 0,
17
+ lines,
18
+ total = void 0,
19
+ columns = void 0,
20
+ footnote = void 0,
21
+ defaultOpen = false,
22
+ surface = "bordered",
23
+ loading = false,
24
+ ui = void 0
25
+ } = defineProps({
26
+ mode: { type: String, required: false },
27
+ title: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
28
+ lines: { type: Array, required: true },
29
+ total: { type: Object, required: false },
30
+ columns: { type: Array, required: false },
31
+ footnote: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
32
+ defaultOpen: { type: Boolean, required: false },
33
+ surface: { type: String, required: false },
34
+ loading: { type: Boolean, required: false },
35
+ ui: { type: Object, required: false }
36
+ });
37
+ const { t } = useDisplayLocale();
38
+ const icons = useDisplayIcons();
39
+ const appUi = useDisplayAppUi("breakdown");
40
+ const open = ref(defaultOpen);
41
+ const boxed = computed(() => surface !== "plain");
42
+ const classes = computed(
43
+ () => resolveDisplayClasses(
44
+ {
45
+ body: "mx-2 mb-2 rounded-[calc(var(--nut-display-radius)*0.75)] bg-elevated px-3 py-1",
46
+ detail: "ms-1.5 text-xs text-dimmed tabular-nums",
47
+ footnote: "mt-1.5 text-xs text-dimmed",
48
+ header: "bg-elevated",
49
+ headerCell: "px-4 py-2 text-end text-[11px] font-bold tracking-[0.07em] text-muted uppercase first:text-start",
50
+ label: "min-w-0 text-toned",
51
+ line: "flex flex-wrap items-baseline justify-between gap-x-3 gap-y-0.5 py-1.5",
52
+ root: `min-w-0 text-sm ${DISPLAY_SURFACE_CLASSES[surface]} ${boxed.value && mode === "open" ? "px-4 pt-1" : ""}`,
53
+ title: "pt-2 pb-1 text-[11px] font-bold tracking-[0.07em] text-muted uppercase",
54
+ toggle: "inline-flex cursor-pointer items-center gap-1 text-xs font-semibold text-primary",
55
+ 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",
56
+ totalLabel: "flex items-center gap-2 font-bold text-highlighted",
57
+ totalValue: "text-lg font-extrabold whitespace-nowrap text-highlighted tabular-nums",
58
+ value: "ms-auto shrink-0 whitespace-nowrap text-default tabular-nums"
59
+ },
60
+ appUi.value,
61
+ ui
62
+ )
63
+ );
64
+ function lineClass(line) {
65
+ return [
66
+ classes.value.line,
67
+ line.subtotal ? "mt-1 border-t border-muted pt-2 font-semibold" : "",
68
+ line.muted ? "opacity-55" : ""
69
+ ];
70
+ }
71
+ function valueClass(line) {
72
+ return twMerge(
73
+ classes.value.value,
74
+ line.subtotal ? "text-highlighted" : "",
75
+ line.tone ? `${displayToneClass(line.tone)} text-[var(--nut-tone-ink)]` : ""
76
+ );
77
+ }
78
+ </script>
79
+
80
+ <template>
81
+ <DisplaySkeleton
82
+ v-if="loading"
83
+ layout="rows"
84
+ :count="Math.min(Math.max(lines.length + 1, 3), 6)"
85
+ />
86
+ <div v-else data-display="breakdown" :data-mode="mode">
87
+ <div v-if="mode === 'compare'" :class="[classes.root, 'overflow-hidden']">
88
+ <table class="w-full border-collapse">
89
+ <thead :class="classes.header">
90
+ <tr>
91
+ <th :class="classes.headerCell"><DisplayRender :content="title" /></th>
92
+ <th v-for="(column, index) in columns ?? []" :key="index" :class="classes.headerCell">
93
+ <DisplayRender :content="column" />
94
+ </th>
95
+ </tr>
96
+ </thead>
97
+ <tbody>
98
+ <tr v-for="(line, index) in lines" :key="index" class="border-t border-muted">
99
+ <td :class="['px-4 py-2', classes.label]"><DisplayRender :content="line.label" /></td>
100
+ <td
101
+ v-for="(cell, cellIndex) in line.values ?? []"
102
+ :key="cellIndex"
103
+ :class="['px-4 py-2 text-end', valueClass(line)]"
104
+ >
105
+ <DisplayRender :content="cell" />
106
+ </td>
107
+ </tr>
108
+ <tr v-if="total" class="border-t border-dashed border-accented">
109
+ <td :class="['px-4 py-2.5', classes.totalLabel]">
110
+ <DisplayRender :content="total.label" />
111
+ </td>
112
+ <td
113
+ v-for="(cell, cellIndex) in total.values ?? []"
114
+ :key="cellIndex"
115
+ :class="['px-4 py-2.5 text-end', classes.totalValue, 'text-base']"
116
+ >
117
+ <DisplayRender :content="cell" />
118
+ </td>
119
+ </tr>
120
+ </tbody>
121
+ </table>
122
+ </div>
123
+ <div v-else-if="mode === 'collapsible'" :class="classes.root">
124
+ <div :class="classes.total">
125
+ <span :class="classes.totalLabel">
126
+ <DisplayRender :content="total?.label ?? title" />
127
+ <DisplayChip v-if="total?.chip" :chip="total.chip" />
128
+ </span>
129
+ <button type="button" :class="classes.toggle" :aria-expanded="open" @click="open = !open">
130
+ {{ t("display.details") }}
131
+ <UIcon
132
+ :name="icons.chevronDown"
133
+ class="size-3.5 transition-transform"
134
+ :class="open ? 'rotate-180' : ''"
135
+ />
136
+ </button>
137
+ <span :class="['ms-auto', classes.totalValue]"
138
+ ><DisplayRender :content="total?.value"
139
+ /></span>
140
+ </div>
141
+ <div v-if="open" :class="classes.body">
142
+ <div v-for="(line, index) in lines" :key="index" :class="lineClass(line)">
143
+ <span :class="classes.label">
144
+ <DisplayRender :content="line.label" />
145
+ <span v-if="!isDisplayContentEmpty(line.detail)" :class="classes.detail"
146
+ ><DisplayRender :content="line.detail"
147
+ /></span>
148
+ </span>
149
+ <span :class="valueClass(line)"><DisplayRender :content="line.value" /></span>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ <div v-else :class="classes.root">
154
+ <div v-if="!isDisplayContentEmpty(title)" :class="classes.title">
155
+ <DisplayRender :content="title" />
156
+ </div>
157
+ <div v-for="(line, index) in lines" :key="index" :class="lineClass(line)">
158
+ <span :class="classes.label">
159
+ <DisplayRender :content="line.label" />
160
+ <span v-if="!isDisplayContentEmpty(line.detail)" :class="classes.detail"
161
+ ><DisplayRender :content="line.detail"
162
+ /></span>
163
+ </span>
164
+ <span :class="valueClass(line)"><DisplayRender :content="line.value" /></span>
165
+ </div>
166
+ <div v-if="total" :class="classes.total">
167
+ <span :class="classes.totalLabel">
168
+ <DisplayRender :content="total.label" />
169
+ <DisplayChip v-if="total.chip" :chip="total.chip" />
170
+ </span>
171
+ <span :class="classes.totalValue"><DisplayRender :content="total.value" /></span>
172
+ </div>
173
+ </div>
174
+ <p v-if="!isDisplayContentEmpty(footnote)" :class="classes.footnote">
175
+ <DisplayRender :content="footnote" />
176
+ </p>
177
+ </div>
178
+ </template>
@@ -0,0 +1,4 @@
1
+ import type { DisplayBreakdownProps } from '../../types/index.js';
2
+ 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>;
3
+ declare const _default: typeof __VLS_export;
4
+ export default _default;
@@ -0,0 +1,4 @@
1
+ import type { DisplayChartProps } from '../../types/index.js';
2
+ 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>;
3
+ declare const _default: typeof __VLS_export;
4
+ export default _default;