npm - @conduction/nextcloud-vue - Versions diffs - 2.75.0 → 2.77.0 - Mend

@conduction/nextcloud-vue 2.75.0 → 2.77.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 (158) hide show

package/dist/esm/components/CnObjectCard/CnObjectCard.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CnObjectCard.vue2.js","sources":["../../../../src/components/CnObjectCard/CnObjectCard.vue"],"sourcesContent":["<template>\n\t<div\n\t\tclass=\"cn-object-card\"\n\t\t:class=\"{ 'cn-object-card--selected': selected, 'cn-object-card--board': isBoardLook }\"\n\t\t@mousedown=\"onCardMouseDown\"\n\t\t@click=\"onCardClick($event)\"\n\t\t@auxclick=\"onCardAuxClick($event)\">\n\t\t<!-- Selection checkbox -->\n\t\t<div v-if=\"selectable\"\n\t\t\tclass=\"cn-object-card__checkbox\"\n\t\t\t@click.stop\n\t\t\t@auxclick.stop>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:modelValue=\"selected\"\n\t\t\t\t@update:modelValue=\"$emit('select', object)\" />\n\t\t</div>\n\n\t\t<!-- Card content -->\n\t\t<div class=\"cn-object-card__content\">\n\t\t\t<!-- Header: image + title -->\n\t\t\t<div class=\"cn-object-card__header\">\n\t\t\t\t<!-- Board look: the leading element, initials in a circle or an icon on a tint. -->\n\t\t\t\t<span\n\t\t\t\t\tv-if=\"isBoardLook && leadingKind\"\n\t\t\t\t\tclass=\"cn-object-card__leading\"\n\t\t\t\t\t:class=\"`cn-object-card__leading--${leadingKind}`\"\n\t\t\t\t\tdata-testid=\"cn-object-card-leading\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t<template v-if=\"leadingKind === 'initials'\">{{ leading.initials }}</template>\n\t\t\t\t\t<CnIcon v-else :name=\"leading.icon\" :size=\"20\" />\n\t\t\t\t</span>\n\t\t\t\t<img\n\t\t\t\t\tv-if=\"imageUrl\"\n\t\t\t\t\t:src=\"imageUrl\"\n\t\t\t\t\t:alt=\"title\"\n\t\t\t\t\tclass=\"cn-object-card__image\">\n\n\t\t\t\t<div class=\"cn-object-card__title-area\">\n\t\t\t\t\t<h3 class=\"cn-object-card__title\">\n\t\t\t\t\t\t<!-- Beside the title, not in the badges row: the badges\n\t\t\t\t\t\t slot is the consumer's, and a lock is the library's\n\t\t\t\t\t\t to report. A card whose consumer passes no badges\n\t\t\t\t\t\t would otherwise show no padlock at all. -->\n\t\t\t\t\t\t<CnLockIndicator :object=\"object\" :size=\"16\" />\n\t\t\t\t\t\t{{ title }}\n\t\t\t\t\t</h3>\n\t\t\t\t\t<p v-if=\"description\" class=\"cn-object-card__description\">\n\t\t\t\t\t\t{{ truncatedDescription }}\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t\t<!-- Board look, end of the head: the status pill, or else the row menu. -->\n\t\t\t\t<template v-if=\"isBoardLook\">\n\t\t\t\t\t<CnStatusBadge\n\t\t\t\t\t\tv-if=\"statusPill\"\n\t\t\t\t\t\tclass=\"cn-object-card__status\"\n\t\t\t\t\t\t:label=\"statusPill.label\"\n\t\t\t\t\t\t:variant=\"statusPill.variant\"\n\t\t\t\t\t\tdata-testid=\"cn-object-card-status\" />\n\t\t\t\t\t<div\n\t\t\t\t\t\tv-else-if=\"$slots.actions\"\n\t\t\t\t\t\tclass=\"cn-object-card__menu\"\n\t\t\t\t\t\t@click.stop\n\t\t\t\t\t\t@auxclick.stop>\n\t\t\t\t\t\t<slot name=\"actions\" :object=\"object\" />\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t</div>\n\n\t\t\t<!-- Badges slot -->\n\t\t\t<div v-if=\"$slots.badges\" class=\"cn-object-card__badges\">\n\t\t\t\t<slot name=\"badges\" :object=\"object\" />\n\t\t\t</div>\n\n\t\t\t<!-- Metadata: visible properties as label:value pairs -->\n\t\t\t<div v-if=\"metadataFields.length > 0\" class=\"cn-object-card__metadata\" :class=\"{ 'cn-object-card__metadata--facts': isBoardLook }\">\n\t\t\t\t<slot name=\"metadata\" :object=\"object\" :fields=\"metadataFields\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tv-for=\"field in metadataFields\"\n\t\t\t\t\t\t:key=\"field.key\"\n\t\t\t\t\t\tclass=\"cn-object-card__meta-item\">\n\t\t\t\t\t\t<span class=\"cn-object-card__meta-label\">{{ field.label }}</span>\n\t\t\t\t\t\t<CnCellRenderer\n\t\t\t\t\t\t\t:value=\"field.value\"\n\t\t\t\t\t\t\t:property=\"field.property\"\n\t\t\t\t\t\t\t:truncate=\"60\" />\n\t\t\t\t\t</div>\n\t\t\t\t</slot>\n\t\t\t</div>\n\n\t\t\t<!-- Board look: one footer action, with a muted meta text at the start. -->\n\t\t\t<div\n\t\t\t\tv-if=\"isBoardLook && footerAction\"\n\t\t\t\tclass=\"cn-object-card__footer\"\n\t\t\t\tdata-testid=\"cn-object-card-footer\"\n\t\t\t\t@click.stop\n\t\t\t\t@auxclick.stop>\n\t\t\t\t<span v-if=\"footerAction.meta\" class=\"cn-object-card__footer-meta\">{{ footerAction.meta }}</span>\n\t\t\t\t<NcButton\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\tclass=\"cn-object-card__footer-action\"\n\t\t\t\t\tdata-testid=\"cn-object-card-footer-action\"\n\t\t\t\t\t:aria-label=\"footerAction.ariaLabel \|\| `${footerAction.label} ${title}`\"\n\t\t\t\t\t@click=\"$emit('footer-action', object, footerAction)\">\n\t\t\t\t\t{{ footerAction.label }}\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<!-- Actions slot -->\n\t\t<div v-if=\"$slots.actions && !isBoardLook\"\n\t\t\tclass=\"cn-object-card__actions\"\n\t\t\t@click.stop\n\t\t\t@auxclick.stop>\n\t\t\t<slot name=\"actions\" :object=\"object\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport { NcButton, NcCheckboxRadioSwitch } from '@nextcloud/vue'\nimport { useClickDragGuard } from '../../composables/useClickDragGuard.js'\nimport { normalizeLook } from '../../composables/useLook.js'\nimport { resolveImageUrl } from '../../utils/resolveImageUrl.js'\nimport { isRowMiddleClick, preventMiddleClickAutoscroll } from '../../utils/rowAuxClick.js'\nimport { formatValue } from '../../utils/schema.js'\nimport { CnCellRenderer } from '../CnCellRenderer/index.js'\nimport { CnIcon } from '../CnIcon/index.js'\nimport { CnLockIndicator } from '../CnLockIndicator/index.js'\nimport { CnStatusBadge } from '../CnStatusBadge/index.js'\n\n/*\n CnObjectCard — Schema-configuration-driven card for object display.\n \n Uses `schema.configuration` to determine which fields map to the card title,\n * description, and image. Remaining visible properties are shown as metadata.\n \n ```vue\n * <CnObjectCard :object=\"publication\" :schema=\"pubSchema\">\n * <template #actions=\"{ object }\">\n * <NcActions><NcActionButton @click=\"edit(object)\">Edit</NcActionButton></NcActions>\n * </template>\n * </CnObjectCard>\n * ```\n /\nexport default {\n\tname: 'CnObjectCard',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tNcCheckboxRadioSwitch,\n\t\tCnCellRenderer,\n\t\tCnIcon,\n\t\tCnLockIndicator,\n\t\tCnStatusBadge,\n\t},\n\n\tinject: {\n\t\t/\n\t\t Consumer translation function, provided by CnAppRoot as\n\t\t * `cnTranslate: this.translate` (bound to the host app's id). Metadata\n\t\t * labels come from schema property titles, authored in English as the\n\t\t * canonical source; the visible label is resolved through this function\n\t\t * so it follows the user's language. Defaults to identity when used\n\t\t * standalone (no CnAppRoot ancestor).\n\t\t /\n\t\tcnTranslate: { default: () => (key) => key },\n\t\t/* The look CnAppRoot provides; `board` draws the record card of the screens. /\n\t\tcnLook: { default: 'nextcloud' },\n\t},\n\n\tprops: {\n\t\t/* The object data /\n\t\tobject: {\n\t\t\ttype: Object,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Schema definition with properties and configuration /\n\t\tschema: {\n\t\t\ttype: Object,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Whether this card is selected /\n\t\tselected: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/* Whether to show selection checkbox /\n\t\tselectable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t When true, a body click on a SELECTABLE card emits `click`\n\t\t * (navigation) instead of toggling selection — selection then happens\n\t\t * via the checkbox only. The card counterpart of CnIndexPage's\n\t\t * `rowClickToView` (a table row click already navigates in that mode).\n\t\t \n\t\t @type {boolean}\n\t\t /\n\t\tclickToView: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Board look: the status pill at the end of the head row, as a label\n\t\t * (`\"Open\"`) or `{ label, variant }` with a CnStatusBadge variant\n\t\t * (`success`, `warning`, `error`, `info`, `primary`, `default`).\n\t\t * Without it the head row ends in the row menu, when there is one.\n\t\t \n\t\t @type {(string\|{label: string, variant?: string})}\n\t\t * @spec openspec/changes/screens-card-parity/specs/card-board-look/spec.md#requirement-a-record-card-has-a-head-facts-and-one-action\n\t\t /\n\t\tstatus: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Board look: the leading element of the head row. `{ initials }`\n\t\t * draws the initials in a 36px circle; `{ icon }` a schema icon in a\n\t\t * 36px rounded square on a tint.\n\t\t \n\t\t @type {{initials?: string, icon?: string}}\n\t\t /\n\t\tleading: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Board look: the card's one footer action. `{ label, meta?,\n\t\t * ariaLabel? }`; `meta` is the 13px muted text at the start of the\n\t\t * footer. Clicking emits `footer-action`.\n\t\t \n\t\t @type {{label: string, meta?: string, ariaLabel?: string}}\n\t\t /\n\t\tfooterAction: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t The property keys the facts list shows, in order (manifest key\n\t\t * `config.cardFields`). Without it the card shows the first\n\t\t * `maxMetadata` visible properties, as before.\n\t\t \n\t\t @type {Array<string>}\n\t\t /\n\t\tcardFields: {\n\t\t\ttype: Array,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/* Maximum number of metadata fields to show /\n\t\tmaxMetadata: {\n\t\t\ttype: Number,\n\t\t\tdefault: 4,\n\t\t},\n\t},\n\n\temits: ['click', 'select', 'aux-click', 'footer-action'],\n\n\tsetup() {\n\t\t// Tell a deliberate card click apart from a text-selection drag.\n\t\treturn useClickDragGuard()\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t Whether the record card of the board look is drawn.\n\t\t \n\t\t @return {boolean}\n\t\t /\n\t\tisBoardLook() {\n\t\t\treturn normalizeLook(this.cnLook) === 'board'\n\t\t},\n\n\t\t/\n\t\t `initials`, `icon` or '' for the head row's leading element.\n\t\t \n\t\t @return {string}\n\t\t /\n\t\tleadingKind() {\n\t\t\tif (this.leading && typeof this.leading.initials === 'string' && this.leading.initials !== '') {\n\t\t\t\treturn 'initials'\n\t\t\t}\n\t\t\treturn this.leading && typeof this.leading.icon === 'string' && this.leading.icon !== '' ? 'icon' : ''\n\t\t},\n\n\t\t/\n\t\t The status as `{ label, variant }`, or null.\n\t\t \n\t\t @return {?{label: string, variant: string}}\n\t\t /\n\t\tstatusPill() {\n\t\t\tif (typeof this.status === 'string' && this.status !== '') {\n\t\t\t\treturn { label: this.status, variant: 'default' }\n\t\t\t}\n\t\t\tif (this.status && typeof this.status.label === 'string' && this.status.label !== '') {\n\t\t\t\treturn { label: this.status.label, variant: this.status.variant \|\| 'default' }\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\n\t\tconfig() {\n\t\t\treturn this.schema?.configuration \|\| {}\n\t\t},\n\n\t\ttitle() {\n\t\t\tconst field = this.config.objectNameField\n\t\t\tif (field && this.object[field]) {\n\t\t\t\treturn String(this.object[field])\n\t\t\t}\n\t\t\treturn this.object.title \|\| this.object.name \|\| this.object.id \|\| '—'\n\t\t},\n\n\t\tdescription() {\n\t\t\tconst field = this.config.objectDescriptionField\n\t\t\tif (field && this.object[field]) {\n\t\t\t\treturn String(this.object[field])\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\n\t\ttruncatedDescription() {\n\t\t\tif (!this.description) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tif (this.description.length > 120) {\n\t\t\t\treturn this.description.substring(0, 120) + '...'\n\t\t\t}\n\t\t\treturn this.description\n\t\t},\n\n\t\timageUrl() {\n\t\t\tconst field = this.config.objectImageField\n\t\t\tif (field && this.object[field]) {\n\t\t\t\treturn resolveImageUrl(this.object[field])\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\n\t\t/* Fields excluded from metadata (already shown as title/desc/image) /\n\t\tconfigFields() {\n\t\t\treturn [\n\t\t\t\tthis.config.objectNameField,\n\t\t\t\tthis.config.objectDescriptionField,\n\t\t\t\tthis.config.objectSummaryField,\n\t\t\t\tthis.config.objectImageField,\n\t\t\t].filter(Boolean)\n\t\t},\n\n\t\t/* Remaining visible properties for the metadata section /\n\t\tmetadataFields() {\n\t\t\tif (!this.schema?.properties) {\n\t\t\t\treturn []\n\t\t\t}\n\n\t\t\t// The page names the facts: those properties, in that order.\n\t\t\tif (Array.isArray(this.cardFields)) {\n\t\t\t\treturn this.cardFields\n\t\t\t\t\t.filter((key) => typeof key === 'string' && this.schema.properties[key] && !this.configFields.includes(key))\n\t\t\t\t\t.map((key) => ({\n\t\t\t\t\t\tkey,\n\t\t\t\t\t\tlabel: this.cnTranslate(this.schema.properties[key].title \|\| key),\n\t\t\t\t\t\tvalue: this.object[key],\n\t\t\t\t\t\tproperty: this.schema.properties[key],\n\t\t\t\t\t}))\n\t\t\t}\n\n\t\t\treturn Object.entries(this.schema.properties)\n\t\t\t\t.filter(([key, prop]) => {\n\t\t\t\t\tif (this.configFields.includes(key)) {\n\t\t\t\t\t\treturn false\n\t\t\t\t\t}\n\t\t\t\t\tif (prop.visible === false) {\n\t\t\t\t\t\treturn false\n\t\t\t\t\t}\n\t\t\t\t\tif (prop.type === 'object') {\n\t\t\t\t\t\treturn false\n\t\t\t\t\t}\n\t\t\t\t\tif (prop.format === 'markdown') {\n\t\t\t\t\t\treturn false\n\t\t\t\t\t}\n\t\t\t\t\treturn true\n\t\t\t\t})\n\t\t\t\t.sort(([, a], [, b]) => {\n\t\t\t\t\tconst orderA = typeof a.order === 'number' ? a.order : Infinity\n\t\t\t\t\tconst orderB = typeof b.order === 'number' ? b.order : Infinity\n\t\t\t\t\treturn orderA - orderB\n\t\t\t\t})\n\t\t\t\t.slice(0, this.maxMetadata)\n\t\t\t\t.map(([key, prop]) => ({\n\t\t\t\t\tkey,\n\t\t\t\t\tlabel: this.cnTranslate(prop.title \|\| key),\n\t\t\t\t\tvalue: this.object[key],\n\t\t\t\t\tproperty: prop,\n\t\t\t\t}))\n\t\t},\n\t},\n\n\tmethods: {\n\t\tformatValue,\n\n\t\t/\n\t\t Card-body click: emits `select` when `selectable` (ignoring drags),\n\t\t * otherwise emits `click` for navigation. With `clickToView`, a\n\t\t * selectable card's body click navigates too — the checkbox is the\n\t\t * only selection surface, mirroring the table's rowClickToView split.\n\t\t \n\t\t @param {MouseEvent} [event] The originating click event.\n\t\t /\n\t\tonCardClick(event) {\n\t\t\tif (this.selectable && !this.clickToView) {\n\t\t\t\tif (this.wasDrag(event)) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\t/\n\t\t\t\t @event select Emitted when the card toggles selection (clicking the body of a selectable card, or its checkbox).\n\t\t\t\t * @type {object} The card's object.\n\t\t\t\t /\n\t\t\t\tthis.$emit('select', this.object)\n\t\t\t\t// Deprecation: selectable cards used to emit `click`. Keep emitting it\n\t\t\t\t// for listeners that still rely on it, but warn them to migrate to `select`.\n\t\t\t\t// `$.vnode.props`, not `$attrs`: `click` is a declared emit, and\n\t\t\t\t// Vue keeps declared emits out of `$attrs`.\n\t\t\t\tif (this.$.vnode.props?.onClick) {\n\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\tconsole.warn('[CnObjectCard] @click on selectable cards is deprecated; use @select instead.')\n\t\t\t\t\tthis.$emit('click', this.object)\n\t\t\t\t}\n\t\t\t\treturn\n\t\t\t}\n\t\t\t/\n\t\t\t @event click Emitted when a non-selectable (or `clickToView`) card is clicked. Payload: `(object, event)` — the card's object and the native click event, for opening it in a new tab on a ctrl/cmd/shift click. A middle click emits `aux-click` instead. Selectable cards emit `select`; they also emit `click` (deprecated) when a `click` listener is present, so migrate selectable consumers to `@select`.\n\t\t\t * @type {object} The card's object.\n\t\t\t /\n\t\t\tthis.$emit('click', this.object, event)\n\t\t},\n\n\t\t/\n\t\t Card mousedown: record the press for the drag guard, and on a card a\n\t\t * middle click opens, keep the browser from starting autoscroll.\n\t\t \n\t\t @param {MouseEvent} event The mousedown event.\n\t\t /\n\t\tonCardMouseDown(event) {\n\t\t\tthis.onPointerDown(event)\n\t\t\tif (!this.selectable \|\| this.clickToView) {\n\t\t\t\tpreventMiddleClickAutoscroll(event)\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Card-body middle click: emits `aux-click`, not `click`, so an existing\n\t\t * `click` listener that navigates never moves the current tab away.\n\t\t * Ignored on a select-on-click card, on nested controls and on drags.\n\t\t \n\t\t @param {MouseEvent} event The auxclick event.\n\t\t /\n\t\tonCardAuxClick(event) {\n\t\t\tif (!isRowMiddleClick(event) \|\| this.wasDrag(event)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (this.selectable && !this.clickToView) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t/\n\t\t\t @event aux-click Emitted when a non-selectable (or `clickToView`) card is middle-clicked, for opening it in a new tab (see `openRowTarget`). Payload: `(object, event)` — the card's object and the native auxclick event.\n\t\t\t * @type {object} The card's object.\n\t\t\t */\n\t\t\tthis.$emit('aux-click', this.object, event)\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-object-card {\n\tdisplay: flex;\n\tgap: 12px;\n\tpadding: 16px;\n\tbackground: var(--color-main-background);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--border-radius-large, 10px);\n\tcursor: pointer;\n\ttransition: box-shadow 0.2s ease, border-color 0.2s ease;\n}\n\n.cn-object-card:hover {\n\tborder-color: var(--color-primary-element);\n\tbox-shadow: 0 2px 8px var(--color-box-shadow);\n}\n\n.cn-object-card--selected {\n\tborder-color: var(--color-primary-element);\n\tbackground: var(--color-primary-element-light);\n}\n\n.cn-object-card__checkbox {\n\tflex-shrink: 0;\n\tpadding-top: 2px;\n}\n\n.cn-object-card__content {\n\tflex: 1;\n\tmin-width: 0;\n}\n\n.cn-object-card__header {\n\tdisplay: flex;\n\tgap: 12px;\n\talign-items: flex-start;\n}\n\n.cn-object-card__image {\n\twidth: 48px;\n\theight: 48px;\n\tborder-radius: var(--border-radius);\n\tobject-fit: cover;\n\tflex-shrink: 0;\n}\n\n.cn-object-card__title-area {\n\tflex: 1;\n\tmin-width: 0;\n}\n\n.cn-object-card__title {\n\tmargin: 0;\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tline-height: 1.3;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.cn-object-card__description {\n\tmargin: 4px 0 0;\n\tfont-size: 13px;\n\tcolor: var(--color-text-maxcontrast);\n\tline-height: 1.4;\n}\n\n.cn-object-card__badges {\n\tmargin-top: 8px;\n}\n\n.cn-object-card__metadata {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n\tgap: 8px;\n\tmargin-top: 12px;\n\tpadding-top: 12px;\n\tborder-top: 1px solid var(--color-border);\n}\n\n.cn-object-card__meta-item {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px;\n}\n\n.cn-object-card__meta-label {\n\tfont-size: 11px;\n\tfont-weight: 500;\n\tcolor: var(--color-text-maxcontrast);\n\ttext-transform: uppercase;\n\tletter-spacing: 0.3px;\n}\n\n.cn-object-card__actions {\n\tflex-shrink: 0;\n}\n</style>\n"],"names":["CnCellRenderer","CnIcon","CnLockIndicator","CnStatusBadge"],"mappings":"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"}
1	+ {"version":3,"file":"CnObjectCard.vue2.js","sources":["../../../../src/components/CnObjectCard/CnObjectCard.vue"],"sourcesContent":["<template>\n\t<div\n\t\tclass=\"cn-object-card\"\n\t\t:class=\"[{ 'cn-object-card--selected': selected, 'cn-object-card--board': isBoardLook }, accentVariant && ['cn-object-card--accent', `cn-object-card--accent-${accentVariant}`]]\"\n\t\t@mousedown=\"onCardMouseDown\"\n\t\t@click=\"onCardClick($event)\"\n\t\t@auxclick=\"onCardAuxClick($event)\">\n\t\t<!-- Selection checkbox -->\n\t\t<div v-if=\"selectable\"\n\t\t\tclass=\"cn-object-card__checkbox\"\n\t\t\t@click.stop\n\t\t\t@auxclick.stop>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:modelValue=\"selected\"\n\t\t\t\t@update:modelValue=\"$emit('select', object)\" />\n\t\t</div>\n\n\t\t<!-- Card content -->\n\t\t<div class=\"cn-object-card__content\">\n\t\t\t<!-- Header: image + title -->\n\t\t\t<div class=\"cn-object-card__header\">\n\t\t\t\t<!-- Board look: the leading element, initials in a circle or an icon on a tint. -->\n\t\t\t\t<span\n\t\t\t\t\tv-if=\"isBoardLook && leadingKind\"\n\t\t\t\t\tclass=\"cn-object-card__leading\"\n\t\t\t\t\t:class=\"`cn-object-card__leading--${leadingKind}`\"\n\t\t\t\t\tdata-testid=\"cn-object-card-leading\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t<template v-if=\"leadingKind === 'initials'\">{{ leading.initials }}</template>\n\t\t\t\t\t<CnIcon v-else :name=\"leading.icon\" :size=\"20\" />\n\t\t\t\t</span>\n\t\t\t\t<img\n\t\t\t\t\tv-if=\"imageUrl\"\n\t\t\t\t\t:src=\"imageUrl\"\n\t\t\t\t\t:alt=\"title\"\n\t\t\t\t\tclass=\"cn-object-card__image\">\n\n\t\t\t\t<div class=\"cn-object-card__title-area\">\n\t\t\t\t\t<h3 class=\"cn-object-card__title\">\n\t\t\t\t\t\t<!-- Beside the title, not in the badges row: the badges\n\t\t\t\t\t\t slot is the consumer's, and a lock is the library's\n\t\t\t\t\t\t to report. A card whose consumer passes no badges\n\t\t\t\t\t\t would otherwise show no padlock at all. -->\n\t\t\t\t\t\t<CnLockIndicator :object=\"object\" :size=\"16\" />\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tv-if=\"accentVariant && accent.icon\"\n\t\t\t\t\t\t\tclass=\"cn-object-card__accent-icon\"\n\t\t\t\t\t\t\tdata-testid=\"cn-object-card-accent-icon\"\n\t\t\t\t\t\t\t:role=\"accent.label ? 'img' : null\"\n\t\t\t\t\t\t\t:aria-label=\"accent.label \|\| null\"\n\t\t\t\t\t\t\t:aria-hidden=\"accent.label ? null : 'true'\"\n\t\t\t\t\t\t\t:title=\"accent.label \|\| null\">\n\t\t\t\t\t\t\t<CnIcon :name=\"accent.icon\" :size=\"16\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{{ title }}\n\t\t\t\t\t</h3>\n\t\t\t\t\t<p v-if=\"description\" class=\"cn-object-card__description\">\n\t\t\t\t\t\t{{ truncatedDescription }}\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t\t<!-- Board look, end of the head: the status pill, or else the row menu. -->\n\t\t\t\t<template v-if=\"isBoardLook\">\n\t\t\t\t\t<CnStatusBadge\n\t\t\t\t\t\tv-if=\"statusPill\"\n\t\t\t\t\t\tclass=\"cn-object-card__status\"\n\t\t\t\t\t\t:label=\"statusPill.label\"\n\t\t\t\t\t\t:variant=\"statusPill.variant\"\n\t\t\t\t\t\tdata-testid=\"cn-object-card-status\" />\n\t\t\t\t\t<div\n\t\t\t\t\t\tv-else-if=\"$slots.actions\"\n\t\t\t\t\t\tclass=\"cn-object-card__menu\"\n\t\t\t\t\t\t@click.stop\n\t\t\t\t\t\t@auxclick.stop>\n\t\t\t\t\t\t<slot name=\"actions\" :object=\"object\" />\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t</div>\n\n\t\t\t<!-- Badges slot -->\n\t\t\t<div v-if=\"$slots.badges\" class=\"cn-object-card__badges\">\n\t\t\t\t<slot name=\"badges\" :object=\"object\" />\n\t\t\t</div>\n\n\t\t\t<!-- Metadata: visible properties as label:value pairs -->\n\t\t\t<div v-if=\"metadataFields.length > 0\" class=\"cn-object-card__metadata\" :class=\"{ 'cn-object-card__metadata--facts': isBoardLook }\">\n\t\t\t\t<slot name=\"metadata\" :object=\"object\" :fields=\"metadataFields\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tv-for=\"field in metadataFields\"\n\t\t\t\t\t\t:key=\"field.key\"\n\t\t\t\t\t\tclass=\"cn-object-card__meta-item\">\n\t\t\t\t\t\t<span class=\"cn-object-card__meta-label\">{{ field.label }}</span>\n\t\t\t\t\t\t<CnCellRenderer\n\t\t\t\t\t\t\t:value=\"field.value\"\n\t\t\t\t\t\t\t:property=\"field.property\"\n\t\t\t\t\t\t\t:truncate=\"60\" />\n\t\t\t\t\t</div>\n\t\t\t\t</slot>\n\t\t\t</div>\n\n\t\t\t<!-- Board look: one footer action, with a muted meta text at the start. -->\n\t\t\t<div\n\t\t\t\tv-if=\"isBoardLook && footerAction\"\n\t\t\t\tclass=\"cn-object-card__footer\"\n\t\t\t\tdata-testid=\"cn-object-card-footer\"\n\t\t\t\t@click.stop\n\t\t\t\t@auxclick.stop>\n\t\t\t\t<span v-if=\"footerAction.meta\" class=\"cn-object-card__footer-meta\">{{ footerAction.meta }}</span>\n\t\t\t\t<NcButton\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\tclass=\"cn-object-card__footer-action\"\n\t\t\t\t\tdata-testid=\"cn-object-card-footer-action\"\n\t\t\t\t\t:aria-label=\"footerAction.ariaLabel \|\| `${footerAction.label} ${title}`\"\n\t\t\t\t\t@click=\"$emit('footer-action', object, footerAction)\">\n\t\t\t\t\t{{ footerAction.label }}\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<!-- Actions slot -->\n\t\t<div v-if=\"$slots.actions && !isBoardLook\"\n\t\t\tclass=\"cn-object-card__actions\"\n\t\t\t@click.stop\n\t\t\t@auxclick.stop>\n\t\t\t<slot name=\"actions\" :object=\"object\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport { NcButton, NcCheckboxRadioSwitch } from '@nextcloud/vue'\nimport { useClickDragGuard } from '../../composables/useClickDragGuard.js'\nimport { normalizeLook } from '../../composables/useLook.js'\nimport { resolveImageUrl } from '../../utils/resolveImageUrl.js'\nimport { isRowMiddleClick, preventMiddleClickAutoscroll } from '../../utils/rowAuxClick.js'\nimport { formatValue } from '../../utils/schema.js'\nimport { CnCellRenderer } from '../CnCellRenderer/index.js'\nimport { CnIcon } from '../CnIcon/index.js'\nimport { CnLockIndicator } from '../CnLockIndicator/index.js'\nimport { CnStatusBadge } from '../CnStatusBadge/index.js'\n\nconst ACCENT_VARIANTS = ['success', 'warning', 'error', 'info', 'primary']\n\n/*\n CnObjectCard — Schema-configuration-driven card for object display.\n \n Uses `schema.configuration` to determine which fields map to the card title,\n * description, and image. Remaining visible properties are shown as metadata.\n \n ```vue\n * <CnObjectCard :object=\"publication\" :schema=\"pubSchema\">\n * <template #actions=\"{ object }\">\n * <NcActions><NcActionButton @click=\"edit(object)\">Edit</NcActionButton></NcActions>\n * </template>\n * </CnObjectCard>\n * ```\n /\nexport default {\n\tname: 'CnObjectCard',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tNcCheckboxRadioSwitch,\n\t\tCnCellRenderer,\n\t\tCnIcon,\n\t\tCnLockIndicator,\n\t\tCnStatusBadge,\n\t},\n\n\tinject: {\n\t\t/\n\t\t Consumer translation function, provided by CnAppRoot as\n\t\t * `cnTranslate: this.translate` (bound to the host app's id). Metadata\n\t\t * labels come from schema property titles, authored in English as the\n\t\t * canonical source; the visible label is resolved through this function\n\t\t * so it follows the user's language. Defaults to identity when used\n\t\t * standalone (no CnAppRoot ancestor).\n\t\t /\n\t\tcnTranslate: { default: () => (key) => key },\n\t\t/* The look CnAppRoot provides; `board` draws the record card of the screens. /\n\t\tcnLook: { default: 'nextcloud' },\n\t},\n\n\tprops: {\n\t\t/* The object data /\n\t\tobject: {\n\t\t\ttype: Object,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Schema definition with properties and configuration /\n\t\tschema: {\n\t\t\ttype: Object,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Whether this card is selected /\n\t\tselected: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/* Whether to show selection checkbox /\n\t\tselectable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t When true, a body click on a SELECTABLE card emits `click`\n\t\t * (navigation) instead of toggling selection — selection then happens\n\t\t * via the checkbox only. The card counterpart of CnIndexPage's\n\t\t * `rowClickToView` (a table row click already navigates in that mode).\n\t\t \n\t\t @type {boolean}\n\t\t /\n\t\tclickToView: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Board look: the status pill at the end of the head row, as a label\n\t\t * (`\"Open\"`) or `{ label, variant }` with a CnStatusBadge variant\n\t\t * (`success`, `warning`, `error`, `info`, `primary`, `default`).\n\t\t * Without it the head row ends in the row menu, when there is one.\n\t\t \n\t\t @type {(string\|{label: string, variant?: string})}\n\t\t * @spec openspec/changes/screens-card-parity/specs/card-board-look/spec.md#requirement-a-record-card-has-a-head-facts-and-one-action\n\t\t /\n\t\tstatus: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Board look: the leading element of the head row. `{ initials }`\n\t\t * draws the initials in a 36px circle; `{ icon }` a schema icon in a\n\t\t * 36px rounded square on a tint.\n\t\t \n\t\t @type {{initials?: string, icon?: string}}\n\t\t /\n\t\tleading: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Board look: the card's one footer action. `{ label, meta?,\n\t\t * ariaLabel? }`; `meta` is the 13px muted text at the start of the\n\t\t * footer. Clicking emits `footer-action`.\n\t\t \n\t\t @type {{label: string, meta?: string, ariaLabel?: string}}\n\t\t /\n\t\tfooterAction: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t A status accent: a colored border at the start of the card and,\n\t\t * with `icon`, a colored icon before the title. `variant` is one of\n\t\t * `success`, `warning`, `error`, `info` or `primary`; `icon` is a\n\t\t * name registered with CnIcon; `label` names the status for screen\n\t\t * readers and as the icon's tooltip.\n\t\t \n\t\t @type {{variant: string, icon?: string, label?: string}}\n\t\t /\n\t\taccent: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t The property keys the facts list shows, in order (manifest key\n\t\t * `config.cardFields`). Without it the card shows the first\n\t\t * `maxMetadata` visible properties, as before.\n\t\t \n\t\t @type {Array<string>}\n\t\t /\n\t\tcardFields: {\n\t\t\ttype: Array,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/* Maximum number of metadata fields to show /\n\t\tmaxMetadata: {\n\t\t\ttype: Number,\n\t\t\tdefault: 4,\n\t\t},\n\t},\n\n\temits: ['click', 'select', 'aux-click', 'footer-action'],\n\n\tsetup() {\n\t\t// Tell a deliberate card click apart from a text-selection drag.\n\t\treturn useClickDragGuard()\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t Whether the record card of the board look is drawn.\n\t\t \n\t\t @return {boolean}\n\t\t /\n\t\tisBoardLook() {\n\t\t\treturn normalizeLook(this.cnLook) === 'board'\n\t\t},\n\n\t\t/\n\t\t `initials`, `icon` or '' for the head row's leading element.\n\t\t \n\t\t @return {string}\n\t\t /\n\t\tleadingKind() {\n\t\t\tif (this.leading && typeof this.leading.initials === 'string' && this.leading.initials !== '') {\n\t\t\t\treturn 'initials'\n\t\t\t}\n\t\t\treturn this.leading && typeof this.leading.icon === 'string' && this.leading.icon !== '' ? 'icon' : ''\n\t\t},\n\n\t\t/\n\t\t The status as `{ label, variant }`, or null.\n\t\t \n\t\t @return {?{label: string, variant: string}}\n\t\t /\n\t\tstatusPill() {\n\t\t\tif (typeof this.status === 'string' && this.status !== '') {\n\t\t\t\treturn { label: this.status, variant: 'default' }\n\t\t\t}\n\t\t\tif (this.status && typeof this.status.label === 'string' && this.status.label !== '') {\n\t\t\t\treturn { label: this.status.label, variant: this.status.variant \|\| 'default' }\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\n\t\t/\n\t\t The accent variant when it is a known one, else ''.\n\t\t \n\t\t @return {string}\n\t\t /\n\t\taccentVariant() {\n\t\t\tconst variant = this.accent?.variant\n\t\t\treturn ACCENT_VARIANTS.includes(variant) ? variant : ''\n\t\t},\n\n\t\tconfig() {\n\t\t\treturn this.schema?.configuration \|\| {}\n\t\t},\n\n\t\ttitle() {\n\t\t\tconst field = this.config.objectNameField\n\t\t\tif (field && this.object[field]) {\n\t\t\t\treturn String(this.object[field])\n\t\t\t}\n\t\t\treturn this.object.title \|\| this.object.name \|\| this.object.id \|\| '—'\n\t\t},\n\n\t\tdescription() {\n\t\t\tconst field = this.config.objectDescriptionField\n\t\t\tif (field && this.object[field]) {\n\t\t\t\treturn String(this.object[field])\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\n\t\ttruncatedDescription() {\n\t\t\tif (!this.description) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tif (this.description.length > 120) {\n\t\t\t\treturn this.description.substring(0, 120) + '...'\n\t\t\t}\n\t\t\treturn this.description\n\t\t},\n\n\t\timageUrl() {\n\t\t\tconst field = this.config.objectImageField\n\t\t\tif (field && this.object[field]) {\n\t\t\t\treturn resolveImageUrl(this.object[field])\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\n\t\t/* Fields excluded from metadata (already shown as title/desc/image) /\n\t\tconfigFields() {\n\t\t\treturn [\n\t\t\t\tthis.config.objectNameField,\n\t\t\t\tthis.config.objectDescriptionField,\n\t\t\t\tthis.config.objectSummaryField,\n\t\t\t\tthis.config.objectImageField,\n\t\t\t].filter(Boolean)\n\t\t},\n\n\t\t/* Remaining visible properties for the metadata section /\n\t\tmetadataFields() {\n\t\t\tif (!this.schema?.properties) {\n\t\t\t\treturn []\n\t\t\t}\n\n\t\t\t// The page names the facts: those properties, in that order.\n\t\t\tif (Array.isArray(this.cardFields)) {\n\t\t\t\treturn this.cardFields\n\t\t\t\t\t.filter((key) => typeof key === 'string' && this.schema.properties[key] && !this.configFields.includes(key))\n\t\t\t\t\t.map((key) => ({\n\t\t\t\t\t\tkey,\n\t\t\t\t\t\tlabel: this.cnTranslate(this.schema.properties[key].title \|\| key),\n\t\t\t\t\t\tvalue: this.object[key],\n\t\t\t\t\t\tproperty: this.schema.properties[key],\n\t\t\t\t\t}))\n\t\t\t}\n\n\t\t\treturn Object.entries(this.schema.properties)\n\t\t\t\t.filter(([key, prop]) => {\n\t\t\t\t\tif (this.configFields.includes(key)) {\n\t\t\t\t\t\treturn false\n\t\t\t\t\t}\n\t\t\t\t\tif (prop.visible === false) {\n\t\t\t\t\t\treturn false\n\t\t\t\t\t}\n\t\t\t\t\tif (prop.type === 'object') {\n\t\t\t\t\t\treturn false\n\t\t\t\t\t}\n\t\t\t\t\tif (prop.format === 'markdown') {\n\t\t\t\t\t\treturn false\n\t\t\t\t\t}\n\t\t\t\t\treturn true\n\t\t\t\t})\n\t\t\t\t.sort(([, a], [, b]) => {\n\t\t\t\t\tconst orderA = typeof a.order === 'number' ? a.order : Infinity\n\t\t\t\t\tconst orderB = typeof b.order === 'number' ? b.order : Infinity\n\t\t\t\t\treturn orderA - orderB\n\t\t\t\t})\n\t\t\t\t.slice(0, this.maxMetadata)\n\t\t\t\t.map(([key, prop]) => ({\n\t\t\t\t\tkey,\n\t\t\t\t\tlabel: this.cnTranslate(prop.title \|\| key),\n\t\t\t\t\tvalue: this.object[key],\n\t\t\t\t\tproperty: prop,\n\t\t\t\t}))\n\t\t},\n\t},\n\n\tmethods: {\n\t\tformatValue,\n\n\t\t/\n\t\t Card-body click: emits `select` when `selectable` (ignoring drags),\n\t\t * otherwise emits `click` for navigation. With `clickToView`, a\n\t\t * selectable card's body click navigates too — the checkbox is the\n\t\t * only selection surface, mirroring the table's rowClickToView split.\n\t\t \n\t\t @param {MouseEvent} [event] The originating click event.\n\t\t /\n\t\tonCardClick(event) {\n\t\t\tif (this.selectable && !this.clickToView) {\n\t\t\t\tif (this.wasDrag(event)) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\t/\n\t\t\t\t @event select Emitted when the card toggles selection (clicking the body of a selectable card, or its checkbox).\n\t\t\t\t * @type {object} The card's object.\n\t\t\t\t /\n\t\t\t\tthis.$emit('select', this.object)\n\t\t\t\t// Deprecation: selectable cards used to emit `click`. Keep emitting it\n\t\t\t\t// for listeners that still rely on it, but warn them to migrate to `select`.\n\t\t\t\t// `$.vnode.props`, not `$attrs`: `click` is a declared emit, and\n\t\t\t\t// Vue keeps declared emits out of `$attrs`.\n\t\t\t\tif (this.$.vnode.props?.onClick) {\n\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\tconsole.warn('[CnObjectCard] @click on selectable cards is deprecated; use @select instead.')\n\t\t\t\t\tthis.$emit('click', this.object)\n\t\t\t\t}\n\t\t\t\treturn\n\t\t\t}\n\t\t\t/\n\t\t\t @event click Emitted when a non-selectable (or `clickToView`) card is clicked. Payload: `(object, event)` — the card's object and the native click event, for opening it in a new tab on a ctrl/cmd/shift click. A middle click emits `aux-click` instead. Selectable cards emit `select`; they also emit `click` (deprecated) when a `click` listener is present, so migrate selectable consumers to `@select`.\n\t\t\t * @type {object} The card's object.\n\t\t\t /\n\t\t\tthis.$emit('click', this.object, event)\n\t\t},\n\n\t\t/\n\t\t Card mousedown: record the press for the drag guard, and on a card a\n\t\t * middle click opens, keep the browser from starting autoscroll.\n\t\t \n\t\t @param {MouseEvent} event The mousedown event.\n\t\t /\n\t\tonCardMouseDown(event) {\n\t\t\tthis.onPointerDown(event)\n\t\t\tif (!this.selectable \|\| this.clickToView) {\n\t\t\t\tpreventMiddleClickAutoscroll(event)\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Card-body middle click: emits `aux-click`, not `click`, so an existing\n\t\t * `click` listener that navigates never moves the current tab away.\n\t\t * Ignored on a select-on-click card, on nested controls and on drags.\n\t\t \n\t\t @param {MouseEvent} event The auxclick event.\n\t\t /\n\t\tonCardAuxClick(event) {\n\t\t\tif (!isRowMiddleClick(event) \|\| this.wasDrag(event)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (this.selectable && !this.clickToView) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t/\n\t\t\t @event aux-click Emitted when a non-selectable (or `clickToView`) card is middle-clicked, for opening it in a new tab (see `openRowTarget`). Payload: `(object, event)` — the card's object and the native auxclick event.\n\t\t\t * @type {object} The card's object.\n\t\t\t /\n\t\t\tthis.$emit('aux-click', this.object, event)\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-object-card {\n\tdisplay: flex;\n\tgap: 12px;\n\tpadding: 16px;\n\tbackground: var(--color-main-background);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--border-radius-large, 10px);\n\tcursor: pointer;\n\ttransition: box-shadow 0.2s ease, border-color 0.2s ease;\n}\n\n.cn-object-card:hover {\n\tborder-color: var(--color-primary-element);\n\tbox-shadow: 0 2px 8px var(--color-box-shadow);\n}\n\n.cn-object-card--selected {\n\tborder-color: var(--color-primary-element);\n\tbackground: var(--color-primary-element-light);\n}\n\n/ The 4px start border takes 3px of padding, so the content stays put. */\n.cn-object-card.cn-object-card--accent {\n\tborder-inline-start-width: 4px;\n\tpadding-inline-start: 13px;\n}\n\n.cn-object-card.cn-object-card--accent-success {\n\tborder-inline-start-color: var(--color-element-success);\n}\n\n.cn-object-card.cn-object-card--accent-warning {\n\tborder-inline-start-color: var(--color-element-warning);\n}\n\n.cn-object-card.cn-object-card--accent-error {\n\tborder-inline-start-color: var(--color-element-error);\n}\n\n.cn-object-card.cn-object-card--accent-info {\n\tborder-inline-start-color: var(--color-element-info);\n}\n\n.cn-object-card.cn-object-card--accent-primary {\n\tborder-inline-start-color: var(--color-primary-element);\n}\n\n.cn-object-card__accent-icon {\n\tdisplay: inline-flex;\n\tvertical-align: -2px;\n\tmargin-inline-end: 4px;\n}\n\n.cn-object-card--accent-success .cn-object-card__accent-icon {\n\tcolor: var(--color-text-success);\n}\n\n.cn-object-card--accent-warning .cn-object-card__accent-icon {\n\tcolor: var(--color-text-warning);\n}\n\n.cn-object-card--accent-error .cn-object-card__accent-icon {\n\tcolor: var(--color-text-error);\n}\n\n.cn-object-card--accent-info .cn-object-card__accent-icon {\n\tcolor: var(--color-element-info);\n}\n\n.cn-object-card--accent-primary .cn-object-card__accent-icon {\n\tcolor: var(--color-primary-element);\n}\n\n.cn-object-card__checkbox {\n\tflex-shrink: 0;\n\tpadding-top: 2px;\n}\n\n.cn-object-card__content {\n\tflex: 1;\n\tmin-width: 0;\n}\n\n.cn-object-card__header {\n\tdisplay: flex;\n\tgap: 12px;\n\talign-items: flex-start;\n}\n\n.cn-object-card__image {\n\twidth: 48px;\n\theight: 48px;\n\tborder-radius: var(--border-radius);\n\tobject-fit: cover;\n\tflex-shrink: 0;\n}\n\n.cn-object-card__title-area {\n\tflex: 1;\n\tmin-width: 0;\n}\n\n.cn-object-card__title {\n\tmargin: 0;\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tline-height: 1.3;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.cn-object-card__description {\n\tmargin: 4px 0 0;\n\tfont-size: 13px;\n\tcolor: var(--color-text-maxcontrast);\n\tline-height: 1.4;\n}\n\n.cn-object-card__badges {\n\tmargin-top: 8px;\n}\n\n.cn-object-card__metadata {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n\tgap: 8px;\n\tmargin-top: 12px;\n\tpadding-top: 12px;\n\tborder-top: 1px solid var(--color-border);\n}\n\n.cn-object-card__meta-item {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px;\n}\n\n.cn-object-card__meta-label {\n\tfont-size: 11px;\n\tfont-weight: 500;\n\tcolor: var(--color-text-maxcontrast);\n\ttext-transform: uppercase;\n\tletter-spacing: 0.3px;\n}\n\n.cn-object-card__actions {\n\tflex-shrink: 0;\n}\n</style>\n"],"names":["CnCellRenderer","CnIcon","CnLockIndicator","CnStatusBadge"],"mappings":"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"}

package/dist/esm/components/CnObjectCard/CnObjectCard.vue3.js CHANGED Viewed

@@ -5,16 +5,17 @@ const _hoisted_2 = { class: "cn-object-card__header" };
 const _hoisted_3 = ["src", "alt"];
 const _hoisted_4 = { class: "cn-object-card__title-area" };
 const _hoisted_5 = { class: "cn-object-card__title" };
-const _hoisted_6 = {
+const _hoisted_6 = ["role", "aria-label", "aria-hidden", "title"];
+const _hoisted_7 = {
   key: 0,
   class: "cn-object-card__description"
 };
-const _hoisted_7 = {
+const _hoisted_8 = {
   key: 0,
   class: "cn-object-card__badges"
 };
-const _hoisted_8 = { class: "cn-object-card__meta-label" };
-const _hoisted_9 = {
+const _hoisted_9 = { class: "cn-object-card__meta-label" };
+const _hoisted_10 = {
   key: 0,
   class: "cn-object-card__footer-meta"
 };
@@ -28,7 +29,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_NcButton = resolveComponent("NcButton");
   return (openBlock(), createElementBlock("div", {
-    class: normalizeClass(["cn-object-card", { 'cn-object-card--selected': $props.selected, 'cn-object-card--board': $options.isBoardLook }]),
+    class: normalizeClass(["cn-object-card", [{ 'cn-object-card--selected': $props.selected, 'cn-object-card--board': $options.isBoardLook }, $options.accentVariant && ['cn-object-card--accent', `cn-object-card--accent-${$options.accentVariant}`]]]),
     onMousedown: _cache[10] || (_cache[10] = (...args) => ($options.onCardMouseDown && $options.onCardMouseDown(...args))),
     onClick: _cache[11] || (_cache[11] = $event => ($options.onCardClick($event))),
     onAuxclick: _cache[12] || (_cache[12] = $event => ($options.onCardAuxClick($event)))
@@ -80,10 +81,26 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               object: $props.object,
               size: 16
             }, null, 8 /* PROPS */, ["object"]),
+            ($options.accentVariant && $props.accent.icon)
+              ? (openBlock(), createElementBlock("span", {
+                  key: 0,
+                  class: "cn-object-card__accent-icon",
+                  "data-testid": "cn-object-card-accent-icon",
+                  role: $props.accent.label ? 'img' : null,
+                  "aria-label": $props.accent.label || null,
+                  "aria-hidden": $props.accent.label ? null : 'true',
+                  title: $props.accent.label || null
+                }, [
+                  createVNode(_component_CnIcon, {
+                    name: $props.accent.icon,
+                    size: 16
+                  }, null, 8 /* PROPS */, ["name"])
+                ], 8 /* PROPS */, _hoisted_6))
+              : createCommentVNode("v-if", true),
             createTextVNode(" " + toDisplayString($options.title), 1 /* TEXT */)
           ]),
           ($options.description)
-            ? (openBlock(), createElementBlock("p", _hoisted_6, toDisplayString($options.truncatedDescription), 1 /* TEXT */))
+            ? (openBlock(), createElementBlock("p", _hoisted_7, toDisplayString($options.truncatedDescription), 1 /* TEXT */))
             : createCommentVNode("v-if", true)
         ]),
         ($options.isBoardLook)
@@ -110,7 +127,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           : createCommentVNode("v-if", true)
       ]),
       (_ctx.$slots.badges)
-        ? (openBlock(), createElementBlock("div", _hoisted_7, [
+        ? (openBlock(), createElementBlock("div", _hoisted_8, [
             renderSlot(_ctx.$slots, "badges", { object: $props.object })
           ]))
         : createCommentVNode("v-if", true),
@@ -128,7 +145,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   key: field.key,
                   class: "cn-object-card__meta-item"
                 }, [
-                  createElementVNode("span", _hoisted_8, toDisplayString(field.label), 1 /* TEXT */),
+                  createElementVNode("span", _hoisted_9, toDisplayString(field.label), 1 /* TEXT */),
                   createVNode(_component_CnCellRenderer, {
                     value: field.value,
                     property: field.property,
@@ -148,7 +165,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             onAuxclick: _cache[7] || (_cache[7] = withModifiers(() => {}, ["stop"]))
           }, [
             ($props.footerAction.meta)
-              ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString($props.footerAction.meta), 1 /* TEXT */))
+              ? (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString($props.footerAction.meta), 1 /* TEXT */))
               : createCommentVNode("v-if", true),
             createVNode(_component_NcButton, {
               variant: "secondary",

package/dist/esm/components/CnObjectCard/CnObjectCard.vue3.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CnObjectCard.vue3.js","sources":["../../../../src/components/CnObjectCard/CnObjectCard.vue?vue&type=template&id=6f672c8f&lang.js"],"sourcesContent":["<template>\n\t<div\n\t\tclass=\"cn-object-card\"\n\t\t:class=\"{ 'cn-object-card--selected': selected, 'cn-object-card--board': isBoardLook }\"\n\t\t@mousedown=\"onCardMouseDown\"\n\t\t@click=\"onCardClick($event)\"\n\t\t@auxclick=\"onCardAuxClick($event)\">\n\t\t<!-- Selection checkbox -->\n\t\t<div v-if=\"selectable\"\n\t\t\tclass=\"cn-object-card__checkbox\"\n\t\t\t@click.stop\n\t\t\t@auxclick.stop>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:modelValue=\"selected\"\n\t\t\t\t@update:modelValue=\"$emit('select', object)\" />\n\t\t</div>\n\n\t\t<!-- Card content -->\n\t\t<div class=\"cn-object-card__content\">\n\t\t\t<!-- Header: image + title -->\n\t\t\t<div class=\"cn-object-card__header\">\n\t\t\t\t<!-- Board look: the leading element, initials in a circle or an icon on a tint. -->\n\t\t\t\t<span\n\t\t\t\t\tv-if=\"isBoardLook && leadingKind\"\n\t\t\t\t\tclass=\"cn-object-card__leading\"\n\t\t\t\t\t:class=\"`cn-object-card__leading--${leadingKind}`\"\n\t\t\t\t\tdata-testid=\"cn-object-card-leading\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t<template v-if=\"leadingKind === 'initials'\">{{ leading.initials }}</template>\n\t\t\t\t\t<CnIcon v-else :name=\"leading.icon\" :size=\"20\" />\n\t\t\t\t</span>\n\t\t\t\t<img\n\t\t\t\t\tv-if=\"imageUrl\"\n\t\t\t\t\t:src=\"imageUrl\"\n\t\t\t\t\t:alt=\"title\"\n\t\t\t\t\tclass=\"cn-object-card__image\">\n\n\t\t\t\t<div class=\"cn-object-card__title-area\">\n\t\t\t\t\t<h3 class=\"cn-object-card__title\">\n\t\t\t\t\t\t<!-- Beside the title, not in the badges row: the badges\n\t\t\t\t\t\t slot is the consumer's, and a lock is the library's\n\t\t\t\t\t\t to report. A card whose consumer passes no badges\n\t\t\t\t\t\t would otherwise show no padlock at all. -->\n\t\t\t\t\t\t<CnLockIndicator :object=\"object\" :size=\"16\" />\n\t\t\t\t\t\t{{ title }}\n\t\t\t\t\t</h3>\n\t\t\t\t\t<p v-if=\"description\" class=\"cn-object-card__description\">\n\t\t\t\t\t\t{{ truncatedDescription }}\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t\t<!-- Board look, end of the head: the status pill, or else the row menu. -->\n\t\t\t\t<template v-if=\"isBoardLook\">\n\t\t\t\t\t<CnStatusBadge\n\t\t\t\t\t\tv-if=\"statusPill\"\n\t\t\t\t\t\tclass=\"cn-object-card__status\"\n\t\t\t\t\t\t:label=\"statusPill.label\"\n\t\t\t\t\t\t:variant=\"statusPill.variant\"\n\t\t\t\t\t\tdata-testid=\"cn-object-card-status\" />\n\t\t\t\t\t<div\n\t\t\t\t\t\tv-else-if=\"$slots.actions\"\n\t\t\t\t\t\tclass=\"cn-object-card__menu\"\n\t\t\t\t\t\t@click.stop\n\t\t\t\t\t\t@auxclick.stop>\n\t\t\t\t\t\t<slot name=\"actions\" :object=\"object\" />\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t</div>\n\n\t\t\t<!-- Badges slot -->\n\t\t\t<div v-if=\"$slots.badges\" class=\"cn-object-card__badges\">\n\t\t\t\t<slot name=\"badges\" :object=\"object\" />\n\t\t\t</div>\n\n\t\t\t<!-- Metadata: visible properties as label:value pairs -->\n\t\t\t<div v-if=\"metadataFields.length > 0\" class=\"cn-object-card__metadata\" :class=\"{ 'cn-object-card__metadata--facts': isBoardLook }\">\n\t\t\t\t<slot name=\"metadata\" :object=\"object\" :fields=\"metadataFields\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tv-for=\"field in metadataFields\"\n\t\t\t\t\t\t:key=\"field.key\"\n\t\t\t\t\t\tclass=\"cn-object-card__meta-item\">\n\t\t\t\t\t\t<span class=\"cn-object-card__meta-label\">{{ field.label }}</span>\n\t\t\t\t\t\t<CnCellRenderer\n\t\t\t\t\t\t\t:value=\"field.value\"\n\t\t\t\t\t\t\t:property=\"field.property\"\n\t\t\t\t\t\t\t:truncate=\"60\" />\n\t\t\t\t\t</div>\n\t\t\t\t</slot>\n\t\t\t</div>\n\n\t\t\t<!-- Board look: one footer action, with a muted meta text at the start. -->\n\t\t\t<div\n\t\t\t\tv-if=\"isBoardLook && footerAction\"\n\t\t\t\tclass=\"cn-object-card__footer\"\n\t\t\t\tdata-testid=\"cn-object-card-footer\"\n\t\t\t\t@click.stop\n\t\t\t\t@auxclick.stop>\n\t\t\t\t<span v-if=\"footerAction.meta\" class=\"cn-object-card__footer-meta\">{{ footerAction.meta }}</span>\n\t\t\t\t<NcButton\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\tclass=\"cn-object-card__footer-action\"\n\t\t\t\t\tdata-testid=\"cn-object-card-footer-action\"\n\t\t\t\t\t:aria-label=\"footerAction.ariaLabel \|\| `${footerAction.label} ${title}`\"\n\t\t\t\t\t@click=\"$emit('footer-action', object, footerAction)\">\n\t\t\t\t\t{{ footerAction.label }}\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<!-- Actions slot -->\n\t\t<div v-if=\"$slots.actions && !isBoardLook\"\n\t\t\tclass=\"cn-object-card__actions\"\n\t\t\t@click.stop\n\t\t\t@auxclick.stop>\n\t\t\t<slot name=\"actions\" :object=\"object\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport { NcButton, NcCheckboxRadioSwitch } from '@nextcloud/vue'\nimport { useClickDragGuard } from '../../composables/useClickDragGuard.js'\nimport { normalizeLook } from '../../composables/useLook.js'\nimport { resolveImageUrl } from '../../utils/resolveImageUrl.js'\nimport { isRowMiddleClick, preventMiddleClickAutoscroll } from '../../utils/rowAuxClick.js'\nimport { formatValue } from '../../utils/schema.js'\nimport { CnCellRenderer } from '../CnCellRenderer/index.js'\nimport { CnIcon } from '../CnIcon/index.js'\nimport { CnLockIndicator } from '../CnLockIndicator/index.js'\nimport { CnStatusBadge } from '../CnStatusBadge/index.js'\n\n/*\n CnObjectCard — Schema-configuration-driven card for object display.\n \n Uses `schema.configuration` to determine which fields map to the card title,\n * description, and image. Remaining visible properties are shown as metadata.\n \n ```vue\n * <CnObjectCard :object=\"publication\" :schema=\"pubSchema\">\n * <template #actions=\"{ object }\">\n * <NcActions><NcActionButton @click=\"edit(object)\">Edit</NcActionButton></NcActions>\n * </template>\n * </CnObjectCard>\n * ```\n /\nexport default {\n\tname: 'CnObjectCard',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tNcCheckboxRadioSwitch,\n\t\tCnCellRenderer,\n\t\tCnIcon,\n\t\tCnLockIndicator,\n\t\tCnStatusBadge,\n\t},\n\n\tinject: {\n\t\t/\n\t\t Consumer translation function, provided by CnAppRoot as\n\t\t * `cnTranslate: this.translate` (bound to the host app's id). Metadata\n\t\t * labels come from schema property titles, authored in English as the\n\t\t * canonical source; the visible label is resolved through this function\n\t\t * so it follows the user's language. Defaults to identity when used\n\t\t * standalone (no CnAppRoot ancestor).\n\t\t /\n\t\tcnTranslate: { default: () => (key) => key },\n\t\t/* The look CnAppRoot provides; `board` draws the record card of the screens. /\n\t\tcnLook: { default: 'nextcloud' },\n\t},\n\n\tprops: {\n\t\t/* The object data /\n\t\tobject: {\n\t\t\ttype: Object,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Schema definition with properties and configuration /\n\t\tschema: {\n\t\t\ttype: Object,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Whether this card is selected /\n\t\tselected: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/* Whether to show selection checkbox /\n\t\tselectable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t When true, a body click on a SELECTABLE card emits `click`\n\t\t * (navigation) instead of toggling selection — selection then happens\n\t\t * via the checkbox only. The card counterpart of CnIndexPage's\n\t\t * `rowClickToView` (a table row click already navigates in that mode).\n\t\t \n\t\t @type {boolean}\n\t\t /\n\t\tclickToView: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Board look: the status pill at the end of the head row, as a label\n\t\t * (`\"Open\"`) or `{ label, variant }` with a CnStatusBadge variant\n\t\t * (`success`, `warning`, `error`, `info`, `primary`, `default`).\n\t\t * Without it the head row ends in the row menu, when there is one.\n\t\t \n\t\t @type {(string\|{label: string, variant?: string})}\n\t\t * @spec openspec/changes/screens-card-parity/specs/card-board-look/spec.md#requirement-a-record-card-has-a-head-facts-and-one-action\n\t\t /\n\t\tstatus: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Board look: the leading element of the head row. `{ initials }`\n\t\t * draws the initials in a 36px circle; `{ icon }` a schema icon in a\n\t\t * 36px rounded square on a tint.\n\t\t \n\t\t @type {{initials?: string, icon?: string}}\n\t\t /\n\t\tleading: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Board look: the card's one footer action. `{ label, meta?,\n\t\t * ariaLabel? }`; `meta` is the 13px muted text at the start of the\n\t\t * footer. Clicking emits `footer-action`.\n\t\t \n\t\t @type {{label: string, meta?: string, ariaLabel?: string}}\n\t\t /\n\t\tfooterAction: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t The property keys the facts list shows, in order (manifest key\n\t\t * `config.cardFields`). Without it the card shows the first\n\t\t * `maxMetadata` visible properties, as before.\n\t\t \n\t\t @type {Array<string>}\n\t\t /\n\t\tcardFields: {\n\t\t\ttype: Array,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/* Maximum number of metadata fields to show /\n\t\tmaxMetadata: {\n\t\t\ttype: Number,\n\t\t\tdefault: 4,\n\t\t},\n\t},\n\n\temits: ['click', 'select', 'aux-click', 'footer-action'],\n\n\tsetup() {\n\t\t// Tell a deliberate card click apart from a text-selection drag.\n\t\treturn useClickDragGuard()\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t Whether the record card of the board look is drawn.\n\t\t \n\t\t @return {boolean}\n\t\t /\n\t\tisBoardLook() {\n\t\t\treturn normalizeLook(this.cnLook) === 'board'\n\t\t},\n\n\t\t/\n\t\t `initials`, `icon` or '' for the head row's leading element.\n\t\t \n\t\t @return {string}\n\t\t /\n\t\tleadingKind() {\n\t\t\tif (this.leading && typeof this.leading.initials === 'string' && this.leading.initials !== '') {\n\t\t\t\treturn 'initials'\n\t\t\t}\n\t\t\treturn this.leading && typeof this.leading.icon === 'string' && this.leading.icon !== '' ? 'icon' : ''\n\t\t},\n\n\t\t/\n\t\t The status as `{ label, variant }`, or null.\n\t\t \n\t\t @return {?{label: string, variant: string}}\n\t\t /\n\t\tstatusPill() {\n\t\t\tif (typeof this.status === 'string' && this.status !== '') {\n\t\t\t\treturn { label: this.status, variant: 'default' }\n\t\t\t}\n\t\t\tif (this.status && typeof this.status.label === 'string' && this.status.label !== '') {\n\t\t\t\treturn { label: this.status.label, variant: this.status.variant \|\| 'default' }\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\n\t\tconfig() {\n\t\t\treturn this.schema?.configuration \|\| {}\n\t\t},\n\n\t\ttitle() {\n\t\t\tconst field = this.config.objectNameField\n\t\t\tif (field && this.object[field]) {\n\t\t\t\treturn String(this.object[field])\n\t\t\t}\n\t\t\treturn this.object.title \|\| this.object.name \|\| this.object.id \|\| '—'\n\t\t},\n\n\t\tdescription() {\n\t\t\tconst field = this.config.objectDescriptionField\n\t\t\tif (field && this.object[field]) {\n\t\t\t\treturn String(this.object[field])\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\n\t\ttruncatedDescription() {\n\t\t\tif (!this.description) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tif (this.description.length > 120) {\n\t\t\t\treturn this.description.substring(0, 120) + '...'\n\t\t\t}\n\t\t\treturn this.description\n\t\t},\n\n\t\timageUrl() {\n\t\t\tconst field = this.config.objectImageField\n\t\t\tif (field && this.object[field]) {\n\t\t\t\treturn resolveImageUrl(this.object[field])\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\n\t\t/* Fields excluded from metadata (already shown as title/desc/image) /\n\t\tconfigFields() {\n\t\t\treturn [\n\t\t\t\tthis.config.objectNameField,\n\t\t\t\tthis.config.objectDescriptionField,\n\t\t\t\tthis.config.objectSummaryField,\n\t\t\t\tthis.config.objectImageField,\n\t\t\t].filter(Boolean)\n\t\t},\n\n\t\t/* Remaining visible properties for the metadata section /\n\t\tmetadataFields() {\n\t\t\tif (!this.schema?.properties) {\n\t\t\t\treturn []\n\t\t\t}\n\n\t\t\t// The page names the facts: those properties, in that order.\n\t\t\tif (Array.isArray(this.cardFields)) {\n\t\t\t\treturn this.cardFields\n\t\t\t\t\t.filter((key) => typeof key === 'string' && this.schema.properties[key] && !this.configFields.includes(key))\n\t\t\t\t\t.map((key) => ({\n\t\t\t\t\t\tkey,\n\t\t\t\t\t\tlabel: this.cnTranslate(this.schema.properties[key].title \|\| key),\n\t\t\t\t\t\tvalue: this.object[key],\n\t\t\t\t\t\tproperty: this.schema.properties[key],\n\t\t\t\t\t}))\n\t\t\t}\n\n\t\t\treturn Object.entries(this.schema.properties)\n\t\t\t\t.filter(([key, prop]) => {\n\t\t\t\t\tif (this.configFields.includes(key)) {\n\t\t\t\t\t\treturn false\n\t\t\t\t\t}\n\t\t\t\t\tif (prop.visible === false) {\n\t\t\t\t\t\treturn false\n\t\t\t\t\t}\n\t\t\t\t\tif (prop.type === 'object') {\n\t\t\t\t\t\treturn false\n\t\t\t\t\t}\n\t\t\t\t\tif (prop.format === 'markdown') {\n\t\t\t\t\t\treturn false\n\t\t\t\t\t}\n\t\t\t\t\treturn true\n\t\t\t\t})\n\t\t\t\t.sort(([, a], [, b]) => {\n\t\t\t\t\tconst orderA = typeof a.order === 'number' ? a.order : Infinity\n\t\t\t\t\tconst orderB = typeof b.order === 'number' ? b.order : Infinity\n\t\t\t\t\treturn orderA - orderB\n\t\t\t\t})\n\t\t\t\t.slice(0, this.maxMetadata)\n\t\t\t\t.map(([key, prop]) => ({\n\t\t\t\t\tkey,\n\t\t\t\t\tlabel: this.cnTranslate(prop.title \|\| key),\n\t\t\t\t\tvalue: this.object[key],\n\t\t\t\t\tproperty: prop,\n\t\t\t\t}))\n\t\t},\n\t},\n\n\tmethods: {\n\t\tformatValue,\n\n\t\t/\n\t\t Card-body click: emits `select` when `selectable` (ignoring drags),\n\t\t * otherwise emits `click` for navigation. With `clickToView`, a\n\t\t * selectable card's body click navigates too — the checkbox is the\n\t\t * only selection surface, mirroring the table's rowClickToView split.\n\t\t \n\t\t @param {MouseEvent} [event] The originating click event.\n\t\t /\n\t\tonCardClick(event) {\n\t\t\tif (this.selectable && !this.clickToView) {\n\t\t\t\tif (this.wasDrag(event)) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\t/\n\t\t\t\t @event select Emitted when the card toggles selection (clicking the body of a selectable card, or its checkbox).\n\t\t\t\t * @type {object} The card's object.\n\t\t\t\t /\n\t\t\t\tthis.$emit('select', this.object)\n\t\t\t\t// Deprecation: selectable cards used to emit `click`. Keep emitting it\n\t\t\t\t// for listeners that still rely on it, but warn them to migrate to `select`.\n\t\t\t\t// `$.vnode.props`, not `$attrs`: `click` is a declared emit, and\n\t\t\t\t// Vue keeps declared emits out of `$attrs`.\n\t\t\t\tif (this.$.vnode.props?.onClick) {\n\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\tconsole.warn('[CnObjectCard] @click on selectable cards is deprecated; use @select instead.')\n\t\t\t\t\tthis.$emit('click', this.object)\n\t\t\t\t}\n\t\t\t\treturn\n\t\t\t}\n\t\t\t/\n\t\t\t @event click Emitted when a non-selectable (or `clickToView`) card is clicked. Payload: `(object, event)` — the card's object and the native click event, for opening it in a new tab on a ctrl/cmd/shift click. A middle click emits `aux-click` instead. Selectable cards emit `select`; they also emit `click` (deprecated) when a `click` listener is present, so migrate selectable consumers to `@select`.\n\t\t\t * @type {object} The card's object.\n\t\t\t /\n\t\t\tthis.$emit('click', this.object, event)\n\t\t},\n\n\t\t/\n\t\t Card mousedown: record the press for the drag guard, and on a card a\n\t\t * middle click opens, keep the browser from starting autoscroll.\n\t\t \n\t\t @param {MouseEvent} event The mousedown event.\n\t\t /\n\t\tonCardMouseDown(event) {\n\t\t\tthis.onPointerDown(event)\n\t\t\tif (!this.selectable \|\| this.clickToView) {\n\t\t\t\tpreventMiddleClickAutoscroll(event)\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Card-body middle click: emits `aux-click`, not `click`, so an existing\n\t\t * `click` listener that navigates never moves the current tab away.\n\t\t * Ignored on a select-on-click card, on nested controls and on drags.\n\t\t \n\t\t @param {MouseEvent} event The auxclick event.\n\t\t /\n\t\tonCardAuxClick(event) {\n\t\t\tif (!isRowMiddleClick(event) \|\| this.wasDrag(event)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (this.selectable && !this.clickToView) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t/\n\t\t\t @event aux-click Emitted when a non-selectable (or `clickToView`) card is middle-clicked, for opening it in a new tab (see `openRowTarget`). Payload: `(object, event)` — the card's object and the native auxclick event.\n\t\t\t * @type {object} The card's object.\n\t\t\t */\n\t\t\tthis.$emit('aux-click', this.object, event)\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-object-card {\n\tdisplay: flex;\n\tgap: 12px;\n\tpadding: 16px;\n\tbackground: var(--color-main-background);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--border-radius-large, 10px);\n\tcursor: pointer;\n\ttransition: box-shadow 0.2s ease, border-color 0.2s ease;\n}\n\n.cn-object-card:hover {\n\tborder-color: var(--color-primary-element);\n\tbox-shadow: 0 2px 8px var(--color-box-shadow);\n}\n\n.cn-object-card--selected {\n\tborder-color: var(--color-primary-element);\n\tbackground: var(--color-primary-element-light);\n}\n\n.cn-object-card__checkbox {\n\tflex-shrink: 0;\n\tpadding-top: 2px;\n}\n\n.cn-object-card__content {\n\tflex: 1;\n\tmin-width: 0;\n}\n\n.cn-object-card__header {\n\tdisplay: flex;\n\tgap: 12px;\n\talign-items: flex-start;\n}\n\n.cn-object-card__image {\n\twidth: 48px;\n\theight: 48px;\n\tborder-radius: var(--border-radius);\n\tobject-fit: cover;\n\tflex-shrink: 0;\n}\n\n.cn-object-card__title-area {\n\tflex: 1;\n\tmin-width: 0;\n}\n\n.cn-object-card__title {\n\tmargin: 0;\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tline-height: 1.3;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.cn-object-card__description {\n\tmargin: 4px 0 0;\n\tfont-size: 13px;\n\tcolor: var(--color-text-maxcontrast);\n\tline-height: 1.4;\n}\n\n.cn-object-card__badges {\n\tmargin-top: 8px;\n}\n\n.cn-object-card__metadata {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n\tgap: 8px;\n\tmargin-top: 12px;\n\tpadding-top: 12px;\n\tborder-top: 1px solid var(--color-border);\n}\n\n.cn-object-card__meta-item {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px;\n}\n\n.cn-object-card__meta-label {\n\tfont-size: 11px;\n\tfont-weight: 500;\n\tcolor: var(--color-text-maxcontrast);\n\ttext-transform: uppercase;\n\tletter-spacing: 0.3px;\n}\n\n.cn-object-card__actions {\n\tflex-shrink: 0;\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createVNode","_createElementVNode","_Fragment","_createTextVNode","_toDisplayString","_createBlock","_renderSlot","_openBlock","_renderList"],"mappings":"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"}
1	+ {"version":3,"file":"CnObjectCard.vue3.js","sources":["../../../../src/components/CnObjectCard/CnObjectCard.vue?vue&type=template&id=6f672c8f&lang.js"],"sourcesContent":["<template>\n\t<div\n\t\tclass=\"cn-object-card\"\n\t\t:class=\"[{ 'cn-object-card--selected': selected, 'cn-object-card--board': isBoardLook }, accentVariant && ['cn-object-card--accent', `cn-object-card--accent-${accentVariant}`]]\"\n\t\t@mousedown=\"onCardMouseDown\"\n\t\t@click=\"onCardClick($event)\"\n\t\t@auxclick=\"onCardAuxClick($event)\">\n\t\t<!-- Selection checkbox -->\n\t\t<div v-if=\"selectable\"\n\t\t\tclass=\"cn-object-card__checkbox\"\n\t\t\t@click.stop\n\t\t\t@auxclick.stop>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:modelValue=\"selected\"\n\t\t\t\t@update:modelValue=\"$emit('select', object)\" />\n\t\t</div>\n\n\t\t<!-- Card content -->\n\t\t<div class=\"cn-object-card__content\">\n\t\t\t<!-- Header: image + title -->\n\t\t\t<div class=\"cn-object-card__header\">\n\t\t\t\t<!-- Board look: the leading element, initials in a circle or an icon on a tint. -->\n\t\t\t\t<span\n\t\t\t\t\tv-if=\"isBoardLook && leadingKind\"\n\t\t\t\t\tclass=\"cn-object-card__leading\"\n\t\t\t\t\t:class=\"`cn-object-card__leading--${leadingKind}`\"\n\t\t\t\t\tdata-testid=\"cn-object-card-leading\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t<template v-if=\"leadingKind === 'initials'\">{{ leading.initials }}</template>\n\t\t\t\t\t<CnIcon v-else :name=\"leading.icon\" :size=\"20\" />\n\t\t\t\t</span>\n\t\t\t\t<img\n\t\t\t\t\tv-if=\"imageUrl\"\n\t\t\t\t\t:src=\"imageUrl\"\n\t\t\t\t\t:alt=\"title\"\n\t\t\t\t\tclass=\"cn-object-card__image\">\n\n\t\t\t\t<div class=\"cn-object-card__title-area\">\n\t\t\t\t\t<h3 class=\"cn-object-card__title\">\n\t\t\t\t\t\t<!-- Beside the title, not in the badges row: the badges\n\t\t\t\t\t\t slot is the consumer's, and a lock is the library's\n\t\t\t\t\t\t to report. A card whose consumer passes no badges\n\t\t\t\t\t\t would otherwise show no padlock at all. -->\n\t\t\t\t\t\t<CnLockIndicator :object=\"object\" :size=\"16\" />\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tv-if=\"accentVariant && accent.icon\"\n\t\t\t\t\t\t\tclass=\"cn-object-card__accent-icon\"\n\t\t\t\t\t\t\tdata-testid=\"cn-object-card-accent-icon\"\n\t\t\t\t\t\t\t:role=\"accent.label ? 'img' : null\"\n\t\t\t\t\t\t\t:aria-label=\"accent.label \|\| null\"\n\t\t\t\t\t\t\t:aria-hidden=\"accent.label ? null : 'true'\"\n\t\t\t\t\t\t\t:title=\"accent.label \|\| null\">\n\t\t\t\t\t\t\t<CnIcon :name=\"accent.icon\" :size=\"16\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{{ title }}\n\t\t\t\t\t</h3>\n\t\t\t\t\t<p v-if=\"description\" class=\"cn-object-card__description\">\n\t\t\t\t\t\t{{ truncatedDescription }}\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t\t<!-- Board look, end of the head: the status pill, or else the row menu. -->\n\t\t\t\t<template v-if=\"isBoardLook\">\n\t\t\t\t\t<CnStatusBadge\n\t\t\t\t\t\tv-if=\"statusPill\"\n\t\t\t\t\t\tclass=\"cn-object-card__status\"\n\t\t\t\t\t\t:label=\"statusPill.label\"\n\t\t\t\t\t\t:variant=\"statusPill.variant\"\n\t\t\t\t\t\tdata-testid=\"cn-object-card-status\" />\n\t\t\t\t\t<div\n\t\t\t\t\t\tv-else-if=\"$slots.actions\"\n\t\t\t\t\t\tclass=\"cn-object-card__menu\"\n\t\t\t\t\t\t@click.stop\n\t\t\t\t\t\t@auxclick.stop>\n\t\t\t\t\t\t<slot name=\"actions\" :object=\"object\" />\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t</div>\n\n\t\t\t<!-- Badges slot -->\n\t\t\t<div v-if=\"$slots.badges\" class=\"cn-object-card__badges\">\n\t\t\t\t<slot name=\"badges\" :object=\"object\" />\n\t\t\t</div>\n\n\t\t\t<!-- Metadata: visible properties as label:value pairs -->\n\t\t\t<div v-if=\"metadataFields.length > 0\" class=\"cn-object-card__metadata\" :class=\"{ 'cn-object-card__metadata--facts': isBoardLook }\">\n\t\t\t\t<slot name=\"metadata\" :object=\"object\" :fields=\"metadataFields\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tv-for=\"field in metadataFields\"\n\t\t\t\t\t\t:key=\"field.key\"\n\t\t\t\t\t\tclass=\"cn-object-card__meta-item\">\n\t\t\t\t\t\t<span class=\"cn-object-card__meta-label\">{{ field.label }}</span>\n\t\t\t\t\t\t<CnCellRenderer\n\t\t\t\t\t\t\t:value=\"field.value\"\n\t\t\t\t\t\t\t:property=\"field.property\"\n\t\t\t\t\t\t\t:truncate=\"60\" />\n\t\t\t\t\t</div>\n\t\t\t\t</slot>\n\t\t\t</div>\n\n\t\t\t<!-- Board look: one footer action, with a muted meta text at the start. -->\n\t\t\t<div\n\t\t\t\tv-if=\"isBoardLook && footerAction\"\n\t\t\t\tclass=\"cn-object-card__footer\"\n\t\t\t\tdata-testid=\"cn-object-card-footer\"\n\t\t\t\t@click.stop\n\t\t\t\t@auxclick.stop>\n\t\t\t\t<span v-if=\"footerAction.meta\" class=\"cn-object-card__footer-meta\">{{ footerAction.meta }}</span>\n\t\t\t\t<NcButton\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\tclass=\"cn-object-card__footer-action\"\n\t\t\t\t\tdata-testid=\"cn-object-card-footer-action\"\n\t\t\t\t\t:aria-label=\"footerAction.ariaLabel \|\| `${footerAction.label} ${title}`\"\n\t\t\t\t\t@click=\"$emit('footer-action', object, footerAction)\">\n\t\t\t\t\t{{ footerAction.label }}\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<!-- Actions slot -->\n\t\t<div v-if=\"$slots.actions && !isBoardLook\"\n\t\t\tclass=\"cn-object-card__actions\"\n\t\t\t@click.stop\n\t\t\t@auxclick.stop>\n\t\t\t<slot name=\"actions\" :object=\"object\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport { NcButton, NcCheckboxRadioSwitch } from '@nextcloud/vue'\nimport { useClickDragGuard } from '../../composables/useClickDragGuard.js'\nimport { normalizeLook } from '../../composables/useLook.js'\nimport { resolveImageUrl } from '../../utils/resolveImageUrl.js'\nimport { isRowMiddleClick, preventMiddleClickAutoscroll } from '../../utils/rowAuxClick.js'\nimport { formatValue } from '../../utils/schema.js'\nimport { CnCellRenderer } from '../CnCellRenderer/index.js'\nimport { CnIcon } from '../CnIcon/index.js'\nimport { CnLockIndicator } from '../CnLockIndicator/index.js'\nimport { CnStatusBadge } from '../CnStatusBadge/index.js'\n\nconst ACCENT_VARIANTS = ['success', 'warning', 'error', 'info', 'primary']\n\n/*\n CnObjectCard — Schema-configuration-driven card for object display.\n \n Uses `schema.configuration` to determine which fields map to the card title,\n * description, and image. Remaining visible properties are shown as metadata.\n \n ```vue\n * <CnObjectCard :object=\"publication\" :schema=\"pubSchema\">\n * <template #actions=\"{ object }\">\n * <NcActions><NcActionButton @click=\"edit(object)\">Edit</NcActionButton></NcActions>\n * </template>\n * </CnObjectCard>\n * ```\n /\nexport default {\n\tname: 'CnObjectCard',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tNcCheckboxRadioSwitch,\n\t\tCnCellRenderer,\n\t\tCnIcon,\n\t\tCnLockIndicator,\n\t\tCnStatusBadge,\n\t},\n\n\tinject: {\n\t\t/\n\t\t Consumer translation function, provided by CnAppRoot as\n\t\t * `cnTranslate: this.translate` (bound to the host app's id). Metadata\n\t\t * labels come from schema property titles, authored in English as the\n\t\t * canonical source; the visible label is resolved through this function\n\t\t * so it follows the user's language. Defaults to identity when used\n\t\t * standalone (no CnAppRoot ancestor).\n\t\t /\n\t\tcnTranslate: { default: () => (key) => key },\n\t\t/* The look CnAppRoot provides; `board` draws the record card of the screens. /\n\t\tcnLook: { default: 'nextcloud' },\n\t},\n\n\tprops: {\n\t\t/* The object data /\n\t\tobject: {\n\t\t\ttype: Object,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Schema definition with properties and configuration /\n\t\tschema: {\n\t\t\ttype: Object,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Whether this card is selected /\n\t\tselected: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/* Whether to show selection checkbox /\n\t\tselectable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t When true, a body click on a SELECTABLE card emits `click`\n\t\t * (navigation) instead of toggling selection — selection then happens\n\t\t * via the checkbox only. The card counterpart of CnIndexPage's\n\t\t * `rowClickToView` (a table row click already navigates in that mode).\n\t\t \n\t\t @type {boolean}\n\t\t /\n\t\tclickToView: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Board look: the status pill at the end of the head row, as a label\n\t\t * (`\"Open\"`) or `{ label, variant }` with a CnStatusBadge variant\n\t\t * (`success`, `warning`, `error`, `info`, `primary`, `default`).\n\t\t * Without it the head row ends in the row menu, when there is one.\n\t\t \n\t\t @type {(string\|{label: string, variant?: string})}\n\t\t * @spec openspec/changes/screens-card-parity/specs/card-board-look/spec.md#requirement-a-record-card-has-a-head-facts-and-one-action\n\t\t /\n\t\tstatus: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Board look: the leading element of the head row. `{ initials }`\n\t\t * draws the initials in a 36px circle; `{ icon }` a schema icon in a\n\t\t * 36px rounded square on a tint.\n\t\t \n\t\t @type {{initials?: string, icon?: string}}\n\t\t /\n\t\tleading: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t Board look: the card's one footer action. `{ label, meta?,\n\t\t * ariaLabel? }`; `meta` is the 13px muted text at the start of the\n\t\t * footer. Clicking emits `footer-action`.\n\t\t \n\t\t @type {{label: string, meta?: string, ariaLabel?: string}}\n\t\t /\n\t\tfooterAction: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t A status accent: a colored border at the start of the card and,\n\t\t * with `icon`, a colored icon before the title. `variant` is one of\n\t\t * `success`, `warning`, `error`, `info` or `primary`; `icon` is a\n\t\t * name registered with CnIcon; `label` names the status for screen\n\t\t * readers and as the icon's tooltip.\n\t\t \n\t\t @type {{variant: string, icon?: string, label?: string}}\n\t\t /\n\t\taccent: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/\n\t\t The property keys the facts list shows, in order (manifest key\n\t\t * `config.cardFields`). Without it the card shows the first\n\t\t * `maxMetadata` visible properties, as before.\n\t\t \n\t\t @type {Array<string>}\n\t\t /\n\t\tcardFields: {\n\t\t\ttype: Array,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/* Maximum number of metadata fields to show /\n\t\tmaxMetadata: {\n\t\t\ttype: Number,\n\t\t\tdefault: 4,\n\t\t},\n\t},\n\n\temits: ['click', 'select', 'aux-click', 'footer-action'],\n\n\tsetup() {\n\t\t// Tell a deliberate card click apart from a text-selection drag.\n\t\treturn useClickDragGuard()\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t Whether the record card of the board look is drawn.\n\t\t \n\t\t @return {boolean}\n\t\t /\n\t\tisBoardLook() {\n\t\t\treturn normalizeLook(this.cnLook) === 'board'\n\t\t},\n\n\t\t/\n\t\t `initials`, `icon` or '' for the head row's leading element.\n\t\t \n\t\t @return {string}\n\t\t /\n\t\tleadingKind() {\n\t\t\tif (this.leading && typeof this.leading.initials === 'string' && this.leading.initials !== '') {\n\t\t\t\treturn 'initials'\n\t\t\t}\n\t\t\treturn this.leading && typeof this.leading.icon === 'string' && this.leading.icon !== '' ? 'icon' : ''\n\t\t},\n\n\t\t/\n\t\t The status as `{ label, variant }`, or null.\n\t\t \n\t\t @return {?{label: string, variant: string}}\n\t\t /\n\t\tstatusPill() {\n\t\t\tif (typeof this.status === 'string' && this.status !== '') {\n\t\t\t\treturn { label: this.status, variant: 'default' }\n\t\t\t}\n\t\t\tif (this.status && typeof this.status.label === 'string' && this.status.label !== '') {\n\t\t\t\treturn { label: this.status.label, variant: this.status.variant \|\| 'default' }\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\n\t\t/\n\t\t The accent variant when it is a known one, else ''.\n\t\t \n\t\t @return {string}\n\t\t /\n\t\taccentVariant() {\n\t\t\tconst variant = this.accent?.variant\n\t\t\treturn ACCENT_VARIANTS.includes(variant) ? variant : ''\n\t\t},\n\n\t\tconfig() {\n\t\t\treturn this.schema?.configuration \|\| {}\n\t\t},\n\n\t\ttitle() {\n\t\t\tconst field = this.config.objectNameField\n\t\t\tif (field && this.object[field]) {\n\t\t\t\treturn String(this.object[field])\n\t\t\t}\n\t\t\treturn this.object.title \|\| this.object.name \|\| this.object.id \|\| '—'\n\t\t},\n\n\t\tdescription() {\n\t\t\tconst field = this.config.objectDescriptionField\n\t\t\tif (field && this.object[field]) {\n\t\t\t\treturn String(this.object[field])\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\n\t\ttruncatedDescription() {\n\t\t\tif (!this.description) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tif (this.description.length > 120) {\n\t\t\t\treturn this.description.substring(0, 120) + '...'\n\t\t\t}\n\t\t\treturn this.description\n\t\t},\n\n\t\timageUrl() {\n\t\t\tconst field = this.config.objectImageField\n\t\t\tif (field && this.object[field]) {\n\t\t\t\treturn resolveImageUrl(this.object[field])\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\n\t\t/* Fields excluded from metadata (already shown as title/desc/image) /\n\t\tconfigFields() {\n\t\t\treturn [\n\t\t\t\tthis.config.objectNameField,\n\t\t\t\tthis.config.objectDescriptionField,\n\t\t\t\tthis.config.objectSummaryField,\n\t\t\t\tthis.config.objectImageField,\n\t\t\t].filter(Boolean)\n\t\t},\n\n\t\t/* Remaining visible properties for the metadata section /\n\t\tmetadataFields() {\n\t\t\tif (!this.schema?.properties) {\n\t\t\t\treturn []\n\t\t\t}\n\n\t\t\t// The page names the facts: those properties, in that order.\n\t\t\tif (Array.isArray(this.cardFields)) {\n\t\t\t\treturn this.cardFields\n\t\t\t\t\t.filter((key) => typeof key === 'string' && this.schema.properties[key] && !this.configFields.includes(key))\n\t\t\t\t\t.map((key) => ({\n\t\t\t\t\t\tkey,\n\t\t\t\t\t\tlabel: this.cnTranslate(this.schema.properties[key].title \|\| key),\n\t\t\t\t\t\tvalue: this.object[key],\n\t\t\t\t\t\tproperty: this.schema.properties[key],\n\t\t\t\t\t}))\n\t\t\t}\n\n\t\t\treturn Object.entries(this.schema.properties)\n\t\t\t\t.filter(([key, prop]) => {\n\t\t\t\t\tif (this.configFields.includes(key)) {\n\t\t\t\t\t\treturn false\n\t\t\t\t\t}\n\t\t\t\t\tif (prop.visible === false) {\n\t\t\t\t\t\treturn false\n\t\t\t\t\t}\n\t\t\t\t\tif (prop.type === 'object') {\n\t\t\t\t\t\treturn false\n\t\t\t\t\t}\n\t\t\t\t\tif (prop.format === 'markdown') {\n\t\t\t\t\t\treturn false\n\t\t\t\t\t}\n\t\t\t\t\treturn true\n\t\t\t\t})\n\t\t\t\t.sort(([, a], [, b]) => {\n\t\t\t\t\tconst orderA = typeof a.order === 'number' ? a.order : Infinity\n\t\t\t\t\tconst orderB = typeof b.order === 'number' ? b.order : Infinity\n\t\t\t\t\treturn orderA - orderB\n\t\t\t\t})\n\t\t\t\t.slice(0, this.maxMetadata)\n\t\t\t\t.map(([key, prop]) => ({\n\t\t\t\t\tkey,\n\t\t\t\t\tlabel: this.cnTranslate(prop.title \|\| key),\n\t\t\t\t\tvalue: this.object[key],\n\t\t\t\t\tproperty: prop,\n\t\t\t\t}))\n\t\t},\n\t},\n\n\tmethods: {\n\t\tformatValue,\n\n\t\t/\n\t\t Card-body click: emits `select` when `selectable` (ignoring drags),\n\t\t * otherwise emits `click` for navigation. With `clickToView`, a\n\t\t * selectable card's body click navigates too — the checkbox is the\n\t\t * only selection surface, mirroring the table's rowClickToView split.\n\t\t \n\t\t @param {MouseEvent} [event] The originating click event.\n\t\t /\n\t\tonCardClick(event) {\n\t\t\tif (this.selectable && !this.clickToView) {\n\t\t\t\tif (this.wasDrag(event)) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\t/\n\t\t\t\t @event select Emitted when the card toggles selection (clicking the body of a selectable card, or its checkbox).\n\t\t\t\t * @type {object} The card's object.\n\t\t\t\t /\n\t\t\t\tthis.$emit('select', this.object)\n\t\t\t\t// Deprecation: selectable cards used to emit `click`. Keep emitting it\n\t\t\t\t// for listeners that still rely on it, but warn them to migrate to `select`.\n\t\t\t\t// `$.vnode.props`, not `$attrs`: `click` is a declared emit, and\n\t\t\t\t// Vue keeps declared emits out of `$attrs`.\n\t\t\t\tif (this.$.vnode.props?.onClick) {\n\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\tconsole.warn('[CnObjectCard] @click on selectable cards is deprecated; use @select instead.')\n\t\t\t\t\tthis.$emit('click', this.object)\n\t\t\t\t}\n\t\t\t\treturn\n\t\t\t}\n\t\t\t/\n\t\t\t @event click Emitted when a non-selectable (or `clickToView`) card is clicked. Payload: `(object, event)` — the card's object and the native click event, for opening it in a new tab on a ctrl/cmd/shift click. A middle click emits `aux-click` instead. Selectable cards emit `select`; they also emit `click` (deprecated) when a `click` listener is present, so migrate selectable consumers to `@select`.\n\t\t\t * @type {object} The card's object.\n\t\t\t /\n\t\t\tthis.$emit('click', this.object, event)\n\t\t},\n\n\t\t/\n\t\t Card mousedown: record the press for the drag guard, and on a card a\n\t\t * middle click opens, keep the browser from starting autoscroll.\n\t\t \n\t\t @param {MouseEvent} event The mousedown event.\n\t\t /\n\t\tonCardMouseDown(event) {\n\t\t\tthis.onPointerDown(event)\n\t\t\tif (!this.selectable \|\| this.clickToView) {\n\t\t\t\tpreventMiddleClickAutoscroll(event)\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Card-body middle click: emits `aux-click`, not `click`, so an existing\n\t\t * `click` listener that navigates never moves the current tab away.\n\t\t * Ignored on a select-on-click card, on nested controls and on drags.\n\t\t \n\t\t @param {MouseEvent} event The auxclick event.\n\t\t /\n\t\tonCardAuxClick(event) {\n\t\t\tif (!isRowMiddleClick(event) \|\| this.wasDrag(event)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (this.selectable && !this.clickToView) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t/\n\t\t\t @event aux-click Emitted when a non-selectable (or `clickToView`) card is middle-clicked, for opening it in a new tab (see `openRowTarget`). Payload: `(object, event)` — the card's object and the native auxclick event.\n\t\t\t * @type {object} The card's object.\n\t\t\t /\n\t\t\tthis.$emit('aux-click', this.object, event)\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-object-card {\n\tdisplay: flex;\n\tgap: 12px;\n\tpadding: 16px;\n\tbackground: var(--color-main-background);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--border-radius-large, 10px);\n\tcursor: pointer;\n\ttransition: box-shadow 0.2s ease, border-color 0.2s ease;\n}\n\n.cn-object-card:hover {\n\tborder-color: var(--color-primary-element);\n\tbox-shadow: 0 2px 8px var(--color-box-shadow);\n}\n\n.cn-object-card--selected {\n\tborder-color: var(--color-primary-element);\n\tbackground: var(--color-primary-element-light);\n}\n\n/ The 4px start border takes 3px of padding, so the content stays put. */\n.cn-object-card.cn-object-card--accent {\n\tborder-inline-start-width: 4px;\n\tpadding-inline-start: 13px;\n}\n\n.cn-object-card.cn-object-card--accent-success {\n\tborder-inline-start-color: var(--color-element-success);\n}\n\n.cn-object-card.cn-object-card--accent-warning {\n\tborder-inline-start-color: var(--color-element-warning);\n}\n\n.cn-object-card.cn-object-card--accent-error {\n\tborder-inline-start-color: var(--color-element-error);\n}\n\n.cn-object-card.cn-object-card--accent-info {\n\tborder-inline-start-color: var(--color-element-info);\n}\n\n.cn-object-card.cn-object-card--accent-primary {\n\tborder-inline-start-color: var(--color-primary-element);\n}\n\n.cn-object-card__accent-icon {\n\tdisplay: inline-flex;\n\tvertical-align: -2px;\n\tmargin-inline-end: 4px;\n}\n\n.cn-object-card--accent-success .cn-object-card__accent-icon {\n\tcolor: var(--color-text-success);\n}\n\n.cn-object-card--accent-warning .cn-object-card__accent-icon {\n\tcolor: var(--color-text-warning);\n}\n\n.cn-object-card--accent-error .cn-object-card__accent-icon {\n\tcolor: var(--color-text-error);\n}\n\n.cn-object-card--accent-info .cn-object-card__accent-icon {\n\tcolor: var(--color-element-info);\n}\n\n.cn-object-card--accent-primary .cn-object-card__accent-icon {\n\tcolor: var(--color-primary-element);\n}\n\n.cn-object-card__checkbox {\n\tflex-shrink: 0;\n\tpadding-top: 2px;\n}\n\n.cn-object-card__content {\n\tflex: 1;\n\tmin-width: 0;\n}\n\n.cn-object-card__header {\n\tdisplay: flex;\n\tgap: 12px;\n\talign-items: flex-start;\n}\n\n.cn-object-card__image {\n\twidth: 48px;\n\theight: 48px;\n\tborder-radius: var(--border-radius);\n\tobject-fit: cover;\n\tflex-shrink: 0;\n}\n\n.cn-object-card__title-area {\n\tflex: 1;\n\tmin-width: 0;\n}\n\n.cn-object-card__title {\n\tmargin: 0;\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tline-height: 1.3;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.cn-object-card__description {\n\tmargin: 4px 0 0;\n\tfont-size: 13px;\n\tcolor: var(--color-text-maxcontrast);\n\tline-height: 1.4;\n}\n\n.cn-object-card__badges {\n\tmargin-top: 8px;\n}\n\n.cn-object-card__metadata {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n\tgap: 8px;\n\tmargin-top: 12px;\n\tpadding-top: 12px;\n\tborder-top: 1px solid var(--color-border);\n}\n\n.cn-object-card__meta-item {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px;\n}\n\n.cn-object-card__meta-label {\n\tfont-size: 11px;\n\tfont-weight: 500;\n\tcolor: var(--color-text-maxcontrast);\n\ttext-transform: uppercase;\n\tletter-spacing: 0.3px;\n}\n\n.cn-object-card__actions {\n\tflex-shrink: 0;\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createVNode","_createElementVNode","_Fragment","_createTextVNode","_toDisplayString","_createBlock","_renderSlot","_openBlock","_renderList"],"mappings":"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"}

package/dist/esm/components/CnObjectDataWidget/CnObjectDataWidget.vue2.js CHANGED Viewed

@@ -1,21 +1,24 @@
 import axios__default from '@nextcloud/axios';
 import { translate } from '@nextcloud/l10n';
 import { generateUrl } from '@nextcloud/router';
-import { NcButton, NcLoadingIcon, NcTextField, NcSelect, NcCheckboxRadioSwitch, NcActionButton } from '@nextcloud/vue';
+import { NcButton, NcLoadingIcon, NcTextField, NcSelect, NcSelectUsers, NcCheckboxRadioSwitch, NcActionButton } from '@nextcloud/vue';
 import Check from 'vue-material-design-icons/Check.vue';
 import Close from 'vue-material-design-icons/Close.vue';
 import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue';
 import InformationOutline from 'vue-material-design-icons/InformationOutline.vue';
 import Pencil from 'vue-material-design-icons/Pencil.vue';
-import __sfc_main$3 from '../CnFormDialog/CnFormDialog.vue.js';
+import __sfc_main$1 from '../CnCellRenderer/CnGroupNameCell.vue.js';
+import __sfc_main$4 from '../CnFormDialog/CnFormDialog.vue.js';
 import { normalizeLook } from '../../composables/useLook.js';
+import { groupDisplayName, searchNextcloudGroups, loadGroupDisplayName } from '../../utils/groupAutocomplete.js';
 import { PANEL_ACTION_SINK } from '../../utils/panelActions.js';
 import { resolveFilterTokens } from '../../utils/resolveFilterTokens.js';
 import { fieldsFromSchema, formatValue } from '../../utils/schema.js';
 import { schemaRefSlug } from '../../utils/schemaRefSlug.js';
+import { searchNextcloudUsers, resolveNextcloudUser } from '../../utils/userAutocomplete.js';
 import __sfc_main from '../CnIcon/CnIcon.vue.js';
-import __sfc_main$2 from '../CnObjectMetadataModal/CnObjectMetadataModal.vue.js';
-import __sfc_main$1 from '../CnWidgetWrapper/CnWidgetWrapper.vue.js';
+import __sfc_main$3 from '../CnObjectMetadataModal/CnObjectMetadataModal.vue.js';
+import __sfc_main$2 from '../CnWidgetWrapper/CnWidgetWrapper.vue.js';
 import { useObjectStore } from '../../store/useObjectStore.js';
 /**
@@ -58,11 +61,13 @@ var script = {
 		NcLoadingIcon,
 		NcTextField,
 		NcSelect,
+		NcSelectUsers,
+		CnGroupNameCell: __sfc_main$1,
 		NcCheckboxRadioSwitch,
 		NcActionButton,
-		CnWidgetWrapper: __sfc_main$1,
-		CnObjectMetadataModal: __sfc_main$2,
-		CnFormDialog: __sfc_main$3,
+		CnWidgetWrapper: __sfc_main$2,
+		CnObjectMetadataModal: __sfc_main$3,
+		CnFormDialog: __sfc_main$4,
 		ContentSaveOutline,
 		InformationOutline,
 		Pencil,
@@ -437,6 +442,12 @@ var script = {
 			relationOptions: {},
 			/** Whether relation picker options are being fetched. */
 			relationOptionsLoading: false,
+			/** Group and user picker options per field key ({ id, label }[]). */
+			personOptions: {},
+			/** Key of the group or user field whose options are loading, or null. */
+			personLoading: null,
+			/** Display names of users seen in a user picker, by uid. */
+			userLabels: {},
 			/** Whether the user expanded the widget to see every field. */
 			expanded: false,
 			/** Fields that fit the cell while collapsed; null when all fit. */
@@ -1350,6 +1361,11 @@ var script = {
 			if (this.isSingleRelationField(field.key)) {
 				this.loadRelationOptions(field.key);
 			}
+			// Group and user fields pick from Nextcloud's own directory.
+			if (this.isPersonPicker(field)) {
+				this.searchPeople(field, '');
+				this.resolvePersonLabels(field, currentValue);
+			}
 			this.$nextTick(() => {
 				// Focus the editor
@@ -1575,6 +1591,182 @@ var script = {
 			return options.find((opt) => opt.id === val) || { id: val, label: String(val) }
 		},
+		/**
+		 * Whether a field picks a Nextcloud group (widget `group` or
+		 * `group-multiselect`, from `referenceType: nextcloud-group`).
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @return {boolean}
+		 */
+		isGroupPicker(field) {
+			return !!field && (field.widget === 'group' || field.widget === 'group-multiselect')
+		},
+		/**
+		 * Whether a field picks a Nextcloud user (widget `user` or
+		 * `user-multiselect`, from `referenceType: nextcloud-user`).
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @return {boolean}
+		 */
+		isUserPicker(field) {
+			return !!field && (field.widget === 'user' || field.widget === 'user-multiselect')
+		},
+		/**
+		 * Whether a field picks a group or a user.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @return {boolean}
+		 */
+		isPersonPicker(field) {
+			return this.isGroupPicker(field) || this.isUserPicker(field)
+		},
+		/**
+		 * Whether a group or user field holds a list.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @return {boolean}
+		 */
+		isPersonMultiple(field) {
+			return !!field && (field.widget === 'group-multiselect' || field.widget === 'user-multiselect')
+		},
+		/**
+		 * The group ids a group field holds, for the display mode.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @return {string[]}
+		 */
+		groupIdsOf(field) {
+			const raw = this.rawOf(field);
+			const list = Array.isArray(raw) ? raw : [raw];
+			return list.filter((v) => typeof v === 'string' && v !== '')
+		},
+		/**
+		 * The display name of a group id or uid, falling back to the id.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @param {string} id The group id or uid.
+		 * @return {string}
+		 */
+		personLabel(field, id) {
+			if (this.isGroupPicker(field)) {
+				return groupDisplayName(id) || String(id)
+			}
+			return this.userLabels[id] || String(id)
+		},
+		/**
+		 * Search Nextcloud groups or users for a picker. Fails soft (the
+		 * helpers return `[]`), so the picker stays usable with what it has.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @param {string} query The search term.
+		 * @return {Promise<void>}
+		 */
+		async searchPeople(field, query) {
+			this.personLoading = field.key;
+			try {
+				const options = this.isGroupPicker(field)
+					? await searchNextcloudGroups(query || '')
+					: await searchNextcloudUsers(query || '');
+				const list = Array.isArray(options) ? options : [];
+				if (this.isUserPicker(field)) {
+					const labels = { ...this.userLabels };
+					for (const opt of list) {
+						labels[opt.id] = opt.label;
+					}
+					this.userLabels = labels;
+				}
+				this.personOptions = { ...this.personOptions, [field.key]: list };
+			} finally {
+				if (this.personLoading === field.key) {
+					this.personLoading = null;
+				}
+			}
+		},
+		/**
+		 * Look up the display names of the value a group or user field holds,
+		 * so the open editor shows names rather than ids.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @param {unknown} value The held value (an id or a list of ids).
+		 * @return {Promise<void>}
+		 */
+		async resolvePersonLabels(field, value) {
+			const ids = (Array.isArray(value) ? value : [value])
+				.filter((v) => typeof v === 'string' && v !== '');
+			if (this.isGroupPicker(field)) {
+				await Promise.all(ids.map((gid) => loadGroupDisplayName(gid)));
+				return
+			}
+			const unknown = ids.filter((uid) => !this.userLabels[uid]);
+			const options = await Promise.all(unknown.map((uid) => resolveNextcloudUser(uid)));
+			if (options.length > 0) {
+				const labels = { ...this.userLabels };
+				for (const opt of options) {
+					if (opt && opt.id) {
+						labels[opt.id] = opt.label || opt.id;
+					}
+				}
+				this.userLabels = labels;
+			}
+		},
+		/**
+		 * The selected option(s) of a group or user picker.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @return {object|object[]|null}
+		 */
+		personSelected(field) {
+			const toOption = (id) => {
+				const label = this.personLabel(field, id);
+				return { id, label, displayName: label }
+			};
+			const v = this.editData[field.key];
+			if (this.isPersonMultiple(field)) {
+				return (Array.isArray(v) ? v : [])
+					.filter((id) => typeof id === 'string' && id !== '')
+					.map(toOption)
+			}
+			return (typeof v === 'string' && v !== '') ? toOption(v) : null
+		},
+		/**
+		 * Store a group or user choice as the id (or list of ids).
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @param {object|object[]|null} selected The chosen option(s).
+		 */
+		onPersonChange(field, selected) {
+			if (this.isPersonMultiple(field)) {
+				const ids = (Array.isArray(selected) ? selected : [])
+					.map((opt) => (opt && typeof opt === 'object' ? opt.id : opt))
+					.filter((id) => typeof id === 'string' && id !== '');
+				this.updateField(field.key, ids);
+				return
+			}
+			if (selected && this.isUserPicker(field) && selected.id) {
+				this.userLabels = { ...this.userLabels, [selected.id]: selected.label || selected.id };
+			}
+			this.updateField(field.key, selected && selected.id ? selected.id : null);
+		},
 		onSelectChange(field, option) {
 			this.updateField(field.key, option ? option.id : null);
 		},