@conduction/nextcloud-vue 2.58.0 → 2.60.0

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

@@ -0,0 +1,77 @@
+import { resolveComponent, openBlock, createElementBlock, createVNode, createElementVNode, toDisplayString, Fragment, renderList, normalizeStyle, createTextVNode } from 'vue';
+
+const _hoisted_1 = {
+  class: "cn-stacked-bar",
+  "data-testid": "cn-stacked-bar"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "cn-stacked-bar__state",
+  role: "status"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "cn-stacked-bar__state",
+  role: "status"
+};
+const _hoisted_4 = {
+  key: 2,
+  class: "cn-stacked-bar__state",
+  "data-testid": "cn-stacked-bar-empty"
+};
+const _hoisted_5 = {
+  class: "cn-stacked-bar__bar",
+  "aria-hidden": "true"
+};
+const _hoisted_6 = { class: "cn-stacked-bar__legend" };
+const _hoisted_7 = { class: "cn-stacked-bar__label" };
+const _hoisted_8 = { class: "cn-stacked-bar__count" };
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcLoadingIcon = resolveComponent("NcLoadingIcon");
+
+  return (openBlock(), createElementBlock("div", _hoisted_1, [
+    ($data.loading)
+      ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createVNode(_component_NcLoadingIcon, { size: 20 }),
+          createElementVNode("span", null, toDisplayString($options.loadingLabel), 1 /* TEXT */)
+        ]))
+      : ($data.error)
+        ? (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString($options.errorLabel), 1 /* TEXT */))
+        : ($options.total === 0)
+          ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString($options.emptyLabel), 1 /* TEXT */))
+          : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+              createElementVNode("div", _hoisted_5, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList($options.barSegments, (segment) => {
+                  return (openBlock(), createElementBlock("span", {
+                    key: segment.key,
+                    class: "cn-stacked-bar__segment",
+                    style: normalizeStyle({ flexGrow: segment.count, backgroundColor: segment.color })
+                  }, null, 4 /* STYLE */))
+                }), 128 /* KEYED_FRAGMENT */))
+              ]),
+              createElementVNode("ul", _hoisted_6, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList($options.segments, (segment) => {
+                  return (openBlock(), createElementBlock("li", {
+                    key: segment.key,
+                    class: "cn-stacked-bar__legend-item",
+                    "data-testid": "cn-stacked-bar-legend-item"
+                  }, [
+                    createElementVNode("span", _hoisted_7, [
+                      createElementVNode("span", {
+                        class: "cn-stacked-bar__dot",
+                        "aria-hidden": "true",
+                        style: normalizeStyle({ backgroundColor: segment.color })
+                      }, null, 4 /* STYLE */),
+                      createTextVNode(" " + toDisplayString(segment.label), 1 /* TEXT */)
+                    ]),
+                    createElementVNode("strong", _hoisted_8, toDisplayString(' ' + segment.count), 1 /* TEXT */)
+                  ]))
+                }), 128 /* KEYED_FRAGMENT */))
+              ])
+            ], 64 /* STABLE_FRAGMENT */))
+  ]))
+}
+
+export { render };
+//# sourceMappingURL=CnStackedBarWidget.vue3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CnStackedBarWidget.vue3.js","sources":["../../../../src/components/CnStackedBarWidget/CnStackedBarWidget.vue?vue&type=template&id=c0bac1a2&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-stacked-bar\" data-testid=\"cn-stacked-bar\">\n\t\t<div v-if=\"loading\" class=\"cn-stacked-bar__state\" role=\"status\">\n\t\t\t<NcLoadingIcon :size=\"20\" />\n\t\t\t<span>{{ loadingLabel }}</span>\n\t\t</div>\n\t\t<p v-else-if=\"error\" class=\"cn-stacked-bar__state\" role=\"status\">\n\t\t\t{{ errorLabel }}\n\t\t</p>\n\t\t<p v-else-if=\"total === 0\" class=\"cn-stacked-bar__state\" data-testid=\"cn-stacked-bar-empty\">\n\t\t\t{{ emptyLabel }}\n\t\t</p>\n\t\t<template v-else>\n\t\t\t<!-- The bar is a picture of the legend below it. The legend holds\n\t\t\t     every label and number, so the bar itself is hidden from\n\t\t\t     assistive technology rather than described twice. -->\n\t\t\t<div class=\"cn-stacked-bar__bar\" aria-hidden=\"true\">\n\t\t\t\t<span\n\t\t\t\t\tv-for=\"segment in barSegments\"\n\t\t\t\t\t:key=\"segment.key\"\n\t\t\t\t\tclass=\"cn-stacked-bar__segment\"\n\t\t\t\t\t:style=\"{ flexGrow: segment.count, backgroundColor: segment.color }\" />\n\t\t\t</div>\n\t\t\t<ul class=\"cn-stacked-bar__legend\">\n\t\t\t\t<li\n\t\t\t\t\tv-for=\"segment in segments\"\n\t\t\t\t\t:key=\"segment.key\"\n\t\t\t\t\tclass=\"cn-stacked-bar__legend-item\"\n\t\t\t\t\tdata-testid=\"cn-stacked-bar-legend-item\">\n\t\t\t\t\t<span class=\"cn-stacked-bar__label\">\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclass=\"cn-stacked-bar__dot\"\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t:style=\"{ backgroundColor: segment.color }\" />\n\t\t\t\t\t\t{{ segment.label }}\n\t\t\t\t\t</span>\n\t\t\t\t\t<!-- The leading space keeps label and count two words for a\n\t\t\t\t\t     screen reader; it is not drawn in this flex column. -->\n\t\t\t\t\t<strong class=\"cn-stacked-bar__count\">{{ ' ' + segment.count }}</strong>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</template>\n\t</div>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcLoadingIcon } from '@nextcloud/vue'\nimport { fetchGroupedCounts } from '../../utils/fetchAggregate.js'\n\n/** The lightest step keeps this share of the primary colour, so it still stands out from the page. */\nconst LIGHTEST_PRIMARY_SHARE = 70\n\n/**\n * The colour of step `index` out of `count`, on one ramp that runs from a\n * light tint of the primary colour, through the primary colour, to the text\n * colour. Steps differ in LIGHTNESS, so they stay apart for somebody who\n * cannot tell hues apart, and the ramp follows the theme because it is built\n * from Nextcloud's own variables.\n *\n * @param {number} index The step, 0-based.\n * @param {number} count The number of steps.\n * @return {string} A CSS colour.\n * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n */\nexport function rampColor(index, count) {\n\tif (count <= 1) {\n\t\treturn 'var(--color-primary-element)'\n\t}\n\tconst position = index / (count - 1)\n\tif (position < 0.5) {\n\t\tconst share = Math.round(LIGHTEST_PRIMARY_SHARE + (position / 0.5) * (100 - LIGHTEST_PRIMARY_SHARE))\n\t\treturn `color-mix(in srgb, var(--color-primary-element) ${share}%, var(--color-main-background))`\n\t}\n\tconst textShare = Math.round(((position - 0.5) / 0.5) * 100)\n\tif (textShare === 0) {\n\t\treturn 'var(--color-primary-element)'\n\t}\n\tif (textShare === 100) {\n\t\treturn 'var(--color-main-text)'\n\t}\n\treturn `color-mix(in srgb, var(--color-main-text) ${textShare}%, var(--color-primary-element))`\n}\n\n/**\n * CnStackedBarWidget shows how a total divides over a few groups: ONE bar cut\n * into segments, with a legend below it that names every segment and gives\n * its count. Use it for \"my cases per step\" or \"requests per channel\".\n *\n * Segments come from one grouped count request against an OpenRegister\n * source (`source.groupBy`), or from static `segments`. `order` fixes the\n * order of the segments, and `labels` gives a group key a readable name.\n * Colours come from one ramp built on the theme's primary colour; the steps\n * differ in lightness, never in hue alone. Resolved by its registry type key\n * `stacked-bar`.\n *\n * ```json\n * {\n *   \"widgetKey\": \"stacked-bar\",\n *   \"props\": {\n *     \"content\": {\n *       \"source\": { \"register\": \"dossiq\", \"schema\": \"case\", \"groupBy\": \"status\", \"filter\": { \"assignee\": \"@me\" } },\n *       \"order\": [\"received\", \"in_progress\", \"decision\", \"publish\"],\n *       \"labels\": { \"received\": \"Received\", \"in_progress\": \"In progress\", \"decision\": \"Decision\", \"publish\": \"Publish\" }\n *     }\n *   }\n * }\n * ```\n */\nexport default {\n\tname: 'CnStackedBarWidget',\n\n\tcomponents: { NcLoadingIcon },\n\n\tinject: {\n\t\t/**\n\t\t * Host translate function provided by CnAppRoot. Segment labels and\n\t\t * the empty text run through it. Identity by default.\n\t\t */\n\t\tcnTranslate: { default: () => (key) => key },\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The widget's configuration. `source` names the OpenRegister\n\t\t * register and schema, the `groupBy` field and an optional `filter`\n\t\t * (the shared @-token grammar). `segments` are static entries\n\t\t * `{ key?, label, value }` used when there is no source. `order` lists\n\t\t * group keys in the order they render; groups it does not list follow\n\t\t * in the order they arrive, and a listed key without records renders\n\t\t * with a count of 0. `labels` maps a group key to its label.\n\t\t * `emptyText` is shown when there is nothing to count.\n\t\t *\n\t\t * @type {{source?: {register?: string, schema?: string, groupBy?: string, filter?: object}, segments?: Array<{key?: string, label: string, value: number}>, order?: Array<string>, labels?: {[key: string]: string}, emptyText?: string}}\n\t\t */\n\t\tcontent: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\n\t\t/**\n\t\t * Translate function. Falls back to the injected `cnTranslate`. Pass it\n\t\t * when mounting the widget outside a CnAppRoot.\n\t\t *\n\t\t * @type {((key: string) => string)|null}\n\t\t */\n\t\ttranslate: {\n\t\t\ttype: Function,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tgroups: [],\n\t\t\tloading: false,\n\t\t\terror: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * The translate function in use.\n\t\t *\n\t\t * @return {(key: string) => string}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\teffectiveTranslate() {\n\t\t\treturn this.translate ?? this.cnTranslate\n\t\t},\n\n\t\t/**\n\t\t * Whether the segments come from OpenRegister.\n\t\t *\n\t\t * @return {boolean}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\thasSource() {\n\t\t\tconst s = this.content.source || {}\n\t\t\treturn Boolean(s.register && s.schema && s.groupBy)\n\t\t},\n\n\t\t/**\n\t\t * The raw groups, from the source or the static list, as `{ key, label, count }`.\n\t\t *\n\t\t * @return {Array<{key: string, label: string, count: number}>}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\trawGroups() {\n\t\t\tif (this.hasSource) {\n\t\t\t\treturn this.groups.map((group) => ({ key: group.key, label: group.key, count: group.count }))\n\t\t\t}\n\t\t\tconst list = Array.isArray(this.content.segments) ? this.content.segments : []\n\t\t\treturn list\n\t\t\t\t.filter((segment) => segment && typeof segment === 'object')\n\t\t\t\t.map((segment, index) => {\n\t\t\t\t\tconst count = Number(segment.value)\n\t\t\t\t\treturn {\n\t\t\t\t\t\tkey: String(segment.key ?? segment.label ?? index),\n\t\t\t\t\t\tlabel: String(segment.label ?? segment.key ?? ''),\n\t\t\t\t\t\tcount: Number.isFinite(count) && count > 0 ? count : 0,\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * The segments in render order, each with its label and colour.\n\t\t *\n\t\t * @return {Array<{key: string, label: string, count: number, color: string}>}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tsegments() {\n\t\t\tconst order = Array.isArray(this.content.order) ? this.content.order.map(String) : []\n\t\t\tconst labels = (this.content.labels && typeof this.content.labels === 'object') ? this.content.labels : {}\n\t\t\tconst byKey = {}\n\t\t\tfor (const group of this.rawGroups) {\n\t\t\t\tbyKey[group.key] = group\n\t\t\t}\n\t\t\tconst ordered = []\n\t\t\tfor (const key of order) {\n\t\t\t\tordered.push(byKey[key] || { key, label: key, count: 0 })\n\t\t\t}\n\t\t\tfor (const group of this.rawGroups) {\n\t\t\t\tif (!order.includes(group.key)) {\n\t\t\t\t\tordered.push(group)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn ordered.map((group, index) => ({\n\t\t\t\tkey: group.key,\n\t\t\t\tlabel: this.effectiveTranslate(typeof labels[group.key] === 'string' ? labels[group.key] : group.label),\n\t\t\t\tcount: group.count,\n\t\t\t\tcolor: rampColor(index, ordered.length),\n\t\t\t}))\n\t\t},\n\n\t\t/**\n\t\t * The segments that take up room in the bar.\n\t\t *\n\t\t * @return {Array<object>}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tbarSegments() {\n\t\t\treturn this.segments.filter((segment) => segment.count > 0)\n\t\t},\n\n\t\t/**\n\t\t * The sum of all counts.\n\t\t *\n\t\t * @return {number}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\ttotal() {\n\t\t\treturn this.segments.reduce((sum, segment) => sum + segment.count, 0)\n\t\t},\n\n\t\t/**\n\t\t * The text shown when there is nothing to count.\n\t\t *\n\t\t * @return {string}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\temptyLabel() {\n\t\t\tconst text = this.content.emptyText\n\t\t\treturn (typeof text === 'string' && text !== '')\n\t\t\t\t? this.effectiveTranslate(text)\n\t\t\t\t: t('nextcloud-vue', 'Nothing to show yet')\n\t\t},\n\n\t\t/**\n\t\t * @return {string} The loading text.\n\t\t *\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tloadingLabel() {\n\t\t\treturn t('nextcloud-vue', 'Loading…')\n\t\t},\n\n\t\t/**\n\t\t * @return {string} The text shown when the counts could not be loaded.\n\t\t *\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\terrorLabel() {\n\t\t\treturn t('nextcloud-vue', 'The numbers could not be loaded.')\n\t\t},\n\n\t\t/**\n\t\t * Changes whenever a new fetch is needed.\n\t\t *\n\t\t * @return {string}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tsourceKey() {\n\t\t\treturn JSON.stringify(this.content.source || {})\n\t\t},\n\t},\n\n\twatch: {\n\t\t/** @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget */\n\t\tsourceKey() {\n\t\t\tthis.fetchGroups()\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.fetchGroups()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Load the count per group in one request.\n\t\t *\n\t\t * @return {Promise<void>}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tasync fetchGroups() {\n\t\t\tif (!this.hasSource) {\n\t\t\t\tthis.groups = []\n\t\t\t\tthis.error = ''\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst requestKey = this.sourceKey\n\t\t\tthis.loading = true\n\t\t\tthis.error = ''\n\t\t\ttry {\n\t\t\t\tconst groups = await fetchGroupedCounts(this.content.source)\n\t\t\t\tif (requestKey !== this.sourceKey) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.groups = groups\n\t\t\t} catch (e) {\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.warn('[CnStackedBarWidget] failed to load counts:', e)\n\t\t\t\tthis.error = (e && e.message) || 'error'\n\t\t\t\tthis.groups = []\n\t\t\t} finally {\n\t\t\t\tthis.loading = false\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-stacked-bar {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 16px;\n\twidth: 100%;\n}\n\n.cn-stacked-bar__state {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tmargin: 0;\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.cn-stacked-bar__bar {\n\tdisplay: flex;\n\tgap: 3px;\n\theight: 12px;\n}\n\n.cn-stacked-bar__segment {\n\tflex-basis: 0;\n\tmin-width: 4px;\n\tborder-radius: 6px;\n}\n\n.cn-stacked-bar__legend {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n\tgap: 12px;\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n}\n\n.cn-stacked-bar__legend-item {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px;\n\tmin-width: 0;\n}\n\n.cn-stacked-bar__label {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tfont-size: 0.95em;\n\tcolor: var(--color-text-maxcontrast);\n\toverflow-wrap: anywhere;\n}\n\n.cn-stacked-bar__dot {\n\tflex: none;\n\twidth: 10px;\n\theight: 10px;\n\tborder-radius: 3px;\n}\n\n.cn-stacked-bar__count {\n\tfont-size: 1.5em;\n\tfont-weight: 700;\n\tline-height: 1.2;\n\tcolor: var(--color-main-text);\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_createVNode","_createElementVNode","_toDisplayString","_Fragment","_renderList","_normalizeStyle"],"mappings":";;;AASM,EAAA,KAAC,EAAA,gBAAA;AAAA,EAAA,aAAA,EAAA,gBAAA;;;;AACgB,EAAA,KAAI,EAAC,uBAAuB;AAAA,EAAA,IAAK,EAAC,QAAQ;;;;AAI/C,EAAA,KAAA,EAAA,uBAAA;AAAA,EAAA,IAAA,EAAA,QAAA;;;;AAGW,EAAA,KAAK,EAAE,uBAAsB;AAAC,EAAA,aAAS,EAAA,sBAAA;;;AAO5D,EAAA,KAAK,EAAC,qBAAqB;AAAA,EAAA,aAAA,EAAA,MAAA;;AAO5B,MAAA,UAAA,GAAA,EAAA,KAAK,EAAC,wBAAwB,GAAA;AAM1B,MAAA,UAAA,GAAA,EAAA,KAAI,EAAE,uBAAuB,GAAA;AASlC,MAAA,UAAA,GAAA,EAAA,KAAA,EAAA,uBAAA,GAAA;;;;;;KApCO,KAAO,CAAA,OAAA;AAAlB,SAAAA,SAAA,EAAA,EAAAC,kBAAA,CAGM,OAHN,UAGM,EAAA;UAFLC,WAAe,CAAA,wBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AACf,UAAAC,kBAAA,CAAE,8BAAA,QAAA,CAAA,YAAA,CAAA,EAAA,CAAA,YAAA;;SAEU,KAAG,CAAA,KAAA;0CAEZ,CAAA,GAAA,YAAA,EAAAC,eAAA,CADD,QAAA,CAAA,UAAA,CAAA,EAAA,CAAA,YAAA;WAEW,QAAK,CAAA,KAAA,KAAA,CAAA;8EACb,QAAQ,CAAA,UAAA,CAAA,EAAA,CAAA,YAAA;;AAMX,cAAAD,kBAAA,CAMI,OANJ,UAMI,EAAA;kCALJF,kBAI0B,CAAAI,QAAA,EAAA,IAAA,EAAAC,UAAA,CAHvB,QAAA,CAAA,WAAA,EAAA,CAAA,OAAA,KAAA;uCADHL,kBAI0B,CAAA,MAAA,EAAA;oBAF1B,GAAI,EAAE,OAAO,CAAC,GAAG;AACjB,oBAAA,KAAC,EAAA,yBAAA;AACA,oBAAA,KAAK,6BAAc,OAAM,CAAA,KAAA,EAAA,eAAA,EAAA,OAAA,CAAA,KAAA,EAAA,CAAA;;;;AAE1B,cAAAE,kBAAA,OAAA;kCACAF,8CACkB,QAAQ,CAAA,QAAA,EAAA,CAAnB,OAAO,KAAA;uCADdA;oBAEC,GAAG,EAAC,OAAA,CAAA,GAAA;yBACA,EAAC,6BAAsB;AAC1B,oBAAA,aAAS,EAAC,4BAAO;;AACjB,oBAAAE,kBAAA,CAMC,QAND,UAMC,EAAA;sBALFA,kBAGgD,CAAA,MAAA,EAAA;AAF/C,wBAAA,KAAI,EAAA,qBAAA;AACJ,wBAAA,aAAW,EAAC,MAAM;wBACf,KAAG,EAAAI,cAAA,CAAA,EAAA,eAAA,SAA4B,CAAC,KAAK,EAAA,CAAA;;sCAAO,GAChD,GAAAH,eAAA,CAAG,OAAO,CAAC,KAAK,CAAA,EAAA,CAAA,YAAA;;AAIjB,oBAAAD,kBAAA,CAAC,QAAD,EAAA,UAAC,EAAAC,eAAA,CAAA,GAAA,GAAA,OAAA,CAAA,KAAA,CAAA,EAAA,CAAA,YAAA;;;;;;;;;;"}

package/dist/esm/components/CnStackedBarWidgetForm/CnStackedBarWidgetForm.vue.js

@@ -0,0 +1,10 @@
+import script from './CnStackedBarWidgetForm.vue2.js';
+import { render } from './CnStackedBarWidgetForm.vue3.js';
+
+script.render = render;
+script.__scopeId = "data-v-56e6c6a2";
+script.__file = "src/components/CnStackedBarWidgetForm/CnStackedBarWidgetForm.vue";
+const __sfc_main = script;
+
+export { __sfc_main as default };
+//# sourceMappingURL=CnStackedBarWidgetForm.vue.js.map

package/dist/esm/components/CnStackedBarWidgetForm/CnStackedBarWidgetForm.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CnStackedBarWidgetForm.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/esm/components/CnStackedBarWidgetForm/CnStackedBarWidgetForm.vue2.js

@@ -0,0 +1,169 @@
+import { translate } from '@nextcloud/l10n';
+import { NcTextField } from '@nextcloud/vue';
+import __sfc_main from '../CnFieldPicker/CnFieldPicker.vue.js';
+import __sfc_main$1 from '../CnFilterRowsEditor/CnFilterRowsEditor.vue.js';
+import __sfc_main$2 from '../CnRegisterSchemaSelect/CnRegisterSchemaSelect.vue.js';
+import { fetchSchemaProperties } from '../../utils/fetchSchemaProperties.js';
+import { filterToRows, rowsToFilter } from '../CnFilterRowsEditor/filterRows.js';
+
+/**
+ * CnStackedBarWidgetForm is the settings form of a `stacked-bar` widget. It
+ * edits the source (register, schema, filter), the field the records are
+ * grouped by, the order of the segments and the empty text. Static `segments`
+ * and the `labels` map are written in the manifest and pass through
+ * untouched. Emits `update:content` on every change; `validate()` asks for a
+ * register, a schema and a group field unless the widget has static segments.
+ */
+var script = {
+	name: 'CnStackedBarWidgetForm',
+
+	components: { NcTextField, CnFieldPicker: __sfc_main, CnFilterRowsEditor: __sfc_main$1, CnRegisterSchemaSelect: __sfc_main$2 },
+
+	props: {
+		/**
+		 * The placement being edited (pre-fills from `editingWidget.content`), or null.
+		 *
+		 * @type {{content: object}|null}
+		 */
+		editingWidget: { type: Object, default: null },
+		/**
+		 * Initial content values when not editing (registry defaults).
+		 *
+		 * @type {object}
+		 */
+		value: { type: Object, default: () => ({}) },
+	},
+
+	emits: [
+		/**
+		 * Emitted with the assembled content blob on every field change.
+		 *
+		 * @event update:content
+		 * @type {object}
+		 */
+		'update:content',
+	],
+
+	data() {
+		const initial = this.editingWidget?.content || this.value || {};
+		const src = initial.source || {};
+		return {
+			initial,
+			source: { register: src.register ?? '', schema: src.schema ?? '' },
+			groupBy: src.groupBy ?? '',
+			filterRows: filterToRows(src.filter || {}),
+			orderText: Array.isArray(initial.order) ? initial.order.join(', ') : '',
+			emptyText: initial.emptyText ?? '',
+			availableFields: [],
+		}
+	},
+
+	computed: {
+		/**
+		 * The assembled content blob. Keys the form does not edit (static
+		 * segments, labels) are carried over from the initial content.
+		 *
+		 * @return {object}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget
+		 */
+		assembledContent() {
+			return {
+				...this.initial,
+				source: {
+					register: this.source.register,
+					schema: this.source.schema,
+					groupBy: this.groupBy,
+					filter: rowsToFilter(this.filterRows),
+				},
+
+				order: this.orderText.split(',').map((key) => key.trim()).filter((key) => key !== ''),
+				emptyText: this.emptyText,
+			}
+		},
+	},
+
+	watch: {
+		'source.register': 'loadFields',
+		'source.schema': 'loadFields',
+	},
+
+	mounted() {
+		this.loadFields();
+	},
+
+	methods: {
+		t: translate,
+
+		/**
+		 * Load the schema's field names for the picker.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget
+		 */
+		async loadFields() {
+			this.availableFields = await fetchSchemaProperties(this.source.register, this.source.schema);
+		},
+
+		/**
+		 * Set one field and emit the assembled content.
+		 *
+		 * @param {string} field The data key to write.
+		 * @param {string} value The new value.
+		 * @return {void}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget
+		 */
+		updateField(field, value) {
+			this[field] = value;
+			this.$emit('update:content', this.assembledContent);
+		},
+
+		/**
+		 * Set the register or the schema and emit.
+		 *
+		 * @param {'register'|'schema'} field The source key to write.
+		 * @param {string} value The chosen slug.
+		 * @return {void}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget
+		 */
+		updateSource(field, value) {
+			this.source[field] = value;
+			this.$emit('update:content', this.assembledContent);
+		},
+
+		/**
+		 * Take the filter editor's rows and emit.
+		 *
+		 * @param {Array<{key: string, op: string, value: string}>} rows The rows.
+		 * @return {void}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget
+		 */
+		onFilterRows(rows) {
+			this.filterRows = rows;
+			this.$emit('update:content', this.assembledContent);
+		},
+
+		/**
+		 * Validate the form; an empty array means valid.
+		 *
+		 * @return {string[]} The validation errors.
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget
+		 */
+		validate() {
+			const hasStatic = Array.isArray(this.initial.segments) && this.initial.segments.length > 0;
+			if (hasStatic && !this.source.register && !this.source.schema) {
+				return []
+			}
+			const errors = [];
+			if (!this.source.register || !this.source.schema) {
+				errors.push(translate('nextcloud-vue', 'A register and schema are required'));
+			}
+			if (!this.groupBy) {
+				errors.push(translate('nextcloud-vue', 'A field to group by is required'));
+			}
+			return errors
+		},
+	},
+};
+
+export { script as default };
+//# sourceMappingURL=CnStackedBarWidgetForm.vue2.js.map

package/dist/esm/components/CnStackedBarWidgetForm/CnStackedBarWidgetForm.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CnStackedBarWidgetForm.vue2.js","sources":["../../../../src/components/CnStackedBarWidgetForm/CnStackedBarWidgetForm.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<div class=\"cn-stacked-bar-form\">\n\t\t<div class=\"cn-stacked-bar-form__row2\">\n\t\t\t<CnRegisterSchemaSelect\n\t\t\t\t:register=\"source.register\"\n\t\t\t\t:schema=\"source.schema\"\n\t\t\t\t@update:register=\"updateSource('register', $event)\"\n\t\t\t\t@update:schema=\"updateSource('schema', $event)\" />\n\t\t</div>\n\n\t\t<CnFieldPicker\n\t\t\t:value=\"groupBy\"\n\t\t\t:label=\"t('nextcloud-vue', 'Field to group by')\"\n\t\t\t:options=\"availableFields\"\n\t\t\tplaceholder=\"status\"\n\t\t\t@update=\"updateField('groupBy', $event)\" />\n\n\t\t<CnFilterRowsEditor :value=\"filterRows\" :fields=\"availableFields\" @input=\"onFilterRows\" />\n\n\t\t<NcTextField\n\t\t\t:modelValue=\"orderText\"\n\t\t\t:label=\"t('nextcloud-vue', 'Order of the segments (values, comma separated)')\"\n\t\t\tplaceholder=\"received, in_progress, decision\"\n\t\t\t@update:modelValue=\"updateField('orderText', $event)\" />\n\n\t\t<NcTextField\n\t\t\t:modelValue=\"emptyText\"\n\t\t\t:label=\"t('nextcloud-vue', 'Text when there is nothing to count')\"\n\t\t\t@update:modelValue=\"updateField('emptyText', $event)\" />\n\t</div>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcTextField } from '@nextcloud/vue'\nimport CnFieldPicker from '../CnFieldPicker/CnFieldPicker.vue'\nimport CnFilterRowsEditor from '../CnFilterRowsEditor/CnFilterRowsEditor.vue'\nimport CnRegisterSchemaSelect from '../CnRegisterSchemaSelect/CnRegisterSchemaSelect.vue'\nimport { fetchSchemaProperties } from '../../utils/fetchSchemaProperties.js'\nimport { filterToRows, rowsToFilter } from '../CnFilterRowsEditor/filterRows.js'\n\n/**\n * CnStackedBarWidgetForm is the settings form of a `stacked-bar` widget. It\n * edits the source (register, schema, filter), the field the records are\n * grouped by, the order of the segments and the empty text. Static `segments`\n * and the `labels` map are written in the manifest and pass through\n * untouched. Emits `update:content` on every change; `validate()` asks for a\n * register, a schema and a group field unless the widget has static segments.\n */\nexport default {\n\tname: 'CnStackedBarWidgetForm',\n\n\tcomponents: { NcTextField, CnFieldPicker, CnFilterRowsEditor, CnRegisterSchemaSelect },\n\n\tprops: {\n\t\t/**\n\t\t * The placement being edited (pre-fills from `editingWidget.content`), or null.\n\t\t *\n\t\t * @type {{content: object}|null}\n\t\t */\n\t\teditingWidget: { type: Object, default: null },\n\t\t/**\n\t\t * Initial content values when not editing (registry defaults).\n\t\t *\n\t\t * @type {object}\n\t\t */\n\t\tvalue: { type: Object, default: () => ({}) },\n\t},\n\n\temits: [\n\t\t/**\n\t\t * Emitted with the assembled content blob on every field change.\n\t\t *\n\t\t * @event update:content\n\t\t * @type {object}\n\t\t */\n\t\t'update:content',\n\t],\n\n\tdata() {\n\t\tconst initial = this.editingWidget?.content || this.value || {}\n\t\tconst src = initial.source || {}\n\t\treturn {\n\t\t\tinitial,\n\t\t\tsource: { register: src.register ?? '', schema: src.schema ?? '' },\n\t\t\tgroupBy: src.groupBy ?? '',\n\t\t\tfilterRows: filterToRows(src.filter || {}),\n\t\t\torderText: Array.isArray(initial.order) ? initial.order.join(', ') : '',\n\t\t\temptyText: initial.emptyText ?? '',\n\t\t\tavailableFields: [],\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * The assembled content blob. Keys the form does not edit (static\n\t\t * segments, labels) are carried over from the initial content.\n\t\t *\n\t\t * @return {object}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tassembledContent() {\n\t\t\treturn {\n\t\t\t\t...this.initial,\n\t\t\t\tsource: {\n\t\t\t\t\tregister: this.source.register,\n\t\t\t\t\tschema: this.source.schema,\n\t\t\t\t\tgroupBy: this.groupBy,\n\t\t\t\t\tfilter: rowsToFilter(this.filterRows),\n\t\t\t\t},\n\n\t\t\t\torder: this.orderText.split(',').map((key) => key.trim()).filter((key) => key !== ''),\n\t\t\t\temptyText: this.emptyText,\n\t\t\t}\n\t\t},\n\t},\n\n\twatch: {\n\t\t'source.register': 'loadFields',\n\t\t'source.schema': 'loadFields',\n\t},\n\n\tmounted() {\n\t\tthis.loadFields()\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\t/**\n\t\t * Load the schema's field names for the picker.\n\t\t *\n\t\t * @return {Promise<void>}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tasync loadFields() {\n\t\t\tthis.availableFields = await fetchSchemaProperties(this.source.register, this.source.schema)\n\t\t},\n\n\t\t/**\n\t\t * Set one field and emit the assembled content.\n\t\t *\n\t\t * @param {string} field The data key to write.\n\t\t * @param {string} value The new value.\n\t\t * @return {void}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tupdateField(field, value) {\n\t\t\tthis[field] = value\n\t\t\tthis.$emit('update:content', this.assembledContent)\n\t\t},\n\n\t\t/**\n\t\t * Set the register or the schema and emit.\n\t\t *\n\t\t * @param {'register'|'schema'} field The source key to write.\n\t\t * @param {string} value The chosen slug.\n\t\t * @return {void}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tupdateSource(field, value) {\n\t\t\tthis.source[field] = value\n\t\t\tthis.$emit('update:content', this.assembledContent)\n\t\t},\n\n\t\t/**\n\t\t * Take the filter editor's rows and emit.\n\t\t *\n\t\t * @param {Array<{key: string, op: string, value: string}>} rows The rows.\n\t\t * @return {void}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tonFilterRows(rows) {\n\t\t\tthis.filterRows = rows\n\t\t\tthis.$emit('update:content', this.assembledContent)\n\t\t},\n\n\t\t/**\n\t\t * Validate the form; an empty array means valid.\n\t\t *\n\t\t * @return {string[]} The validation errors.\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tvalidate() {\n\t\t\tconst hasStatic = Array.isArray(this.initial.segments) && this.initial.segments.length > 0\n\t\t\tif (hasStatic && !this.source.register && !this.source.schema) {\n\t\t\t\treturn []\n\t\t\t}\n\t\t\tconst errors = []\n\t\t\tif (!this.source.register || !this.source.schema) {\n\t\t\t\terrors.push(t('nextcloud-vue', 'A register and schema are required'))\n\t\t\t}\n\t\t\tif (!this.groupBy) {\n\t\t\t\terrors.push(t('nextcloud-vue', 'A field to group by is required'))\n\t\t\t}\n\t\t\treturn errors\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-stacked-bar-form {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 12px;\n}\n\n.cn-stacked-bar-form__row2 {\n\tdisplay: flex;\n\tgap: 12px;\n\talign-items: flex-end;\n}\n\n.cn-stacked-bar-form__row2 > * {\n\tflex: 1;\n\tmin-width: 0;\n}\n</style>\n"],"names":["CnFieldPicker","CnFilterRowsEditor","CnRegisterSchemaSelect","t"],"mappings":";;;;;;;;AA8CA;AACC;;AAEA;;AAEA;AACA;;AAED,aAAe;CACd,IAAI,EAAE,wBAAwB;;AAE9B,CAAA,UAAU,EAAE,EAAE,WAAW,iBAAEA,UAAa,sBAAEC,YAAkB,0BAAEC,cAAwB;;AAEtF,CAAA,KAAK,EAAE;AACN;AACC;AACA;;;AAGD,EAAA,aAAa,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM;AAC9C;;AAEC;;;AAGD,EAAA,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG;EAC5C;;AAED,CAAA,KAAK,EAAE;AACN;;AAEC;AACA;;;AAGD,EAAA,gBAAgB;EAChB;;AAED,CAAA,IAAI,GAAG;EACN,MAAM,OAAQ,GAAE,IAAI,CAAC,aAAa,EAAE,OAAQ,IAAG,IAAI,CAAC,KAAI,IAAK,GAAC;EAC9D,MAAM,GAAI,GAAE,OAAO,CAAC,MAAK,IAAK,GAAC;AAC/B,EAAA,OAAO;AACN,GAAA,OAAO;GACP,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,CAAC,YAAY,EAAE,EAAE,MAAM,EAAE,GAAG,CAAC,MAAK,IAAK,EAAC,EAAG;GAClE,OAAO,EAAE,GAAG,CAAC,OAAQ,IAAG,EAAE;AAC1B,GAAA,UAAU,EAAE,YAAY,CAAC,GAAG,CAAC,MAAK,IAAK,EAAE,CAAC;AAC1C,GAAA,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAA,GAAI,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAE,GAAE,EAAE;AACvE,GAAA,SAAS,EAAE,OAAO,CAAC,SAAQ,IAAK,EAAE;AAClC,GAAA,eAAe,EAAE,EAAE;AACpB,GAAA;EACA;;AAED,CAAA,QAAQ,EAAE;AACT;;;AAGC;AACA;AACA;;AAED,EAAA,gBAAgB,GAAG;AAClB,GAAA,OAAO;AACN,IAAA,GAAG,IAAI,CAAC,OAAO;AACf,IAAA,MAAM,EAAE;KACP,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ;KAC9B,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM;AAC1B,KAAA,OAAO,EAAE,IAAI,CAAC,OAAO;AACrB,KAAA,MAAM,EAAE,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC;KACrC;;AAED,IAAA,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;IACrF,SAAS,EAAE,IAAI,CAAC,SAAS;AAC1B,IAAA;GACA;EACD;;AAED,CAAA,KAAK,EAAE;AACN,EAAA,iBAAiB,EAAE,YAAY;EAC/B,eAAe,EAAE,YAAY;EAC7B;;AAED,CAAA,OAAO,GAAG;AACT,EAAA,IAAI,CAAC,UAAU,GAAC;EAChB;;AAED,CAAA,OAAO,EAAE;KACRC,SAAC;;AAED;AACC;AACA;;AAEA;;AAED,EAAA,MAAM,UAAU,GAAG;AAClB,GAAA,IAAI,CAAC,eAAgB,GAAE,MAAM,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAA;GAC3F;;AAED;AACC;AACA;AACA;AACA;;AAEA;;EAED,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE;AACzB,GAAA,IAAI,CAAC,KAAK,CAAE,GAAE,MAAI;GAClB,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EAAA;GAClD;;AAED;AACC;AACA;;AAEA;;AAEA;;EAED,YAAY,CAAC,KAAK,EAAE,KAAK,EAAE;GAC1B,IAAI,CAAC,MAAM,CAAC,KAAK,IAAI,MAAI;GACzB,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EAAA;GAClD;;AAED;AACC;AACA;AACA;;AAEA;;AAED,EAAA,YAAY,CAAC,IAAI,EAAE;AAClB,GAAA,IAAI,CAAC,aAAa,KAAG;GACrB,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EAAA;GAClD;;AAED;AACC;AACA;AACA;AACA;;EAED,QAAQ,GAAG;AACV,GAAA,MAAM,SAAQ,GAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAA,IAAK,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,SAAS,EAAA;GACzF,IAAI,SAAU,IAAG,CAAC,IAAI,CAAC,MAAM,CAAC,QAAO,IAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;AAC9D,IAAA,OAAO,EAAC;AACT,IAAA;GACA,MAAM,MAAO,GAAE,GAAC;GAChB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;AACjD,IAAA,MAAM,CAAC,IAAI,CAACA,SAAC,CAAC,eAAe,EAAE,oCAAoC,CAAC,EAAA;AACrE,IAAA;AACA,GAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;IAClB,MAAM,CAAC,IAAI,CAACA,SAAC,CAAC,eAAe,EAAE,iCAAiC,CAAC,EAAA;AAClE,IAAA;GACA,OAAO,MAAK;GACZ;EACD;AACF;;;;"}

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

@@ -0,0 +1,48 @@
+import { resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode } from 'vue';
+
+const _hoisted_1 = { class: "cn-stacked-bar-form" };
+const _hoisted_2 = { class: "cn-stacked-bar-form__row2" };
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CnRegisterSchemaSelect = resolveComponent("CnRegisterSchemaSelect");
+  const _component_CnFieldPicker = resolveComponent("CnFieldPicker");
+  const _component_CnFilterRowsEditor = resolveComponent("CnFilterRowsEditor");
+  const _component_NcTextField = resolveComponent("NcTextField");
+
+  return (openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("div", _hoisted_2, [
+      createVNode(_component_CnRegisterSchemaSelect, {
+        register: $data.source.register,
+        schema: $data.source.schema,
+        "onUpdate:register": _cache[0] || (_cache[0] = $event => ($options.updateSource('register', $event))),
+        "onUpdate:schema": _cache[1] || (_cache[1] = $event => ($options.updateSource('schema', $event)))
+      }, null, 8 /* PROPS */, ["register", "schema"])
+    ]),
+    createVNode(_component_CnFieldPicker, {
+      value: $data.groupBy,
+      label: $options.t('nextcloud-vue', 'Field to group by'),
+      options: $data.availableFields,
+      placeholder: "status",
+      onUpdate: _cache[2] || (_cache[2] = $event => ($options.updateField('groupBy', $event)))
+    }, null, 8 /* PROPS */, ["value", "label", "options"]),
+    createVNode(_component_CnFilterRowsEditor, {
+      value: $data.filterRows,
+      fields: $data.availableFields,
+      onInput: $options.onFilterRows
+    }, null, 8 /* PROPS */, ["value", "fields", "onInput"]),
+    createVNode(_component_NcTextField, {
+      modelValue: $data.orderText,
+      label: $options.t('nextcloud-vue', 'Order of the segments (values, comma separated)'),
+      placeholder: "received, in_progress, decision",
+      "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => ($options.updateField('orderText', $event)))
+    }, null, 8 /* PROPS */, ["modelValue", "label"]),
+    createVNode(_component_NcTextField, {
+      modelValue: $data.emptyText,
+      label: $options.t('nextcloud-vue', 'Text when there is nothing to count'),
+      "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => ($options.updateField('emptyText', $event)))
+    }, null, 8 /* PROPS */, ["modelValue", "label"])
+  ]))
+}
+
+export { render };
+//# sourceMappingURL=CnStackedBarWidgetForm.vue3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CnStackedBarWidgetForm.vue3.js","sources":["../../../../src/components/CnStackedBarWidgetForm/CnStackedBarWidgetForm.vue?vue&type=template&id=56e6c6a2&lang.js"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<div class=\"cn-stacked-bar-form\">\n\t\t<div class=\"cn-stacked-bar-form__row2\">\n\t\t\t<CnRegisterSchemaSelect\n\t\t\t\t:register=\"source.register\"\n\t\t\t\t:schema=\"source.schema\"\n\t\t\t\t@update:register=\"updateSource('register', $event)\"\n\t\t\t\t@update:schema=\"updateSource('schema', $event)\" />\n\t\t</div>\n\n\t\t<CnFieldPicker\n\t\t\t:value=\"groupBy\"\n\t\t\t:label=\"t('nextcloud-vue', 'Field to group by')\"\n\t\t\t:options=\"availableFields\"\n\t\t\tplaceholder=\"status\"\n\t\t\t@update=\"updateField('groupBy', $event)\" />\n\n\t\t<CnFilterRowsEditor :value=\"filterRows\" :fields=\"availableFields\" @input=\"onFilterRows\" />\n\n\t\t<NcTextField\n\t\t\t:modelValue=\"orderText\"\n\t\t\t:label=\"t('nextcloud-vue', 'Order of the segments (values, comma separated)')\"\n\t\t\tplaceholder=\"received, in_progress, decision\"\n\t\t\t@update:modelValue=\"updateField('orderText', $event)\" />\n\n\t\t<NcTextField\n\t\t\t:modelValue=\"emptyText\"\n\t\t\t:label=\"t('nextcloud-vue', 'Text when there is nothing to count')\"\n\t\t\t@update:modelValue=\"updateField('emptyText', $event)\" />\n\t</div>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcTextField } from '@nextcloud/vue'\nimport CnFieldPicker from '../CnFieldPicker/CnFieldPicker.vue'\nimport CnFilterRowsEditor from '../CnFilterRowsEditor/CnFilterRowsEditor.vue'\nimport CnRegisterSchemaSelect from '../CnRegisterSchemaSelect/CnRegisterSchemaSelect.vue'\nimport { fetchSchemaProperties } from '../../utils/fetchSchemaProperties.js'\nimport { filterToRows, rowsToFilter } from '../CnFilterRowsEditor/filterRows.js'\n\n/**\n * CnStackedBarWidgetForm is the settings form of a `stacked-bar` widget. It\n * edits the source (register, schema, filter), the field the records are\n * grouped by, the order of the segments and the empty text. Static `segments`\n * and the `labels` map are written in the manifest and pass through\n * untouched. Emits `update:content` on every change; `validate()` asks for a\n * register, a schema and a group field unless the widget has static segments.\n */\nexport default {\n\tname: 'CnStackedBarWidgetForm',\n\n\tcomponents: { NcTextField, CnFieldPicker, CnFilterRowsEditor, CnRegisterSchemaSelect },\n\n\tprops: {\n\t\t/**\n\t\t * The placement being edited (pre-fills from `editingWidget.content`), or null.\n\t\t *\n\t\t * @type {{content: object}|null}\n\t\t */\n\t\teditingWidget: { type: Object, default: null },\n\t\t/**\n\t\t * Initial content values when not editing (registry defaults).\n\t\t *\n\t\t * @type {object}\n\t\t */\n\t\tvalue: { type: Object, default: () => ({}) },\n\t},\n\n\temits: [\n\t\t/**\n\t\t * Emitted with the assembled content blob on every field change.\n\t\t *\n\t\t * @event update:content\n\t\t * @type {object}\n\t\t */\n\t\t'update:content',\n\t],\n\n\tdata() {\n\t\tconst initial = this.editingWidget?.content || this.value || {}\n\t\tconst src = initial.source || {}\n\t\treturn {\n\t\t\tinitial,\n\t\t\tsource: { register: src.register ?? '', schema: src.schema ?? '' },\n\t\t\tgroupBy: src.groupBy ?? '',\n\t\t\tfilterRows: filterToRows(src.filter || {}),\n\t\t\torderText: Array.isArray(initial.order) ? initial.order.join(', ') : '',\n\t\t\temptyText: initial.emptyText ?? '',\n\t\t\tavailableFields: [],\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * The assembled content blob. Keys the form does not edit (static\n\t\t * segments, labels) are carried over from the initial content.\n\t\t *\n\t\t * @return {object}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tassembledContent() {\n\t\t\treturn {\n\t\t\t\t...this.initial,\n\t\t\t\tsource: {\n\t\t\t\t\tregister: this.source.register,\n\t\t\t\t\tschema: this.source.schema,\n\t\t\t\t\tgroupBy: this.groupBy,\n\t\t\t\t\tfilter: rowsToFilter(this.filterRows),\n\t\t\t\t},\n\n\t\t\t\torder: this.orderText.split(',').map((key) => key.trim()).filter((key) => key !== ''),\n\t\t\t\temptyText: this.emptyText,\n\t\t\t}\n\t\t},\n\t},\n\n\twatch: {\n\t\t'source.register': 'loadFields',\n\t\t'source.schema': 'loadFields',\n\t},\n\n\tmounted() {\n\t\tthis.loadFields()\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\t/**\n\t\t * Load the schema's field names for the picker.\n\t\t *\n\t\t * @return {Promise<void>}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tasync loadFields() {\n\t\t\tthis.availableFields = await fetchSchemaProperties(this.source.register, this.source.schema)\n\t\t},\n\n\t\t/**\n\t\t * Set one field and emit the assembled content.\n\t\t *\n\t\t * @param {string} field The data key to write.\n\t\t * @param {string} value The new value.\n\t\t * @return {void}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tupdateField(field, value) {\n\t\t\tthis[field] = value\n\t\t\tthis.$emit('update:content', this.assembledContent)\n\t\t},\n\n\t\t/**\n\t\t * Set the register or the schema and emit.\n\t\t *\n\t\t * @param {'register'|'schema'} field The source key to write.\n\t\t * @param {string} value The chosen slug.\n\t\t * @return {void}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tupdateSource(field, value) {\n\t\t\tthis.source[field] = value\n\t\t\tthis.$emit('update:content', this.assembledContent)\n\t\t},\n\n\t\t/**\n\t\t * Take the filter editor's rows and emit.\n\t\t *\n\t\t * @param {Array<{key: string, op: string, value: string}>} rows The rows.\n\t\t * @return {void}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tonFilterRows(rows) {\n\t\t\tthis.filterRows = rows\n\t\t\tthis.$emit('update:content', this.assembledContent)\n\t\t},\n\n\t\t/**\n\t\t * Validate the form; an empty array means valid.\n\t\t *\n\t\t * @return {string[]} The validation errors.\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tvalidate() {\n\t\t\tconst hasStatic = Array.isArray(this.initial.segments) && this.initial.segments.length > 0\n\t\t\tif (hasStatic && !this.source.register && !this.source.schema) {\n\t\t\t\treturn []\n\t\t\t}\n\t\t\tconst errors = []\n\t\t\tif (!this.source.register || !this.source.schema) {\n\t\t\t\terrors.push(t('nextcloud-vue', 'A register and schema are required'))\n\t\t\t}\n\t\t\tif (!this.groupBy) {\n\t\t\t\terrors.push(t('nextcloud-vue', 'A field to group by is required'))\n\t\t\t}\n\t\t\treturn errors\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-stacked-bar-form {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 12px;\n}\n\n.cn-stacked-bar-form__row2 {\n\tdisplay: flex;\n\tgap: 12px;\n\talign-items: flex-end;\n}\n\n.cn-stacked-bar-form__row2 > * {\n\tflex: 1;\n\tmin-width: 0;\n}\n</style>\n"],"names":["_createVNode"],"mappings":";;AAWM,MAAA,UAAA,GAAA,EAAA,KAAK,EAAC,qBAAqB,GAAA;AAC1B,MAAA,UAAA,GAAA,EAAA,KAAK,EAAC,2BAA2B,GAAA;;;;;;;;;uBAMhC,iBAAA,EAAA;MALLA,WAI+C,CAAA,iCAAA,EAAA;;QAF7C,MAAM,EAAE,KAAE,CAAA,MAAA,CAAA,MAAA;QACV,mBAAa,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,MAAA,KAAA,QAAA,CAAA,YAAA,CAAA,UAAA,EAAA,MAAA,CAAA,CAAA,CAAA;QACb,iBAAa,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,MAAA,KAAE,QAAY,CAAA,YAAA,CAAA,QAAA,EAAW,MAAM,CAAA,CAAA,CAAA;;;IAG9CA,WAKsB,CAAA,wBAAA,EAAA;;AAHrB,MAAA,KAAK,EAAE,QAAC,CAAA,CAAA,CAAA,eAAA,EAAA,mBAAA,CAAA;;AAET,MAAA,WAAU,EAAA,QAAA;MACT,QAAM,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,MAAA,KAAE,QAAW,CAAA,WAAA,CAAA,SAAA,EAAE,MAAA,CAAA,CAAA,CAAA;;IAEtBA,WAA4C,CAAA,6BAAA,EAAA;AAAxB,MAAA,KAAK,EAAE,KAAU,CAAA,UAAA;AAAG,MAAA,MAAI,EAAA,KAAA,CAAA,eAAA;AAAA,MAAA,OAAA,EAAA,QAAA,CAAA,YAAA;;eAMW,CAAA,sBAAA,EAAA;AAHtD,MAAA,UAAS,EAAA,KAAA,CAAA,SAAA;AACT,MAAA,KAAK,EAAE,QAAC,CAAA,CAAA,CAAA,eAAA,EAAA,iDAAA,CAAA;AACT,MAAA,WAAW,EAAC,iCAAiC;MAC5C,qBAAiB,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,MAAA,KAAE,QAAW,CAAA,WAAA,CAAA,WAAA,EAAc,MAAM,CAAA,CAAA,CAAA;;;;;;;;;;;;"}

package/dist/esm/components/CnTabs/CnTab.vue2.js

@@ -41,6 +41,28 @@ var script = defineComponent({
 			type: Boolean,
 			default: false,
 		},
+
+		/**
+		 * A count shown after the title, for example the number of documents
+		 * behind the tab. `null` (the default) shows none; `0` is shown.
+		 *
+		 * @type {number|string|null}
+		 */
+		count: {
+			type: [Number, String],
+			default: null,
+		},
+
+		/**
+		 * List this tab under the strip's "More" menu instead of in the strip.
+		 * Picking it there selects it, and while it is the selected tab it
+		 * shows in the strip. Give an overflow tab a `title`: the menu needs
+		 * plain text, and a `#title` slot is markup.
+		 */
+		overflow: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	emits: [
@@ -77,6 +99,19 @@ var script = defineComponent({
 			get disabled() {
 				return props.disabled
 			},
+
+			get count() {
+				return props.count
+			},
+
+			get overflow() {
+				return props.overflow
+			},
+
+			// Plain text for the "More" menu, where a `#title` slot cannot go.
+			get label() {
+				return props.title
+			},
 		};
 
 		onMounted(() => tabsApi?.register(entry));

package/dist/esm/components/CnTabs/CnTab.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"CnTab.vue2.js","sources":["../../../../src/components/CnTabs/CnTab.vue"],"sourcesContent":["<template>\n\t<div\n\t\t:id=\"panelId\"\n\t\tclass=\"cn-tab\"\n\t\trole=\"tabpanel\"\n\t\t:aria-labelledby=\"tabId\"\n\t\t:tabindex=\"visible ? 0 : -1\"\n\t\t:hidden=\"visible ? null : true\"\n\t\t:style=\"visible ? null : { display: 'none' }\">\n\t\t<!-- @slot The panel body. -->\n\t\t<slot v-if=\"rendered\" />\n\t</div>\n</template>\n\n<script>\n/**\n * CnTab — one panel inside a `CnTabs` strip.\n *\n * ```vue\n * <CnTab title=\"Documents\">…</CnTab>\n *\n * <CnTab :active=\"selected === i\" @click=\"selected = i\">\n *   <template #title>\n *     {{ label }} <CnIcon name=\"close\" @click.stop=\"close(i)\" />\n *   </template>\n *   …\n * </CnTab>\n * ```\n *\n * ## The panel stays in the DOM\n *\n * An inactive panel is hidden with `hidden` + `display: none`, not removed with\n * `v-if`. This matches bootstrap-vue's `<BTab>`, and it is load-bearing: panels\n * that fetch on `mounted()` would refire that request on every tab switch if\n * they were destroyed and recreated. Use `v-if` inside the panel yourself if\n * you specifically want teardown.\n *\n * `lazy` changes only the FIRST paint: the body waits until the tab is first\n * activated, and from then on the panel behaves exactly as above. It is for\n * strips whose panels are expensive to mount, not for saving memory.\n *\n * ## Rendered outside a CnTabs parent\n *\n * The panel shows its content rather than vanishing. That is deliberate: the\n * alternative failure — an app whose `inject()` misses because the library got\n * loaded twice — would otherwise render blank with no error at all. See\n * `tabsKey.js` for why the key is `Symbol.for`.\n */\nimport { computed, defineComponent, getCurrentInstance, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { CN_TABS_INJECTION_KEY } from './tabsKey.js'\n\nexport default defineComponent({\n\tname: 'CnTab',\n\n\tprops: {\n\t\t/** Plain-text tab title. Ignored when a `#title` slot is supplied. */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Select this tab. Honoured on mount and on every later change. */\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** Render the nav button disabled and skip this tab in keyboard navigation. */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Hold the panel body back until this tab is first activated, then keep\n\t\t * it mounted for the rest of the strip's life.\n\t\t *\n\t\t * Off by default, because the eager panel is what makes a tab switch\n\t\t * instant and it is the behaviour every existing consumer already has.\n\t\t * Turn it on when the panels are expensive: six panels that each fetch\n\t\t * on `mounted()` fire six requests on page load, and five of those\n\t\t * answer questions nobody has asked yet.\n\t\t *\n\t\t * This is NOT `v-if`-per-switch. Once a panel has been shown it stays\n\t\t * in the DOM, so switching back to it never refetches. That is the\n\t\t * whole reason an inactive panel is hidden rather than destroyed.\n\t\t */\n\t\tlazy: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t/** The user activated this tab. */\n\t\t'click',\n\t],\n\n\tsetup(props, { slots, emit }) {\n\t\tconst tabsApi = inject(CN_TABS_INJECTION_KEY, null)\n\t\tconst uid = getCurrentInstance().uid\n\t\tconst tabId = `cn-tab-${uid}`\n\t\tconst panelId = `cn-tabpanel-${uid}`\n\n\t\tconst entry = {\n\t\t\tuid,\n\t\t\ttabId,\n\t\t\tpanelId,\n\t\t\t// Invoked from the PARENT's render effect, so reading `props.title`\n\t\t\t// (or calling the slot) here is what keeps a computed title reactive\n\t\t\t// in the nav strip.\n\t\t\ttitleRender: () => (slots.title ? slots.title() : props.title),\n\t\t\tonActivate: () => {\n\t\t\t\tif (props.disabled) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\ttabsApi?.select(uid)\n\t\t\t\temit('click')\n\t\t\t},\n\n\t\t\tget active() {\n\t\t\t\treturn props.active\n\t\t\t},\n\n\t\t\tget disabled() {\n\t\t\t\treturn props.disabled\n\t\t\t},\n\t\t}\n\n\t\tonMounted(() => tabsApi?.register(entry))\n\t\tonBeforeUnmount(() => tabsApi?.unregister(uid))\n\n\t\twatch(() => props.active, (isActive) => {\n\t\t\tif (isActive && !props.disabled) {\n\t\t\t\ttabsApi?.select(uid)\n\t\t\t}\n\t\t})\n\n\t\tconst visible = computed(() => (tabsApi ? tabsApi.isActive(uid) : true))\n\n\t\t// Latches on first activation and never resets, so a lazy panel mounts\n\t\t// once and then behaves exactly like an eager one.\n\t\tconst shown = ref(false)\n\t\twatch(visible, (isVisible) => {\n\t\t\tif (isVisible) {\n\t\t\t\tshown.value = true\n\t\t\t}\n\t\t}, { immediate: true })\n\n\t\tconst rendered = computed(() => !props.lazy || shown.value)\n\n\t\treturn { visible, rendered, tabId, panelId }\n\t},\n})\n</script>\n"],"names":[],"mappings":";;;AAmDA,aAAe,eAAe,CAAC;CAC9B,IAAI,EAAE,OAAO;;AAEb,CAAA,KAAK,EAAE;;AAEN,EAAA,KAAK,EAAE;GACN,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,EAAE;GACX;;;AAGD,EAAA,MAAM,EAAE;GACP,IAAI,EAAE,OAAO;GACb,OAAO,EAAE,KAAK;GACd;;AAED;AACA,EAAA,QAAQ,EAAE;GACT,IAAI,EAAE,OAAO;GACb,OAAO,EAAE,KAAK;GACd;;AAED;;AAEC;AACA;;;;;AAKA;AACA;;;;;EAKD,IAAI,EAAE;GACL,IAAI,EAAE,OAAO;GACb,OAAO,EAAE,KAAK;GACd;EACD;;AAED,CAAA,KAAK,EAAE;;AAEN,EAAA,OAAO;EACP;;CAED,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAK,EAAC,EAAE;EAC7B,MAAM,UAAU,MAAM,CAAC,qBAAqB,EAAE,IAAI,EAAA;AAClD,EAAA,MAAM,GAAI,GAAE,kBAAkB,EAAE,CAAC,IAAE;EACnC,MAAM,KAAI,GAAI,CAAC,OAAO,EAAE,GAAG,CAAC,EAAA;AAC5B,EAAA,MAAM,OAAQ,GAAE,CAAC,YAAY,EAAE,GAAG,CAAC,EAAA;;EAEnC,MAAM,KAAI,GAAI;AACb,GAAA,GAAG;GACH,KAAK;AACL,GAAA,OAAO;;;AAGP;GACA,WAAW,EAAE,OAAO,KAAK,CAAC,QAAQ,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC;AAC9D,GAAA,UAAU,EAAE,MAAM;AACjB,IAAA,IAAI,KAAK,CAAC,QAAQ,EAAE;KACnB,MAAK;AACN,KAAA;AACA,IAAA,OAAO,EAAE,MAAM,CAAC,GAAG,EAAA;IACnB,IAAI,CAAC,OAAO,EAAA;IACZ;;GAED,IAAI,MAAM,GAAG;AACZ,IAAA,OAAO,KAAK,CAAC,MAAK;IAClB;;GAED,IAAI,QAAQ,GAAG;AACd,IAAA,OAAO,KAAK,CAAC,QAAO;IACpB;AACF,IAAA;;AAEA,EAAA,SAAS,CAAC,MAAM,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC,EAAA;AACxC,EAAA,eAAe,CAAC,MAAM,OAAO,EAAE,UAAU,CAAC,GAAG,CAAC,EAAA;;AAE9C,EAAA,KAAK,CAAC,MAAM,KAAK,CAAC,MAAM,EAAE,CAAC,QAAQ,KAAK;GACvC,IAAI,QAAS,IAAG,CAAC,KAAK,CAAC,QAAQ,EAAE;AAChC,IAAA,OAAO,EAAE,MAAM,CAAC,GAAG,EAAA;AACpB,IAAA;GACA,EAAA;;AAED,EAAA,MAAM,OAAQ,GAAE,QAAQ,CAAC,OAAO,OAAQ,GAAE,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAE,GAAE,IAAI,CAAC,EAAA;;;AAGvE;AACA,EAAA,MAAM,KAAI,GAAI,GAAG,CAAC,KAAK,EAAA;EACvB,KAAK,CAAC,OAAO,EAAE,CAAC,SAAS,KAAK;GAC7B,IAAI,SAAS,EAAE;AACd,IAAA,KAAK,CAAC,KAAI,GAAI,KAAG;AAClB,IAAA;AACD,GAAC,EAAE,EAAE,SAAS,EAAE,MAAM,EAAA;;EAEtB,MAAM,WAAW,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,IAAG,IAAK,KAAK,CAAC,KAAK,EAAA;;AAE1D,EAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAQ,EAAA;EAC3C;AACF,CAAC;;;;"}
+{"version":3,"file":"CnTab.vue2.js","sources":["../../../../src/components/CnTabs/CnTab.vue"],"sourcesContent":["<template>\n\t<div\n\t\t:id=\"panelId\"\n\t\tclass=\"cn-tab\"\n\t\trole=\"tabpanel\"\n\t\t:aria-labelledby=\"tabId\"\n\t\t:tabindex=\"visible ? 0 : -1\"\n\t\t:hidden=\"visible ? null : true\"\n\t\t:style=\"visible ? null : { display: 'none' }\">\n\t\t<!-- @slot The panel body. -->\n\t\t<slot v-if=\"rendered\" />\n\t</div>\n</template>\n\n<script>\n/**\n * CnTab — one panel inside a `CnTabs` strip.\n *\n * ```vue\n * <CnTab title=\"Documents\">…</CnTab>\n *\n * <CnTab :active=\"selected === i\" @click=\"selected = i\">\n *   <template #title>\n *     {{ label }} <CnIcon name=\"close\" @click.stop=\"close(i)\" />\n *   </template>\n *   …\n * </CnTab>\n * ```\n *\n * ## The panel stays in the DOM\n *\n * An inactive panel is hidden with `hidden` + `display: none`, not removed with\n * `v-if`. This matches bootstrap-vue's `<BTab>`, and it is load-bearing: panels\n * that fetch on `mounted()` would refire that request on every tab switch if\n * they were destroyed and recreated. Use `v-if` inside the panel yourself if\n * you specifically want teardown.\n *\n * `lazy` changes only the FIRST paint: the body waits until the tab is first\n * activated, and from then on the panel behaves exactly as above. It is for\n * strips whose panels are expensive to mount, not for saving memory.\n *\n * ## Rendered outside a CnTabs parent\n *\n * The panel shows its content rather than vanishing. That is deliberate: the\n * alternative failure — an app whose `inject()` misses because the library got\n * loaded twice — would otherwise render blank with no error at all. See\n * `tabsKey.js` for why the key is `Symbol.for`.\n */\nimport { computed, defineComponent, getCurrentInstance, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { CN_TABS_INJECTION_KEY } from './tabsKey.js'\n\nexport default defineComponent({\n\tname: 'CnTab',\n\n\tprops: {\n\t\t/** Plain-text tab title. Ignored when a `#title` slot is supplied. */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Select this tab. Honoured on mount and on every later change. */\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** Render the nav button disabled and skip this tab in keyboard navigation. */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Hold the panel body back until this tab is first activated, then keep\n\t\t * it mounted for the rest of the strip's life.\n\t\t *\n\t\t * Off by default, because the eager panel is what makes a tab switch\n\t\t * instant and it is the behaviour every existing consumer already has.\n\t\t * Turn it on when the panels are expensive: six panels that each fetch\n\t\t * on `mounted()` fire six requests on page load, and five of those\n\t\t * answer questions nobody has asked yet.\n\t\t *\n\t\t * This is NOT `v-if`-per-switch. Once a panel has been shown it stays\n\t\t * in the DOM, so switching back to it never refetches. That is the\n\t\t * whole reason an inactive panel is hidden rather than destroyed.\n\t\t */\n\t\tlazy: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * A count shown after the title, for example the number of documents\n\t\t * behind the tab. `null` (the default) shows none; `0` is shown.\n\t\t *\n\t\t * @type {number|string|null}\n\t\t */\n\t\tcount: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * List this tab under the strip's \"More\" menu instead of in the strip.\n\t\t * Picking it there selects it, and while it is the selected tab it\n\t\t * shows in the strip. Give an overflow tab a `title`: the menu needs\n\t\t * plain text, and a `#title` slot is markup.\n\t\t */\n\t\toverflow: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t/** The user activated this tab. */\n\t\t'click',\n\t],\n\n\tsetup(props, { slots, emit }) {\n\t\tconst tabsApi = inject(CN_TABS_INJECTION_KEY, null)\n\t\tconst uid = getCurrentInstance().uid\n\t\tconst tabId = `cn-tab-${uid}`\n\t\tconst panelId = `cn-tabpanel-${uid}`\n\n\t\tconst entry = {\n\t\t\tuid,\n\t\t\ttabId,\n\t\t\tpanelId,\n\t\t\t// Invoked from the PARENT's render effect, so reading `props.title`\n\t\t\t// (or calling the slot) here is what keeps a computed title reactive\n\t\t\t// in the nav strip.\n\t\t\ttitleRender: () => (slots.title ? slots.title() : props.title),\n\t\t\tonActivate: () => {\n\t\t\t\tif (props.disabled) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\ttabsApi?.select(uid)\n\t\t\t\temit('click')\n\t\t\t},\n\n\t\t\tget active() {\n\t\t\t\treturn props.active\n\t\t\t},\n\n\t\t\tget disabled() {\n\t\t\t\treturn props.disabled\n\t\t\t},\n\n\t\t\tget count() {\n\t\t\t\treturn props.count\n\t\t\t},\n\n\t\t\tget overflow() {\n\t\t\t\treturn props.overflow\n\t\t\t},\n\n\t\t\t// Plain text for the \"More\" menu, where a `#title` slot cannot go.\n\t\t\tget label() {\n\t\t\t\treturn props.title\n\t\t\t},\n\t\t}\n\n\t\tonMounted(() => tabsApi?.register(entry))\n\t\tonBeforeUnmount(() => tabsApi?.unregister(uid))\n\n\t\twatch(() => props.active, (isActive) => {\n\t\t\tif (isActive && !props.disabled) {\n\t\t\t\ttabsApi?.select(uid)\n\t\t\t}\n\t\t})\n\n\t\tconst visible = computed(() => (tabsApi ? tabsApi.isActive(uid) : true))\n\n\t\t// Latches on first activation and never resets, so a lazy panel mounts\n\t\t// once and then behaves exactly like an eager one.\n\t\tconst shown = ref(false)\n\t\twatch(visible, (isVisible) => {\n\t\t\tif (isVisible) {\n\t\t\t\tshown.value = true\n\t\t\t}\n\t\t}, { immediate: true })\n\n\t\tconst rendered = computed(() => !props.lazy || shown.value)\n\n\t\treturn { visible, rendered, tabId, panelId }\n\t},\n})\n</script>\n"],"names":[],"mappings":";;;AAmDA,aAAe,eAAe,CAAC;CAC9B,IAAI,EAAE,OAAO;;AAEb,CAAA,KAAK,EAAE;;AAEN,EAAA,KAAK,EAAE;GACN,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,EAAE;GACX;;;AAGD,EAAA,MAAM,EAAE;GACP,IAAI,EAAE,OAAO;GACb,OAAO,EAAE,KAAK;GACd;;AAED;AACA,EAAA,QAAQ,EAAE;GACT,IAAI,EAAE,OAAO;GACb,OAAO,EAAE,KAAK;GACd;;AAED;;AAEC;AACA;;;;;AAKA;AACA;;;;;EAKD,IAAI,EAAE;GACL,IAAI,EAAE,OAAO;GACb,OAAO,EAAE,KAAK;GACd;;AAED;;;AAGC;;;AAGD,EAAA,KAAK,EAAE;AACN,GAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;GACtB,OAAO,EAAE,IAAI;GACb;;AAED;;;;AAIC;;AAED,EAAA,QAAQ,EAAE;GACT,IAAI,EAAE,OAAO;GACb,OAAO,EAAE,KAAK;GACd;EACD;;AAED,CAAA,KAAK,EAAE;;AAEN,EAAA,OAAO;EACP;;CAED,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAK,EAAC,EAAE;EAC7B,MAAM,UAAU,MAAM,CAAC,qBAAqB,EAAE,IAAI,EAAA;AAClD,EAAA,MAAM,GAAI,GAAE,kBAAkB,EAAE,CAAC,IAAE;EACnC,MAAM,KAAI,GAAI,CAAC,OAAO,EAAE,GAAG,CAAC,EAAA;AAC5B,EAAA,MAAM,OAAQ,GAAE,CAAC,YAAY,EAAE,GAAG,CAAC,EAAA;;EAEnC,MAAM,KAAI,GAAI;AACb,GAAA,GAAG;GACH,KAAK;AACL,GAAA,OAAO;;;AAGP;GACA,WAAW,EAAE,OAAO,KAAK,CAAC,QAAQ,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC;AAC9D,GAAA,UAAU,EAAE,MAAM;AACjB,IAAA,IAAI,KAAK,CAAC,QAAQ,EAAE;KACnB,MAAK;AACN,KAAA;AACA,IAAA,OAAO,EAAE,MAAM,CAAC,GAAG,EAAA;IACnB,IAAI,CAAC,OAAO,EAAA;IACZ;;GAED,IAAI,MAAM,GAAG;AACZ,IAAA,OAAO,KAAK,CAAC,MAAK;IAClB;;GAED,IAAI,QAAQ,GAAG;AACd,IAAA,OAAO,KAAK,CAAC,QAAO;IACpB;;GAED,IAAI,KAAK,GAAG;AACX,IAAA,OAAO,KAAK,CAAC,KAAI;IACjB;;GAED,IAAI,QAAQ,GAAG;AACd,IAAA,OAAO,KAAK,CAAC,QAAO;IACpB;;;GAGD,IAAI,KAAK,GAAG;AACX,IAAA,OAAO,KAAK,CAAC,KAAI;IACjB;AACF,IAAA;;AAEA,EAAA,SAAS,CAAC,MAAM,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC,EAAA;AACxC,EAAA,eAAe,CAAC,MAAM,OAAO,EAAE,UAAU,CAAC,GAAG,CAAC,EAAA;;AAE9C,EAAA,KAAK,CAAC,MAAM,KAAK,CAAC,MAAM,EAAE,CAAC,QAAQ,KAAK;GACvC,IAAI,QAAS,IAAG,CAAC,KAAK,CAAC,QAAQ,EAAE;AAChC,IAAA,OAAO,EAAE,MAAM,CAAC,GAAG,EAAA;AACpB,IAAA;GACA,EAAA;;AAED,EAAA,MAAM,OAAQ,GAAE,QAAQ,CAAC,OAAO,OAAQ,GAAE,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAE,GAAE,IAAI,CAAC,EAAA;;;AAGvE;AACA,EAAA,MAAM,KAAI,GAAI,GAAG,CAAC,KAAK,EAAA;EACvB,KAAK,CAAC,OAAO,EAAE,CAAC,SAAS,KAAK;GAC7B,IAAI,SAAS,EAAE;AACd,IAAA,KAAK,CAAC,KAAI,GAAI,KAAG;AAClB,IAAA;AACD,GAAC,EAAE,EAAE,SAAS,EAAE,MAAM,EAAA;;EAEtB,MAAM,WAAW,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,IAAG,IAAK,KAAK,CAAC,KAAK,EAAA;;AAE1D,EAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAQ,EAAA;EAC3C;AACF,CAAC;;;;"}

package/dist/esm/components/CnTabs/CnTab.vue3.js.map

@@ -1 +1 @@
-{"version":3,"file":"CnTab.vue3.js","sources":["../../../../src/components/CnTabs/CnTab.vue?vue&type=template&id=5d643b98&lang.js"],"sourcesContent":["<template>\n\t<div\n\t\t:id=\"panelId\"\n\t\tclass=\"cn-tab\"\n\t\trole=\"tabpanel\"\n\t\t:aria-labelledby=\"tabId\"\n\t\t:tabindex=\"visible ? 0 : -1\"\n\t\t:hidden=\"visible ? null : true\"\n\t\t:style=\"visible ? null : { display: 'none' }\">\n\t\t<!-- @slot The panel body. -->\n\t\t<slot v-if=\"rendered\" />\n\t</div>\n</template>\n\n<script>\n/**\n * CnTab — one panel inside a `CnTabs` strip.\n *\n * ```vue\n * <CnTab title=\"Documents\">…</CnTab>\n *\n * <CnTab :active=\"selected === i\" @click=\"selected = i\">\n *   <template #title>\n *     {{ label }} <CnIcon name=\"close\" @click.stop=\"close(i)\" />\n *   </template>\n *   …\n * </CnTab>\n * ```\n *\n * ## The panel stays in the DOM\n *\n * An inactive panel is hidden with `hidden` + `display: none`, not removed with\n * `v-if`. This matches bootstrap-vue's `<BTab>`, and it is load-bearing: panels\n * that fetch on `mounted()` would refire that request on every tab switch if\n * they were destroyed and recreated. Use `v-if` inside the panel yourself if\n * you specifically want teardown.\n *\n * `lazy` changes only the FIRST paint: the body waits until the tab is first\n * activated, and from then on the panel behaves exactly as above. It is for\n * strips whose panels are expensive to mount, not for saving memory.\n *\n * ## Rendered outside a CnTabs parent\n *\n * The panel shows its content rather than vanishing. That is deliberate: the\n * alternative failure — an app whose `inject()` misses because the library got\n * loaded twice — would otherwise render blank with no error at all. See\n * `tabsKey.js` for why the key is `Symbol.for`.\n */\nimport { computed, defineComponent, getCurrentInstance, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { CN_TABS_INJECTION_KEY } from './tabsKey.js'\n\nexport default defineComponent({\n\tname: 'CnTab',\n\n\tprops: {\n\t\t/** Plain-text tab title. Ignored when a `#title` slot is supplied. */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Select this tab. Honoured on mount and on every later change. */\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** Render the nav button disabled and skip this tab in keyboard navigation. */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Hold the panel body back until this tab is first activated, then keep\n\t\t * it mounted for the rest of the strip's life.\n\t\t *\n\t\t * Off by default, because the eager panel is what makes a tab switch\n\t\t * instant and it is the behaviour every existing consumer already has.\n\t\t * Turn it on when the panels are expensive: six panels that each fetch\n\t\t * on `mounted()` fire six requests on page load, and five of those\n\t\t * answer questions nobody has asked yet.\n\t\t *\n\t\t * This is NOT `v-if`-per-switch. Once a panel has been shown it stays\n\t\t * in the DOM, so switching back to it never refetches. That is the\n\t\t * whole reason an inactive panel is hidden rather than destroyed.\n\t\t */\n\t\tlazy: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t/** The user activated this tab. */\n\t\t'click',\n\t],\n\n\tsetup(props, { slots, emit }) {\n\t\tconst tabsApi = inject(CN_TABS_INJECTION_KEY, null)\n\t\tconst uid = getCurrentInstance().uid\n\t\tconst tabId = `cn-tab-${uid}`\n\t\tconst panelId = `cn-tabpanel-${uid}`\n\n\t\tconst entry = {\n\t\t\tuid,\n\t\t\ttabId,\n\t\t\tpanelId,\n\t\t\t// Invoked from the PARENT's render effect, so reading `props.title`\n\t\t\t// (or calling the slot) here is what keeps a computed title reactive\n\t\t\t// in the nav strip.\n\t\t\ttitleRender: () => (slots.title ? slots.title() : props.title),\n\t\t\tonActivate: () => {\n\t\t\t\tif (props.disabled) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\ttabsApi?.select(uid)\n\t\t\t\temit('click')\n\t\t\t},\n\n\t\t\tget active() {\n\t\t\t\treturn props.active\n\t\t\t},\n\n\t\t\tget disabled() {\n\t\t\t\treturn props.disabled\n\t\t\t},\n\t\t}\n\n\t\tonMounted(() => tabsApi?.register(entry))\n\t\tonBeforeUnmount(() => tabsApi?.unregister(uid))\n\n\t\twatch(() => props.active, (isActive) => {\n\t\t\tif (isActive && !props.disabled) {\n\t\t\t\ttabsApi?.select(uid)\n\t\t\t}\n\t\t})\n\n\t\tconst visible = computed(() => (tabsApi ? tabsApi.isActive(uid) : true))\n\n\t\t// Latches on first activation and never resets, so a lazy panel mounts\n\t\t// once and then behaves exactly like an eager one.\n\t\tconst shown = ref(false)\n\t\twatch(visible, (isVisible) => {\n\t\t\tif (isVisible) {\n\t\t\t\tshown.value = true\n\t\t\t}\n\t\t}, { immediate: true })\n\n\t\tconst rendered = computed(() => !props.lazy || shown.value)\n\n\t\treturn { visible, rendered, tabId, panelId }\n\t},\n})\n</script>\n"],"names":["_createElementBlock","_renderSlot"],"mappings":";;;;;uBACCA,kBAUK,CAAA,KAAA,EAAA;AATH,IAAA,EAAE,EAAE,IAAO,CAAA,OAAA;AACZ,IAAA,KAAK,EAAC,QAAO;AACb,IAAA,IAAI,EAAC,UAAS;AACb,IAAA,iBAAe,EAAE,IAAK,CAAA,KAAA;AACtB,IAAA,QAAQ,EAAE;AACV,IAAA,MAAM,EAAE,IAAM,CAAA,OAAA,GAAA,IAAA,GAAA,IAAA;AACd,IAAA,KAAK,iBAAE,IAAQ,CAAA,OAAA,GAAA,IAAA,GAAA,EAAA,OAAA,EAAA,MAAA,EAAA,CAAA;;KAEJ,IAAQ,CAAA,QAAA;QAApBC,UAAuB,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,CAAA;;;;;;;"}
+{"version":3,"file":"CnTab.vue3.js","sources":["../../../../src/components/CnTabs/CnTab.vue?vue&type=template&id=5d643b98&lang.js"],"sourcesContent":["<template>\n\t<div\n\t\t:id=\"panelId\"\n\t\tclass=\"cn-tab\"\n\t\trole=\"tabpanel\"\n\t\t:aria-labelledby=\"tabId\"\n\t\t:tabindex=\"visible ? 0 : -1\"\n\t\t:hidden=\"visible ? null : true\"\n\t\t:style=\"visible ? null : { display: 'none' }\">\n\t\t<!-- @slot The panel body. -->\n\t\t<slot v-if=\"rendered\" />\n\t</div>\n</template>\n\n<script>\n/**\n * CnTab — one panel inside a `CnTabs` strip.\n *\n * ```vue\n * <CnTab title=\"Documents\">…</CnTab>\n *\n * <CnTab :active=\"selected === i\" @click=\"selected = i\">\n *   <template #title>\n *     {{ label }} <CnIcon name=\"close\" @click.stop=\"close(i)\" />\n *   </template>\n *   …\n * </CnTab>\n * ```\n *\n * ## The panel stays in the DOM\n *\n * An inactive panel is hidden with `hidden` + `display: none`, not removed with\n * `v-if`. This matches bootstrap-vue's `<BTab>`, and it is load-bearing: panels\n * that fetch on `mounted()` would refire that request on every tab switch if\n * they were destroyed and recreated. Use `v-if` inside the panel yourself if\n * you specifically want teardown.\n *\n * `lazy` changes only the FIRST paint: the body waits until the tab is first\n * activated, and from then on the panel behaves exactly as above. It is for\n * strips whose panels are expensive to mount, not for saving memory.\n *\n * ## Rendered outside a CnTabs parent\n *\n * The panel shows its content rather than vanishing. That is deliberate: the\n * alternative failure — an app whose `inject()` misses because the library got\n * loaded twice — would otherwise render blank with no error at all. See\n * `tabsKey.js` for why the key is `Symbol.for`.\n */\nimport { computed, defineComponent, getCurrentInstance, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { CN_TABS_INJECTION_KEY } from './tabsKey.js'\n\nexport default defineComponent({\n\tname: 'CnTab',\n\n\tprops: {\n\t\t/** Plain-text tab title. Ignored when a `#title` slot is supplied. */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Select this tab. Honoured on mount and on every later change. */\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** Render the nav button disabled and skip this tab in keyboard navigation. */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Hold the panel body back until this tab is first activated, then keep\n\t\t * it mounted for the rest of the strip's life.\n\t\t *\n\t\t * Off by default, because the eager panel is what makes a tab switch\n\t\t * instant and it is the behaviour every existing consumer already has.\n\t\t * Turn it on when the panels are expensive: six panels that each fetch\n\t\t * on `mounted()` fire six requests on page load, and five of those\n\t\t * answer questions nobody has asked yet.\n\t\t *\n\t\t * This is NOT `v-if`-per-switch. Once a panel has been shown it stays\n\t\t * in the DOM, so switching back to it never refetches. That is the\n\t\t * whole reason an inactive panel is hidden rather than destroyed.\n\t\t */\n\t\tlazy: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * A count shown after the title, for example the number of documents\n\t\t * behind the tab. `null` (the default) shows none; `0` is shown.\n\t\t *\n\t\t * @type {number|string|null}\n\t\t */\n\t\tcount: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * List this tab under the strip's \"More\" menu instead of in the strip.\n\t\t * Picking it there selects it, and while it is the selected tab it\n\t\t * shows in the strip. Give an overflow tab a `title`: the menu needs\n\t\t * plain text, and a `#title` slot is markup.\n\t\t */\n\t\toverflow: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t/** The user activated this tab. */\n\t\t'click',\n\t],\n\n\tsetup(props, { slots, emit }) {\n\t\tconst tabsApi = inject(CN_TABS_INJECTION_KEY, null)\n\t\tconst uid = getCurrentInstance().uid\n\t\tconst tabId = `cn-tab-${uid}`\n\t\tconst panelId = `cn-tabpanel-${uid}`\n\n\t\tconst entry = {\n\t\t\tuid,\n\t\t\ttabId,\n\t\t\tpanelId,\n\t\t\t// Invoked from the PARENT's render effect, so reading `props.title`\n\t\t\t// (or calling the slot) here is what keeps a computed title reactive\n\t\t\t// in the nav strip.\n\t\t\ttitleRender: () => (slots.title ? slots.title() : props.title),\n\t\t\tonActivate: () => {\n\t\t\t\tif (props.disabled) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\ttabsApi?.select(uid)\n\t\t\t\temit('click')\n\t\t\t},\n\n\t\t\tget active() {\n\t\t\t\treturn props.active\n\t\t\t},\n\n\t\t\tget disabled() {\n\t\t\t\treturn props.disabled\n\t\t\t},\n\n\t\t\tget count() {\n\t\t\t\treturn props.count\n\t\t\t},\n\n\t\t\tget overflow() {\n\t\t\t\treturn props.overflow\n\t\t\t},\n\n\t\t\t// Plain text for the \"More\" menu, where a `#title` slot cannot go.\n\t\t\tget label() {\n\t\t\t\treturn props.title\n\t\t\t},\n\t\t}\n\n\t\tonMounted(() => tabsApi?.register(entry))\n\t\tonBeforeUnmount(() => tabsApi?.unregister(uid))\n\n\t\twatch(() => props.active, (isActive) => {\n\t\t\tif (isActive && !props.disabled) {\n\t\t\t\ttabsApi?.select(uid)\n\t\t\t}\n\t\t})\n\n\t\tconst visible = computed(() => (tabsApi ? tabsApi.isActive(uid) : true))\n\n\t\t// Latches on first activation and never resets, so a lazy panel mounts\n\t\t// once and then behaves exactly like an eager one.\n\t\tconst shown = ref(false)\n\t\twatch(visible, (isVisible) => {\n\t\t\tif (isVisible) {\n\t\t\t\tshown.value = true\n\t\t\t}\n\t\t}, { immediate: true })\n\n\t\tconst rendered = computed(() => !props.lazy || shown.value)\n\n\t\treturn { visible, rendered, tabId, panelId }\n\t},\n})\n</script>\n"],"names":["_createElementBlock","_renderSlot"],"mappings":";;;;;uBACCA,kBAUK,CAAA,KAAA,EAAA;AATH,IAAA,EAAE,EAAE,IAAO,CAAA,OAAA;AACZ,IAAA,KAAK,EAAC,QAAO;AACb,IAAA,IAAI,EAAC,UAAS;AACb,IAAA,iBAAe,EAAE,IAAK,CAAA,KAAA;AACtB,IAAA,QAAQ,EAAE;AACV,IAAA,MAAM,EAAE,IAAM,CAAA,OAAA,GAAA,IAAA,GAAA,IAAA;AACd,IAAA,KAAK,iBAAE,IAAQ,CAAA,OAAA,GAAA,IAAA,GAAA,EAAA,OAAA,EAAA,MAAA,EAAA,CAAA;;KAEJ,IAAQ,CAAA,QAAA;QAApBC,UAAuB,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,CAAA;;;;;;;"}