@dou-ui/dashboard 0.1.0-alpha.4 → 0.1.0-alpha.5

package/dist/widgets/shared.js.map

@@ -1 +1 @@
-{"version":3,"file":"shared.js","names":[],"sources":["../../src/widgets/shared.ts"],"sourcesContent":["import type { SheetValue, SheetWorkbook } from '@dou-ui/sheet/core'\n\n/** The value at a dotted path, e.g. `total.amount`; the data itself for an empty path. */\nexport function valueAt(data: unknown, path: string | undefined): unknown {\n  if (!path) return data\n  let value = data\n  for (const key of path.split('.')) {\n    if (value == null || typeof value !== 'object') return undefined\n    value = (value as Record<string, unknown>)[key]\n  }\n  return value\n}\n\n/** The rows of a source's data: the data when it is a list, or the list at `path`. */\nexport function rowsOf(data: unknown, path?: string): Record<string, unknown>[] {\n  const value = valueAt(data, path)\n  return Array.isArray(value) ? (value as Record<string, unknown>[]) : []\n}\n\n/** The keys of the first row of a list, or of an object: the fields to pick from in settings. */\nexport function fieldsOf(data: unknown): string[] {\n  const first = Array.isArray(data) ? data[0] : data\n  return first && typeof first === 'object' && !Array.isArray(first) ? Object.keys(first) : []\n}\n\n/** The keys whose value in the first row is a number. */\nexport function numberFieldsOf(data: unknown): string[] {\n  const first = Array.isArray(data) ? data[0] : data\n  return fieldsOf(data).filter((key) => typeof (first as Record<string, unknown>)[key] === 'number')\n}\n\n/** A filter value from a value of the data: dates as `YYYY-MM-DD`, so the filters stay JSON. */\nconst pad = (n: number) => String(n).padStart(2, '0')\n\nexport function filterValueOf(value: unknown): unknown {\n  if (!(value instanceof Date)) return value\n  return `${value.getFullYear()}-${pad(value.getMonth() + 1)}-${pad(value.getDate())}`\n}\n\n/** A value of the data as a sheet cell's: dates as `YYYY-MM-DD`, text starting with `=` kept as text. */\nfunction sheetValueOf(value: unknown): SheetValue {\n  if (value == null) return null\n  if (typeof value === 'number') return Number.isFinite(value) ? value : null\n  if (typeof value === 'boolean') return value\n  const text = value instanceof Date ? (filterValueOf(value) as string) : String(value)\n  return text.startsWith('=') ? `'${text}` : text\n}\n\n/**\n * Rows of data as a workbook, for the dashboard's export menu: one sheet,\n * a bold head row with the columns' titles, a row per row of data. An\n * empty `name` takes the widget's title.\n */\nexport function rowsToWorkbook(\n  name: string,\n  columns: readonly { key: string; title: string; width?: number }[],\n  rows: readonly Record<string, unknown>[],\n): SheetWorkbook {\n  const colSizes: Record<number, number> = {}\n  columns.forEach((column, i) => column.width && (colSizes[i] = Math.round(column.width)))\n  return {\n    version: 1,\n    sheets: [\n      {\n        name,\n        cells: [\n          columns.map((column) => ({ value: sheetValueOf(column.title), style: 'head' })),\n          ...rows.map((row) => columns.map((column) => sheetValueOf(row[column.key]))),\n        ],\n        freeze: { rows: 1, cols: 0 },\n        colSizes,\n      },\n    ],\n    styles: { head: { bold: true } },\n  }\n}\n"],"mappings":";;AAGA,SAAgB,QAAQ,MAAe,MAAmC;CACxE,IAAI,CAAC,MAAM,OAAO;CAClB,IAAI,QAAQ;CACZ,KAAK,MAAM,OAAO,KAAK,MAAM,GAAG,GAAG;EACjC,IAAI,SAAS,QAAQ,OAAO,UAAU,UAAU,OAAO,KAAA;EACvD,QAAS,MAAkC;CAC7C;CACA,OAAO;AACT;;AAGA,SAAgB,OAAO,MAAe,MAA0C;CAC9E,MAAM,QAAQ,QAAQ,MAAM,IAAI;CAChC,OAAO,MAAM,QAAQ,KAAK,IAAK,QAAsC,CAAC;AACxE;;AAGA,SAAgB,SAAS,MAAyB;CAChD,MAAM,QAAQ,MAAM,QAAQ,IAAI,IAAI,KAAK,KAAK;CAC9C,OAAO,SAAS,OAAO,UAAU,YAAY,CAAC,MAAM,QAAQ,KAAK,IAAI,OAAO,KAAK,KAAK,IAAI,CAAC;AAC7F;;AAGA,SAAgB,eAAe,MAAyB;CACtD,MAAM,QAAQ,MAAM,QAAQ,IAAI,IAAI,KAAK,KAAK;CAC9C,OAAO,SAAS,IAAI,CAAC,CAAC,QAAQ,QAAQ,OAAQ,MAAkC,SAAS,QAAQ;AACnG;;AAGA,IAAM,OAAO,MAAc,OAAO,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG;AAEpD,SAAgB,cAAc,OAAyB;CACrD,IAAI,EAAE,iBAAiB,OAAO,OAAO;CACrC,OAAO,GAAG,MAAM,YAAY,EAAE,GAAG,IAAI,MAAM,SAAS,IAAI,CAAC,EAAE,GAAG,IAAI,MAAM,QAAQ,CAAC;AACnF;;AAGA,SAAS,aAAa,OAA4B;CAChD,IAAI,SAAS,MAAM,OAAO;CAC1B,IAAI,OAAO,UAAU,UAAU,OAAO,OAAO,SAAS,KAAK,IAAI,QAAQ;CACvE,IAAI,OAAO,UAAU,WAAW,OAAO;CACvC,MAAM,OAAO,iBAAiB,OAAQ,cAAc,KAAK,IAAe,OAAO,KAAK;CACpF,OAAO,KAAK,WAAW,GAAG,IAAI,IAAI,SAAS;AAC7C;;;;;;AAOA,SAAgB,eACd,MACA,SACA,MACe;CACf,MAAM,WAAmC,CAAC;CAC1C,QAAQ,SAAS,QAAQ,MAAM,OAAO,UAAU,SAAS,KAAK,KAAK,MAAM,OAAO,KAAK,EAAE;CACvF,OAAO;EACL,SAAS;EACT,QAAQ,CACN;GACE;GACA,OAAO,CACL,QAAQ,KAAK,YAAY;IAAE,OAAO,aAAa,OAAO,KAAK;IAAG,OAAO;GAAO,EAAE,GAC9E,GAAG,KAAK,KAAK,QAAQ,QAAQ,KAAK,WAAW,aAAa,IAAI,OAAO,IAAI,CAAC,CAAC,CAC7E;GACA,QAAQ;IAAE,MAAM;IAAG,MAAM;GAAE;GAC3B;EACF,CACF;EACA,QAAQ,EAAE,MAAM,EAAE,MAAM,KAAK,EAAE;CACjC;AACF"}
+{"version":3,"file":"shared.js","names":[],"sources":["../../src/widgets/shared.ts"],"sourcesContent":["import type { SheetValue, SheetWorkbook } from '@dou-ui/sheet/core'\n\n/**\n * The value at a dotted path, e.g. `total.amount`; the data itself for an\n * empty path. A path that isn't text, e.g. a number in JSON written by hand\n * or by a program, finds nothing.\n */\nexport function valueAt(data: unknown, path: unknown): unknown {\n  if (path === undefined || path === null || path === '') return data\n  if (typeof path !== 'string') return undefined\n  let value = data\n  for (const key of path.split('.')) {\n    if (value == null || typeof value !== 'object') return undefined\n    value = (value as Record<string, unknown>)[key]\n  }\n  return value\n}\n\n/** The rows of a source's data: the data when it is a list, or the list at `path`. Items that aren't objects are left out. */\nexport function rowsOf(data: unknown, path?: unknown): Record<string, unknown>[] {\n  const value = valueAt(data, path)\n  if (!Array.isArray(value)) return []\n  return value.every(isRecord) ? value : value.filter(isRecord)\n}\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  value !== null && typeof value === 'object'\n\n/*\n * A widget's props come from JSON that types don't check, often written by a\n * program or an AI. These read one prop as the type it is meant to be; any\n * other value counts as not set, so a widget never throws on it.\n */\n\n/** Text, or not set. */\nexport const textOf = (value: unknown): string | undefined =>\n  typeof value === 'string' ? value : undefined\n\n/** A list of texts: the texts in it, or none. */\nexport const textsOf = (value: unknown): string[] =>\n  Array.isArray(value) ? value.filter((item): item is string => typeof item === 'string') : []\n\n/** A finite number, or text that is one (`'12'`, as a number read from data); otherwise not set. */\nexport function numberOf(value: unknown): number | undefined {\n  const n =\n    typeof value === 'number'\n      ? value\n      : typeof value === 'string' && value.trim()\n        ? Number(value)\n        : Number.NaN\n  return Number.isFinite(n) ? n : undefined\n}\n\n/** On only for `true`: `'no'` or `1` don't turn a switch on. */\nexport const flagOf = (value: unknown): boolean => value === true\n\n/** A plain object, not a list; otherwise not set. */\nexport const recordOf = (value: unknown): Record<string, unknown> | undefined =>\n  isRecord(value) && !Array.isArray(value) ? value : undefined\n\n/** One of the values listed, or not set. */\nexport const oneOf = <T extends string>(value: unknown, values: readonly T[]): T | undefined =>\n  values.includes(value as T) ? (value as T) : undefined\n\n/** The keys of the first row of a list, or of an object: the fields to pick from in settings. */\nexport function fieldsOf(data: unknown): string[] {\n  const first = Array.isArray(data) ? data[0] : data\n  return first && typeof first === 'object' && !Array.isArray(first) ? Object.keys(first) : []\n}\n\n/** The keys whose value in the first row is a number. */\nexport function numberFieldsOf(data: unknown): string[] {\n  const first = Array.isArray(data) ? data[0] : data\n  return fieldsOf(data).filter((key) => typeof (first as Record<string, unknown>)[key] === 'number')\n}\n\n/** A filter value from a value of the data: dates as `YYYY-MM-DD`, so the filters stay JSON. */\nconst pad = (n: number) => String(n).padStart(2, '0')\n\nexport function filterValueOf(value: unknown): unknown {\n  if (!(value instanceof Date)) return value\n  return `${value.getFullYear()}-${pad(value.getMonth() + 1)}-${pad(value.getDate())}`\n}\n\n/** A value of the data as a sheet cell's: dates as `YYYY-MM-DD`, text starting with `=` kept as text. */\nfunction sheetValueOf(value: unknown): SheetValue {\n  if (value == null) return null\n  if (typeof value === 'number') return Number.isFinite(value) ? value : null\n  if (typeof value === 'boolean') return value\n  const text = value instanceof Date ? (filterValueOf(value) as string) : String(value)\n  return text.startsWith('=') ? `'${text}` : text\n}\n\n/**\n * Rows of data as a workbook, for the dashboard's export menu: one sheet,\n * a bold head row with the columns' titles, a row per row of data. An\n * empty `name` takes the widget's title.\n */\nexport function rowsToWorkbook(\n  name: string,\n  columns: readonly { key: string; title: string; width?: number }[],\n  rows: readonly Record<string, unknown>[],\n): SheetWorkbook {\n  const colSizes: Record<number, number> = {}\n  columns.forEach((column, i) => column.width && (colSizes[i] = Math.round(column.width)))\n  return {\n    version: 1,\n    sheets: [\n      {\n        name,\n        cells: [\n          columns.map((column) => ({ value: sheetValueOf(column.title), style: 'head' })),\n          ...rows.map((row) => columns.map((column) => sheetValueOf(row[column.key]))),\n        ],\n        freeze: { rows: 1, cols: 0 },\n        colSizes,\n      },\n    ],\n    styles: { head: { bold: true } },\n  }\n}\n"],"mappings":";;;;;;AAOA,SAAgB,QAAQ,MAAe,MAAwB;CAC7D,IAAI,SAAS,KAAA,KAAa,SAAS,QAAQ,SAAS,IAAI,OAAO;CAC/D,IAAI,OAAO,SAAS,UAAU,OAAO,KAAA;CACrC,IAAI,QAAQ;CACZ,KAAK,MAAM,OAAO,KAAK,MAAM,GAAG,GAAG;EACjC,IAAI,SAAS,QAAQ,OAAO,UAAU,UAAU,OAAO,KAAA;EACvD,QAAS,MAAkC;CAC7C;CACA,OAAO;AACT;;AAGA,SAAgB,OAAO,MAAe,MAA2C;CAC/E,MAAM,QAAQ,QAAQ,MAAM,IAAI;CAChC,IAAI,CAAC,MAAM,QAAQ,KAAK,GAAG,OAAO,CAAC;CACnC,OAAO,MAAM,MAAM,QAAQ,IAAI,QAAQ,MAAM,OAAO,QAAQ;AAC9D;AAEA,IAAM,YAAY,UAChB,UAAU,QAAQ,OAAO,UAAU;;AASrC,IAAa,UAAU,UACrB,OAAO,UAAU,WAAW,QAAQ,KAAA;;AAGtC,IAAa,WAAW,UACtB,MAAM,QAAQ,KAAK,IAAI,MAAM,QAAQ,SAAyB,OAAO,SAAS,QAAQ,IAAI,CAAC;;AAG7F,SAAgB,SAAS,OAAoC;CAC3D,MAAM,IACJ,OAAO,UAAU,WACb,QACA,OAAO,UAAU,YAAY,MAAM,KAAK,IACtC,OAAO,KAAK,IACZ;CACR,OAAO,OAAO,SAAS,CAAC,IAAI,IAAI,KAAA;AAClC;;AAGA,IAAa,UAAU,UAA4B,UAAU;;AAG7D,IAAa,YAAY,UACvB,SAAS,KAAK,KAAK,CAAC,MAAM,QAAQ,KAAK,IAAI,QAAQ,KAAA;;AAGrD,IAAa,SAA2B,OAAgB,WACtD,OAAO,SAAS,KAAU,IAAK,QAAc,KAAA;;AAG/C,SAAgB,SAAS,MAAyB;CAChD,MAAM,QAAQ,MAAM,QAAQ,IAAI,IAAI,KAAK,KAAK;CAC9C,OAAO,SAAS,OAAO,UAAU,YAAY,CAAC,MAAM,QAAQ,KAAK,IAAI,OAAO,KAAK,KAAK,IAAI,CAAC;AAC7F;;AAGA,SAAgB,eAAe,MAAyB;CACtD,MAAM,QAAQ,MAAM,QAAQ,IAAI,IAAI,KAAK,KAAK;CAC9C,OAAO,SAAS,IAAI,CAAC,CAAC,QAAQ,QAAQ,OAAQ,MAAkC,SAAS,QAAQ;AACnG;;AAGA,IAAM,OAAO,MAAc,OAAO,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG;AAEpD,SAAgB,cAAc,OAAyB;CACrD,IAAI,EAAE,iBAAiB,OAAO,OAAO;CACrC,OAAO,GAAG,MAAM,YAAY,EAAE,GAAG,IAAI,MAAM,SAAS,IAAI,CAAC,EAAE,GAAG,IAAI,MAAM,QAAQ,CAAC;AACnF;;AAGA,SAAS,aAAa,OAA4B;CAChD,IAAI,SAAS,MAAM,OAAO;CAC1B,IAAI,OAAO,UAAU,UAAU,OAAO,OAAO,SAAS,KAAK,IAAI,QAAQ;CACvE,IAAI,OAAO,UAAU,WAAW,OAAO;CACvC,MAAM,OAAO,iBAAiB,OAAQ,cAAc,KAAK,IAAe,OAAO,KAAK;CACpF,OAAO,KAAK,WAAW,GAAG,IAAI,IAAI,SAAS;AAC7C;;;;;;AAOA,SAAgB,eACd,MACA,SACA,MACe;CACf,MAAM,WAAmC,CAAC;CAC1C,QAAQ,SAAS,QAAQ,MAAM,OAAO,UAAU,SAAS,KAAK,KAAK,MAAM,OAAO,KAAK,EAAE;CACvF,OAAO;EACL,SAAS;EACT,QAAQ,CACN;GACE;GACA,OAAO,CACL,QAAQ,KAAK,YAAY;IAAE,OAAO,aAAa,OAAO,KAAK;IAAG,OAAO;GAAO,EAAE,GAC9E,GAAG,KAAK,KAAK,QAAQ,QAAQ,KAAK,WAAW,aAAa,IAAI,OAAO,IAAI,CAAC,CAAC,CAC7E;GACA,QAAQ;IAAE,MAAM;IAAG,MAAM;GAAE;GAC3B;EACF,CACF;EACA,QAAQ,EAAE,MAAM,EAAE,MAAM,KAAK,EAAE;CACjC;AACF"}

package/dist/widgets/stat-settings.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat-settings.js","names":["_sfc_main"],"sources":["../../src/widgets/stat-settings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouInput, DouInputNumber } from 'dou-ui'\nimport { computed } from 'vue'\nimport { useDashboardMessages } from '../locale'\nimport { useDashboardWidget } from '../widget/context'\nimport FieldSelect from './field-select.vue'\nimport SettingsField from './settings-field.vue'\nimport { fieldsOf } from './shared'\nimport SourceField from './source-field.vue'\nimport type { StatWidgetProps } from './types'\n\ndefineOptions({ name: 'DouDashboardStatSettings' })\n\nconst model = defineModel<StatWidgetProps>({ required: true })\nconst messages = useDashboardMessages()\nconst { data } = useDashboardWidget()\nconst fields = computed(() => fieldsOf(data.value))\nconst set = (patch: Partial<StatWidgetProps>) => (model.value = { ...model.value, ...patch })\n</script>\n\n<template>\n  <div class=\"dou-dashboard__settings\">\n    <SourceField\n      :model-value=\"model.source\"\n      optional\n      @update:model-value=\"(source) => set({ source })\"\n    />\n    <FieldSelect\n      v-if=\"model.source\"\n      :model-value=\"model.field\"\n      :label=\"messages.value\"\n      :fields=\"fields\"\n      @update:model-value=\"(field) => set({ field: field as string | undefined })\"\n    />\n    <SettingsField v-else :label=\"messages.value\">\n      <DouInputNumber\n        :model-value=\"model.value ?? null\"\n        :aria-label=\"messages.value\"\n        @update:model-value=\"(value) => set({ value: value ?? undefined })\"\n      />\n    </SettingsField>\n    <div class=\"dou-dashboard__field-row\">\n      <SettingsField :label=\"messages.prefix\">\n        <DouInput\n          :model-value=\"model.prefix ?? ''\"\n          :aria-label=\"messages.prefix\"\n          @update:model-value=\"(prefix) => set({ prefix: prefix || undefined })\"\n        />\n      </SettingsField>\n      <SettingsField :label=\"messages.suffix\">\n        <DouInput\n          :model-value=\"model.suffix ?? ''\"\n          :aria-label=\"messages.suffix\"\n          @update:model-value=\"(suffix) => set({ suffix: suffix || undefined })\"\n        />\n      </SettingsField>\n    </div>\n    <SettingsField :label=\"messages.precision\">\n      <DouInputNumber\n        :model-value=\"model.precision ?? null\"\n        :min=\"0\"\n        :max=\"6\"\n        :aria-label=\"messages.precision\"\n        @update:model-value=\"(precision) => set({ precision: precision ?? undefined })\"\n      />\n    </SettingsField>\n    <template v-if=\"model.source\">\n      <FieldSelect\n        :model-value=\"model.trend\"\n        :label=\"messages.trend\"\n        :fields=\"fields\"\n        @update:model-value=\"(trend) => set({ trend: trend as string | undefined })\"\n      />\n      <FieldSelect\n        :model-value=\"model.delta\"\n        :label=\"messages.delta\"\n        :fields=\"fields\"\n        @update:model-value=\"(delta) => set({ delta: delta as string | undefined })\"\n      />\n    </template>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"stat-settings.js","names":["_sfc_main"],"sources":["../../src/widgets/stat-settings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouInput, DouInputNumber } from 'dou-ui'\nimport { computed } from 'vue'\nimport { useDashboardMessages } from '../locale'\nimport { useDashboardWidget } from '../widget/context'\nimport FieldSelect from './field-select.vue'\nimport SettingsField from './settings-field.vue'\nimport { fieldsOf } from './shared'\nimport SourceField from './source-field.vue'\nimport type { StatWidgetProps } from './types'\nimport { statPropsOf } from './read-props'\n\ndefineOptions({ name: 'DouDashboardStatSettings' })\n\nconst model = defineModel<StatWidgetProps>({ required: true })\n// the props as saved may have the wrong types: read them as the widget does\nconst view = computed(() => statPropsOf(model.value as Record<string, unknown>))\nconst messages = useDashboardMessages()\nconst { data } = useDashboardWidget()\nconst fields = computed(() => fieldsOf(data.value))\nconst set = (patch: Partial<StatWidgetProps>) => (model.value = { ...model.value, ...patch })\n</script>\n\n<template>\n  <div class=\"dou-dashboard__settings\">\n    <SourceField\n      :model-value=\"view.source\"\n      optional\n      @update:model-value=\"(source) => set({ source })\"\n    />\n    <FieldSelect\n      v-if=\"view.source\"\n      :model-value=\"view.field\"\n      :label=\"messages.value\"\n      :fields=\"fields\"\n      @update:model-value=\"(field) => set({ field: field as string | undefined })\"\n    />\n    <SettingsField v-else :label=\"messages.value\">\n      <DouInputNumber\n        :model-value=\"view.value ?? null\"\n        :aria-label=\"messages.value\"\n        @update:model-value=\"(value) => set({ value: value ?? undefined })\"\n      />\n    </SettingsField>\n    <div class=\"dou-dashboard__field-row\">\n      <SettingsField :label=\"messages.prefix\">\n        <DouInput\n          :model-value=\"view.prefix ?? ''\"\n          :aria-label=\"messages.prefix\"\n          @update:model-value=\"(prefix) => set({ prefix: prefix || undefined })\"\n        />\n      </SettingsField>\n      <SettingsField :label=\"messages.suffix\">\n        <DouInput\n          :model-value=\"view.suffix ?? ''\"\n          :aria-label=\"messages.suffix\"\n          @update:model-value=\"(suffix) => set({ suffix: suffix || undefined })\"\n        />\n      </SettingsField>\n    </div>\n    <SettingsField :label=\"messages.precision\">\n      <DouInputNumber\n        :model-value=\"view.precision ?? null\"\n        :min=\"0\"\n        :max=\"6\"\n        :aria-label=\"messages.precision\"\n        @update:model-value=\"(precision) => set({ precision: precision ?? undefined })\"\n      />\n    </SettingsField>\n    <template v-if=\"view.source\">\n      <FieldSelect\n        :model-value=\"view.trend\"\n        :label=\"messages.trend\"\n        :fields=\"fields\"\n        @update:model-value=\"(trend) => set({ trend: trend as string | undefined })\"\n      />\n      <FieldSelect\n        :model-value=\"view.delta\"\n        :label=\"messages.delta\"\n        :fields=\"fields\"\n        @update:model-value=\"(delta) => set({ delta: delta as string | undefined })\"\n      />\n    </template>\n  </div>\n</template>\n"],"mappings":""}

package/dist/widgets/stat-settings.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
 import { useDashboardMessages } from "../locale.js";
 import { useDashboardWidget } from "../widget/context.js";
 import { fieldsOf } from "./shared.js";
+import { statPropsOf } from "./read-props.js";
 import settings_field_default from "./settings-field.js";
 import field_select_default from "./field-select.js";
 import source_field_default from "./source-field.js";
@@ -19,6 +20,7 @@ var stat_settings_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const model = useModel(__props, "modelValue");
+		const view = computed(() => statPropsOf(model.value));
 		const messages = useDashboardMessages();
 		const { data } = useDashboardWidget();
 		const fields = computed(() => fieldsOf(data.value));
@@ -29,13 +31,13 @@ var stat_settings_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [
 				createVNode(source_field_default, {
-					"model-value": model.value.source,
+					"model-value": view.value.source,
 					optional: "",
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = (source) => set({ source }))
 				}, null, 8, ["model-value"]),
-				model.value.source ? (openBlock(), createBlock(field_select_default, {
+				view.value.source ? (openBlock(), createBlock(field_select_default, {
 					key: 0,
-					"model-value": model.value.field,
+					"model-value": view.value.field,
 					label: unref(messages).value,
 					fields: fields.value,
 					"onUpdate:modelValue": _cache[1] || (_cache[1] = (field) => set({ field }))
@@ -48,7 +50,7 @@ var stat_settings_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 					label: unref(messages).value
 				}, {
 					default: withCtx(() => [createVNode(unref(DouInputNumber), {
-						"model-value": model.value.value ?? null,
+						"model-value": view.value.value ?? null,
 						"aria-label": unref(messages).value,
 						"onUpdate:modelValue": _cache[2] || (_cache[2] = (value) => set({ value: value ?? void 0 }))
 					}, null, 8, ["model-value", "aria-label"])]),
@@ -56,14 +58,14 @@ var stat_settings_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				}, 8, ["label"])),
 				createElementVNode("div", _hoisted_2, [createVNode(settings_field_default, { label: unref(messages).prefix }, {
 					default: withCtx(() => [createVNode(unref(DouInput), {
-						"model-value": model.value.prefix ?? "",
+						"model-value": view.value.prefix ?? "",
 						"aria-label": unref(messages).prefix,
 						"onUpdate:modelValue": _cache[3] || (_cache[3] = (prefix) => set({ prefix: prefix || void 0 }))
 					}, null, 8, ["model-value", "aria-label"])]),
 					_: 1
 				}, 8, ["label"]), createVNode(settings_field_default, { label: unref(messages).suffix }, {
 					default: withCtx(() => [createVNode(unref(DouInput), {
-						"model-value": model.value.suffix ?? "",
+						"model-value": view.value.suffix ?? "",
 						"aria-label": unref(messages).suffix,
 						"onUpdate:modelValue": _cache[4] || (_cache[4] = (suffix) => set({ suffix: suffix || void 0 }))
 					}, null, 8, ["model-value", "aria-label"])]),
@@ -71,7 +73,7 @@ var stat_settings_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				}, 8, ["label"])]),
 				createVNode(settings_field_default, { label: unref(messages).precision }, {
 					default: withCtx(() => [createVNode(unref(DouInputNumber), {
-						"model-value": model.value.precision ?? null,
+						"model-value": view.value.precision ?? null,
 						min: 0,
 						max: 6,
 						"aria-label": unref(messages).precision,
@@ -79,8 +81,8 @@ var stat_settings_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 					}, null, 8, ["model-value", "aria-label"])]),
 					_: 1
 				}, 8, ["label"]),
-				model.value.source ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createVNode(field_select_default, {
-					"model-value": model.value.trend,
+				view.value.source ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createVNode(field_select_default, {
+					"model-value": view.value.trend,
 					label: unref(messages).trend,
 					fields: fields.value,
 					"onUpdate:modelValue": _cache[6] || (_cache[6] = (trend) => set({ trend }))
@@ -89,7 +91,7 @@ var stat_settings_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 					"label",
 					"fields"
 				]), createVNode(field_select_default, {
-					"model-value": model.value.delta,
+					"model-value": view.value.delta,
 					label: unref(messages).delta,
 					fields: fields.value,
 					"onUpdate:modelValue": _cache[7] || (_cache[7] = (delta) => set({ delta }))

package/dist/widgets/stat-settings.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat-settings.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createVNode","SourceField","_createBlock","FieldSelect","_unref","SettingsField","_withCtx","_createElementVNode","_Fragment","_createCommentVNode"],"sources":["../../src/widgets/stat-settings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouInput, DouInputNumber } from 'dou-ui'\nimport { computed } from 'vue'\nimport { useDashboardMessages } from '../locale'\nimport { useDashboardWidget } from '../widget/context'\nimport FieldSelect from './field-select.vue'\nimport SettingsField from './settings-field.vue'\nimport { fieldsOf } from './shared'\nimport SourceField from './source-field.vue'\nimport type { StatWidgetProps } from './types'\n\ndefineOptions({ name: 'DouDashboardStatSettings' })\n\nconst model = defineModel<StatWidgetProps>({ required: true })\nconst messages = useDashboardMessages()\nconst { data } = useDashboardWidget()\nconst fields = computed(() => fieldsOf(data.value))\nconst set = (patch: Partial<StatWidgetProps>) => (model.value = { ...model.value, ...patch })\n</script>\n\n<template>\n  <div class=\"dou-dashboard__settings\">\n    <SourceField\n      :model-value=\"model.source\"\n      optional\n      @update:model-value=\"(source) => set({ source })\"\n    />\n    <FieldSelect\n      v-if=\"model.source\"\n      :model-value=\"model.field\"\n      :label=\"messages.value\"\n      :fields=\"fields\"\n      @update:model-value=\"(field) => set({ field: field as string | undefined })\"\n    />\n    <SettingsField v-else :label=\"messages.value\">\n      <DouInputNumber\n        :model-value=\"model.value ?? null\"\n        :aria-label=\"messages.value\"\n        @update:model-value=\"(value) => set({ value: value ?? undefined })\"\n      />\n    </SettingsField>\n    <div class=\"dou-dashboard__field-row\">\n      <SettingsField :label=\"messages.prefix\">\n        <DouInput\n          :model-value=\"model.prefix ?? ''\"\n          :aria-label=\"messages.prefix\"\n          @update:model-value=\"(prefix) => set({ prefix: prefix || undefined })\"\n        />\n      </SettingsField>\n      <SettingsField :label=\"messages.suffix\">\n        <DouInput\n          :model-value=\"model.suffix ?? ''\"\n          :aria-label=\"messages.suffix\"\n          @update:model-value=\"(suffix) => set({ suffix: suffix || undefined })\"\n        />\n      </SettingsField>\n    </div>\n    <SettingsField :label=\"messages.precision\">\n      <DouInputNumber\n        :model-value=\"model.precision ?? null\"\n        :min=\"0\"\n        :max=\"6\"\n        :aria-label=\"messages.precision\"\n        @update:model-value=\"(precision) => set({ precision: precision ?? undefined })\"\n      />\n    </SettingsField>\n    <template v-if=\"model.source\">\n      <FieldSelect\n        :model-value=\"model.trend\"\n        :label=\"messages.trend\"\n        :fields=\"fields\"\n        @update:model-value=\"(trend) => set({ trend: trend as string | undefined })\"\n      />\n      <FieldSelect\n        :model-value=\"model.delta\"\n        :label=\"messages.delta\"\n        :fields=\"fields\"\n        @update:model-value=\"(delta) => set({ delta: delta as string | undefined })\"\n      />\n    </template>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAaA,MAAM,QAAQA,SAA4B,SAAA,YAAmB;EAC7D,MAAM,WAAW,qBAAqB;EACtC,MAAM,EAAE,SAAS,mBAAmB;EACpC,MAAM,SAAS,eAAe,SAAS,KAAK,KAAK,CAAC;EAClD,MAAM,OAAO,UAAqC,MAAM,QAAQ;GAAE,GAAG,MAAM;GAAO,GAAG;EAAM;;GAIzF,OAAAC,UAAA,GAAAC,mBA2DM,OA3DN,YA2DM;IA1DJC,YAIEC,sBAAA;KAHC,eAAa,MAAA,MAAM;KACpB,UAAA;KACC,uBAAkB,OAAA,OAAA,OAAA,MAAG,WAAW,IAAG,EAAG,OAAM,CAAA;;IAGvC,MAAA,MAAM,UADdH,UAAA,GAAAI,YAMEC,sBAAA;;KAJC,eAAa,MAAA,MAAM;KACnB,OAAOC,MAAA,QAAA,CAAQ,CAAC;KAChB,QAAQ,OAAA;KACR,uBAAkB,OAAA,OAAA,OAAA,MAAG,UAAU,IAAG,EAAU,MAAK,CAAA;;;;;I,OAEpDN,UAAA,GAAAI,YAMgBG,wBAAA;;KANO,OAAOD,MAAA,QAAA,CAAQ,CAAC;;KACrC,SAAAE,cAIE,CAJFN,YAIEI,MAAA,cAAA,GAAA;MAHC,eAAa,MAAA,MAAM,SAAK;MACxB,cAAYA,MAAA,QAAA,CAAQ,CAAC;MACrB,uBAAkB,OAAA,OAAA,OAAA,MAAG,UAAU,IAAG,EAAA,OAAU,SAAS,KAAA,EAAS,CAAA;;;;IAGnEG,mBAeM,OAfN,YAeM,CAdJP,YAMgBK,wBAAA,EANA,OAAOD,MAAA,QAAA,CAAQ,CAAC,O;KAC9B,SAAAE,cAIE,CAJFN,YAIEI,MAAA,QAAA,GAAA;MAHC,eAAa,MAAA,MAAM,UAAM;MACzB,cAAYA,MAAA,QAAA,CAAQ,CAAC;MACrB,uBAAkB,OAAA,OAAA,OAAA,MAAG,WAAW,IAAG,EAAA,QAAW,UAAU,KAAA,EAAS,CAAA;;;I,kBAGtEJ,YAMgBK,wBAAA,EANA,OAAOD,MAAA,QAAA,CAAQ,CAAC,O;KAC9B,SAAAE,cAIE,CAJFN,YAIEI,MAAA,QAAA,GAAA;MAHC,eAAa,MAAA,MAAM,UAAM;MACzB,cAAYA,MAAA,QAAA,CAAQ,CAAC;MACrB,uBAAkB,OAAA,OAAA,OAAA,MAAG,WAAW,IAAG,EAAA,QAAW,UAAU,KAAA,EAAS,CAAA;;;;IAIxEJ,YAQgBK,wBAAA,EARA,OAAOD,MAAA,QAAA,CAAQ,CAAC,U;KAC9B,SAAAE,cAME,CANFN,YAMEI,MAAA,cAAA,GAAA;MALC,eAAa,MAAA,MAAM,aAAS;MAC5B,KAAK;MACL,KAAK;MACL,cAAYA,MAAA,QAAA,CAAQ,CAAC;MACrB,uBAAkB,OAAA,OAAA,OAAA,MAAG,cAAc,IAAG,EAAA,WAAc,aAAa,KAAA,EAAS,CAAA;;;;IAG/D,MAAA,MAAM,UAAtBN,UAAA,GAAAC,mBAaWS,UAAA,EAAA,KAAA,EAAA,GAAA,CAZTR,YAKEG,sBAAA;KAJC,eAAa,MAAA,MAAM;KACnB,OAAOC,MAAA,QAAA,CAAQ,CAAC;KAChB,QAAQ,OAAA;KACR,uBAAkB,OAAA,OAAA,OAAA,MAAG,UAAU,IAAG,EAAU,MAAK,CAAA;;;;;I,IAEpDJ,YAKEG,sBAAA;KAJC,eAAa,MAAA,MAAM;KACnB,OAAOC,MAAA,QAAA,CAAQ,CAAC;KAChB,QAAQ,OAAA;KACR,uBAAkB,OAAA,OAAA,OAAA,MAAG,UAAU,IAAG,EAAU,MAAK,CAAA"}
+{"version":3,"file":"stat-settings.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createVNode","SourceField","_createBlock","FieldSelect","_unref","SettingsField","_withCtx","_createElementVNode","_Fragment","_createCommentVNode"],"sources":["../../src/widgets/stat-settings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouInput, DouInputNumber } from 'dou-ui'\nimport { computed } from 'vue'\nimport { useDashboardMessages } from '../locale'\nimport { useDashboardWidget } from '../widget/context'\nimport FieldSelect from './field-select.vue'\nimport SettingsField from './settings-field.vue'\nimport { fieldsOf } from './shared'\nimport SourceField from './source-field.vue'\nimport type { StatWidgetProps } from './types'\nimport { statPropsOf } from './read-props'\n\ndefineOptions({ name: 'DouDashboardStatSettings' })\n\nconst model = defineModel<StatWidgetProps>({ required: true })\n// the props as saved may have the wrong types: read them as the widget does\nconst view = computed(() => statPropsOf(model.value as Record<string, unknown>))\nconst messages = useDashboardMessages()\nconst { data } = useDashboardWidget()\nconst fields = computed(() => fieldsOf(data.value))\nconst set = (patch: Partial<StatWidgetProps>) => (model.value = { ...model.value, ...patch })\n</script>\n\n<template>\n  <div class=\"dou-dashboard__settings\">\n    <SourceField\n      :model-value=\"view.source\"\n      optional\n      @update:model-value=\"(source) => set({ source })\"\n    />\n    <FieldSelect\n      v-if=\"view.source\"\n      :model-value=\"view.field\"\n      :label=\"messages.value\"\n      :fields=\"fields\"\n      @update:model-value=\"(field) => set({ field: field as string | undefined })\"\n    />\n    <SettingsField v-else :label=\"messages.value\">\n      <DouInputNumber\n        :model-value=\"view.value ?? null\"\n        :aria-label=\"messages.value\"\n        @update:model-value=\"(value) => set({ value: value ?? undefined })\"\n      />\n    </SettingsField>\n    <div class=\"dou-dashboard__field-row\">\n      <SettingsField :label=\"messages.prefix\">\n        <DouInput\n          :model-value=\"view.prefix ?? ''\"\n          :aria-label=\"messages.prefix\"\n          @update:model-value=\"(prefix) => set({ prefix: prefix || undefined })\"\n        />\n      </SettingsField>\n      <SettingsField :label=\"messages.suffix\">\n        <DouInput\n          :model-value=\"view.suffix ?? ''\"\n          :aria-label=\"messages.suffix\"\n          @update:model-value=\"(suffix) => set({ suffix: suffix || undefined })\"\n        />\n      </SettingsField>\n    </div>\n    <SettingsField :label=\"messages.precision\">\n      <DouInputNumber\n        :model-value=\"view.precision ?? null\"\n        :min=\"0\"\n        :max=\"6\"\n        :aria-label=\"messages.precision\"\n        @update:model-value=\"(precision) => set({ precision: precision ?? undefined })\"\n      />\n    </SettingsField>\n    <template v-if=\"view.source\">\n      <FieldSelect\n        :model-value=\"view.trend\"\n        :label=\"messages.trend\"\n        :fields=\"fields\"\n        @update:model-value=\"(trend) => set({ trend: trend as string | undefined })\"\n      />\n      <FieldSelect\n        :model-value=\"view.delta\"\n        :label=\"messages.delta\"\n        :fields=\"fields\"\n        @update:model-value=\"(delta) => set({ delta: delta as string | undefined })\"\n      />\n    </template>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAcA,MAAM,QAAQA,SAA4B,SAAA,YAAmB;EAE7D,MAAM,OAAO,eAAe,YAAY,MAAM,KAAgC,CAAC;EAC/E,MAAM,WAAW,qBAAqB;EACtC,MAAM,EAAE,SAAS,mBAAmB;EACpC,MAAM,SAAS,eAAe,SAAS,KAAK,KAAK,CAAC;EAClD,MAAM,OAAO,UAAqC,MAAM,QAAQ;GAAE,GAAG,MAAM;GAAO,GAAG;EAAM;;GAIzF,OAAAC,UAAA,GAAAC,mBA2DM,OA3DN,YA2DM;IA1DJC,YAIEC,sBAAA;KAHC,eAAa,KAAA,MAAK;KACnB,UAAA;KACC,uBAAkB,OAAA,OAAA,OAAA,MAAG,WAAW,IAAG,EAAG,OAAM,CAAA;;IAGvC,KAAA,MAAK,UADbH,UAAA,GAAAI,YAMEC,sBAAA;;KAJC,eAAa,KAAA,MAAK;KAClB,OAAOC,MAAA,QAAA,CAAQ,CAAC;KAChB,QAAQ,OAAA;KACR,uBAAkB,OAAA,OAAA,OAAA,MAAG,UAAU,IAAG,EAAU,MAAK,CAAA;;;;;I,OAEpDN,UAAA,GAAAI,YAMgBG,wBAAA;;KANO,OAAOD,MAAA,QAAA,CAAQ,CAAC;;KACrC,SAAAE,cAIE,CAJFN,YAIEI,MAAA,cAAA,GAAA;MAHC,eAAa,KAAA,MAAK,SAAK;MACvB,cAAYA,MAAA,QAAA,CAAQ,CAAC;MACrB,uBAAkB,OAAA,OAAA,OAAA,MAAG,UAAU,IAAG,EAAA,OAAU,SAAS,KAAA,EAAS,CAAA;;;;IAGnEG,mBAeM,OAfN,YAeM,CAdJP,YAMgBK,wBAAA,EANA,OAAOD,MAAA,QAAA,CAAQ,CAAC,O;KAC9B,SAAAE,cAIE,CAJFN,YAIEI,MAAA,QAAA,GAAA;MAHC,eAAa,KAAA,MAAK,UAAM;MACxB,cAAYA,MAAA,QAAA,CAAQ,CAAC;MACrB,uBAAkB,OAAA,OAAA,OAAA,MAAG,WAAW,IAAG,EAAA,QAAW,UAAU,KAAA,EAAS,CAAA;;;I,kBAGtEJ,YAMgBK,wBAAA,EANA,OAAOD,MAAA,QAAA,CAAQ,CAAC,O;KAC9B,SAAAE,cAIE,CAJFN,YAIEI,MAAA,QAAA,GAAA;MAHC,eAAa,KAAA,MAAK,UAAM;MACxB,cAAYA,MAAA,QAAA,CAAQ,CAAC;MACrB,uBAAkB,OAAA,OAAA,OAAA,MAAG,WAAW,IAAG,EAAA,QAAW,UAAU,KAAA,EAAS,CAAA;;;;IAIxEJ,YAQgBK,wBAAA,EARA,OAAOD,MAAA,QAAA,CAAQ,CAAC,U;KAC9B,SAAAE,cAME,CANFN,YAMEI,MAAA,cAAA,GAAA;MALC,eAAa,KAAA,MAAK,aAAS;MAC3B,KAAK;MACL,KAAK;MACL,cAAYA,MAAA,QAAA,CAAQ,CAAC;MACrB,uBAAkB,OAAA,OAAA,OAAA,MAAG,cAAc,IAAG,EAAA,WAAc,aAAa,KAAA,EAAS,CAAA;;;;IAG/D,KAAA,MAAK,UAArBN,UAAA,GAAAC,mBAaWS,UAAA,EAAA,KAAA,EAAA,GAAA,CAZTR,YAKEG,sBAAA;KAJC,eAAa,KAAA,MAAK;KAClB,OAAOC,MAAA,QAAA,CAAQ,CAAC;KAChB,QAAQ,OAAA;KACR,uBAAkB,OAAA,OAAA,OAAA,MAAG,UAAU,IAAG,EAAU,MAAK,CAAA;;;;;I,IAEpDJ,YAKEG,sBAAA;KAJC,eAAa,KAAA,MAAK;KAClB,OAAOC,MAAA,QAAA,CAAQ,CAAC;KAChB,QAAQ,OAAA;KACR,uBAAkB,OAAA,OAAA,OAAA,MAAG,UAAU,IAAG,EAAU,MAAK,CAAA"}

package/dist/widgets/stat.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat.js","names":["_sfc_main"],"sources":["../../src/widgets/stat.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouSparkline, DouStatistic } from 'dou-ui'\nimport { computed } from 'vue'\nimport { format, useDashboardMessages } from '../locale'\nimport { useDashboardWidget } from '../widget/context'\nimport { valueAt } from './shared'\nimport type { StatWidgetProps } from './types'\n\ndefineOptions({ name: 'DouDashboardStatWidget' })\n\nconst { props, data, size } = useDashboardWidget<StatWidgetProps>()\nconst messages = useDashboardMessages()\n\nconst value = computed(() => {\n  const { field, value: fixed } = props.value\n  if (!field) return fixed ?? null\n  const read = Number(valueAt(data.value, field))\n  return Number.isFinite(read) ? read : null\n})\nconst delta = computed(() => {\n  const read = props.value.delta ? Number(valueAt(data.value, props.value.delta)) : Number.NaN\n  return Number.isFinite(read) ? read : undefined\n})\nconst deltaText = computed(() => {\n  if (delta.value === undefined) return ''\n  const percent = `${delta.value > 0 ? '+' : ''}${(delta.value * 100).toFixed(1)}%`\n  return format(messages.value.deltaText, { value: percent })\n})\nconst points = computed(() => {\n  const list = props.value.trend ? valueAt(data.value, props.value.trend) : undefined\n  return Array.isArray(list) ? list.map(Number).filter(Number.isFinite) : []\n})\n/** The sparkline takes what the number leaves of the height, out to the card's edges. */\nconst sparkHeight = computed(() => Math.max(0, Math.floor(size.height.value - 56)))\n</script>\n\n<template>\n  <div class=\"dou-dashboard-stat\">\n    <DouStatistic\n      :value=\"value\"\n      :precision=\"props.precision\"\n      :prefix=\"props.prefix\"\n      :suffix=\"props.suffix\"\n      :trend=\"delta === undefined || delta === 0 ? undefined : delta > 0 ? 'up' : 'down'\"\n    >\n      <template v-if=\"deltaText\" #footer>{{ deltaText }}</template>\n    </DouStatistic>\n    <div v-if=\"points.length > 1 && sparkHeight >= 24\" class=\"dou-dashboard-stat__spark\">\n      <DouSparkline\n        :data=\"points\"\n        type=\"area\"\n        smooth\n        :width=\"size.width.value + 32\"\n        :height=\"sparkHeight\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"stat.js","names":["_sfc_main"],"sources":["../../src/widgets/stat.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouSparkline, DouStatistic } from 'dou-ui'\nimport { computed } from 'vue'\nimport { format, useDashboardMessages } from '../locale'\nimport { useDashboardWidget } from '../widget/context'\nimport { statPropsOf } from './read-props'\nimport { numberOf, valueAt } from './shared'\n\ndefineOptions({ name: 'DouDashboardStatWidget' })\n\nconst { props: raw, data, size } = useDashboardWidget()\nconst props = computed(() => statPropsOf(raw.value))\nconst messages = useDashboardMessages()\n\n// a fixed value and one read from the data follow the same rule: a number, or text that is one\nconst value = computed(() => {\n  const { field, value: fixed } = props.value\n  return (field ? numberOf(valueAt(data.value, field)) : fixed) ?? null\n})\nconst delta = computed(() =>\n  props.value.delta ? numberOf(valueAt(data.value, props.value.delta)) : undefined,\n)\nconst deltaText = computed(() => {\n  if (delta.value === undefined) return ''\n  const percent = `${delta.value > 0 ? '+' : ''}${(delta.value * 100).toFixed(1)}%`\n  return format(messages.value.deltaText, { value: percent })\n})\nconst points = computed(() => {\n  const list = props.value.trend ? valueAt(data.value, props.value.trend) : undefined\n  return Array.isArray(list) ? list.map(numberOf).filter((n): n is number => n !== undefined) : []\n})\n/** The sparkline takes what the number leaves of the height, out to the card's edges. */\nconst sparkHeight = computed(() => Math.max(0, Math.floor(size.height.value - 56)))\n</script>\n\n<template>\n  <div class=\"dou-dashboard-stat\">\n    <DouStatistic\n      :value=\"value\"\n      :precision=\"props.precision\"\n      :prefix=\"props.prefix\"\n      :suffix=\"props.suffix\"\n      :trend=\"delta === undefined || delta === 0 ? undefined : delta > 0 ? 'up' : 'down'\"\n    >\n      <template v-if=\"deltaText\" #footer>{{ deltaText }}</template>\n    </DouStatistic>\n    <div v-if=\"points.length > 1 && sparkHeight >= 24\" class=\"dou-dashboard-stat__spark\">\n      <DouSparkline\n        :data=\"points\"\n        type=\"area\"\n        smooth\n        :width=\"size.width.value + 32\"\n        :height=\"sparkHeight\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/widgets/stat.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
 import { format, useDashboardMessages } from "../locale.js";
 import { useDashboardWidget } from "../widget/context.js";
-import { valueAt } from "./shared.js";
+import { numberOf, valueAt } from "./shared.js";
+import { statPropsOf } from "./read-props.js";
 import { DouSparkline, DouStatistic } from "dou-ui";
 import { computed, createCommentVNode, createElementBlock, createSlots, createTextVNode, createVNode, defineComponent, openBlock, toDisplayString, unref, withCtx } from "vue";
 // src/widgets/stat.vue?vue&type=script&setup=true&lang.ts
@@ -13,18 +14,14 @@ var stat_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 	name: "DouDashboardStatWidget",
 	__name: "stat",
 	setup(__props) {
-		const { props, data, size } = useDashboardWidget();
+		const { props: raw, data, size } = useDashboardWidget();
+		const props = computed(() => statPropsOf(raw.value));
 		const messages = useDashboardMessages();
 		const value = computed(() => {
 			const { field, value: fixed } = props.value;
-			if (!field) return fixed ?? null;
-			const read = Number(valueAt(data.value, field));
-			return Number.isFinite(read) ? read : null;
-		});
-		const delta = computed(() => {
-			const read = props.value.delta ? Number(valueAt(data.value, props.value.delta)) : NaN;
-			return Number.isFinite(read) ? read : void 0;
+			return (field ? numberOf(valueAt(data.value, field)) : fixed) ?? null;
 		});
+		const delta = computed(() => props.value.delta ? numberOf(valueAt(data.value, props.value.delta)) : void 0);
 		const deltaText = computed(() => {
 			if (delta.value === void 0) return "";
 			const percent = `${delta.value > 0 ? "+" : ""}${(delta.value * 100).toFixed(1)}%`;
@@ -32,16 +29,16 @@ var stat_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 		});
 		const points = computed(() => {
 			const list = props.value.trend ? valueAt(data.value, props.value.trend) : void 0;
-			return Array.isArray(list) ? list.map(Number).filter(Number.isFinite) : [];
+			return Array.isArray(list) ? list.map(numberOf).filter((n) => n !== void 0) : [];
 		});
 		/** The sparkline takes what the number leaves of the height, out to the card's edges. */
 		const sparkHeight = computed(() => Math.max(0, Math.floor(size.height.value - 56)));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(DouStatistic), {
 				value: value.value,
-				precision: unref(props).precision,
-				prefix: unref(props).prefix,
-				suffix: unref(props).suffix,
+				precision: props.value.precision,
+				prefix: props.value.prefix,
+				suffix: props.value.suffix,
 				trend: delta.value === void 0 || delta.value === 0 ? void 0 : delta.value > 0 ? "up" : "down"
 			}, createSlots({ _: 2 }, [deltaText.value ? {
 				name: "footer",

package/dist/widgets/stat.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createVNode","_unref","_createSlots","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode"],"sources":["../../src/widgets/stat.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouSparkline, DouStatistic } from 'dou-ui'\nimport { computed } from 'vue'\nimport { format, useDashboardMessages } from '../locale'\nimport { useDashboardWidget } from '../widget/context'\nimport { valueAt } from './shared'\nimport type { StatWidgetProps } from './types'\n\ndefineOptions({ name: 'DouDashboardStatWidget' })\n\nconst { props, data, size } = useDashboardWidget<StatWidgetProps>()\nconst messages = useDashboardMessages()\n\nconst value = computed(() => {\n  const { field, value: fixed } = props.value\n  if (!field) return fixed ?? null\n  const read = Number(valueAt(data.value, field))\n  return Number.isFinite(read) ? read : null\n})\nconst delta = computed(() => {\n  const read = props.value.delta ? Number(valueAt(data.value, props.value.delta)) : Number.NaN\n  return Number.isFinite(read) ? read : undefined\n})\nconst deltaText = computed(() => {\n  if (delta.value === undefined) return ''\n  const percent = `${delta.value > 0 ? '+' : ''}${(delta.value * 100).toFixed(1)}%`\n  return format(messages.value.deltaText, { value: percent })\n})\nconst points = computed(() => {\n  const list = props.value.trend ? valueAt(data.value, props.value.trend) : undefined\n  return Array.isArray(list) ? list.map(Number).filter(Number.isFinite) : []\n})\n/** The sparkline takes what the number leaves of the height, out to the card's edges. */\nconst sparkHeight = computed(() => Math.max(0, Math.floor(size.height.value - 56)))\n</script>\n\n<template>\n  <div class=\"dou-dashboard-stat\">\n    <DouStatistic\n      :value=\"value\"\n      :precision=\"props.precision\"\n      :prefix=\"props.prefix\"\n      :suffix=\"props.suffix\"\n      :trend=\"delta === undefined || delta === 0 ? undefined : delta > 0 ? 'up' : 'down'\"\n    >\n      <template v-if=\"deltaText\" #footer>{{ deltaText }}</template>\n    </DouStatistic>\n    <div v-if=\"points.length > 1 && sparkHeight >= 24\" class=\"dou-dashboard-stat__spark\">\n      <DouSparkline\n        :data=\"points\"\n        type=\"area\"\n        smooth\n        :width=\"size.width.value + 32\"\n        :height=\"sparkHeight\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAUA,MAAM,EAAE,OAAO,MAAM,SAAS,mBAAoC;EAClE,MAAM,WAAW,qBAAqB;EAEtC,MAAM,QAAQ,eAAe;GAC3B,MAAM,EAAE,OAAO,OAAO,UAAU,MAAM;GACtC,IAAI,CAAC,OAAO,OAAO,SAAS;GAC5B,MAAM,OAAO,OAAO,QAAQ,KAAK,OAAO,KAAK,CAAC;GAC9C,OAAO,OAAO,SAAS,IAAI,IAAI,OAAO;EACxC,CAAC;EACD,MAAM,QAAQ,eAAe;GAC3B,MAAM,OAAO,MAAM,MAAM,QAAQ,OAAO,QAAQ,KAAK,OAAO,MAAM,MAAM,KAAK,CAAC,IAAI;GAClF,OAAO,OAAO,SAAS,IAAI,IAAI,OAAO,KAAA;EACxC,CAAC;EACD,MAAM,YAAY,eAAe;GAC/B,IAAI,MAAM,UAAU,KAAA,GAAW,OAAO;GACtC,MAAM,UAAU,GAAG,MAAM,QAAQ,IAAI,MAAM,MAAM,MAAM,QAAQ,IAAA,CAAK,QAAQ,CAAC,EAAE;GAC/E,OAAO,OAAO,SAAS,MAAM,WAAW,EAAE,OAAO,QAAQ,CAAC;EAC5D,CAAC;EACD,MAAM,SAAS,eAAe;GAC5B,MAAM,OAAO,MAAM,MAAM,QAAQ,QAAQ,KAAK,OAAO,MAAM,MAAM,KAAK,IAAI,KAAA;GAC1E,OAAO,MAAM,QAAQ,IAAI,IAAI,KAAK,IAAI,MAAM,CAAC,CAAC,OAAO,OAAO,QAAQ,IAAI,CAAC;EAC3E,CAAC;;EAED,MAAM,cAAc,eAAe,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,OAAO,QAAQ,EAAE,CAAC,CAAC;;GAIhF,OAAAA,UAAA,GAAAC,mBAmBM,OAnBN,YAmBM,CAlBJC,YAQeC,MAAA,YAAA,GAAA;IAPZ,OAAO,MAAA;IACP,WAAWA,MAAA,KAAA,CAAK,CAAC;IACjB,QAAQA,MAAA,KAAA,CAAK,CAAC;IACd,QAAQA,MAAA,KAAA,CAAK,CAAC;IACd,OAAO,MAAA,UAAU,KAAA,KAAa,MAAA,UAAK,IAAS,KAAA,IAAY,MAAA,QAAK,IAAA,OAAA;G,0BAE9C,UAAA,Q;IAAY,MAAA;IAAO,IAAAE,cAAe,CAAZC,gBAAAC,gBAAA,UAAA,KAAS,GAAA,CAAA,C;;;;;;;;G,IAEtC,OAAA,MAAO,SAAM,KAAQ,YAAA,SAAW,MAA3CP,UAAA,GAAAC,mBAQM,OARN,YAQM,CAPJC,YAMEC,MAAA,YAAA,GAAA;IALC,MAAM,OAAA;IACP,MAAK;IACL,QAAA;IACC,OAAOA,MAAA,IAAA,CAAI,CAAC,MAAM,QAAK;IACvB,QAAQ,YAAA"}
+{"version":3,"file":"stat.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createVNode","_unref","_createSlots","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode"],"sources":["../../src/widgets/stat.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouSparkline, DouStatistic } from 'dou-ui'\nimport { computed } from 'vue'\nimport { format, useDashboardMessages } from '../locale'\nimport { useDashboardWidget } from '../widget/context'\nimport { statPropsOf } from './read-props'\nimport { numberOf, valueAt } from './shared'\n\ndefineOptions({ name: 'DouDashboardStatWidget' })\n\nconst { props: raw, data, size } = useDashboardWidget()\nconst props = computed(() => statPropsOf(raw.value))\nconst messages = useDashboardMessages()\n\n// a fixed value and one read from the data follow the same rule: a number, or text that is one\nconst value = computed(() => {\n  const { field, value: fixed } = props.value\n  return (field ? numberOf(valueAt(data.value, field)) : fixed) ?? null\n})\nconst delta = computed(() =>\n  props.value.delta ? numberOf(valueAt(data.value, props.value.delta)) : undefined,\n)\nconst deltaText = computed(() => {\n  if (delta.value === undefined) return ''\n  const percent = `${delta.value > 0 ? '+' : ''}${(delta.value * 100).toFixed(1)}%`\n  return format(messages.value.deltaText, { value: percent })\n})\nconst points = computed(() => {\n  const list = props.value.trend ? valueAt(data.value, props.value.trend) : undefined\n  return Array.isArray(list) ? list.map(numberOf).filter((n): n is number => n !== undefined) : []\n})\n/** The sparkline takes what the number leaves of the height, out to the card's edges. */\nconst sparkHeight = computed(() => Math.max(0, Math.floor(size.height.value - 56)))\n</script>\n\n<template>\n  <div class=\"dou-dashboard-stat\">\n    <DouStatistic\n      :value=\"value\"\n      :precision=\"props.precision\"\n      :prefix=\"props.prefix\"\n      :suffix=\"props.suffix\"\n      :trend=\"delta === undefined || delta === 0 ? undefined : delta > 0 ? 'up' : 'down'\"\n    >\n      <template v-if=\"deltaText\" #footer>{{ deltaText }}</template>\n    </DouStatistic>\n    <div v-if=\"points.length > 1 && sparkHeight >= 24\" class=\"dou-dashboard-stat__spark\">\n      <DouSparkline\n        :data=\"points\"\n        type=\"area\"\n        smooth\n        :width=\"size.width.value + 32\"\n        :height=\"sparkHeight\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAUA,MAAM,EAAE,OAAO,KAAK,MAAM,SAAS,mBAAmB;EACtD,MAAM,QAAQ,eAAe,YAAY,IAAI,KAAK,CAAC;EACnD,MAAM,WAAW,qBAAqB;EAGtC,MAAM,QAAQ,eAAe;GAC3B,MAAM,EAAE,OAAO,OAAO,UAAU,MAAM;GACtC,QAAQ,QAAQ,SAAS,QAAQ,KAAK,OAAO,KAAK,CAAC,IAAI,UAAU;EACnE,CAAC;EACD,MAAM,QAAQ,eACZ,MAAM,MAAM,QAAQ,SAAS,QAAQ,KAAK,OAAO,MAAM,MAAM,KAAK,CAAC,IAAI,KAAA,CACzE;EACA,MAAM,YAAY,eAAe;GAC/B,IAAI,MAAM,UAAU,KAAA,GAAW,OAAO;GACtC,MAAM,UAAU,GAAG,MAAM,QAAQ,IAAI,MAAM,MAAM,MAAM,QAAQ,IAAA,CAAK,QAAQ,CAAC,EAAE;GAC/E,OAAO,OAAO,SAAS,MAAM,WAAW,EAAE,OAAO,QAAQ,CAAC;EAC5D,CAAC;EACD,MAAM,SAAS,eAAe;GAC5B,MAAM,OAAO,MAAM,MAAM,QAAQ,QAAQ,KAAK,OAAO,MAAM,MAAM,KAAK,IAAI,KAAA;GAC1E,OAAO,MAAM,QAAQ,IAAI,IAAI,KAAK,IAAI,QAAQ,CAAC,CAAC,QAAQ,MAAmB,MAAM,KAAA,CAAS,IAAI,CAAC;EACjG,CAAC;;EAED,MAAM,cAAc,eAAe,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,OAAO,QAAQ,EAAE,CAAC,CAAC;;GAIhF,OAAAA,UAAA,GAAAC,mBAmBM,OAnBN,YAmBM,CAlBJC,YAQeC,MAAA,YAAA,GAAA;IAPZ,OAAO,MAAA;IACP,WAAW,MAAA,MAAM;IACjB,QAAQ,MAAA,MAAM;IACd,QAAQ,MAAA,MAAM;IACd,OAAO,MAAA,UAAU,KAAA,KAAa,MAAA,UAAK,IAAS,KAAA,IAAY,MAAA,QAAK,IAAA,OAAA;G,0BAE9C,UAAA,Q;IAAY,MAAA;IAAO,IAAAE,cAAe,CAAZC,gBAAAC,gBAAA,UAAA,KAAS,GAAA,CAAA,C;;;;;;;;G,IAEtC,OAAA,MAAO,SAAM,KAAQ,YAAA,SAAW,MAA3CP,UAAA,GAAAC,mBAQM,OARN,YAQM,CAPJC,YAMEC,MAAA,YAAA,GAAA;IALC,MAAM,OAAA;IACP,MAAK;IACL,QAAA;IACC,OAAOA,MAAA,IAAA,CAAI,CAAC,MAAM,QAAK;IACvB,QAAQ,YAAA"}

package/dist/widgets/table-settings.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-settings.js","names":["_sfc_main"],"sources":["../../src/widgets/table-settings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouCheckbox, DouInput } from 'dou-ui'\nimport { computed } from 'vue'\nimport { format, useDashboardMessages } from '../locale'\nimport { useDashboardWidget } from '../widget/context'\nimport SettingsField from './settings-field.vue'\nimport { fieldsOf, rowsOf } from './shared'\nimport SourceField from './source-field.vue'\nimport type { TableWidgetColumn, TableWidgetProps } from './types'\n\ndefineOptions({ name: 'DouDashboardTableSettings' })\n\nconst model = defineModel<TableWidgetProps>({ required: true })\nconst messages = useDashboardMessages()\nconst { data } = useDashboardWidget()\n\n/** Every field of the rows, those shown first in their order. */\nconst fields = computed(() => {\n  const all = fieldsOf(rowsOf(data.value, model.value.path))\n  const shown = model.value.columns?.map((column) => column.key) ?? all\n  return [...shown, ...all.filter((key) => !shown.includes(key))]\n})\nconst columns = computed<TableWidgetColumn[]>(\n  () =>\n    model.value.columns ?? fieldsOf(rowsOf(data.value, model.value.path)).map((key) => ({ key })),\n)\nconst columnOf = (key: string) => columns.value.find((column) => column.key === key)\n\nfunction toggle(key: string, on: boolean) {\n  const next = on\n    ? [...columns.value, { key }]\n    : columns.value.filter((column) => column.key !== key)\n  model.value = { ...model.value, columns: next }\n}\n\nfunction retitle(key: string, title: string) {\n  const next = columns.value.map((column) =>\n    column.key === key ? { key, ...(title ? { title } : {}) } : column,\n  )\n  model.value = { ...model.value, columns: next }\n}\n</script>\n\n<template>\n  <div class=\"dou-dashboard__settings\">\n    <SourceField\n      :model-value=\"model.source\"\n      @update:model-value=\"(source) => (model = { ...model, source })\"\n    />\n    <SettingsField v-if=\"fields.length\" :label=\"messages.columns\">\n      <div class=\"dou-dashboard__columns\">\n        <div v-for=\"key in fields\" :key=\"key\" class=\"dou-dashboard__column\">\n          <DouCheckbox\n            :model-value=\"!!columnOf(key)\"\n            @update:model-value=\"(on) => toggle(key, !!on)\"\n          >\n            {{ key }}\n          </DouCheckbox>\n          <DouInput\n            v-if=\"columnOf(key)\"\n            size=\"sm\"\n            :model-value=\"columnOf(key)?.title ?? ''\"\n            :placeholder=\"key\"\n            :aria-label=\"format(messages.columnTitle, { field: key })\"\n            @update:model-value=\"(title) => retitle(key, title)\"\n          />\n        </div>\n      </div>\n    </SettingsField>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"table-settings.js","names":["_sfc_main"],"sources":["../../src/widgets/table-settings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouCheckbox, DouInput } from 'dou-ui'\nimport { computed } from 'vue'\nimport { format, useDashboardMessages } from '../locale'\nimport { useDashboardWidget } from '../widget/context'\nimport SettingsField from './settings-field.vue'\nimport { fieldsOf, rowsOf } from './shared'\nimport SourceField from './source-field.vue'\nimport type { TableWidgetColumn, TableWidgetProps } from './types'\nimport { tablePropsOf } from './read-props'\n\ndefineOptions({ name: 'DouDashboardTableSettings' })\n\nconst model = defineModel<TableWidgetProps>({ required: true })\n// the props as saved may have the wrong types: read them as the widget does\nconst view = computed(() => tablePropsOf(model.value as Record<string, unknown>))\nconst messages = useDashboardMessages()\nconst { data } = useDashboardWidget()\n\n/** Every field of the rows, those shown first in their order. */\nconst fields = computed(() => {\n  const all = fieldsOf(rowsOf(data.value, view.value.path))\n  const shown = view.value.columns?.map((column) => column.key) ?? all\n  return [...shown, ...all.filter((key) => !shown.includes(key))]\n})\nconst columns = computed<TableWidgetColumn[]>(\n  () => view.value.columns ?? fieldsOf(rowsOf(data.value, view.value.path)).map((key) => ({ key })),\n)\nconst columnOf = (key: string) => columns.value.find((column) => column.key === key)\n\nfunction toggle(key: string, on: boolean) {\n  const next = on\n    ? [...columns.value, { key }]\n    : columns.value.filter((column) => column.key !== key)\n  model.value = { ...model.value, columns: next }\n}\n\nfunction retitle(key: string, title: string) {\n  const next = columns.value.map((column) =>\n    column.key === key ? { key, ...(title ? { title } : {}) } : column,\n  )\n  model.value = { ...model.value, columns: next }\n}\n</script>\n\n<template>\n  <div class=\"dou-dashboard__settings\">\n    <SourceField\n      :model-value=\"view.source\"\n      @update:model-value=\"(source) => (model = { ...model, source })\"\n    />\n    <SettingsField v-if=\"fields.length\" :label=\"messages.columns\">\n      <div class=\"dou-dashboard__columns\">\n        <div v-for=\"key in fields\" :key=\"key\" class=\"dou-dashboard__column\">\n          <DouCheckbox\n            :model-value=\"!!columnOf(key)\"\n            @update:model-value=\"(on) => toggle(key, !!on)\"\n          >\n            {{ key }}\n          </DouCheckbox>\n          <DouInput\n            v-if=\"columnOf(key)\"\n            size=\"sm\"\n            :model-value=\"columnOf(key)?.title ?? ''\"\n            :placeholder=\"key\"\n            :aria-label=\"format(messages.columnTitle, { field: key })\"\n            @update:model-value=\"(title) => retitle(key, title)\"\n          />\n        </div>\n      </div>\n    </SettingsField>\n  </div>\n</template>\n"],"mappings":""}

package/dist/widgets/table-settings.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
 import { format, useDashboardMessages } from "../locale.js";
 import { useDashboardWidget } from "../widget/context.js";
 import { fieldsOf, rowsOf } from "./shared.js";
+import { tablePropsOf } from "./read-props.js";
 import settings_field_default from "./settings-field.js";
 import source_field_default from "./source-field.js";
 import { DouCheckbox, DouInput } from "dou-ui";
@@ -18,15 +19,16 @@ var table_settings_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const model = useModel(__props, "modelValue");
+		const view = computed(() => tablePropsOf(model.value));
 		const messages = useDashboardMessages();
 		const { data } = useDashboardWidget();
 		/** Every field of the rows, those shown first in their order. */
 		const fields = computed(() => {
-			const all = fieldsOf(rowsOf(data.value, model.value.path));
-			const shown = model.value.columns?.map((column) => column.key) ?? all;
+			const all = fieldsOf(rowsOf(data.value, view.value.path));
+			const shown = view.value.columns?.map((column) => column.key) ?? all;
 			return [...shown, ...all.filter((key) => !shown.includes(key))];
 		});
-		const columns = computed(() => model.value.columns ?? fieldsOf(rowsOf(data.value, model.value.path)).map((key) => ({ key })));
+		const columns = computed(() => view.value.columns ?? fieldsOf(rowsOf(data.value, view.value.path)).map((key) => ({ key })));
 		const columnOf = (key) => columns.value.find((column) => column.key === key);
 		function toggle(key, on) {
 			const next = on ? [...columns.value, { key }] : columns.value.filter((column) => column.key !== key);
@@ -47,7 +49,7 @@ var table_settings_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(source_field_default, {
-				"model-value": model.value.source,
+				"model-value": view.value.source,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = (source) => model.value = {
 					...model.value,
 					source

package/dist/widgets/table-settings.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-settings.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createVNode","SourceField","_createBlock","SettingsField","_unref","_withCtx","_createElementVNode","_Fragment","_renderList","_createTextVNode","_toDisplayString","_createCommentVNode"],"sources":["../../src/widgets/table-settings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouCheckbox, DouInput } from 'dou-ui'\nimport { computed } from 'vue'\nimport { format, useDashboardMessages } from '../locale'\nimport { useDashboardWidget } from '../widget/context'\nimport SettingsField from './settings-field.vue'\nimport { fieldsOf, rowsOf } from './shared'\nimport SourceField from './source-field.vue'\nimport type { TableWidgetColumn, TableWidgetProps } from './types'\n\ndefineOptions({ name: 'DouDashboardTableSettings' })\n\nconst model = defineModel<TableWidgetProps>({ required: true })\nconst messages = useDashboardMessages()\nconst { data } = useDashboardWidget()\n\n/** Every field of the rows, those shown first in their order. */\nconst fields = computed(() => {\n  const all = fieldsOf(rowsOf(data.value, model.value.path))\n  const shown = model.value.columns?.map((column) => column.key) ?? all\n  return [...shown, ...all.filter((key) => !shown.includes(key))]\n})\nconst columns = computed<TableWidgetColumn[]>(\n  () =>\n    model.value.columns ?? fieldsOf(rowsOf(data.value, model.value.path)).map((key) => ({ key })),\n)\nconst columnOf = (key: string) => columns.value.find((column) => column.key === key)\n\nfunction toggle(key: string, on: boolean) {\n  const next = on\n    ? [...columns.value, { key }]\n    : columns.value.filter((column) => column.key !== key)\n  model.value = { ...model.value, columns: next }\n}\n\nfunction retitle(key: string, title: string) {\n  const next = columns.value.map((column) =>\n    column.key === key ? { key, ...(title ? { title } : {}) } : column,\n  )\n  model.value = { ...model.value, columns: next }\n}\n</script>\n\n<template>\n  <div class=\"dou-dashboard__settings\">\n    <SourceField\n      :model-value=\"model.source\"\n      @update:model-value=\"(source) => (model = { ...model, source })\"\n    />\n    <SettingsField v-if=\"fields.length\" :label=\"messages.columns\">\n      <div class=\"dou-dashboard__columns\">\n        <div v-for=\"key in fields\" :key=\"key\" class=\"dou-dashboard__column\">\n          <DouCheckbox\n            :model-value=\"!!columnOf(key)\"\n            @update:model-value=\"(on) => toggle(key, !!on)\"\n          >\n            {{ key }}\n          </DouCheckbox>\n          <DouInput\n            v-if=\"columnOf(key)\"\n            size=\"sm\"\n            :model-value=\"columnOf(key)?.title ?? ''\"\n            :placeholder=\"key\"\n            :aria-label=\"format(messages.columnTitle, { field: key })\"\n            @update:model-value=\"(title) => retitle(key, title)\"\n          />\n        </div>\n      </div>\n    </SettingsField>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAYA,MAAM,QAAQA,SAA6B,SAAA,YAAmB;EAC9D,MAAM,WAAW,qBAAqB;EACtC,MAAM,EAAE,SAAS,mBAAmB;;EAGpC,MAAM,SAAS,eAAe;GAC5B,MAAM,MAAM,SAAS,OAAO,KAAK,OAAO,MAAM,MAAM,IAAI,CAAC;GACzD,MAAM,QAAQ,MAAM,MAAM,SAAS,KAAK,WAAW,OAAO,GAAG,KAAK;GAClE,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,QAAQ,QAAQ,CAAC,MAAM,SAAS,GAAG,CAAC,CAAC;EAChE,CAAC;EACD,MAAM,UAAU,eAEZ,MAAM,MAAM,WAAW,SAAS,OAAO,KAAK,OAAO,MAAM,MAAM,IAAI,CAAC,CAAC,CAAC,KAAK,SAAS,EAAE,IAAI,EAAE,CAChG;EACA,MAAM,YAAY,QAAgB,QAAQ,MAAM,MAAM,WAAW,OAAO,QAAQ,GAAG;EAEnF,SAAS,OAAO,KAAa,IAAa;GACxC,MAAM,OAAO,KACT,CAAC,GAAG,QAAQ,OAAO,EAAE,IAAI,CAAC,IAC1B,QAAQ,MAAM,QAAQ,WAAW,OAAO,QAAQ,GAAG;GACvD,MAAM,QAAQ;IAAE,GAAG,MAAM;IAAO,SAAS;GAAK;EAChD;EAEA,SAAS,QAAQ,KAAa,OAAe;GAC3C,MAAM,OAAO,QAAQ,MAAM,KAAK,WAC9B,OAAO,QAAQ,MAAM;IAAE;IAAK,GAAI,QAAQ,EAAE,MAAM,IAAI,CAAC;GAAG,IAAI,MAC9D;GACA,MAAM,QAAQ;IAAE,GAAG,MAAM;IAAO,SAAS;GAAK;EAChD;;GAIE,OAAAC,UAAA,GAAAC,mBAyBM,OAzBN,YAyBM,CAxBJC,YAGEC,sBAAA;IAFC,eAAa,MAAA,MAAM;IACnB,uBAAkB,OAAA,OAAA,OAAA,MAAG,WAAY,MAAA,QAAK;KAAA,GAAQ,MAAA;KAAO;IAAM;G,8BAEzC,OAAA,MAAO,UAA5BH,UAAA,GAAAI,YAmBgBC,wBAAA;;IAnBqB,OAAOC,MAAA,QAAA,CAAQ,CAAC;;IACnD,SAAAC,cAiBM,CAjBNC,mBAiBM,OAjBN,YAiBM,EAhBJR,UAAA,IAAA,GAAAC,mBAeMQ,UAAA,MAAAC,WAfa,OAAA,QAAP,QAAG;KAAf,OAAAV,UAAA,GAAAC,mBAeM,OAAA;MAf2B;MAAK,OAAM;K,IAC1CC,YAKcI,MAAA,WAAA,GAAA;MAJX,eAAW,CAAA,CAAI,SAAS,GAAG;MAC3B,wBAAqB,OAAO,OAAO,KAAG,CAAA,CAAI,EAAE;;MAE7C,SAAAC,cAAS,CAANI,gBAAAC,gBAAA,GAAG,GAAA,CAAA,C;;K,kDAGA,SAAS,GAAG,KADpBZ,UAAA,GAAAI,YAOEE,MAAA,QAAA,GAAA;;MALA,MAAK;MACJ,eAAa,SAAS,GAAG,CAAA,EAAG,SAAK;MACjC,aAAa;MACb,cAAYA,MAAA,MAAA,CAAM,CAACA,MAAA,QAAA,CAAQ,CAAC,aAAW,EAAA,OAAW,IAAG,CAAA;MACrD,wBAAqB,UAAU,QAAQ,KAAK,KAAK"}
+{"version":3,"file":"table-settings.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createVNode","SourceField","_createBlock","SettingsField","_unref","_withCtx","_createElementVNode","_Fragment","_renderList","_createTextVNode","_toDisplayString","_createCommentVNode"],"sources":["../../src/widgets/table-settings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouCheckbox, DouInput } from 'dou-ui'\nimport { computed } from 'vue'\nimport { format, useDashboardMessages } from '../locale'\nimport { useDashboardWidget } from '../widget/context'\nimport SettingsField from './settings-field.vue'\nimport { fieldsOf, rowsOf } from './shared'\nimport SourceField from './source-field.vue'\nimport type { TableWidgetColumn, TableWidgetProps } from './types'\nimport { tablePropsOf } from './read-props'\n\ndefineOptions({ name: 'DouDashboardTableSettings' })\n\nconst model = defineModel<TableWidgetProps>({ required: true })\n// the props as saved may have the wrong types: read them as the widget does\nconst view = computed(() => tablePropsOf(model.value as Record<string, unknown>))\nconst messages = useDashboardMessages()\nconst { data } = useDashboardWidget()\n\n/** Every field of the rows, those shown first in their order. */\nconst fields = computed(() => {\n  const all = fieldsOf(rowsOf(data.value, view.value.path))\n  const shown = view.value.columns?.map((column) => column.key) ?? all\n  return [...shown, ...all.filter((key) => !shown.includes(key))]\n})\nconst columns = computed<TableWidgetColumn[]>(\n  () => view.value.columns ?? fieldsOf(rowsOf(data.value, view.value.path)).map((key) => ({ key })),\n)\nconst columnOf = (key: string) => columns.value.find((column) => column.key === key)\n\nfunction toggle(key: string, on: boolean) {\n  const next = on\n    ? [...columns.value, { key }]\n    : columns.value.filter((column) => column.key !== key)\n  model.value = { ...model.value, columns: next }\n}\n\nfunction retitle(key: string, title: string) {\n  const next = columns.value.map((column) =>\n    column.key === key ? { key, ...(title ? { title } : {}) } : column,\n  )\n  model.value = { ...model.value, columns: next }\n}\n</script>\n\n<template>\n  <div class=\"dou-dashboard__settings\">\n    <SourceField\n      :model-value=\"view.source\"\n      @update:model-value=\"(source) => (model = { ...model, source })\"\n    />\n    <SettingsField v-if=\"fields.length\" :label=\"messages.columns\">\n      <div class=\"dou-dashboard__columns\">\n        <div v-for=\"key in fields\" :key=\"key\" class=\"dou-dashboard__column\">\n          <DouCheckbox\n            :model-value=\"!!columnOf(key)\"\n            @update:model-value=\"(on) => toggle(key, !!on)\"\n          >\n            {{ key }}\n          </DouCheckbox>\n          <DouInput\n            v-if=\"columnOf(key)\"\n            size=\"sm\"\n            :model-value=\"columnOf(key)?.title ?? ''\"\n            :placeholder=\"key\"\n            :aria-label=\"format(messages.columnTitle, { field: key })\"\n            @update:model-value=\"(title) => retitle(key, title)\"\n          />\n        </div>\n      </div>\n    </SettingsField>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAaA,MAAM,QAAQA,SAA6B,SAAA,YAAmB;EAE9D,MAAM,OAAO,eAAe,aAAa,MAAM,KAAgC,CAAC;EAChF,MAAM,WAAW,qBAAqB;EACtC,MAAM,EAAE,SAAS,mBAAmB;;EAGpC,MAAM,SAAS,eAAe;GAC5B,MAAM,MAAM,SAAS,OAAO,KAAK,OAAO,KAAK,MAAM,IAAI,CAAC;GACxD,MAAM,QAAQ,KAAK,MAAM,SAAS,KAAK,WAAW,OAAO,GAAG,KAAK;GACjE,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,QAAQ,QAAQ,CAAC,MAAM,SAAS,GAAG,CAAC,CAAC;EAChE,CAAC;EACD,MAAM,UAAU,eACR,KAAK,MAAM,WAAW,SAAS,OAAO,KAAK,OAAO,KAAK,MAAM,IAAI,CAAC,CAAC,CAAC,KAAK,SAAS,EAAE,IAAI,EAAE,CAClG;EACA,MAAM,YAAY,QAAgB,QAAQ,MAAM,MAAM,WAAW,OAAO,QAAQ,GAAG;EAEnF,SAAS,OAAO,KAAa,IAAa;GACxC,MAAM,OAAO,KACT,CAAC,GAAG,QAAQ,OAAO,EAAE,IAAI,CAAC,IAC1B,QAAQ,MAAM,QAAQ,WAAW,OAAO,QAAQ,GAAG;GACvD,MAAM,QAAQ;IAAE,GAAG,MAAM;IAAO,SAAS;GAAK;EAChD;EAEA,SAAS,QAAQ,KAAa,OAAe;GAC3C,MAAM,OAAO,QAAQ,MAAM,KAAK,WAC9B,OAAO,QAAQ,MAAM;IAAE;IAAK,GAAI,QAAQ,EAAE,MAAM,IAAI,CAAC;GAAG,IAAI,MAC9D;GACA,MAAM,QAAQ;IAAE,GAAG,MAAM;IAAO,SAAS;GAAK;EAChD;;GAIE,OAAAC,UAAA,GAAAC,mBAyBM,OAzBN,YAyBM,CAxBJC,YAGEC,sBAAA;IAFC,eAAa,KAAA,MAAK;IAClB,uBAAkB,OAAA,OAAA,OAAA,MAAG,WAAY,MAAA,QAAK;KAAA,GAAQ,MAAA;KAAO;IAAM;G,8BAEzC,OAAA,MAAO,UAA5BH,UAAA,GAAAI,YAmBgBC,wBAAA;;IAnBqB,OAAOC,MAAA,QAAA,CAAQ,CAAC;;IACnD,SAAAC,cAiBM,CAjBNC,mBAiBM,OAjBN,YAiBM,EAhBJR,UAAA,IAAA,GAAAC,mBAeMQ,UAAA,MAAAC,WAfa,OAAA,QAAP,QAAG;KAAf,OAAAV,UAAA,GAAAC,mBAeM,OAAA;MAf2B;MAAK,OAAM;K,IAC1CC,YAKcI,MAAA,WAAA,GAAA;MAJX,eAAW,CAAA,CAAI,SAAS,GAAG;MAC3B,wBAAqB,OAAO,OAAO,KAAG,CAAA,CAAI,EAAE;;MAE7C,SAAAC,cAAS,CAANI,gBAAAC,gBAAA,GAAG,GAAA,CAAA,C;;K,kDAGA,SAAS,GAAG,KADpBZ,UAAA,GAAAI,YAOEE,MAAA,QAAA,GAAA;;MALA,MAAK;MACJ,eAAa,SAAS,GAAG,CAAA,EAAG,SAAK;MACjC,aAAa;MACb,cAAYA,MAAA,MAAA,CAAM,CAACA,MAAA,QAAA,CAAQ,CAAC,aAAW,EAAA,OAAW,IAAG,CAAA;MACrD,wBAAqB,UAAU,QAAQ,KAAK,KAAK"}

package/dist/widgets/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","names":["_sfc_main"],"sources":["../../src/widgets/table.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouTable } from 'dou-ui'\nimport type { TableColumn } from 'dou-ui'\nimport { computed, onMounted, ref } from 'vue'\nimport { useDashboardWidget } from '../widget/context'\nimport { fieldsOf, rowsToWorkbook, rowsOf } from './shared'\nimport type { TableWidgetColumn, TableWidgetProps } from './types'\n\ndefineOptions({ name: 'DouDashboardTableWidget' })\n\nconst { props, data, size, setWorkbook } = useDashboardWidget<TableWidgetProps>()\nconst rows = computed(() => rowsOf(data.value, props.value.path))\n/** Each row's key: its `rowKey` field, or its place in the list. */\nconst keys = computed(() => {\n  const map = new WeakMap<object, string | number>()\n  const field = props.value.rowKey\n  rows.value.forEach((row, index) => map.set(row, field ? (row[field] as string | number) : index))\n  return map\n})\nconst rowKey = (row: Record<string, unknown>) => keys.value.get(row) ?? ''\nconst number = new Intl.NumberFormat()\n/** The table's font, read once it is on the page, to measure texts with. */\nconst root = ref<{ $el: Element }>()\nconst font = ref('')\nonMounted(() => {\n  const cell = root.value?.$el.querySelector('td, th')\n  if (cell) font.value = getComputedStyle(cell).font\n})\nlet context: CanvasRenderingContext2D | null | undefined\n/** How wide a text is in the table's font, or about how wide before it is known. */\nfunction textWidth(text: string) {\n  context ??=\n    typeof document === 'undefined' ? null : document.createElement('canvas').getContext('2d')\n  if (context && font.value) {\n    context.font = font.value\n    return context.measureText(text).width\n  }\n  let width = 0\n  for (const char of text) width += char.charCodeAt(0) > 0x2e7f ? 14 : 8.5\n  return width\n}\n/** Room for the title and the first rows' texts, with the cell's padding; up to 240px. */\nfunction minWidthOf(title: string, texts: unknown[]) {\n  let widest = textWidth(title)\n  for (const text of texts) widest = Math.max(widest, textWidth(String(text ?? '')))\n  return Math.min(240, Math.ceil(widest) + 28)\n}\nconst columns = computed<TableColumn[]>(() => {\n  const first = rows.value[0]\n  const list: TableWidgetColumn[] =\n    props.value.columns ?? fieldsOf(rows.value).map((key) => ({ key }))\n  return list.map(({ key, title }) => {\n    const numeric = typeof first?.[key] === 'number'\n    // numbers with digit groups, as in the stat widget\n    const value = numeric\n      ? (row: Record<string, unknown>) =>\n          typeof row[key] === 'number' ? number.format(row[key] as number) : row[key]\n      : undefined\n    const sample = rows.value.slice(0, 20).map((row) => (value ? value(row) : row[key]))\n    const least = minWidthOf(title || key, sample)\n    return {\n      key,\n      title: title || key,\n      align: numeric ? 'end' : undefined,\n      ellipsis: true,\n      // shares of the width follow the contents; never narrower than them\n      width: least,\n      minWidth: least,\n      value,\n    }\n  })\n})\n// the export menu writes the rows as they are, numbers without digit groups\nsetWorkbook(() =>\n  rowsToWorkbook(\n    '',\n    columns.value.map((column) => ({\n      key: column.key as string,\n      title: String(column.title),\n      width: typeof column.width === 'number' ? column.width : undefined,\n    })),\n    rows.value,\n  ),\n)\n</script>\n\n<template>\n  <DouTable\n    ref=\"root\"\n    class=\"dou-dashboard-table\"\n    :bordered=\"false\"\n    :data=\"rows\"\n    :columns=\"columns\"\n    :row-key=\"rowKey\"\n    size=\"sm\"\n    :max-height=\"size.height.value || undefined\"\n    :virtual=\"rows.length > 100\"\n  />\n</template>\n"],"mappings":""}
+{"version":3,"file":"table.js","names":["_sfc_main"],"sources":["../../src/widgets/table.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouTable } from 'dou-ui'\nimport type { TableColumn } from 'dou-ui'\nimport { computed, onMounted, ref } from 'vue'\nimport { useDashboardWidget } from '../widget/context'\nimport { tablePropsOf } from './read-props'\nimport { fieldsOf, rowsToWorkbook, rowsOf } from './shared'\nimport type { TableWidgetColumn } from './types'\n\ndefineOptions({ name: 'DouDashboardTableWidget' })\n\nconst { props: raw, data, size, setWorkbook } = useDashboardWidget()\nconst props = computed(() => tablePropsOf(raw.value))\nconst rows = computed(() => rowsOf(data.value, props.value.path))\n/** Each row's key: its `rowKey` field, or its place in the list. */\nconst keys = computed(() => {\n  const map = new WeakMap<object, string | number>()\n  const field = props.value.rowKey\n  rows.value.forEach((row, index) => map.set(row, field ? (row[field] as string | number) : index))\n  return map\n})\nconst rowKey = (row: Record<string, unknown>) => keys.value.get(row) ?? ''\nconst number = new Intl.NumberFormat()\n/** The table's font, read once it is on the page, to measure texts with. */\nconst root = ref<{ $el: Element }>()\nconst font = ref('')\nonMounted(() => {\n  const cell = root.value?.$el.querySelector('td, th')\n  if (cell) font.value = getComputedStyle(cell).font\n})\nlet context: CanvasRenderingContext2D | null | undefined\n/** How wide a text is in the table's font, or about how wide before it is known. */\nfunction textWidth(text: string) {\n  context ??=\n    typeof document === 'undefined' ? null : document.createElement('canvas').getContext('2d')\n  if (context && font.value) {\n    context.font = font.value\n    return context.measureText(text).width\n  }\n  let width = 0\n  for (const char of text) width += char.charCodeAt(0) > 0x2e7f ? 14 : 8.5\n  return width\n}\n/** Room for the title and the first rows' texts, with the cell's padding; up to 240px. */\nfunction minWidthOf(title: string, texts: unknown[]) {\n  let widest = textWidth(title)\n  for (const text of texts) widest = Math.max(widest, textWidth(String(text ?? '')))\n  return Math.min(240, Math.ceil(widest) + 28)\n}\nconst columns = computed<TableColumn[]>(() => {\n  const first = rows.value[0]\n  const list: TableWidgetColumn[] =\n    props.value.columns ?? fieldsOf(rows.value).map((key) => ({ key }))\n  return list.map(({ key, title }) => {\n    const numeric = typeof first?.[key] === 'number'\n    // numbers with digit groups, as in the stat widget\n    const value = numeric\n      ? (row: Record<string, unknown>) =>\n          typeof row[key] === 'number' ? number.format(row[key] as number) : row[key]\n      : undefined\n    const sample = rows.value.slice(0, 20).map((row) => (value ? value(row) : row[key]))\n    const least = minWidthOf(title || key, sample)\n    return {\n      key,\n      title: title || key,\n      align: numeric ? 'end' : undefined,\n      ellipsis: true,\n      // shares of the width follow the contents; never narrower than them\n      width: least,\n      minWidth: least,\n      value,\n    }\n  })\n})\n// the export menu writes the rows as they are, numbers without digit groups\nsetWorkbook(() =>\n  rowsToWorkbook(\n    '',\n    columns.value.map((column) => ({\n      key: column.key as string,\n      title: String(column.title),\n      width: typeof column.width === 'number' ? column.width : undefined,\n    })),\n    rows.value,\n  ),\n)\n</script>\n\n<template>\n  <DouTable\n    ref=\"root\"\n    class=\"dou-dashboard-table\"\n    :bordered=\"false\"\n    :data=\"rows\"\n    :columns=\"columns\"\n    :row-key=\"rowKey\"\n    size=\"sm\"\n    :max-height=\"size.height.value || undefined\"\n    :virtual=\"rows.length > 100\"\n  />\n</template>\n"],"mappings":""}

package/dist/widgets/table.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,6 @@
 import { useDashboardWidget } from "../widget/context.js";
 import { fieldsOf, rowsOf, rowsToWorkbook } from "./shared.js";
+import { tablePropsOf } from "./read-props.js";
 import { DouTable } from "dou-ui";
 import { computed, createBlock, defineComponent, onMounted, openBlock, ref, unref } from "vue";
 // src/widgets/table.vue?vue&type=script&setup=true&lang.ts
@@ -7,7 +8,8 @@ var table_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 	name: "DouDashboardTableWidget",
 	__name: "table",
 	setup(__props) {
-		const { props, data, size, setWorkbook } = useDashboardWidget();
+		const { props: raw, data, size, setWorkbook } = useDashboardWidget();
+		const props = computed(() => tablePropsOf(raw.value));
 		const rows = computed(() => rowsOf(data.value, props.value.path));
 		/** Each row's key: its `rowKey` field, or its place in the list. */
 		const keys = computed(() => {

package/dist/widgets/table.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref"],"sources":["../../src/widgets/table.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouTable } from 'dou-ui'\nimport type { TableColumn } from 'dou-ui'\nimport { computed, onMounted, ref } from 'vue'\nimport { useDashboardWidget } from '../widget/context'\nimport { fieldsOf, rowsToWorkbook, rowsOf } from './shared'\nimport type { TableWidgetColumn, TableWidgetProps } from './types'\n\ndefineOptions({ name: 'DouDashboardTableWidget' })\n\nconst { props, data, size, setWorkbook } = useDashboardWidget<TableWidgetProps>()\nconst rows = computed(() => rowsOf(data.value, props.value.path))\n/** Each row's key: its `rowKey` field, or its place in the list. */\nconst keys = computed(() => {\n  const map = new WeakMap<object, string | number>()\n  const field = props.value.rowKey\n  rows.value.forEach((row, index) => map.set(row, field ? (row[field] as string | number) : index))\n  return map\n})\nconst rowKey = (row: Record<string, unknown>) => keys.value.get(row) ?? ''\nconst number = new Intl.NumberFormat()\n/** The table's font, read once it is on the page, to measure texts with. */\nconst root = ref<{ $el: Element }>()\nconst font = ref('')\nonMounted(() => {\n  const cell = root.value?.$el.querySelector('td, th')\n  if (cell) font.value = getComputedStyle(cell).font\n})\nlet context: CanvasRenderingContext2D | null | undefined\n/** How wide a text is in the table's font, or about how wide before it is known. */\nfunction textWidth(text: string) {\n  context ??=\n    typeof document === 'undefined' ? null : document.createElement('canvas').getContext('2d')\n  if (context && font.value) {\n    context.font = font.value\n    return context.measureText(text).width\n  }\n  let width = 0\n  for (const char of text) width += char.charCodeAt(0) > 0x2e7f ? 14 : 8.5\n  return width\n}\n/** Room for the title and the first rows' texts, with the cell's padding; up to 240px. */\nfunction minWidthOf(title: string, texts: unknown[]) {\n  let widest = textWidth(title)\n  for (const text of texts) widest = Math.max(widest, textWidth(String(text ?? '')))\n  return Math.min(240, Math.ceil(widest) + 28)\n}\nconst columns = computed<TableColumn[]>(() => {\n  const first = rows.value[0]\n  const list: TableWidgetColumn[] =\n    props.value.columns ?? fieldsOf(rows.value).map((key) => ({ key }))\n  return list.map(({ key, title }) => {\n    const numeric = typeof first?.[key] === 'number'\n    // numbers with digit groups, as in the stat widget\n    const value = numeric\n      ? (row: Record<string, unknown>) =>\n          typeof row[key] === 'number' ? number.format(row[key] as number) : row[key]\n      : undefined\n    const sample = rows.value.slice(0, 20).map((row) => (value ? value(row) : row[key]))\n    const least = minWidthOf(title || key, sample)\n    return {\n      key,\n      title: title || key,\n      align: numeric ? 'end' : undefined,\n      ellipsis: true,\n      // shares of the width follow the contents; never narrower than them\n      width: least,\n      minWidth: least,\n      value,\n    }\n  })\n})\n// the export menu writes the rows as they are, numbers without digit groups\nsetWorkbook(() =>\n  rowsToWorkbook(\n    '',\n    columns.value.map((column) => ({\n      key: column.key as string,\n      title: String(column.title),\n      width: typeof column.width === 'number' ? column.width : undefined,\n    })),\n    rows.value,\n  ),\n)\n</script>\n\n<template>\n  <DouTable\n    ref=\"root\"\n    class=\"dou-dashboard-table\"\n    :bordered=\"false\"\n    :data=\"rows\"\n    :columns=\"columns\"\n    :row-key=\"rowKey\"\n    size=\"sm\"\n    :max-height=\"size.height.value || undefined\"\n    :virtual=\"rows.length > 100\"\n  />\n</template>\n"],"mappings":";;;;;;;;;EAUA,MAAM,EAAE,OAAO,MAAM,MAAM,gBAAgB,mBAAqC;EAChF,MAAM,OAAO,eAAe,OAAO,KAAK,OAAO,MAAM,MAAM,IAAI,CAAC;;EAEhE,MAAM,OAAO,eAAe;GAC1B,MAAM,sBAAM,IAAI,QAAiC;GACjD,MAAM,QAAQ,MAAM,MAAM;GAC1B,KAAK,MAAM,SAAS,KAAK,UAAU,IAAI,IAAI,KAAK,QAAS,IAAI,SAA6B,KAAK,CAAC;GAChG,OAAO;EACT,CAAC;EACD,MAAM,UAAU,QAAiC,KAAK,MAAM,IAAI,GAAG,KAAK;EACxE,MAAM,SAAS,IAAI,KAAK,aAAa;;EAErC,MAAM,OAAO,IAAsB;EACnC,MAAM,OAAO,IAAI,EAAE;EACnB,gBAAgB;GACd,MAAM,OAAO,KAAK,OAAO,IAAI,cAAc,QAAQ;GACnD,IAAI,MAAM,KAAK,QAAQ,iBAAiB,IAAI,CAAC,CAAC;EAChD,CAAC;EACD,IAAI;;EAEJ,SAAS,UAAU,MAAc;GAC/B,YACE,OAAO,aAAa,cAAc,OAAO,SAAS,cAAc,QAAQ,CAAC,CAAC,WAAW,IAAI;GAC3F,IAAI,WAAW,KAAK,OAAO;IACzB,QAAQ,OAAO,KAAK;IACpB,OAAO,QAAQ,YAAY,IAAI,CAAC,CAAC;GACnC;GACA,IAAI,QAAQ;GACZ,KAAK,MAAM,QAAQ,MAAM,SAAS,KAAK,WAAW,CAAC,IAAI,QAAS,KAAK;GACrE,OAAO;EACT;;EAEA,SAAS,WAAW,OAAe,OAAkB;GACnD,IAAI,SAAS,UAAU,KAAK;GAC5B,KAAK,MAAM,QAAQ,OAAO,SAAS,KAAK,IAAI,QAAQ,UAAU,OAAO,QAAQ,EAAE,CAAC,CAAC;GACjF,OAAO,KAAK,IAAI,KAAK,KAAK,KAAK,MAAM,IAAI,EAAE;EAC7C;EACA,MAAM,UAAU,eAA8B;GAC5C,MAAM,QAAQ,KAAK,MAAM;GAGzB,QADE,MAAM,MAAM,WAAW,SAAS,KAAK,KAAK,CAAC,CAAC,KAAK,SAAS,EAAE,IAAI,EAAE,EAAA,CACxD,KAAK,EAAE,KAAK,YAAY;IAClC,MAAM,UAAU,OAAO,QAAQ,SAAS;IAExC,MAAM,QAAQ,WACT,QACC,OAAO,IAAI,SAAS,WAAW,OAAO,OAAO,IAAI,IAAc,IAAI,IAAI,OACzE,KAAA;IACJ,MAAM,SAAS,KAAK,MAAM,MAAM,GAAG,EAAE,CAAC,CAAC,KAAK,QAAS,QAAQ,MAAM,GAAG,IAAI,IAAI,IAAK;IACnF,MAAM,QAAQ,WAAW,SAAS,KAAK,MAAM;IAC7C,OAAO;KACL;KACA,OAAO,SAAS;KAChB,OAAO,UAAU,QAAQ,KAAA;KACzB,UAAU;KAEV,OAAO;KACP,UAAU;KACV;IACF;GACF,CAAC;EACH,CAAC;EAED,kBACE,eACE,IACA,QAAQ,MAAM,KAAK,YAAY;GAC7B,KAAK,OAAO;GACZ,OAAO,OAAO,OAAO,KAAK;GAC1B,OAAO,OAAO,OAAO,UAAU,WAAW,OAAO,QAAQ,KAAA;EAC3D,EAAE,GACF,KAAK,KACP,CACF;;GAIE,OAAAA,UAAA,GAAAC,YAUEC,MAAA,QAAA,GAAA;IATI,SAAA;IAAJ,KAAI;IACJ,OAAM;IACL,UAAU;IACV,MAAM,KAAA;IACN,SAAS,QAAA;IACT,WAAS;IACV,MAAK;IACJ,cAAYA,MAAA,IAAA,CAAI,CAAC,OAAO,SAAS,KAAA;IACjC,SAAS,KAAA,MAAK,SAAM"}
+{"version":3,"file":"table.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref"],"sources":["../../src/widgets/table.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouTable } from 'dou-ui'\nimport type { TableColumn } from 'dou-ui'\nimport { computed, onMounted, ref } from 'vue'\nimport { useDashboardWidget } from '../widget/context'\nimport { tablePropsOf } from './read-props'\nimport { fieldsOf, rowsToWorkbook, rowsOf } from './shared'\nimport type { TableWidgetColumn } from './types'\n\ndefineOptions({ name: 'DouDashboardTableWidget' })\n\nconst { props: raw, data, size, setWorkbook } = useDashboardWidget()\nconst props = computed(() => tablePropsOf(raw.value))\nconst rows = computed(() => rowsOf(data.value, props.value.path))\n/** Each row's key: its `rowKey` field, or its place in the list. */\nconst keys = computed(() => {\n  const map = new WeakMap<object, string | number>()\n  const field = props.value.rowKey\n  rows.value.forEach((row, index) => map.set(row, field ? (row[field] as string | number) : index))\n  return map\n})\nconst rowKey = (row: Record<string, unknown>) => keys.value.get(row) ?? ''\nconst number = new Intl.NumberFormat()\n/** The table's font, read once it is on the page, to measure texts with. */\nconst root = ref<{ $el: Element }>()\nconst font = ref('')\nonMounted(() => {\n  const cell = root.value?.$el.querySelector('td, th')\n  if (cell) font.value = getComputedStyle(cell).font\n})\nlet context: CanvasRenderingContext2D | null | undefined\n/** How wide a text is in the table's font, or about how wide before it is known. */\nfunction textWidth(text: string) {\n  context ??=\n    typeof document === 'undefined' ? null : document.createElement('canvas').getContext('2d')\n  if (context && font.value) {\n    context.font = font.value\n    return context.measureText(text).width\n  }\n  let width = 0\n  for (const char of text) width += char.charCodeAt(0) > 0x2e7f ? 14 : 8.5\n  return width\n}\n/** Room for the title and the first rows' texts, with the cell's padding; up to 240px. */\nfunction minWidthOf(title: string, texts: unknown[]) {\n  let widest = textWidth(title)\n  for (const text of texts) widest = Math.max(widest, textWidth(String(text ?? '')))\n  return Math.min(240, Math.ceil(widest) + 28)\n}\nconst columns = computed<TableColumn[]>(() => {\n  const first = rows.value[0]\n  const list: TableWidgetColumn[] =\n    props.value.columns ?? fieldsOf(rows.value).map((key) => ({ key }))\n  return list.map(({ key, title }) => {\n    const numeric = typeof first?.[key] === 'number'\n    // numbers with digit groups, as in the stat widget\n    const value = numeric\n      ? (row: Record<string, unknown>) =>\n          typeof row[key] === 'number' ? number.format(row[key] as number) : row[key]\n      : undefined\n    const sample = rows.value.slice(0, 20).map((row) => (value ? value(row) : row[key]))\n    const least = minWidthOf(title || key, sample)\n    return {\n      key,\n      title: title || key,\n      align: numeric ? 'end' : undefined,\n      ellipsis: true,\n      // shares of the width follow the contents; never narrower than them\n      width: least,\n      minWidth: least,\n      value,\n    }\n  })\n})\n// the export menu writes the rows as they are, numbers without digit groups\nsetWorkbook(() =>\n  rowsToWorkbook(\n    '',\n    columns.value.map((column) => ({\n      key: column.key as string,\n      title: String(column.title),\n      width: typeof column.width === 'number' ? column.width : undefined,\n    })),\n    rows.value,\n  ),\n)\n</script>\n\n<template>\n  <DouTable\n    ref=\"root\"\n    class=\"dou-dashboard-table\"\n    :bordered=\"false\"\n    :data=\"rows\"\n    :columns=\"columns\"\n    :row-key=\"rowKey\"\n    size=\"sm\"\n    :max-height=\"size.height.value || undefined\"\n    :virtual=\"rows.length > 100\"\n  />\n</template>\n"],"mappings":";;;;;;;;;;EAWA,MAAM,EAAE,OAAO,KAAK,MAAM,MAAM,gBAAgB,mBAAmB;EACnE,MAAM,QAAQ,eAAe,aAAa,IAAI,KAAK,CAAC;EACpD,MAAM,OAAO,eAAe,OAAO,KAAK,OAAO,MAAM,MAAM,IAAI,CAAC;;EAEhE,MAAM,OAAO,eAAe;GAC1B,MAAM,sBAAM,IAAI,QAAiC;GACjD,MAAM,QAAQ,MAAM,MAAM;GAC1B,KAAK,MAAM,SAAS,KAAK,UAAU,IAAI,IAAI,KAAK,QAAS,IAAI,SAA6B,KAAK,CAAC;GAChG,OAAO;EACT,CAAC;EACD,MAAM,UAAU,QAAiC,KAAK,MAAM,IAAI,GAAG,KAAK;EACxE,MAAM,SAAS,IAAI,KAAK,aAAa;;EAErC,MAAM,OAAO,IAAsB;EACnC,MAAM,OAAO,IAAI,EAAE;EACnB,gBAAgB;GACd,MAAM,OAAO,KAAK,OAAO,IAAI,cAAc,QAAQ;GACnD,IAAI,MAAM,KAAK,QAAQ,iBAAiB,IAAI,CAAC,CAAC;EAChD,CAAC;EACD,IAAI;;EAEJ,SAAS,UAAU,MAAc;GAC/B,YACE,OAAO,aAAa,cAAc,OAAO,SAAS,cAAc,QAAQ,CAAC,CAAC,WAAW,IAAI;GAC3F,IAAI,WAAW,KAAK,OAAO;IACzB,QAAQ,OAAO,KAAK;IACpB,OAAO,QAAQ,YAAY,IAAI,CAAC,CAAC;GACnC;GACA,IAAI,QAAQ;GACZ,KAAK,MAAM,QAAQ,MAAM,SAAS,KAAK,WAAW,CAAC,IAAI,QAAS,KAAK;GACrE,OAAO;EACT;;EAEA,SAAS,WAAW,OAAe,OAAkB;GACnD,IAAI,SAAS,UAAU,KAAK;GAC5B,KAAK,MAAM,QAAQ,OAAO,SAAS,KAAK,IAAI,QAAQ,UAAU,OAAO,QAAQ,EAAE,CAAC,CAAC;GACjF,OAAO,KAAK,IAAI,KAAK,KAAK,KAAK,MAAM,IAAI,EAAE;EAC7C;EACA,MAAM,UAAU,eAA8B;GAC5C,MAAM,QAAQ,KAAK,MAAM;GAGzB,QADE,MAAM,MAAM,WAAW,SAAS,KAAK,KAAK,CAAC,CAAC,KAAK,SAAS,EAAE,IAAI,EAAE,EAAA,CACxD,KAAK,EAAE,KAAK,YAAY;IAClC,MAAM,UAAU,OAAO,QAAQ,SAAS;IAExC,MAAM,QAAQ,WACT,QACC,OAAO,IAAI,SAAS,WAAW,OAAO,OAAO,IAAI,IAAc,IAAI,IAAI,OACzE,KAAA;IACJ,MAAM,SAAS,KAAK,MAAM,MAAM,GAAG,EAAE,CAAC,CAAC,KAAK,QAAS,QAAQ,MAAM,GAAG,IAAI,IAAI,IAAK;IACnF,MAAM,QAAQ,WAAW,SAAS,KAAK,MAAM;IAC7C,OAAO;KACL;KACA,OAAO,SAAS;KAChB,OAAO,UAAU,QAAQ,KAAA;KACzB,UAAU;KAEV,OAAO;KACP,UAAU;KACV;IACF;GACF,CAAC;EACH,CAAC;EAED,kBACE,eACE,IACA,QAAQ,MAAM,KAAK,YAAY;GAC7B,KAAK,OAAO;GACZ,OAAO,OAAO,OAAO,KAAK;GAC1B,OAAO,OAAO,OAAO,UAAU,WAAW,OAAO,QAAQ,KAAA;EAC3D,EAAE,GACF,KAAK,KACP,CACF;;GAIE,OAAAA,UAAA,GAAAC,YAUEC,MAAA,QAAA,GAAA;IATI,SAAA;IAAJ,KAAI;IACJ,OAAM;IACL,UAAU;IACV,MAAM,KAAA;IACN,SAAS,QAAA;IACT,WAAS;IACV,MAAK;IACJ,cAAYA,MAAA,IAAA,CAAI,CAAC,OAAO,SAAS,KAAA;IACjC,SAAS,KAAA,MAAK,SAAM"}

package/dist/widgets/text-settings.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-settings.js","names":["_sfc_main"],"sources":["../../src/widgets/text-settings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouSegmentedControl, DouTextarea } from 'dou-ui'\nimport { useDashboardMessages } from '../locale'\nimport SettingsField from './settings-field.vue'\nimport type { TextWidgetProps } from './types'\n\ndefineOptions({ name: 'DouDashboardTextSettings' })\n\nconst model = defineModel<TextWidgetProps>({ required: true })\nconst messages = useDashboardMessages()\nconst set = (patch: Partial<TextWidgetProps>) => (model.value = { ...model.value, ...patch })\n</script>\n\n<template>\n  <div class=\"dou-dashboard__settings\">\n    <SettingsField :label=\"messages.text\">\n      <DouTextarea\n        :model-value=\"model.text ?? ''\"\n        autosize\n        :rows=\"4\"\n        :aria-label=\"messages.text\"\n        @update:model-value=\"(text) => set({ text })\"\n      />\n    </SettingsField>\n    <SettingsField :label=\"messages.textSize\">\n      <DouSegmentedControl\n        :model-value=\"model.size ?? 'md'\"\n        :options=\"[\n          { value: 'sm', label: messages.sizeSmall },\n          { value: 'md', label: messages.sizeMedium },\n          { value: 'lg', label: messages.sizeLarge },\n        ]\"\n        :aria-label=\"messages.textSize\"\n        @update:model-value=\"(size) => set({ size: size as TextWidgetProps['size'] })\"\n      />\n    </SettingsField>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"text-settings.js","names":["_sfc_main"],"sources":["../../src/widgets/text-settings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { DouSegmentedControl, DouTextarea } from 'dou-ui'\nimport { useDashboardMessages } from '../locale'\nimport SettingsField from './settings-field.vue'\nimport type { TextWidgetProps } from './types'\nimport { textPropsOf } from './read-props'\n\ndefineOptions({ name: 'DouDashboardTextSettings' })\n\nconst model = defineModel<TextWidgetProps>({ required: true })\n// the props as saved may have the wrong types: read them as the widget does\nconst view = computed(() => textPropsOf(model.value as Record<string, unknown>))\nconst messages = useDashboardMessages()\nconst set = (patch: Partial<TextWidgetProps>) => (model.value = { ...model.value, ...patch })\n</script>\n\n<template>\n  <div class=\"dou-dashboard__settings\">\n    <SettingsField :label=\"messages.text\">\n      <DouTextarea\n        :model-value=\"view.text ?? ''\"\n        autosize\n        :rows=\"4\"\n        :aria-label=\"messages.text\"\n        @update:model-value=\"(text) => set({ text })\"\n      />\n    </SettingsField>\n    <SettingsField :label=\"messages.textSize\">\n      <DouSegmentedControl\n        :model-value=\"view.size ?? 'md'\"\n        :options=\"[\n          { value: 'sm', label: messages.sizeSmall },\n          { value: 'md', label: messages.sizeMedium },\n          { value: 'lg', label: messages.sizeLarge },\n        ]\"\n        :aria-label=\"messages.textSize\"\n        @update:model-value=\"(size) => set({ size: size as TextWidgetProps['size'] })\"\n      />\n    </SettingsField>\n  </div>\n</template>\n"],"mappings":""}

package/dist/widgets/text-settings.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,8 @@
 import { useDashboardMessages } from "../locale.js";
+import { textPropsOf } from "./read-props.js";
 import settings_field_default from "./settings-field.js";
 import { DouSegmentedControl, DouTextarea } from "dou-ui";
-import { createElementBlock, createVNode, defineComponent, openBlock, unref, useModel, withCtx } from "vue";
+import { computed, createElementBlock, createVNode, defineComponent, openBlock, unref, useModel, withCtx } from "vue";
 // src/widgets/text-settings.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "dou-dashboard__settings" };
 var text_settings_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -14,6 +15,7 @@ var text_settings_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const model = useModel(__props, "modelValue");
+		const view = computed(() => textPropsOf(model.value));
 		const messages = useDashboardMessages();
 		const set = (patch) => model.value = {
 			...model.value,
@@ -22,7 +24,7 @@ var text_settings_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(settings_field_default, { label: unref(messages).text }, {
 				default: withCtx(() => [createVNode(unref(DouTextarea), {
-					"model-value": model.value.text ?? "",
+					"model-value": view.value.text ?? "",
 					autosize: "",
 					rows: 4,
 					"aria-label": unref(messages).text,
@@ -31,7 +33,7 @@ var text_settings_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				_: 1
 			}, 8, ["label"]), createVNode(settings_field_default, { label: unref(messages).textSize }, {
 				default: withCtx(() => [createVNode(unref(DouSegmentedControl), {
-					"model-value": model.value.size ?? "md",
+					"model-value": view.value.size ?? "md",
 					options: [
 						{
 							value: "sm",

package/dist/widgets/text-settings.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-settings.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createVNode","SettingsField","_unref","_withCtx"],"sources":["../../src/widgets/text-settings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouSegmentedControl, DouTextarea } from 'dou-ui'\nimport { useDashboardMessages } from '../locale'\nimport SettingsField from './settings-field.vue'\nimport type { TextWidgetProps } from './types'\n\ndefineOptions({ name: 'DouDashboardTextSettings' })\n\nconst model = defineModel<TextWidgetProps>({ required: true })\nconst messages = useDashboardMessages()\nconst set = (patch: Partial<TextWidgetProps>) => (model.value = { ...model.value, ...patch })\n</script>\n\n<template>\n  <div class=\"dou-dashboard__settings\">\n    <SettingsField :label=\"messages.text\">\n      <DouTextarea\n        :model-value=\"model.text ?? ''\"\n        autosize\n        :rows=\"4\"\n        :aria-label=\"messages.text\"\n        @update:model-value=\"(text) => set({ text })\"\n      />\n    </SettingsField>\n    <SettingsField :label=\"messages.textSize\">\n      <DouSegmentedControl\n        :model-value=\"model.size ?? 'md'\"\n        :options=\"[\n          { value: 'sm', label: messages.sizeSmall },\n          { value: 'md', label: messages.sizeMedium },\n          { value: 'lg', label: messages.sizeLarge },\n        ]\"\n        :aria-label=\"messages.textSize\"\n        @update:model-value=\"(size) => set({ size: size as TextWidgetProps['size'] })\"\n      />\n    </SettingsField>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAQA,MAAM,QAAQA,SAA4B,SAAA,YAAmB;EAC7D,MAAM,WAAW,qBAAqB;EACtC,MAAM,OAAO,UAAqC,MAAM,QAAQ;GAAE,GAAG,MAAM;GAAO,GAAG;EAAM;;GAIzF,OAAAC,UAAA,GAAAC,mBAsBM,OAtBN,YAsBM,CArBJC,YAQgBC,wBAAA,EARA,OAAOC,MAAA,QAAA,CAAQ,CAAC,K;IAC9B,SAAAC,cAME,CANFH,YAMEE,MAAA,WAAA,GAAA;KALC,eAAa,MAAA,MAAM,QAAI;KACxB,UAAA;KACC,MAAM;KACN,cAAYA,MAAA,QAAA,CAAQ,CAAC;KACrB,uBAAkB,OAAA,OAAA,OAAA,MAAG,SAAS,IAAG,EAAG,KAAI,CAAA;;;G,kBAG7CF,YAWgBC,wBAAA,EAXA,OAAOC,MAAA,QAAA,CAAQ,CAAC,S;IAC9B,SAAAC,cASE,CATFH,YASEE,MAAA,mBAAA,GAAA;KARC,eAAa,MAAA,MAAM,QAAI;KACvB,SAAO;MAAoC;OAAA,OAAA;OAAA,OAAAA,MAAA,QAAA,CAAQ,CAAC;MAAS;MAAoC;OAAA,OAAA;OAAA,OAAAA,MAAA,QAAA,CAAQ,CAAC;MAAU;MAAoC;OAAA,OAAA;OAAA,OAAAA,MAAA,QAAA,CAAQ,CAAC;MAAS;;KAK1K,cAAYA,MAAA,QAAA,CAAQ,CAAC;KACrB,uBAAkB,OAAA,OAAA,OAAA,MAAG,SAAS,IAAG,EAAS,KAAI,CAAA"}
+{"version":3,"file":"text-settings.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createVNode","SettingsField","_unref","_withCtx"],"sources":["../../src/widgets/text-settings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { DouSegmentedControl, DouTextarea } from 'dou-ui'\nimport { useDashboardMessages } from '../locale'\nimport SettingsField from './settings-field.vue'\nimport type { TextWidgetProps } from './types'\nimport { textPropsOf } from './read-props'\n\ndefineOptions({ name: 'DouDashboardTextSettings' })\n\nconst model = defineModel<TextWidgetProps>({ required: true })\n// the props as saved may have the wrong types: read them as the widget does\nconst view = computed(() => textPropsOf(model.value as Record<string, unknown>))\nconst messages = useDashboardMessages()\nconst set = (patch: Partial<TextWidgetProps>) => (model.value = { ...model.value, ...patch })\n</script>\n\n<template>\n  <div class=\"dou-dashboard__settings\">\n    <SettingsField :label=\"messages.text\">\n      <DouTextarea\n        :model-value=\"view.text ?? ''\"\n        autosize\n        :rows=\"4\"\n        :aria-label=\"messages.text\"\n        @update:model-value=\"(text) => set({ text })\"\n      />\n    </SettingsField>\n    <SettingsField :label=\"messages.textSize\">\n      <DouSegmentedControl\n        :model-value=\"view.size ?? 'md'\"\n        :options=\"[\n          { value: 'sm', label: messages.sizeSmall },\n          { value: 'md', label: messages.sizeMedium },\n          { value: 'lg', label: messages.sizeLarge },\n        ]\"\n        :aria-label=\"messages.textSize\"\n        @update:model-value=\"(size) => set({ size: size as TextWidgetProps['size'] })\"\n      />\n    </SettingsField>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAUA,MAAM,QAAQA,SAA4B,SAAA,YAAmB;EAE7D,MAAM,OAAO,eAAe,YAAY,MAAM,KAAgC,CAAC;EAC/E,MAAM,WAAW,qBAAqB;EACtC,MAAM,OAAO,UAAqC,MAAM,QAAQ;GAAE,GAAG,MAAM;GAAO,GAAG;EAAM;;GAIzF,OAAAC,UAAA,GAAAC,mBAsBM,OAtBN,YAsBM,CArBJC,YAQgBC,wBAAA,EARA,OAAOC,MAAA,QAAA,CAAQ,CAAC,K;IAC9B,SAAAC,cAME,CANFH,YAMEE,MAAA,WAAA,GAAA;KALC,eAAa,KAAA,MAAK,QAAI;KACvB,UAAA;KACC,MAAM;KACN,cAAYA,MAAA,QAAA,CAAQ,CAAC;KACrB,uBAAkB,OAAA,OAAA,OAAA,MAAG,SAAS,IAAG,EAAG,KAAI,CAAA;;;G,kBAG7CF,YAWgBC,wBAAA,EAXA,OAAOC,MAAA,QAAA,CAAQ,CAAC,S;IAC9B,SAAAC,cASE,CATFH,YASEE,MAAA,mBAAA,GAAA;KARC,eAAa,KAAA,MAAK,QAAI;KACtB,SAAO;MAAoC;OAAA,OAAA;OAAA,OAAAA,MAAA,QAAA,CAAQ,CAAC;MAAS;MAAoC;OAAA,OAAA;OAAA,OAAAA,MAAA,QAAA,CAAQ,CAAC;MAAU;MAAoC;OAAA,OAAA;OAAA,OAAAA,MAAA,QAAA,CAAQ,CAAC;MAAS;;KAK1K,cAAYA,MAAA,QAAA,CAAQ,CAAC;KACrB,uBAAkB,OAAA,OAAA,OAAA,MAAG,SAAS,IAAG,EAAS,KAAI,CAAA"}

package/dist/widgets/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","names":["_sfc_main"],"sources":["../../src/widgets/text.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useDashboardWidget } from '../widget/context'\nimport type { TextWidgetProps } from './types'\n\ndefineOptions({ name: 'DouDashboardTextWidget' })\n\nconst { props } = useDashboardWidget<TextWidgetProps>()\n</script>\n\n<template>\n  <div :class=\"['dou-dashboard-text', `is-${props.size ?? 'md'}`]\">{{ props.text }}</div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"text.js","names":["_sfc_main"],"sources":["../../src/widgets/text.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { useDashboardWidget } from '../widget/context'\nimport { textPropsOf } from './read-props'\n\ndefineOptions({ name: 'DouDashboardTextWidget' })\n\nconst { props: raw } = useDashboardWidget()\nconst props = computed(() => textPropsOf(raw.value))\n</script>\n\n<template>\n  <div :class=\"['dou-dashboard-text', `is-${props.size ?? 'md'}`]\">{{ props.text }}</div>\n</template>\n"],"mappings":""}

package/dist/widgets/text.vue_vue_type_script_setup_true_lang.js

@@ -1,13 +1,15 @@
 import { useDashboardWidget } from "../widget/context.js";
-import { createElementBlock, defineComponent, normalizeClass, openBlock, toDisplayString, unref } from "vue";
+import { textPropsOf } from "./read-props.js";
+import { computed, createElementBlock, defineComponent, normalizeClass, openBlock, toDisplayString } from "vue";
 // src/widgets/text.vue?vue&type=script&setup=true&lang.ts
 var text_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "DouDashboardTextWidget",
 	__name: "text",
 	setup(__props) {
-		const { props } = useDashboardWidget();
+		const { props: raw } = useDashboardWidget();
+		const props = computed(() => textPropsOf(raw.value));
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(["dou-dashboard-text", `is-${unref(props).size ?? "md"}`]) }, toDisplayString(unref(props).text), 3);
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["dou-dashboard-text", `is-${props.value.size ?? "md"}`]) }, toDisplayString(props.value.text), 3);
 		};
 	}
 });

package/dist/widgets/text.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_toDisplayString"],"sources":["../../src/widgets/text.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useDashboardWidget } from '../widget/context'\nimport type { TextWidgetProps } from './types'\n\ndefineOptions({ name: 'DouDashboardTextWidget' })\n\nconst { props } = useDashboardWidget<TextWidgetProps>()\n</script>\n\n<template>\n  <div :class=\"['dou-dashboard-text', `is-${props.size ?? 'md'}`]\">{{ props.text }}</div>\n</template>\n"],"mappings":";;;;;;;EAMA,MAAM,EAAE,UAAU,mBAAoC;;GAIpD,OAAAA,UAAA,GAAAC,mBAAuF,OAAA,EAAjF,OAAKC,eAAA,CAAA,sBAAA,MAA+BC,MAAA,KAAA,CAAK,CAAC,QAAI,MAAA,CAAA,EAAgB,GAAAC,gBAAAD,MAAA,KAAA,CAAK,CAAC,IAAI,GAAA,CAAA"}
+{"version":3,"file":"text.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_toDisplayString"],"sources":["../../src/widgets/text.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { useDashboardWidget } from '../widget/context'\nimport { textPropsOf } from './read-props'\n\ndefineOptions({ name: 'DouDashboardTextWidget' })\n\nconst { props: raw } = useDashboardWidget()\nconst props = computed(() => textPropsOf(raw.value))\n</script>\n\n<template>\n  <div :class=\"['dou-dashboard-text', `is-${props.size ?? 'md'}`]\">{{ props.text }}</div>\n</template>\n"],"mappings":";;;;;;;;EAOA,MAAM,EAAE,OAAO,QAAQ,mBAAmB;EAC1C,MAAM,QAAQ,eAAe,YAAY,IAAI,KAAK,CAAC;;GAIjD,OAAAA,UAAA,GAAAC,mBAAuF,OAAA,EAAjF,OAAKC,eAAA,CAAA,sBAAA,MAA+B,MAAA,MAAM,QAAI,MAAA,CAAA,EAAgB,GAAAC,gBAAA,MAAA,MAAM,IAAI,GAAA,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dou-ui/dashboard",
-  "version": "0.1.0-alpha.4",
+  "version": "0.1.0-alpha.5",
   "description": "DouUI 的仪表盘：可拖动、可缩放的网格布局与仪表盘设计器",
   "keywords": [
     "vue",
@@ -67,9 +67,9 @@
     "build": "vite build && vue-tsc -p tsconfig.build.json && bun scripts/build-style.ts"
   },
   "peerDependencies": {
-    "@dou-ui/chart": "0.1.0-alpha.4",
-    "@dou-ui/pivot": "0.1.0-alpha.4",
-    "dou-ui": "0.1.0-alpha.4",
+    "@dou-ui/chart": "0.1.0-alpha.5",
+    "@dou-ui/pivot": "0.1.0-alpha.5",
+    "dou-ui": "0.1.0-alpha.5",
     "vue": "^3.5.0",
     "yjs": "^13.6.0"
   },
@@ -85,12 +85,12 @@
     }
   },
   "dependencies": {
-    "@dou-ui/icons": "0.1.0-alpha.4",
-    "@dou-ui/sheet": "0.1.0-alpha.4"
+    "@dou-ui/icons": "0.1.0-alpha.5",
+    "@dou-ui/sheet": "0.1.0-alpha.5"
   },
   "devDependencies": {
-    "@dou-ui/chart": "0.1.0-alpha.4",
-    "@dou-ui/pivot": "0.1.0-alpha.4",
+    "@dou-ui/chart": "0.1.0-alpha.5",
+    "@dou-ui/pivot": "0.1.0-alpha.5",
     "y-protocols": "^1.0.7",
     "yjs": "^13.6.33"
   },