@conduction/nextcloud-vue 2.104.0 → 2.106.0

package/dist/esm/components/CnRecordListWidget/CnRecordListWidget.vue3.js

@@ -1,4 +1,4 @@
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, toDisplayString, createVNode, createElementVNode, Fragment, renderList, createCommentVNode, createBlock, resolveDynamicComponent, mergeProps, withCtx, createTextVNode, toHandlers, normalizeStyle, createSlots } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, toDisplayString, createVNode, createElementVNode, Fragment, renderList, createCommentVNode, normalizeStyle, createBlock, resolveDynamicComponent, mergeProps, withCtx, createTextVNode, toHandlers, createSlots } from 'vue';
 
 const _hoisted_1 = {
   key: 0,
@@ -17,104 +17,124 @@ const _hoisted_3 = {
 const _hoisted_4 = { class: "cn-record-list__notice-text" };
 const _hoisted_5 = {
   key: 4,
-  class: "cn-record-list__list"
+  class: "cn-record-list__table",
+  "data-testid": "cn-record-list-table"
 };
 const _hoisted_6 = {
+  key: 5,
+  class: "cn-record-list__list"
+};
+const _hoisted_7 = {
   key: 0,
   class: "cn-record-list__row cn-record-list__row--action"
 };
-const _hoisted_7 = {
+const _hoisted_8 = {
   key: 0,
   class: "cn-record-list__avatar",
   "aria-hidden": "true",
   "data-testid": "cn-record-list-avatar"
 };
-const _hoisted_8 = { class: "cn-record-list__main" };
-const _hoisted_9 = {
-  key: 1,
-  class: "cn-record-list__meta"
-};
+const _hoisted_9 = { class: "cn-record-list__main" };
 const _hoisted_10 = {
   key: 1,
-  class: "cn-record-list__pills"
+  class: "cn-record-list__meta"
 };
 const _hoisted_11 = {
+  key: 2,
+  class: "cn-record-list__flag",
+  "data-testid": "cn-record-list-flag"
+};
+const _hoisted_12 = {
   key: 3,
+  class: "cn-record-list__pills"
+};
+const _hoisted_13 = {
+  key: 5,
   class: "cn-record-list__trailing"
 };
-const _hoisted_12 = {
+const _hoisted_14 = {
   key: 0,
   class: "cn-record-list__avatar",
   "aria-hidden": "true",
   "data-testid": "cn-record-list-avatar"
 };
-const _hoisted_13 = { class: "cn-record-list__main" };
-const _hoisted_14 = {
+const _hoisted_15 = { class: "cn-record-list__main" };
+const _hoisted_16 = {
   key: 0,
   class: "cn-record-list__title"
 };
-const _hoisted_15 = {
+const _hoisted_17 = {
   key: 1,
   class: "cn-record-list__meta"
 };
-const _hoisted_16 = {
-  key: 1,
+const _hoisted_18 = {
+  key: 2,
   class: "cn-record-list__aside"
 };
-const _hoisted_17 = {
-  key: 2,
-  class: "cn-record-list__trailing"
+const _hoisted_19 = {
+  key: 0,
+  class: "cn-record-list__flag",
+  "data-testid": "cn-record-list-flag"
 };
-const _hoisted_18 = { class: "cn-record-list__card-head" };
-const _hoisted_19 = { class: "cn-record-list__card-title" };
 const _hoisted_20 = {
+  key: 3,
+  class: "cn-record-list__trailing"
+};
+const _hoisted_21 = { class: "cn-record-list__card-head" };
+const _hoisted_22 = { class: "cn-record-list__card-title" };
+const _hoisted_23 = {
   key: 1,
   class: "cn-record-list__title"
 };
-const _hoisted_21 = {
+const _hoisted_24 = {
   key: 0,
   class: "cn-record-list__card-pills"
 };
-const _hoisted_22 = {
+const _hoisted_25 = {
   key: 0,
   class: "cn-record-list__meta"
 };
-const _hoisted_23 = {
+const _hoisted_26 = {
   key: 1,
   class: "cn-record-list__card-value",
   "data-testid": "cn-record-list-card-value"
 };
-const _hoisted_24 = {
+const _hoisted_27 = {
   key: 3,
   class: "cn-record-list__feed-row"
 };
-const _hoisted_25 = {
+const _hoisted_28 = {
   class: "cn-record-list__feed-icon",
   "aria-hidden": "true"
 };
-const _hoisted_26 = {
+const _hoisted_29 = {
   key: 0,
   class: "cn-record-list__meta"
 };
-const _hoisted_27 = {
+const _hoisted_30 = {
   key: 1,
   class: "cn-record-list__text"
 };
-const _hoisted_28 = {
+const _hoisted_31 = {
   key: 4,
   class: "cn-record-list__inline-row"
 };
-const _hoisted_29 = {
+const _hoisted_32 = {
   key: 0,
   class: "cn-record-list__label"
 };
-const _hoisted_30 = ["aria-label", "aria-valuenow", "aria-valuemax"];
-const _hoisted_31 = {
-  key: 5,
+const _hoisted_33 = ["aria-label", "aria-valuenow", "aria-valuemax"];
+const _hoisted_34 = {
+  key: 6,
+  class: "cn-record-list__footnote",
+  "data-testid": "cn-record-list-footnote"
+};
+const _hoisted_35 = {
+  key: 7,
   class: "cn-record-list__footer",
   "data-testid": "cn-record-list-footer"
 };
-const _hoisted_32 = ["id"];
+const _hoisted_36 = ["id"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_NcLoadingIcon = resolveComponent("NcLoadingIcon");
@@ -153,235 +173,291 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 }, null, 8 /* PROPS */, ["name"]),
                 createElementVNode("p", _hoisted_4, toDisplayString($options.noticeText), 1 /* TEXT */)
               ], 2 /* CLASS */))
-            : (openBlock(), createElementBlock("ul", _hoisted_5, [
-                (openBlock(true), createElementBlock(Fragment, null, renderList($options.items, (item) => {
-                  return (openBlock(), createElementBlock("li", {
-                    key: item.key,
-                    class: "cn-record-list__item",
-                    "data-testid": "cn-record-list-item"
-                  }, [
-                    ($options.presentation === 'rows' && item.action)
-                      ? (openBlock(), createElementBlock("div", _hoisted_6, [
-                          (item.initials)
-                            ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(item.initials), 1 /* TEXT */))
-                            : createCommentVNode("v-if", true),
-                          createElementVNode("span", _hoisted_8, [
-                            (item.title)
-                              ? (openBlock(), createBlock(resolveDynamicComponent(item.tag), mergeProps({
-                                  key: 0,
-                                  class: ["cn-record-list__title", { 'cn-record-list__title--link': item.tag !== 'div' }]
-                                }, { ref_for: true }, item.attrs), {
-                                  default: withCtx(() => [
-                                    createTextVNode(toDisplayString(item.title), 1 /* TEXT */)
-                                  ]),
-                                  _: 2 /* DYNAMIC */
-                                }, 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["class"]))
+            : ($options.presentation === 'table')
+              ? (openBlock(), createElementBlock("table", _hoisted_5, [
+                  createElementVNode("thead", null, [
+                    createElementVNode("tr", null, [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList($options.tableColumns, (col) => {
+                        return (openBlock(), createElementBlock("th", {
+                          key: col.key,
+                          scope: "col",
+                          class: normalizeClass({ 'cn-record-list__cell--end': col.align === 'end' })
+                        }, toDisplayString(col.label), 3 /* TEXT, CLASS */))
+                      }), 128 /* KEYED_FRAGMENT */))
+                    ])
+                  ]),
+                  createElementVNode("tbody", null, [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList($options.tableRows, (item) => {
+                      return (openBlock(), createElementBlock("tr", {
+                        key: item.key,
+                        "data-testid": "cn-record-list-item"
+                      }, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(item.cells, (cell) => {
+                          return (openBlock(), createElementBlock("td", {
+                            key: cell.key,
+                            class: normalizeClass({ 'cn-record-list__cell--end': cell.align === 'end', 'cn-record-list__cell--alert': cell.alert })
+                          }, toDisplayString(cell.text), 3 /* TEXT, CLASS */))
+                        }), 128 /* KEYED_FRAGMENT */))
+                      ]))
+                    }), 128 /* KEYED_FRAGMENT */))
+                  ])
+                ]))
+              : (openBlock(), createElementBlock("ul", _hoisted_6, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList($options.items, (item) => {
+                    return (openBlock(), createElementBlock("li", {
+                      key: item.key,
+                      class: "cn-record-list__item",
+                      "data-testid": "cn-record-list-item"
+                    }, [
+                      ($options.presentation === 'rows' && item.action)
+                        ? (openBlock(), createElementBlock("div", _hoisted_7, [
+                            (item.initials)
+                              ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(item.initials), 1 /* TEXT */))
                               : createCommentVNode("v-if", true),
-                            (item.meta)
-                              ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(item.meta), 1 /* TEXT */))
-                              : createCommentVNode("v-if", true)
-                          ]),
-                          (item.pill || item.badges.length > 0)
-                            ? (openBlock(), createElementBlock("span", _hoisted_10, [
-                                (item.pill)
-                                  ? (openBlock(), createBlock(_component_CnStatusBadge, {
-                                      key: 0,
-                                      label: item.pill.label,
-                                      variant: item.pill.variant,
-                                      size: "small"
-                                    }, null, 8 /* PROPS */, ["label", "variant"]))
-                                  : createCommentVNode("v-if", true),
-                                (openBlock(true), createElementBlock(Fragment, null, renderList(item.badges, (badge) => {
-                                  return (openBlock(), createBlock(_component_CnStatusBadge, {
-                                    key: badge.key,
-                                    label: badge.label,
-                                    variant: badge.variant,
-                                    size: "small",
-                                    "data-testid": `cn-record-list-badge-${badge.kind}`
-                                  }, null, 8 /* PROPS */, ["label", "variant", "data-testid"]))
-                                }), 128 /* KEYED_FRAGMENT */))
-                              ]))
-                            : createCommentVNode("v-if", true),
-                          (item.due)
-                            ? (openBlock(), createElementBlock("span", {
-                                key: 2,
-                                class: normalizeClass(["cn-record-list__due cn-record-list__due--column", `cn-record-list__due--${item.due.tone}`]),
-                                "data-testid": "cn-record-list-due"
-                              }, toDisplayString(item.due.text), 3 /* TEXT, CLASS */))
-                            : createCommentVNode("v-if", true),
-                          (item.trailing)
-                            ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(item.trailing), 1 /* TEXT */))
-                            : createCommentVNode("v-if", true),
-                          (openBlock(), createBlock(resolveDynamicComponent(item.action.tag), mergeProps({ class: "cn-record-list__action" }, { ref_for: true }, item.action.attrs, { "data-testid": "cn-record-list-action" }, toHandlers(item.action.tag === 'button' ? { click: () => $options.runRowAction(item.row) } : {})), {
-                            default: withCtx(() => [
-                              createTextVNode(toDisplayString(item.action.label), 1 /* TEXT */)
-                            ]),
-                            _: 2 /* DYNAMIC */
-                          }, 1040 /* FULL_PROPS, DYNAMIC_SLOTS */))
-                        ]))
-                      : ($options.presentation === 'rows')
-                        ? (openBlock(), createBlock(resolveDynamicComponent(item.tag), mergeProps({
-                            key: 1,
-                            class: ["cn-record-list__row", { 'cn-record-list__row--link': item.tag !== 'div' }]
-                          }, { ref_for: true }, item.attrs), {
-                            default: withCtx(() => [
-                              (item.initials)
-                                ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(item.initials), 1 /* TEXT */))
-                                : createCommentVNode("v-if", true),
-                              createElementVNode("span", _hoisted_13, [
-                                (item.title)
-                                  ? (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString(item.title), 1 /* TEXT */))
-                                  : createCommentVNode("v-if", true),
-                                (item.meta)
-                                  ? (openBlock(), createElementBlock("span", _hoisted_15, toDisplayString(item.meta), 1 /* TEXT */))
-                                  : createCommentVNode("v-if", true)
-                              ]),
-                              (item.pill || item.badges.length > 0 || item.due || item.trailing)
-                                ? (openBlock(), createElementBlock("span", _hoisted_16, [
-                                    (item.pill)
-                                      ? (openBlock(), createBlock(_component_CnStatusBadge, {
-                                          key: 0,
-                                          label: item.pill.label,
-                                          variant: item.pill.variant,
-                                          size: "small"
-                                        }, null, 8 /* PROPS */, ["label", "variant"]))
-                                      : createCommentVNode("v-if", true),
-                                    (openBlock(true), createElementBlock(Fragment, null, renderList(item.badges, (badge) => {
-                                      return (openBlock(), createBlock(_component_CnStatusBadge, {
-                                        key: badge.key,
-                                        label: badge.label,
-                                        variant: badge.variant,
-                                        size: "small",
-                                        "data-testid": `cn-record-list-badge-${badge.kind}`
-                                      }, null, 8 /* PROPS */, ["label", "variant", "data-testid"]))
-                                    }), 128 /* KEYED_FRAGMENT */)),
-                                    (item.due)
-                                      ? (openBlock(), createElementBlock("span", {
-                                          key: 1,
-                                          class: normalizeClass(["cn-record-list__due", `cn-record-list__due--${item.due.tone}`]),
-                                          "data-testid": "cn-record-list-due"
-                                        }, toDisplayString(item.due.text), 3 /* TEXT, CLASS */))
-                                      : createCommentVNode("v-if", true),
-                                    (item.trailing)
-                                      ? (openBlock(), createElementBlock("span", _hoisted_17, toDisplayString(item.trailing), 1 /* TEXT */))
-                                      : createCommentVNode("v-if", true)
-                                  ]))
+                            (item.dot)
+                              ? (openBlock(), createElementBlock("span", {
+                                  key: 1,
+                                  class: "cn-record-list__dot",
+                                  style: normalizeStyle({ background: item.dot }),
+                                  "aria-hidden": "true",
+                                  "data-testid": "cn-record-list-dot"
+                                }, null, 4 /* STYLE */))
+                              : createCommentVNode("v-if", true),
+                            createElementVNode("span", _hoisted_9, [
+                              (item.title)
+                                ? (openBlock(), createBlock(resolveDynamicComponent(item.tag), mergeProps({
+                                    key: 0,
+                                    class: ["cn-record-list__title", { 'cn-record-list__title--link': item.tag !== 'div' }]
+                                  }, { ref_for: true }, item.attrs), {
+                                    default: withCtx(() => [
+                                      createTextVNode(toDisplayString(item.title), 1 /* TEXT */)
+                                    ]),
+                                    _: 2 /* DYNAMIC */
+                                  }, 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["class"]))
                                 : createCommentVNode("v-if", true),
-                              (item.tag !== 'div')
-                                ? (openBlock(), createBlock(_component_ChevronRight, {
-                                    key: 2,
-                                    class: "cn-record-list__chevron",
-                                    size: 18,
-                                    "aria-hidden": "true"
-                                  }))
+                              (item.meta)
+                                ? (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString(item.meta), 1 /* TEXT */))
                                 : createCommentVNode("v-if", true)
                             ]),
-                            _: 2 /* DYNAMIC */
-                          }, 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["class"]))
-                        : ($options.presentation === 'cards')
+                            (item.flag)
+                              ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(item.flag), 1 /* TEXT */))
+                              : createCommentVNode("v-if", true),
+                            (item.pill || item.badges.length > 0)
+                              ? (openBlock(), createElementBlock("span", _hoisted_12, [
+                                  (item.pill)
+                                    ? (openBlock(), createBlock(_component_CnStatusBadge, {
+                                        key: 0,
+                                        label: item.pill.label,
+                                        variant: item.pill.variant,
+                                        size: "small"
+                                      }, null, 8 /* PROPS */, ["label", "variant"]))
+                                    : createCommentVNode("v-if", true),
+                                  (openBlock(true), createElementBlock(Fragment, null, renderList(item.badges, (badge) => {
+                                    return (openBlock(), createBlock(_component_CnStatusBadge, {
+                                      key: badge.key,
+                                      label: badge.label,
+                                      variant: badge.variant,
+                                      size: "small",
+                                      "data-testid": `cn-record-list-badge-${badge.kind}`
+                                    }, null, 8 /* PROPS */, ["label", "variant", "data-testid"]))
+                                  }), 128 /* KEYED_FRAGMENT */))
+                                ]))
+                              : createCommentVNode("v-if", true),
+                            (item.due)
+                              ? (openBlock(), createElementBlock("span", {
+                                  key: 4,
+                                  class: normalizeClass(["cn-record-list__due cn-record-list__due--column", [`cn-record-list__due--${item.due.tone}`, { 'cn-record-list__due--soon': item.due.soon }]]),
+                                  "data-testid": "cn-record-list-due"
+                                }, toDisplayString(item.due.text), 3 /* TEXT, CLASS */))
+                              : createCommentVNode("v-if", true),
+                            (item.trailing)
+                              ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(item.trailing), 1 /* TEXT */))
+                              : createCommentVNode("v-if", true),
+                            (openBlock(), createBlock(resolveDynamicComponent(item.action.tag), mergeProps({ class: "cn-record-list__action" }, { ref_for: true }, item.action.attrs, { "data-testid": "cn-record-list-action" }, toHandlers(item.action.tag === 'button' ? { click: () => $options.runRowAction(item.row) } : {})), {
+                              default: withCtx(() => [
+                                createTextVNode(toDisplayString(item.action.label), 1 /* TEXT */)
+                              ]),
+                              _: 2 /* DYNAMIC */
+                            }, 1040 /* FULL_PROPS, DYNAMIC_SLOTS */))
+                          ]))
+                        : ($options.presentation === 'rows')
                           ? (openBlock(), createBlock(resolveDynamicComponent(item.tag), mergeProps({
-                              key: 2,
-                              class: ["cn-record-list__card", { 'cn-record-list__card--link': item.tag !== 'div' }]
-                            }, { ref_for: true }, item.attrs, { "data-testid": "cn-record-list-card" }), {
+                              key: 1,
+                              class: ["cn-record-list__row", { 'cn-record-list__row--link': item.tag !== 'div' }]
+                            }, { ref_for: true }, item.attrs), {
                               default: withCtx(() => [
-                                createElementVNode("span", _hoisted_18, [
-                                  createElementVNode("span", _hoisted_19, [
-                                    ($options.cardIcons)
-                                      ? (openBlock(), createBlock(_component_CnIcon, {
-                                          key: 0,
-                                          class: "cn-record-list__card-icon",
-                                          name: item.icon,
-                                          size: 18
-                                        }, null, 8 /* PROPS */, ["name"]))
-                                      : createCommentVNode("v-if", true),
-                                    (item.title)
-                                      ? (openBlock(), createElementBlock("span", _hoisted_20, toDisplayString(item.title), 1 /* TEXT */))
-                                      : createCommentVNode("v-if", true)
-                                  ]),
-                                  (item.pill || item.badges.length > 0)
-                                    ? (openBlock(), createElementBlock("span", _hoisted_21, [
-                                        (item.pill)
-                                          ? (openBlock(), createBlock(_component_CnStatusBadge, {
-                                              key: 0,
-                                              label: item.pill.label,
-                                              variant: item.pill.variant,
-                                              size: "small"
-                                            }, null, 8 /* PROPS */, ["label", "variant"]))
-                                          : createCommentVNode("v-if", true),
-                                        (openBlock(true), createElementBlock(Fragment, null, renderList(item.badges, (badge) => {
-                                          return (openBlock(), createBlock(_component_CnStatusBadge, {
-                                            key: badge.key,
-                                            label: badge.label,
-                                            variant: badge.variant,
-                                            size: "small",
-                                            "data-testid": `cn-record-list-badge-${badge.kind}`
-                                          }, null, 8 /* PROPS */, ["label", "variant", "data-testid"]))
-                                        }), 128 /* KEYED_FRAGMENT */))
-                                      ]))
+                                (item.initials)
+                                  ? (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString(item.initials), 1 /* TEXT */))
+                                  : createCommentVNode("v-if", true),
+                                (item.dot)
+                                  ? (openBlock(), createElementBlock("span", {
+                                      key: 1,
+                                      class: "cn-record-list__dot",
+                                      style: normalizeStyle({ background: item.dot }),
+                                      "aria-hidden": "true",
+                                      "data-testid": "cn-record-list-dot"
+                                    }, null, 4 /* STYLE */))
+                                  : createCommentVNode("v-if", true),
+                                createElementVNode("span", _hoisted_15, [
+                                  (item.title)
+                                    ? (openBlock(), createElementBlock("span", _hoisted_16, toDisplayString(item.title), 1 /* TEXT */))
+                                    : createCommentVNode("v-if", true),
+                                  (item.meta)
+                                    ? (openBlock(), createElementBlock("span", _hoisted_17, toDisplayString(item.meta), 1 /* TEXT */))
                                     : createCommentVNode("v-if", true)
                                 ]),
-                                (item.meta)
-                                  ? (openBlock(), createElementBlock("span", _hoisted_22, toDisplayString(item.meta), 1 /* TEXT */))
+                                (item.pill || item.badges.length > 0 || item.due || item.trailing || item.flag)
+                                  ? (openBlock(), createElementBlock("span", _hoisted_18, [
+                                      (item.flag)
+                                        ? (openBlock(), createElementBlock("span", _hoisted_19, toDisplayString(item.flag), 1 /* TEXT */))
+                                        : createCommentVNode("v-if", true),
+                                      (item.pill)
+                                        ? (openBlock(), createBlock(_component_CnStatusBadge, {
+                                            key: 1,
+                                            label: item.pill.label,
+                                            variant: item.pill.variant,
+                                            size: "small"
+                                          }, null, 8 /* PROPS */, ["label", "variant"]))
+                                        : createCommentVNode("v-if", true),
+                                      (openBlock(true), createElementBlock(Fragment, null, renderList(item.badges, (badge) => {
+                                        return (openBlock(), createBlock(_component_CnStatusBadge, {
+                                          key: badge.key,
+                                          label: badge.label,
+                                          variant: badge.variant,
+                                          size: "small",
+                                          "data-testid": `cn-record-list-badge-${badge.kind}`
+                                        }, null, 8 /* PROPS */, ["label", "variant", "data-testid"]))
+                                      }), 128 /* KEYED_FRAGMENT */)),
+                                      (item.due)
+                                        ? (openBlock(), createElementBlock("span", {
+                                            key: 2,
+                                            class: normalizeClass(["cn-record-list__due", [`cn-record-list__due--${item.due.tone}`, { 'cn-record-list__due--soon': item.due.soon }]]),
+                                            "data-testid": "cn-record-list-due"
+                                          }, toDisplayString(item.due.text), 3 /* TEXT, CLASS */))
+                                        : createCommentVNode("v-if", true),
+                                      (item.trailing)
+                                        ? (openBlock(), createElementBlock("span", _hoisted_20, toDisplayString(item.trailing), 1 /* TEXT */))
+                                        : createCommentVNode("v-if", true)
+                                    ]))
                                   : createCommentVNode("v-if", true),
-                                (item.trailing)
-                                  ? (openBlock(), createElementBlock("span", _hoisted_23, toDisplayString(item.trailing), 1 /* TEXT */))
+                                (item.tag !== 'div')
+                                  ? (openBlock(), createBlock(_component_ChevronRight, {
+                                      key: 3,
+                                      class: "cn-record-list__chevron",
+                                      size: 18,
+                                      "aria-hidden": "true"
+                                    }))
                                   : createCommentVNode("v-if", true)
                               ]),
                               _: 2 /* DYNAMIC */
                             }, 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["class"]))
-                          : ($options.presentation === 'feed')
-                            ? (openBlock(), createElementBlock("div", _hoisted_24, [
-                                createElementVNode("span", _hoisted_25, [
-                                  createVNode(_component_CnIcon, {
-                                    name: item.icon,
-                                    size: 18
-                                  }, null, 8 /* PROPS */, ["name"])
-                                ]),
-                                (openBlock(), createBlock(resolveDynamicComponent(item.tag), mergeProps({ class: "cn-record-list__main" }, { ref_for: true }, item.attrs), {
-                                  default: withCtx(() => [
-                                    (item.meta)
-                                      ? (openBlock(), createElementBlock("span", _hoisted_26, toDisplayString(item.meta), 1 /* TEXT */))
-                                      : createCommentVNode("v-if", true),
-                                    (item.text)
-                                      ? (openBlock(), createElementBlock("span", _hoisted_27, toDisplayString(item.text), 1 /* TEXT */))
+                          : ($options.presentation === 'cards')
+                            ? (openBlock(), createBlock(resolveDynamicComponent(item.tag), mergeProps({
+                                key: 2,
+                                class: ["cn-record-list__card", { 'cn-record-list__card--link': item.tag !== 'div' }]
+                              }, { ref_for: true }, item.attrs, { "data-testid": "cn-record-list-card" }), {
+                                default: withCtx(() => [
+                                  createElementVNode("span", _hoisted_21, [
+                                    createElementVNode("span", _hoisted_22, [
+                                      ($options.cardIcons)
+                                        ? (openBlock(), createBlock(_component_CnIcon, {
+                                            key: 0,
+                                            class: "cn-record-list__card-icon",
+                                            name: item.icon,
+                                            size: 18
+                                          }, null, 8 /* PROPS */, ["name"]))
+                                        : createCommentVNode("v-if", true),
+                                      (item.title)
+                                        ? (openBlock(), createElementBlock("span", _hoisted_23, toDisplayString(item.title), 1 /* TEXT */))
+                                        : createCommentVNode("v-if", true)
+                                    ]),
+                                    (item.pill || item.badges.length > 0)
+                                      ? (openBlock(), createElementBlock("span", _hoisted_24, [
+                                          (item.pill)
+                                            ? (openBlock(), createBlock(_component_CnStatusBadge, {
+                                                key: 0,
+                                                label: item.pill.label,
+                                                variant: item.pill.variant,
+                                                size: "small"
+                                              }, null, 8 /* PROPS */, ["label", "variant"]))
+                                            : createCommentVNode("v-if", true),
+                                          (openBlock(true), createElementBlock(Fragment, null, renderList(item.badges, (badge) => {
+                                            return (openBlock(), createBlock(_component_CnStatusBadge, {
+                                              key: badge.key,
+                                              label: badge.label,
+                                              variant: badge.variant,
+                                              size: "small",
+                                              "data-testid": `cn-record-list-badge-${badge.kind}`
+                                            }, null, 8 /* PROPS */, ["label", "variant", "data-testid"]))
+                                          }), 128 /* KEYED_FRAGMENT */))
+                                        ]))
                                       : createCommentVNode("v-if", true)
                                   ]),
-                                  _: 2 /* DYNAMIC */
-                                }, 1040 /* FULL_PROPS, DYNAMIC_SLOTS */))
-                              ]))
-                            : (openBlock(), createElementBlock("div", _hoisted_28, [
-                                (item.label)
-                                  ? (openBlock(), createElementBlock("span", _hoisted_29, toDisplayString(item.label), 1 /* TEXT */))
-                                  : createCommentVNode("v-if", true),
-                                (openBlock(), createBlock(resolveDynamicComponent(item.tag), mergeProps({ class: "cn-record-list__inline-title" }, { ref_for: true }, item.attrs), {
-                                  default: withCtx(() => [
-                                    createTextVNode(toDisplayString(item.title), 1 /* TEXT */)
+                                  (item.meta)
+                                    ? (openBlock(), createElementBlock("span", _hoisted_25, toDisplayString(item.meta), 1 /* TEXT */))
+                                    : createCommentVNode("v-if", true),
+                                  (item.trailing)
+                                    ? (openBlock(), createElementBlock("span", _hoisted_26, toDisplayString(item.trailing), 1 /* TEXT */))
+                                    : createCommentVNode("v-if", true)
+                                ]),
+                                _: 2 /* DYNAMIC */
+                              }, 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["class"]))
+                            : ($options.presentation === 'feed')
+                              ? (openBlock(), createElementBlock("div", _hoisted_27, [
+                                  createElementVNode("span", _hoisted_28, [
+                                    createVNode(_component_CnIcon, {
+                                      name: item.icon,
+                                      size: 18
+                                    }, null, 8 /* PROPS */, ["name"])
                                   ]),
-                                  _: 2 /* DYNAMIC */
-                                }, 1040 /* FULL_PROPS, DYNAMIC_SLOTS */))
-                              ])),
-                    ($options.presentation === 'rows' && item.bar)
-                      ? (openBlock(), createElementBlock("span", {
-                          key: 5,
-                          class: normalizeClass(["cn-record-list__bar", { 'cn-record-list__bar--over': item.bar.over }]),
-                          role: "meter",
-                          "aria-label": item.title || null,
-                          "aria-valuenow": item.bar.value,
-                          "aria-valuemin": "0",
-                          "aria-valuemax": item.bar.max,
-                          "data-testid": "cn-record-list-bar"
-                        }, [
-                          createElementVNode("span", {
-                            class: "cn-record-list__bar-fill",
-                            style: normalizeStyle({ width: `${item.bar.share}%` })
-                          }, null, 4 /* STYLE */)
-                        ], 10 /* CLASS, PROPS */, _hoisted_30))
-                      : createCommentVNode("v-if", true)
-                  ]))
-                }), 128 /* KEYED_FRAGMENT */))
-              ])),
+                                  (openBlock(), createBlock(resolveDynamicComponent(item.tag), mergeProps({ class: "cn-record-list__main" }, { ref_for: true }, item.attrs), {
+                                    default: withCtx(() => [
+                                      (item.meta)
+                                        ? (openBlock(), createElementBlock("span", _hoisted_29, toDisplayString(item.meta), 1 /* TEXT */))
+                                        : createCommentVNode("v-if", true),
+                                      (item.text)
+                                        ? (openBlock(), createElementBlock("span", _hoisted_30, toDisplayString(item.text), 1 /* TEXT */))
+                                        : createCommentVNode("v-if", true)
+                                    ]),
+                                    _: 2 /* DYNAMIC */
+                                  }, 1040 /* FULL_PROPS, DYNAMIC_SLOTS */))
+                                ]))
+                              : (openBlock(), createElementBlock("div", _hoisted_31, [
+                                  (item.label)
+                                    ? (openBlock(), createElementBlock("span", _hoisted_32, toDisplayString(item.label), 1 /* TEXT */))
+                                    : createCommentVNode("v-if", true),
+                                  (openBlock(), createBlock(resolveDynamicComponent(item.tag), mergeProps({ class: "cn-record-list__inline-title" }, { ref_for: true }, item.attrs), {
+                                    default: withCtx(() => [
+                                      createTextVNode(toDisplayString(item.title), 1 /* TEXT */)
+                                    ]),
+                                    _: 2 /* DYNAMIC */
+                                  }, 1040 /* FULL_PROPS, DYNAMIC_SLOTS */))
+                                ])),
+                      ($options.presentation === 'rows' && item.bar)
+                        ? (openBlock(), createElementBlock("span", {
+                            key: 5,
+                            class: normalizeClass(["cn-record-list__bar", { 'cn-record-list__bar--over': item.bar.over }]),
+                            role: "meter",
+                            "aria-label": item.title || null,
+                            "aria-valuenow": item.bar.value,
+                            "aria-valuemin": "0",
+                            "aria-valuemax": item.bar.max,
+                            "data-testid": "cn-record-list-bar"
+                          }, [
+                            createElementVNode("span", {
+                              class: "cn-record-list__bar-fill",
+                              style: normalizeStyle({ width: `${item.bar.share}%` })
+                            }, null, 4 /* STYLE */)
+                          ], 10 /* CLASS, PROPS */, _hoisted_33))
+                        : createCommentVNode("v-if", true)
+                    ]))
+                  }), 128 /* KEYED_FRAGMENT */))
+                ])),
+    ($options.footnote && !$data.error)
+      ? (openBlock(), createElementBlock("p", _hoisted_34, toDisplayString($options.footnote), 1 /* TEXT */))
+      : createCommentVNode("v-if", true),
     ($options.footerAction && !$data.error)
-      ? (openBlock(), createElementBlock("div", _hoisted_31, [
+      ? (openBlock(), createElementBlock("div", _hoisted_35, [
           createVNode(_component_NcButton, {
             variant: "secondary",
             disabled: $data.footerDisabled,
@@ -413,7 +489,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 id: $data.footerReasonId,
                 class: "cn-record-list__footer-reason",
                 "data-testid": "cn-record-list-footer-reason"
-              }, toDisplayString($options.footerAction.reason), 9 /* TEXT, PROPS */, _hoisted_32))
+              }, toDisplayString($options.footerAction.reason), 9 /* TEXT, PROPS */, _hoisted_36))
             : createCommentVNode("v-if", true)
         ]))
       : createCommentVNode("v-if", true)