@conduction/nextcloud-vue 2.58.0 → 2.60.0

package/dist/esm/components/CnDateAxisView/CnDateAxisView.vue3.js.map

@@ -1 +1 @@
-{"version":3,"file":"CnDateAxisView.vue3.js","sources":["../../../../src/components/CnDateAxisView/CnDateAxisView.vue?vue&type=template&id=7b82fcaf&lang.js"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n<template>\n\t<div class=\"cn-date-axis-view\" data-testid=\"cn-date-axis-view\">\n\t\t<p v-if=\"empty\" class=\"cn-date-axis-view__empty\" data-testid=\"cn-date-axis-empty\">\n\t\t\t{{ emptyText }}\n\t\t</p>\n\n\t\t<template v-else>\n\t\t\t<div\n\t\t\t\tv-for=\"lane in lanes\"\n\t\t\t\t:key=\"`lane-${lane.key}`\"\n\t\t\t\tclass=\"cn-date-axis-view__lane\"\n\t\t\t\tdata-testid=\"cn-date-axis-lane\"\n\t\t\t\t:data-lane=\"lane.key\">\n\t\t\t\t<h3 v-if=\"lane.key !== ''\" class=\"cn-date-axis-view__lane-header\">\n\t\t\t\t\t{{ lane.label }}\n\t\t\t\t</h3>\n\n\t\t\t\t<div\n\t\t\t\t\tv-for=\"(track, index) in lane.tracks\"\n\t\t\t\t\t:key=\"`track-${lane.key}-${index}`\"\n\t\t\t\t\tclass=\"cn-date-axis-view__track\"\n\t\t\t\t\tdata-testid=\"cn-date-axis-track\"\n\t\t\t\t\trole=\"list\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tv-for=\"bar in track\"\n\t\t\t\t\t\t:key=\"`bar-${barKey(bar)}`\"\n\t\t\t\t\t\tclass=\"cn-date-axis-view__bar\"\n\t\t\t\t\t\tdata-testid=\"cn-date-axis-bar\"\n\t\t\t\t\t\trole=\"listitem\"\n\t\t\t\t\t\t:data-bar-id=\"barKey(bar)\"\n\t\t\t\t\t\t:style=\"barStyle(bar)\"\n\t\t\t\t\t\t:aria-label=\"barLabel(bar)\"\n\t\t\t\t\t\t@click=\"openRow(bar.row, $event)\"\n\t\t\t\t\t\t@auxclick=\"onAuxClick(bar.row, $event)\">\n\t\t\t\t\t\t{{ barText(bar) }}\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<!--\n\t\t\t\tWork with no usable dates. A time scale has nowhere to put it,\n\t\t\t\tand a planner opening this view is looking for exactly this, so\n\t\t\t\tit is a visible lane rather than a row that never renders.\n\t\t\t-->\n\t\t\t<div\n\t\t\t\tv-if=\"unplanned.rows.length > 0\"\n\t\t\t\tclass=\"cn-date-axis-view__lane cn-date-axis-view__lane--unplanned\"\n\t\t\t\tdata-testid=\"cn-date-axis-unplanned\">\n\t\t\t\t<h3 class=\"cn-date-axis-view__lane-header\">\n\t\t\t\t\t{{ unplanned.label }} ({{ unplanned.rows.length }})\n\t\t\t\t</h3>\n\t\t\t\t<button\n\t\t\t\t\tv-for=\"row in unplanned.rows\"\n\t\t\t\t\t:key=\"`unplanned-${rowKeyOf(row)}`\"\n\t\t\t\t\tclass=\"cn-date-axis-view__bar cn-date-axis-view__bar--unplanned\"\n\t\t\t\t\tdata-testid=\"cn-date-axis-unplanned-row\"\n\t\t\t\t\t:data-row-id=\"rowKeyOf(row)\"\n\t\t\t\t\t:aria-label=\"unplannedLabelFor(row)\"\n\t\t\t\t\t@click=\"openRow(row, $event)\"\n\t\t\t\t\t@auxclick=\"onAuxClick(row, $event)\">\n\t\t\t\t\t{{ nameOf(row) }}\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</template>\n\t</div>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { buildDateAxisLanes } from '../../utils/dateAxisLanes.js'\nimport { isRowMiddleClick } from '../../utils/rowAuxClick.js'\n\n/**\n * CnDateAxisView — the index page's rows on a time scale.\n *\n * 🔴 IT HIDES NOTHING, AND IT RESCHEDULES NOTHING. A planner opens this to find\n * the week where three things land on one person, so overlapping bars get\n * their own track and the lane grows taller rather than losing a bar. Nothing\n * here writes: a date-axis view that moved a bar on drag would be changing\n * statutory dates from a picture, and the one gesture is opening the row.\n *\n * 🔴 EVERY BAR IS A BUTTON WITH AN ACCESSIBLE NAME. A bar positioned by\n * percentage says nothing at all to a reader who cannot see it, so the name\n * carries the row, the lane and both dates in words. `title` alone would not:\n * it is not read reliably and it cannot be reached by keyboard.\n *\n * `buildDateAxisLanes` decides the layout and is tested on its own.\n *\n * @event {object} row-click — A bar was opened. Payload: the row.\n */\nexport default {\n\tname: 'CnDateAxisView',\n\n\tprops: {\n\t\t/** The rows the list holds. */\n\t\trows: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/** Where a row's start is. */\n\t\tstartField: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Where a row's end is. */\n\t\tendField: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** What to put in a lane together. */\n\t\tlaneField: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The field a bar is named by. */\n\t\tlabelField: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The row key. */\n\t\trowKey: {\n\t\t\ttype: String,\n\t\t\tdefault: 'id',\n\t\t},\n\t},\n\n\temits: ['row-click'],\n\n\tcomputed: {\n\t\t/** @return {object} The layout. */\n\t\tlayout() {\n\t\t\treturn buildDateAxisLanes({\n\t\t\t\trows: this.rows,\n\t\t\t\tstartField: this.startField,\n\t\t\t\tendField: this.endField,\n\t\t\t\tlaneField: this.laneField,\n\t\t\t\tunplannedLabel: t('nextcloud-vue', 'Unplanned'),\n\t\t\t})\n\t\t},\n\n\t\t/** @return {Array<object>} The lanes. */\n\t\tlanes() {\n\t\t\treturn this.layout.lanes\n\t\t},\n\n\t\t/** @return {object} The rows that could not be placed. */\n\t\tunplanned() {\n\t\t\treturn this.layout.unplanned\n\t\t},\n\n\t\t/** @return {object} The window every bar is positioned within. */\n\t\twindow() {\n\t\t\treturn this.layout.window\n\t\t},\n\n\t\t/** @return {boolean} Whether there is nothing at all to show. */\n\t\tempty() {\n\t\t\treturn this.lanes.length === 0 && this.unplanned.rows.length === 0\n\t\t},\n\n\t\t/** @return {string} What an empty view says. */\n\t\temptyText() {\n\t\t\treturn t('nextcloud-vue', 'Nothing to place on a time scale')\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\t/**\n\t\t * Open one record. Both the bar on the axis and the label of an\n\t\t * undated row come through here, so the two paths cannot drift.\n\t\t *\n\t\t * @param {object} row The record the reader picked.\n\t\t * @param {MouseEvent} [event] The click or middle-click event.\n\t\t * @return {void} Nothing.\n\t\t */\n\t\topenRow(row, event) {\n\t\t\t/**\n\t\t\t * @event row-click Emitted when a reader opens a record, from its bar on the axis or from the label of an undated row, on a click or a middle click. Payload: `(row, event)` — the row and the native click/auxclick event, so the host can open it in a new tab on a ctrl/cmd/shift or middle click.\n\t\t\t */\n\t\t\tthis.$emit('row-click', row, event)\n\t\t},\n\n\t\t/**\n\t\t * Middle click on a bar: open the record like a click would.\n\t\t *\n\t\t * @param {object} row The record the reader picked.\n\t\t * @param {MouseEvent} event The auxclick event.\n\t\t * @return {void} Nothing.\n\t\t */\n\t\tonAuxClick(row, event) {\n\t\t\tif (isRowMiddleClick(event)) {\n\t\t\t\tthis.openRow(row, event)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * A bar's identity.\n\t\t *\n\t\t * @param {object} bar The bar.\n\t\t * @return {string} Its key.\n\t\t */\n\t\tbarKey(bar) {\n\t\t\treturn this.rowKeyOf(bar.row)\n\t\t},\n\n\t\t/**\n\t\t * A row's identity.\n\t\t *\n\t\t * @param {object} row The row.\n\t\t * @return {string} Its key.\n\t\t */\n\t\trowKeyOf(row) {\n\t\t\treturn String(row?.[this.rowKey] ?? '')\n\t\t},\n\n\t\t/**\n\t\t * What a row is called.\n\t\t *\n\t\t * @param {object} row The row.\n\t\t * @return {string} Its name.\n\t\t */\n\t\tnameOf(row) {\n\t\t\tconst named = this.labelField === '' ? '' : String(row?.[this.labelField] ?? '')\n\t\t\treturn named || this.rowKeyOf(row)\n\t\t},\n\n\t\t/**\n\t\t * A bar's text.\n\t\t *\n\t\t * @param {object} bar The bar.\n\t\t * @return {string} The name.\n\t\t */\n\t\tbarText(bar) {\n\t\t\treturn this.nameOf(bar.row)\n\t\t},\n\n\t\t/**\n\t\t * Where a bar sits on the scale.\n\t\t *\n\t\t * A window of zero width is one bar, or several that all start and end\n\t\t * at the same instant. Dividing by it would be a division by zero, so\n\t\t * the bar takes the whole lane: one thing on a scale of itself is the\n\t\t * whole scale.\n\t\t *\n\t\t * @param {object} bar The bar.\n\t\t * @return {object} The style.\n\t\t */\n\t\tbarStyle(bar) {\n\t\t\tconst { from, to } = this.window\n\t\t\tconst span = (to ?? 0) - (from ?? 0)\n\t\t\tif (span <= 0) {\n\t\t\t\treturn { marginInlineStart: '0%', inlineSize: '100%' }\n\t\t\t}\n\n\t\t\tconst start = ((bar.start - from) / span) * 100\n\t\t\tconst width = ((bar.end - bar.start) / span) * 100\n\n\t\t\treturn {\n\t\t\t\tmarginInlineStart: `${start}%`,\n\t\t\t\t// A zero-length bar is a real thing (a one-day term) and a bar\n\t\t\t\t// of no width is invisible, so it keeps a floor.\n\t\t\t\tinlineSize: `${Math.max(width, 1)}%`,\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * What a bar is called to somebody who cannot see where it sits.\n\t\t *\n\t\t * @param {object} bar The bar.\n\t\t * @return {string} The accessible name.\n\t\t */\n\t\tbarLabel(bar) {\n\t\t\treturn t('nextcloud-vue', '{name}, {from} to {to}', {\n\t\t\t\tname: this.nameOf(bar.row),\n\t\t\t\tfrom: this.dayOf(bar.start),\n\t\t\t\tto: this.dayOf(bar.end),\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * What an unplanned row is called.\n\t\t *\n\t\t * @param {object} row The row.\n\t\t * @return {string} The accessible name.\n\t\t */\n\t\tunplannedLabelFor(row) {\n\t\t\treturn t('nextcloud-vue', '{name}, no dates', { name: this.nameOf(row) })\n\t\t},\n\n\t\t/**\n\t\t * One instant as a day.\n\t\t *\n\t\t * @param {number} instant Milliseconds.\n\t\t * @return {string} The day.\n\t\t */\n\t\tdayOf(instant) {\n\t\t\treturn new Date(instant).toISOString().slice(0, 10)\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.cn-date-axis-view__lane-header {\n\tfont-size: 1rem;\n\tmargin: 8px 0 4px;\n}\n\n.cn-date-axis-view__track {\n\tdisplay: block;\n\tposition: relative;\n\tmin-block-size: 28px;\n}\n\n.cn-date-axis-view__bar {\n\tdisplay: block;\n\tbackground-color: var(--color-primary-element-light);\n\tcolor: var(--color-main-text);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--border-radius);\n\tpadding: 2px 6px;\n\tmargin-block-end: 4px;\n\ttext-align: start;\n\toverflow: hidden;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\tcursor: pointer;\n}\n\n.cn-date-axis-view__bar--unplanned {\n\tbackground-color: var(--color-background-hover);\n\tinline-size: auto;\n}\n\n.cn-date-axis-view__empty {\n\tcolor: var(--color-text-maxcontrast);\n}\n</style>\n"],"names":["_createElementBlock","_toDisplayString","_Fragment","_renderList","_openBlock","_normalizeStyle"],"mappings":"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"}
+{"version":3,"file":"CnDateAxisView.vue3.js","sources":["../../../../src/components/CnDateAxisView/CnDateAxisView.vue?vue&type=template&id=7b82fcaf&lang.js"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n<template>\n\t<div class=\"cn-date-axis-view\" data-testid=\"cn-date-axis-view\">\n\t\t<p v-if=\"empty\" class=\"cn-date-axis-view__empty\" data-testid=\"cn-date-axis-empty\">\n\t\t\t{{ emptyText }}\n\t\t</p>\n\n\t\t<template v-else>\n\t\t\t<div\n\t\t\t\tv-for=\"lane in lanes\"\n\t\t\t\t:key=\"`lane-${lane.key}`\"\n\t\t\t\tclass=\"cn-date-axis-view__lane\"\n\t\t\t\tdata-testid=\"cn-date-axis-lane\"\n\t\t\t\t:data-lane=\"lane.key\">\n\t\t\t\t<h3 v-if=\"lane.key !== ''\" class=\"cn-date-axis-view__lane-header\">\n\t\t\t\t\t{{ lane.label }}\n\t\t\t\t</h3>\n\n\t\t\t\t<div\n\t\t\t\t\tv-for=\"(track, index) in lane.tracks\"\n\t\t\t\t\t:key=\"`track-${lane.key}-${index}`\"\n\t\t\t\t\tclass=\"cn-date-axis-view__track\"\n\t\t\t\t\tdata-testid=\"cn-date-axis-track\"\n\t\t\t\t\trole=\"list\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tv-for=\"bar in track\"\n\t\t\t\t\t\t:key=\"`bar-${barKey(bar)}`\"\n\t\t\t\t\t\tclass=\"cn-date-axis-view__bar\"\n\t\t\t\t\t\tdata-testid=\"cn-date-axis-bar\"\n\t\t\t\t\t\trole=\"listitem\"\n\t\t\t\t\t\t:data-bar-id=\"barKey(bar)\"\n\t\t\t\t\t\t:style=\"barStyle(bar)\"\n\t\t\t\t\t\t:aria-label=\"barLabel(bar)\"\n\t\t\t\t\t\t@click=\"openRow(bar.row, $event)\"\n\t\t\t\t\t\t@mousedown=\"preventMiddleClickAutoscroll\"\n\t\t\t\t\t\t@auxclick=\"onAuxClick(bar.row, $event)\">\n\t\t\t\t\t\t{{ barText(bar) }}\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<!--\n\t\t\t\tWork with no usable dates. A time scale has nowhere to put it,\n\t\t\t\tand a planner opening this view is looking for exactly this, so\n\t\t\t\tit is a visible lane rather than a row that never renders.\n\t\t\t-->\n\t\t\t<div\n\t\t\t\tv-if=\"unplanned.rows.length > 0\"\n\t\t\t\tclass=\"cn-date-axis-view__lane cn-date-axis-view__lane--unplanned\"\n\t\t\t\tdata-testid=\"cn-date-axis-unplanned\">\n\t\t\t\t<h3 class=\"cn-date-axis-view__lane-header\">\n\t\t\t\t\t{{ unplanned.label }} ({{ unplanned.rows.length }})\n\t\t\t\t</h3>\n\t\t\t\t<button\n\t\t\t\t\tv-for=\"row in unplanned.rows\"\n\t\t\t\t\t:key=\"`unplanned-${rowKeyOf(row)}`\"\n\t\t\t\t\tclass=\"cn-date-axis-view__bar cn-date-axis-view__bar--unplanned\"\n\t\t\t\t\tdata-testid=\"cn-date-axis-unplanned-row\"\n\t\t\t\t\t:data-row-id=\"rowKeyOf(row)\"\n\t\t\t\t\t:aria-label=\"unplannedLabelFor(row)\"\n\t\t\t\t\t@click=\"openRow(row, $event)\"\n\t\t\t\t\t@mousedown=\"preventMiddleClickAutoscroll\"\n\t\t\t\t\t@auxclick=\"onAuxClick(row, $event)\">\n\t\t\t\t\t{{ nameOf(row) }}\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</template>\n\t</div>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { buildDateAxisLanes } from '../../utils/dateAxisLanes.js'\nimport { isRowMiddleClick, preventMiddleClickAutoscroll } from '../../utils/rowAuxClick.js'\n\n/**\n * CnDateAxisView — the index page's rows on a time scale.\n *\n * 🔴 IT HIDES NOTHING, AND IT RESCHEDULES NOTHING. A planner opens this to find\n * the week where three things land on one person, so overlapping bars get\n * their own track and the lane grows taller rather than losing a bar. Nothing\n * here writes: a date-axis view that moved a bar on drag would be changing\n * statutory dates from a picture, and the one gesture is opening the row.\n *\n * 🔴 EVERY BAR IS A BUTTON WITH AN ACCESSIBLE NAME. A bar positioned by\n * percentage says nothing at all to a reader who cannot see it, so the name\n * carries the row, the lane and both dates in words. `title` alone would not:\n * it is not read reliably and it cannot be reached by keyboard.\n *\n * `buildDateAxisLanes` decides the layout and is tested on its own.\n *\n * @event {object} row-click — A bar was opened. Payload: the row.\n */\nexport default {\n\tname: 'CnDateAxisView',\n\n\tprops: {\n\t\t/** The rows the list holds. */\n\t\trows: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/** Where a row's start is. */\n\t\tstartField: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Where a row's end is. */\n\t\tendField: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** What to put in a lane together. */\n\t\tlaneField: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The field a bar is named by. */\n\t\tlabelField: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The row key. */\n\t\trowKey: {\n\t\t\ttype: String,\n\t\t\tdefault: 'id',\n\t\t},\n\t},\n\n\temits: ['row-click', 'row-aux-click'],\n\n\tcomputed: {\n\t\t/** @return {object} The layout. */\n\t\tlayout() {\n\t\t\treturn buildDateAxisLanes({\n\t\t\t\trows: this.rows,\n\t\t\t\tstartField: this.startField,\n\t\t\t\tendField: this.endField,\n\t\t\t\tlaneField: this.laneField,\n\t\t\t\tunplannedLabel: t('nextcloud-vue', 'Unplanned'),\n\t\t\t})\n\t\t},\n\n\t\t/** @return {Array<object>} The lanes. */\n\t\tlanes() {\n\t\t\treturn this.layout.lanes\n\t\t},\n\n\t\t/** @return {object} The rows that could not be placed. */\n\t\tunplanned() {\n\t\t\treturn this.layout.unplanned\n\t\t},\n\n\t\t/** @return {object} The window every bar is positioned within. */\n\t\twindow() {\n\t\t\treturn this.layout.window\n\t\t},\n\n\t\t/** @return {boolean} Whether there is nothing at all to show. */\n\t\tempty() {\n\t\t\treturn this.lanes.length === 0 && this.unplanned.rows.length === 0\n\t\t},\n\n\t\t/** @return {string} What an empty view says. */\n\t\temptyText() {\n\t\t\treturn t('nextcloud-vue', 'Nothing to place on a time scale')\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\tpreventMiddleClickAutoscroll,\n\n\t\t/**\n\t\t * Open one record. Both the bar on the axis and the label of an\n\t\t * undated row come through here, so the two paths cannot drift.\n\t\t *\n\t\t * @param {object} row The record the reader picked.\n\t\t * @param {MouseEvent} [event] The click event.\n\t\t * @return {void} Nothing.\n\t\t */\n\t\topenRow(row, event) {\n\t\t\t/**\n\t\t\t * @event row-click Emitted when a reader opens a record, from its bar on the axis or from the label of an undated row. Payload: `(row, event)` — the row and the native click event, so the host can open it in a new tab on a ctrl/cmd/shift click. A middle click emits `row-aux-click` instead.\n\t\t\t */\n\t\t\tthis.$emit('row-click', row, event)\n\t\t},\n\n\t\t/**\n\t\t * Middle click on a bar or an undated row's label: emits\n\t\t * `row-aux-click`, not `row-click`, so an existing listener that\n\t\t * navigates never moves the current tab away.\n\t\t *\n\t\t * @param {object} row The record the reader picked.\n\t\t * @param {MouseEvent} event The auxclick event.\n\t\t * @return {void} Nothing.\n\t\t */\n\t\tonAuxClick(row, event) {\n\t\t\tif (isRowMiddleClick(event)) {\n\t\t\t\t/**\n\t\t\t\t * @event row-aux-click Emitted when a reader middle-clicks a record's bar or undated-row label, for opening it in a new tab (see `openRowTarget`). Payload: `(row, event)` — the row and the native auxclick event.\n\t\t\t\t */\n\t\t\t\tthis.$emit('row-aux-click', row, event)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * A bar's identity.\n\t\t *\n\t\t * @param {object} bar The bar.\n\t\t * @return {string} Its key.\n\t\t */\n\t\tbarKey(bar) {\n\t\t\treturn this.rowKeyOf(bar.row)\n\t\t},\n\n\t\t/**\n\t\t * A row's identity.\n\t\t *\n\t\t * @param {object} row The row.\n\t\t * @return {string} Its key.\n\t\t */\n\t\trowKeyOf(row) {\n\t\t\treturn String(row?.[this.rowKey] ?? '')\n\t\t},\n\n\t\t/**\n\t\t * What a row is called.\n\t\t *\n\t\t * @param {object} row The row.\n\t\t * @return {string} Its name.\n\t\t */\n\t\tnameOf(row) {\n\t\t\tconst named = this.labelField === '' ? '' : String(row?.[this.labelField] ?? '')\n\t\t\treturn named || this.rowKeyOf(row)\n\t\t},\n\n\t\t/**\n\t\t * A bar's text.\n\t\t *\n\t\t * @param {object} bar The bar.\n\t\t * @return {string} The name.\n\t\t */\n\t\tbarText(bar) {\n\t\t\treturn this.nameOf(bar.row)\n\t\t},\n\n\t\t/**\n\t\t * Where a bar sits on the scale.\n\t\t *\n\t\t * A window of zero width is one bar, or several that all start and end\n\t\t * at the same instant. Dividing by it would be a division by zero, so\n\t\t * the bar takes the whole lane: one thing on a scale of itself is the\n\t\t * whole scale.\n\t\t *\n\t\t * @param {object} bar The bar.\n\t\t * @return {object} The style.\n\t\t */\n\t\tbarStyle(bar) {\n\t\t\tconst { from, to } = this.window\n\t\t\tconst span = (to ?? 0) - (from ?? 0)\n\t\t\tif (span <= 0) {\n\t\t\t\treturn { marginInlineStart: '0%', inlineSize: '100%' }\n\t\t\t}\n\n\t\t\tconst start = ((bar.start - from) / span) * 100\n\t\t\tconst width = ((bar.end - bar.start) / span) * 100\n\n\t\t\treturn {\n\t\t\t\tmarginInlineStart: `${start}%`,\n\t\t\t\t// A zero-length bar is a real thing (a one-day term) and a bar\n\t\t\t\t// of no width is invisible, so it keeps a floor.\n\t\t\t\tinlineSize: `${Math.max(width, 1)}%`,\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * What a bar is called to somebody who cannot see where it sits.\n\t\t *\n\t\t * @param {object} bar The bar.\n\t\t * @return {string} The accessible name.\n\t\t */\n\t\tbarLabel(bar) {\n\t\t\treturn t('nextcloud-vue', '{name}, {from} to {to}', {\n\t\t\t\tname: this.nameOf(bar.row),\n\t\t\t\tfrom: this.dayOf(bar.start),\n\t\t\t\tto: this.dayOf(bar.end),\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * What an unplanned row is called.\n\t\t *\n\t\t * @param {object} row The row.\n\t\t * @return {string} The accessible name.\n\t\t */\n\t\tunplannedLabelFor(row) {\n\t\t\treturn t('nextcloud-vue', '{name}, no dates', { name: this.nameOf(row) })\n\t\t},\n\n\t\t/**\n\t\t * One instant as a day.\n\t\t *\n\t\t * @param {number} instant Milliseconds.\n\t\t * @return {string} The day.\n\t\t */\n\t\tdayOf(instant) {\n\t\t\treturn new Date(instant).toISOString().slice(0, 10)\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.cn-date-axis-view__lane-header {\n\tfont-size: 1rem;\n\tmargin: 8px 0 4px;\n}\n\n.cn-date-axis-view__track {\n\tdisplay: block;\n\tposition: relative;\n\tmin-block-size: 28px;\n}\n\n.cn-date-axis-view__bar {\n\tdisplay: block;\n\tbackground-color: var(--color-primary-element-light);\n\tcolor: var(--color-main-text);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--border-radius);\n\tpadding: 2px 6px;\n\tmargin-block-end: 4px;\n\ttext-align: start;\n\toverflow: hidden;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\tcursor: pointer;\n}\n\n.cn-date-axis-view__bar--unplanned {\n\tbackground-color: var(--color-background-hover);\n\tinline-size: auto;\n}\n\n.cn-date-axis-view__empty {\n\tcolor: var(--color-text-maxcontrast);\n}\n</style>\n"],"names":["_createElementBlock","_toDisplayString","_Fragment","_renderList","_openBlock","_normalizeStyle"],"mappings":"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"}