@dou-ui/sheet 0.0.0-stage → 0.1.0-alpha.1

package/dist/components/format-list.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,187 @@
+import { ruleRangeText } from "../core/conditional.js";
+import { format } from "../locale.js";
+import { formatSample } from "./format-presets.js";
+import { DouButton, DouDialog, DouTooltip } from "dou-ui";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, normalizeStyle, openBlock, renderList, toDisplayString, unref, useId, useModel, withCtx } from "vue";
+import { ArrowDownIcon, ArrowUpIcon, PencilIcon, TrashIcon } from "@dou-ui/icons";
+// src/components/format-list.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "dou-sheet-formats__empty"
+};
+var _hoisted_2 = {
+	key: 1,
+	class: "dou-sheet-formats"
+};
+var _hoisted_3 = { class: "dou-sheet-formats__what" };
+var _hoisted_4 = ["id"];
+var _hoisted_5 = { class: "dou-sheet-formats__range" };
+var _hoisted_6 = { class: "dou-sheet-formats__actions" };
+var format_list_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "format-list",
+	props: /*@__PURE__*/ mergeModels({
+		formats: {},
+		styles: {},
+		messages: {}
+	}, {
+		"open": {
+			type: Boolean,
+			required: true
+		},
+		"openModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
+		"change",
+		"edit",
+		"closed"
+	], ["update:open"]),
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const open = useModel(__props, "open");
+		const emit = __emit;
+		const m = computed(() => props.messages.formats);
+		const uid = useId();
+		const text = (value) => typeof value === "string" ? `“${value}”` : String(value ?? "");
+		/** What a format checks, in words. */
+		function describe(f) {
+			const d = m.value.describe;
+			if ("when" in f) {
+				const { op, value, to } = f.when;
+				return format(op === "between" || op === "notBetween" ? d.between : d.when, {
+					op: props.messages.ops[op],
+					value: text(value),
+					to: text(to)
+				}).trim();
+			}
+			if ("formula" in f) return format(d.formula, { formula: f.formula });
+			if ("top" in f && f.top != null) return format(f.percent ? d.topPercent : d.top, { count: f.top });
+			if ("bottom" in f && f.bottom != null) return format(f.percent ? d.bottomPercent : d.bottom, { count: f.bottom });
+			if ("average" in f) return f.average === "above" ? d.above : d.below;
+			if ("duplicates" in f) return d.repeated;
+			if ("unique" in f) return d.unique;
+			if ("scale" in f) return d.scale;
+			return d.bar;
+		}
+		const sample = (f) => formatSample(f, props.styles);
+		function move(index, by) {
+			const list = [...props.formats];
+			const [item] = list.splice(index, 1);
+			list.splice(index + by, 0, item);
+			emit("change", list);
+		}
+		function remove(index) {
+			emit("change", props.formats.filter((_, i) => i !== index));
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DouDialog), {
+				open: open.value,
+				"onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
+				title: m.value.title,
+				width: 520,
+				onClosed: _cache[1] || (_cache[1] = ($event) => emit("closed"))
+			}, {
+				footer: withCtx(({ close }) => [createVNode(unref(DouButton), {
+					variant: "outline",
+					onClick: close
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(m.value.close), 1)]),
+					_: 2
+				}, 1032, ["onClick"])]),
+				default: withCtx(() => [!__props.formats.length ? (openBlock(), createElementBlock("p", _hoisted_1, toDisplayString(m.value.empty), 1)) : (openBlock(), createElementBlock("ol", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.formats, (f, i) => {
+					return openBlock(), createElementBlock("li", {
+						key: i,
+						class: "dou-sheet-formats__item"
+					}, [
+						createElementVNode("span", {
+							class: normalizeClass(["dou-sheet-format__sample", sample(f).cls]),
+							style: normalizeStyle(sample(f).css),
+							"aria-hidden": "true"
+						}, "123", 6),
+						createElementVNode("span", _hoisted_3, [createElementVNode("span", {
+							id: `${unref(uid)}-${i}`,
+							class: "dou-sheet-formats__rule"
+						}, toDisplayString(describe(f)), 9, _hoisted_4), createElementVNode("span", _hoisted_5, toDisplayString(unref(ruleRangeText)(f.range)), 1)]),
+						createElementVNode("span", _hoisted_6, [
+							createVNode(unref(DouTooltip), { content: m.value.edit }, {
+								default: withCtx(() => [createVNode(unref(DouButton), {
+									variant: "ghost",
+									size: "sm",
+									"aria-label": m.value.edit,
+									"aria-describedby": `${unref(uid)}-${i}`,
+									onClick: ($event) => emit("edit", i)
+								}, {
+									default: withCtx(() => [createVNode(unref(PencilIcon))]),
+									_: 1
+								}, 8, [
+									"aria-label",
+									"aria-describedby",
+									"onClick"
+								])]),
+								_: 2
+							}, 1032, ["content"]),
+							createVNode(unref(DouTooltip), { content: m.value.moveUp }, {
+								default: withCtx(() => [createVNode(unref(DouButton), {
+									variant: "ghost",
+									size: "sm",
+									"aria-label": m.value.moveUp,
+									"aria-describedby": `${unref(uid)}-${i}`,
+									disabled: i === 0,
+									onClick: ($event) => move(i, -1)
+								}, {
+									default: withCtx(() => [createVNode(unref(ArrowUpIcon))]),
+									_: 1
+								}, 8, [
+									"aria-label",
+									"aria-describedby",
+									"disabled",
+									"onClick"
+								])]),
+								_: 2
+							}, 1032, ["content"]),
+							createVNode(unref(DouTooltip), { content: m.value.moveDown }, {
+								default: withCtx(() => [createVNode(unref(DouButton), {
+									variant: "ghost",
+									size: "sm",
+									"aria-label": m.value.moveDown,
+									"aria-describedby": `${unref(uid)}-${i}`,
+									disabled: i === __props.formats.length - 1,
+									onClick: ($event) => move(i, 1)
+								}, {
+									default: withCtx(() => [createVNode(unref(ArrowDownIcon))]),
+									_: 1
+								}, 8, [
+									"aria-label",
+									"aria-describedby",
+									"disabled",
+									"onClick"
+								])]),
+								_: 2
+							}, 1032, ["content"]),
+							createVNode(unref(DouTooltip), { content: m.value.remove }, {
+								default: withCtx(() => [createVNode(unref(DouButton), {
+									variant: "ghost",
+									size: "sm",
+									"aria-label": m.value.remove,
+									"aria-describedby": `${unref(uid)}-${i}`,
+									onClick: ($event) => remove(i)
+								}, {
+									default: withCtx(() => [createVNode(unref(TrashIcon))]),
+									_: 1
+								}, 8, [
+									"aria-label",
+									"aria-describedby",
+									"onClick"
+								])]),
+								_: 2
+							}, 1032, ["content"])
+						])
+					]);
+				}), 128))]))]),
+				_: 1
+			}, 8, ["open", "title"]);
+		};
+	}
+});
+export { format_list_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=format-list.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/format-list.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-list.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_createTextVNode","_toDisplayString","_createElementBlock","_Fragment","_renderList","_createElementVNode","_normalizeClass","_normalizeStyle"],"sources":["../../src/components/format-list.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ArrowDownIcon, ArrowUpIcon, PencilIcon, TrashIcon } from '@dou-ui/icons'\nimport { DouButton, DouDialog, DouTooltip } from 'dou-ui'\nimport { computed, useId } from 'vue'\nimport { ruleRangeText } from '../core/conditional'\nimport type { SheetConditionalFormat, SheetStyle, SheetValue } from '../core/model'\nimport { format, type SheetMessages } from '../locale'\nimport { formatSample } from './format-presets'\n\n/*\n * The conditional formats of the sheet shown, in the order they apply:\n * what each checks, its cells and how they look, to edit, reorder or delete.\n */\n\nconst props = defineProps<{\n  formats: readonly SheetConditionalFormat[]\n  /** The workbook's named styles, for formats that name one. */\n  styles: Record<string, SheetStyle> | undefined\n  messages: SheetMessages\n}>()\nconst open = defineModel<boolean>('open', { required: true })\nconst emit = defineEmits<{\n  change: [formats: SheetConditionalFormat[]]\n  /** Asks to edit the format at `index`. */\n  edit: [index: number]\n  closed: []\n}>()\n\nconst m = computed(() => props.messages.formats)\nconst uid = useId()\n\nconst text = (value: SheetValue | undefined) =>\n  typeof value === 'string' ? `“${value}”` : String(value ?? '')\n\n/** What a format checks, in words. */\nfunction describe(f: SheetConditionalFormat) {\n  const d = m.value.describe\n  if ('when' in f) {\n    const { op, value, to } = f.when\n    const between = op === 'between' || op === 'notBetween'\n    return format(between ? d.between : d.when, {\n      op: props.messages.ops[op],\n      value: text(value),\n      to: text(to),\n    }).trim()\n  }\n  if ('formula' in f) return format(d.formula, { formula: f.formula })\n  if ('top' in f && f.top != null) return format(f.percent ? d.topPercent : d.top, { count: f.top })\n  if ('bottom' in f && f.bottom != null)\n    return format(f.percent ? d.bottomPercent : d.bottom, { count: f.bottom })\n  if ('average' in f) return f.average === 'above' ? d.above : d.below\n  if ('duplicates' in f) return d.repeated\n  if ('unique' in f) return d.unique\n  if ('scale' in f) return d.scale\n  return d.bar\n}\n\nconst sample = (f: SheetConditionalFormat) => formatSample(f, props.styles)\n\nfunction move(index: number, by: number) {\n  const list = [...props.formats]\n  const [item] = list.splice(index, 1)\n  list.splice(index + by, 0, item!)\n  emit('change', list)\n}\nfunction remove(index: number) {\n  emit(\n    'change',\n    props.formats.filter((_, i) => i !== index),\n  )\n}\n</script>\n\n<template>\n  <DouDialog v-model:open=\"open\" :title=\"m.title\" :width=\"520\" @closed=\"emit('closed')\">\n    <p v-if=\"!formats.length\" class=\"dou-sheet-formats__empty\">{{ m.empty }}</p>\n    <ol v-else class=\"dou-sheet-formats\">\n      <li v-for=\"(f, i) in formats\" :key=\"i\" class=\"dou-sheet-formats__item\">\n        <span\n          class=\"dou-sheet-format__sample\"\n          :class=\"sample(f).cls\"\n          :style=\"sample(f).css\"\n          aria-hidden=\"true\"\n          >123</span\n        >\n        <span class=\"dou-sheet-formats__what\">\n          <span :id=\"`${uid}-${i}`\" class=\"dou-sheet-formats__rule\">{{ describe(f) }}</span>\n          <span class=\"dou-sheet-formats__range\">{{ ruleRangeText(f.range) }}</span>\n        </span>\n        <span class=\"dou-sheet-formats__actions\">\n          <DouTooltip :content=\"m.edit\">\n            <DouButton\n              variant=\"ghost\"\n              size=\"sm\"\n              :aria-label=\"m.edit\"\n              :aria-describedby=\"`${uid}-${i}`\"\n              @click=\"emit('edit', i)\"\n            >\n              <PencilIcon />\n            </DouButton>\n          </DouTooltip>\n          <DouTooltip :content=\"m.moveUp\">\n            <DouButton\n              variant=\"ghost\"\n              size=\"sm\"\n              :aria-label=\"m.moveUp\"\n              :aria-describedby=\"`${uid}-${i}`\"\n              :disabled=\"i === 0\"\n              @click=\"move(i, -1)\"\n            >\n              <ArrowUpIcon />\n            </DouButton>\n          </DouTooltip>\n          <DouTooltip :content=\"m.moveDown\">\n            <DouButton\n              variant=\"ghost\"\n              size=\"sm\"\n              :aria-label=\"m.moveDown\"\n              :aria-describedby=\"`${uid}-${i}`\"\n              :disabled=\"i === formats.length - 1\"\n              @click=\"move(i, 1)\"\n            >\n              <ArrowDownIcon />\n            </DouButton>\n          </DouTooltip>\n          <DouTooltip :content=\"m.remove\">\n            <DouButton\n              variant=\"ghost\"\n              size=\"sm\"\n              :aria-label=\"m.remove\"\n              :aria-describedby=\"`${uid}-${i}`\"\n              @click=\"remove(i)\"\n            >\n              <TrashIcon />\n            </DouButton>\n          </DouTooltip>\n        </span>\n      </li>\n    </ol>\n    <template #footer=\"{ close }\">\n      <DouButton variant=\"outline\" @click=\"close\">{{ m.close }}</DouButton>\n    </template>\n  </DouDialog>\n</template>\n"],"mappings":"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"}

package/dist/components/format-presets.js

@@ -0,0 +1,97 @@
+import { barColor, fillColor } from "../core/conditional.js";
+// src/components/format-presets.ts
+var TONES = [
+	"neutral",
+	"primary",
+	"success",
+	"warning",
+	"danger"
+];
+var LOOKS = {
+	danger: {
+		fill: "danger",
+		tone: "danger"
+	},
+	warning: {
+		fill: "warning",
+		tone: "warning"
+	},
+	success: {
+		fill: "success",
+		tone: "success"
+	},
+	dangerText: { tone: "danger" },
+	bold: { bold: true },
+	neutral: { fill: "neutral" }
+};
+var SCALES = {
+	rag: [
+		"danger",
+		"warning",
+		"success"
+	],
+	gar: [
+		"success",
+		"warning",
+		"danger"
+	],
+	diverging: [
+		"danger",
+		"neutral",
+		"success"
+	],
+	blue: ["neutral", "primary"]
+};
+/** The message key of a tone's name. */
+var toneKey = (tone) => `tone${tone[0].toUpperCase()}${tone.slice(1)}`;
+var scaleSwatch = (colors) => `linear-gradient(to right, ${colors.map(fillColor).join(", ")})`;
+/** A data bar color as a chip; it fills its box so it sits centered like the scale swatches. */
+var barSwatch = (color) => `linear-gradient(${barColor(color)}, ${barColor(color)})`;
+/** Whether two styles set the same parts the same way. */
+function sameStyle(a, b) {
+	const keys = /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)]);
+	for (const key of keys) if ((a[key] ?? void 0) !== (b[key] ?? void 0)) return false;
+	return true;
+}
+/** The preset a style is, if any. */
+function lookName(style) {
+	return Object.keys(LOOKS).find((name) => sameStyle(LOOKS[name], style));
+}
+/** The preset some scale colors are, if any. */
+function scaleName(colors) {
+	return Object.keys(SCALES).find((name) => SCALES[name].length === colors.length && SCALES[name].every((c, i) => c === colors[i]));
+}
+/** How a sample `123` of a look shows: its classes and inline style. */
+function styleSample(style) {
+	if (!style) return {
+		cls: [],
+		css: ""
+	};
+	let css = "";
+	if (style.color) css += `color:${style.color};`;
+	if (style.background) css += `background-color:${style.background};`;
+	return {
+		cls: [
+			!style.color && style.tone ? `is-tone-${style.tone}` : "",
+			!style.background && style.fill ? `is-fill-${style.fill}` : "",
+			style.bold ? "is-bold" : "",
+			style.italic ? "is-italic" : ""
+		].filter(Boolean),
+		css
+	};
+}
+/** How the sample of a format shows. */
+function formatSample(f, styles) {
+	if ("scale" in f) return {
+		cls: [],
+		css: `background-image:${scaleSwatch(f.scale)}`
+	};
+	if ("bar" in f) return {
+		cls: ["is-cell-bar"],
+		css: `background-image:linear-gradient(to right, ${barColor(f.bar === true ? "neutral" : f.bar)} 70%, transparent 70%)`
+	};
+	return styleSample(typeof f.style === "string" ? styles?.[f.style] : f.style);
+}
+export { LOOKS, SCALES, TONES, barSwatch, formatSample, lookName, sameStyle, scaleName, scaleSwatch, styleSample, toneKey };
+
+//# sourceMappingURL=format-presets.js.map

package/dist/components/format-presets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-presets.js","names":[],"sources":["../../src/components/format-presets.ts"],"sourcesContent":["import type { Tone } from 'dou-ui'\nimport { barColor, fillColor } from '../core/conditional'\nimport type { SheetColor, SheetConditionalFormat, SheetStyle } from '../core/model'\nimport type { SheetMessages } from '../locale'\n\n/*\n * What the toolbar's menus and the conditional format dialogs offer: the\n * looks, scales and bar colors, and how a sample of each is drawn.\n */\n\nexport const TONES: Tone[] = ['neutral', 'primary', 'success', 'warning', 'danger']\n\nexport type SheetLookName = keyof SheetMessages['formats']['looks']\n\nexport const LOOKS: Record<SheetLookName, SheetStyle> = {\n  danger: { fill: 'danger', tone: 'danger' },\n  warning: { fill: 'warning', tone: 'warning' },\n  success: { fill: 'success', tone: 'success' },\n  dangerText: { tone: 'danger' },\n  bold: { bold: true },\n  neutral: { fill: 'neutral' },\n}\n\nexport type SheetScaleName = keyof SheetMessages['formats']['scales']\nexport type SheetScaleColors = [SheetColor, SheetColor] | [SheetColor, SheetColor, SheetColor]\n\nexport const SCALES: Record<SheetScaleName, SheetScaleColors> = {\n  rag: ['danger', 'warning', 'success'],\n  gar: ['success', 'warning', 'danger'],\n  diverging: ['danger', 'neutral', 'success'],\n  blue: ['neutral', 'primary'],\n}\n\n/** The message key of a tone's name. */\nexport const toneKey = (tone: Tone) =>\n  `tone${tone[0]!.toUpperCase()}${tone.slice(1)}` as `tone${Capitalize<Tone>}`\n\nexport const scaleSwatch = (colors: readonly SheetColor[]) =>\n  `linear-gradient(to right, ${colors.map(fillColor).join(', ')})`\n/** A data bar color as a chip; it fills its box so it sits centered like the scale swatches. */\nexport const barSwatch = (color: SheetColor) =>\n  `linear-gradient(${barColor(color)}, ${barColor(color)})`\n\n/** Whether two styles set the same parts the same way. */\nexport function sameStyle(a: SheetStyle, b: SheetStyle) {\n  const keys = new Set([...Object.keys(a), ...Object.keys(b)]) as Set<keyof SheetStyle>\n  for (const key of keys) if ((a[key] ?? undefined) !== (b[key] ?? undefined)) return false\n  return true\n}\n\n/** The preset a style is, if any. */\nexport function lookName(style: SheetStyle): SheetLookName | undefined {\n  return (Object.keys(LOOKS) as SheetLookName[]).find((name) => sameStyle(LOOKS[name], style))\n}\n\n/** The preset some scale colors are, if any. */\nexport function scaleName(colors: readonly SheetColor[]): SheetScaleName | undefined {\n  return (Object.keys(SCALES) as SheetScaleName[]).find(\n    (name) =>\n      SCALES[name].length === colors.length && SCALES[name].every((c, i) => c === colors[i]),\n  )\n}\n\n/** How a sample `123` of a look shows: its classes and inline style. */\nexport function styleSample(style: SheetStyle | undefined): { cls: string[]; css: string } {\n  if (!style) return { cls: [], css: '' }\n  let css = ''\n  if (style.color) css += `color:${style.color};`\n  if (style.background) css += `background-color:${style.background};`\n  return {\n    cls: [\n      !style.color && style.tone ? `is-tone-${style.tone}` : '',\n      !style.background && style.fill ? `is-fill-${style.fill}` : '',\n      style.bold ? 'is-bold' : '',\n      style.italic ? 'is-italic' : '',\n    ].filter(Boolean),\n    css,\n  }\n}\n\n/** How the sample of a format shows. */\nexport function formatSample(\n  f: SheetConditionalFormat,\n  styles: Record<string, SheetStyle> | undefined,\n): { cls: string[]; css: string } {\n  if ('scale' in f) return { cls: [], css: `background-image:${scaleSwatch(f.scale)}` }\n  if ('bar' in f) {\n    // like the bar on a cell: from the start, behind the number\n    const color = barColor(f.bar === true ? 'neutral' : f.bar)\n    return {\n      cls: ['is-cell-bar'],\n      css: `background-image:linear-gradient(to right, ${color} 70%, transparent 70%)`,\n    }\n  }\n  return styleSample(typeof f.style === 'string' ? styles?.[f.style] : f.style)\n}\n"],"mappings":";;AAUA,IAAa,QAAgB;CAAC;CAAW;CAAW;CAAW;CAAW;AAAQ;AAIlF,IAAa,QAA2C;CACtD,QAAQ;EAAE,MAAM;EAAU,MAAM;CAAS;CACzC,SAAS;EAAE,MAAM;EAAW,MAAM;CAAU;CAC5C,SAAS;EAAE,MAAM;EAAW,MAAM;CAAU;CAC5C,YAAY,EAAE,MAAM,SAAS;CAC7B,MAAM,EAAE,MAAM,KAAK;CACnB,SAAS,EAAE,MAAM,UAAU;AAC7B;AAKA,IAAa,SAAmD;CAC9D,KAAK;EAAC;EAAU;EAAW;CAAS;CACpC,KAAK;EAAC;EAAW;EAAW;CAAQ;CACpC,WAAW;EAAC;EAAU;EAAW;CAAS;CAC1C,MAAM,CAAC,WAAW,SAAS;AAC7B;;AAGA,IAAa,WAAW,SACtB,OAAO,KAAK,EAAE,CAAE,YAAY,IAAI,KAAK,MAAM,CAAC;AAE9C,IAAa,eAAe,WAC1B,6BAA6B,OAAO,IAAI,SAAS,CAAC,CAAC,KAAK,IAAI,EAAE;;AAEhE,IAAa,aAAa,UACxB,mBAAmB,SAAS,KAAK,EAAE,IAAI,SAAS,KAAK,EAAE;;AAGzD,SAAgB,UAAU,GAAe,GAAe;CACtD,MAAM,uBAAO,IAAI,IAAI,CAAC,GAAG,OAAO,KAAK,CAAC,GAAG,GAAG,OAAO,KAAK,CAAC,CAAC,CAAC;CAC3D,KAAK,MAAM,OAAO,MAAM,KAAK,EAAE,QAAQ,KAAA,QAAgB,EAAE,QAAQ,KAAA,IAAY,OAAO;CACpF,OAAO;AACT;;AAGA,SAAgB,SAAS,OAA8C;CACrE,OAAQ,OAAO,KAAK,KAAK,CAAC,CAAqB,MAAM,SAAS,UAAU,MAAM,OAAO,KAAK,CAAC;AAC7F;;AAGA,SAAgB,UAAU,QAA2D;CACnF,OAAQ,OAAO,KAAK,MAAM,CAAC,CAAsB,MAC9C,SACC,OAAO,KAAK,CAAC,WAAW,OAAO,UAAU,OAAO,KAAK,CAAC,OAAO,GAAG,MAAM,MAAM,OAAO,EAAE,CACzF;AACF;;AAGA,SAAgB,YAAY,OAA+D;CACzF,IAAI,CAAC,OAAO,OAAO;EAAE,KAAK,CAAC;EAAG,KAAK;CAAG;CACtC,IAAI,MAAM;CACV,IAAI,MAAM,OAAO,OAAO,SAAS,MAAM,MAAM;CAC7C,IAAI,MAAM,YAAY,OAAO,oBAAoB,MAAM,WAAW;CAClE,OAAO;EACL,KAAK;GACH,CAAC,MAAM,SAAS,MAAM,OAAO,WAAW,MAAM,SAAS;GACvD,CAAC,MAAM,cAAc,MAAM,OAAO,WAAW,MAAM,SAAS;GAC5D,MAAM,OAAO,YAAY;GACzB,MAAM,SAAS,cAAc;EAC/B,CAAC,CAAC,OAAO,OAAO;EAChB;CACF;AACF;;AAGA,SAAgB,aACd,GACA,QACgC;CAChC,IAAI,WAAW,GAAG,OAAO;EAAE,KAAK,CAAC;EAAG,KAAK,oBAAoB,YAAY,EAAE,KAAK;CAAI;CACpF,IAAI,SAAS,GAGX,OAAO;EACL,KAAK,CAAC,aAAa;EACnB,KAAK,8CAHO,SAAS,EAAE,QAAQ,OAAO,YAAY,EAAE,GAGD,EAAM;CAC3D;CAEF,OAAO,YAAY,OAAO,EAAE,UAAU,WAAW,SAAS,EAAE,SAAS,EAAE,KAAK;AAC9E"}

package/dist/components/option-panel.js

@@ -0,0 +1,6 @@
+import option_panel_vue_vue_type_script_setup_true_lang_default from "./option-panel.vue_vue_type_script_setup_true_lang.js";
+// src/components/option-panel.vue
+var option_panel_default = option_panel_vue_vue_type_script_setup_true_lang_default;
+export { option_panel_default as default };
+
+//# sourceMappingURL=option-panel.js.map

package/dist/components/option-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-panel.js","names":["_sfc_main"],"sources":["../../src/components/option-panel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CheckIcon } from '@dou-ui/icons'\nimport { computed, nextTick, shallowRef, useId, watch } from 'vue'\nimport { optionOf, type SheetCellPanelProps } from '../core/cell-type'\nimport { formatValue, inputText } from '../core/format'\nimport type { SheetValue } from '../core/model'\nimport { useSheet } from '../context'\n\nconst props = defineProps<SheetCellPanelProps>()\nconst emit = defineEmits<{ pick: [value: SheetValue] }>()\nconst { messages } = useSheet()\nconst id = `dou-sheet-options-${useId()}`\n\nconst all = computed(() =>\n  (props.setup.options ?? []).map((option) => {\n    const { value, tone } = optionOf(option)\n    return { value, tone, label: formatValue(value) }\n  }),\n)\n/** The options that start with (or contain) what was typed; all of them until something is. */\nconst options = computed(() => {\n  const query = props.typed ? props.text.trim().toLowerCase() : ''\n  if (!query) return all.value\n  const starts = all.value.filter((o) => o.label.toLowerCase().startsWith(query))\n  const contains = all.value.filter(\n    (o) => !starts.includes(o) && o.label.toLowerCase().includes(query),\n  )\n  return [...starts, ...contains]\n})\n\nconst active = shallowRef(-1)\nwatch(\n  options,\n  (list) => {\n    const current = list.findIndex((o) => o.value === props.value)\n    active.value = props.typed ? (list.length ? 0 : -1) : current\n  },\n  { immediate: true },\n)\nwatch(active, (index) => {\n  void nextTick(() =>\n    document.getElementById(`${id}-${index}`)?.scrollIntoView({ block: 'nearest' }),\n  )\n})\n\nfunction onKey(event: KeyboardEvent) {\n  const count = options.value.length\n  if (!count || event.altKey || event.ctrlKey || event.metaKey) return false\n  switch (event.key) {\n    case 'ArrowDown':\n    case 'ArrowUp': {\n      const step = event.key === 'ArrowDown' ? 1 : -1\n      active.value =\n        active.value < 0 ? (step > 0 ? 0 : count - 1) : (active.value + step + count) % count\n      return true\n    }\n    case 'Enter':\n    case 'Tab': {\n      const option = options.value[active.value]\n      // with nothing picked, Enter writes what was typed\n      if (!option || (!props.typed && option.value === props.value)) return false\n      emit('pick', option.value)\n      return true\n    }\n    default:\n      return false\n  }\n}\n\ndefineExpose({\n  onKey,\n  activeId: computed(() => (active.value >= 0 ? `${id}-${active.value}` : null)),\n})\n</script>\n\n<template>\n  <div :id=\"id\" class=\"dou-sheet__options\" role=\"listbox\" :aria-label=\"messages.options\">\n    <div\n      v-for=\"(option, index) in options\"\n      :id=\"`${id}-${index}`\"\n      :key=\"inputText(option.value)\"\n      role=\"option\"\n      class=\"dou-dropdown__item dou-sheet__option\"\n      :class=\"{ 'is-active': index === active }\"\n      :aria-selected=\"option.value === value\"\n      @pointermove=\"active = index\"\n      @click=\"emit('pick', option.value)\"\n    >\n      <span v-if=\"setup.plain\" class=\"dou-sheet__option-text\">{{ option.label }}</span>\n      <span\n        v-else\n        class=\"dou-tag dou-tag--soft dou-sheet__tag\"\n        :class=\"option.tone && option.tone !== 'neutral' ? `dou-tag--${option.tone}` : 'is-neutral'\"\n        >{{ option.label }}</span\n      >\n      <CheckIcon v-if=\"option.value === value\" class=\"dou-sheet__option-check\" />\n    </div>\n    <div v-if=\"!options.length\" class=\"dou-sheet__options-empty\">{{ messages.noOptions }}</div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/option-panel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,117 @@
+import { formatValue, inputText } from "../core/format.js";
+import { optionOf } from "../core/cell-type.js";
+import { useSheet } from "../context.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, defineComponent, nextTick, normalizeClass, openBlock, renderList, shallowRef, toDisplayString, unref, useId, watch } from "vue";
+import { CheckIcon } from "@dou-ui/icons";
+// src/components/option-panel.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = [
+	"id",
+	"aria-selected",
+	"onPointermove",
+	"onClick"
+];
+var _hoisted_3 = {
+	key: 0,
+	class: "dou-sheet__option-text"
+};
+var _hoisted_4 = {
+	key: 0,
+	class: "dou-sheet__options-empty"
+};
+var option_panel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "option-panel",
+	props: {
+		value: { type: [
+			String,
+			Number,
+			Boolean,
+			null
+		] },
+		text: {},
+		typed: { type: Boolean },
+		setup: {}
+	},
+	emits: ["pick"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { messages } = useSheet();
+		const id = `dou-sheet-options-${useId()}`;
+		const all = computed(() => (props.setup.options ?? []).map((option) => {
+			const { value, tone } = optionOf(option);
+			return {
+				value,
+				tone,
+				label: formatValue(value)
+			};
+		}));
+		/** The options that start with (or contain) what was typed; all of them until something is. */
+		const options = computed(() => {
+			const query = props.typed ? props.text.trim().toLowerCase() : "";
+			if (!query) return all.value;
+			const starts = all.value.filter((o) => o.label.toLowerCase().startsWith(query));
+			const contains = all.value.filter((o) => !starts.includes(o) && o.label.toLowerCase().includes(query));
+			return [...starts, ...contains];
+		});
+		const active = shallowRef(-1);
+		watch(options, (list) => {
+			const current = list.findIndex((o) => o.value === props.value);
+			active.value = props.typed ? list.length ? 0 : -1 : current;
+		}, { immediate: true });
+		watch(active, (index) => {
+			nextTick(() => document.getElementById(`${id}-${index}`)?.scrollIntoView({ block: "nearest" }));
+		});
+		function onKey(event) {
+			const count = options.value.length;
+			if (!count || event.altKey || event.ctrlKey || event.metaKey) return false;
+			switch (event.key) {
+				case "ArrowDown":
+				case "ArrowUp": {
+					const step = event.key === "ArrowDown" ? 1 : -1;
+					active.value = active.value < 0 ? step > 0 ? 0 : count - 1 : (active.value + step + count) % count;
+					return true;
+				}
+				case "Enter":
+				case "Tab": {
+					const option = options.value[active.value];
+					if (!option || !props.typed && option.value === props.value) return false;
+					emit("pick", option.value);
+					return true;
+				}
+				default: return false;
+			}
+		}
+		__expose({
+			onKey,
+			activeId: computed(() => active.value >= 0 ? `${id}-${active.value}` : null)
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id,
+				class: "dou-sheet__options",
+				role: "listbox",
+				"aria-label": unref(messages).options
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(options.value, (option, index) => {
+				return openBlock(), createElementBlock("div", {
+					id: `${id}-${index}`,
+					key: unref(inputText)(option.value),
+					role: "option",
+					class: normalizeClass(["dou-dropdown__item dou-sheet__option", { "is-active": index === active.value }]),
+					"aria-selected": option.value === __props.value,
+					onPointermove: ($event) => active.value = index,
+					onClick: ($event) => emit("pick", option.value)
+				}, [__props.setup.plain ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(option.label), 1)) : (openBlock(), createElementBlock("span", {
+					key: 1,
+					class: normalizeClass(["dou-tag dou-tag--soft dou-sheet__tag", option.tone && option.tone !== "neutral" ? `dou-tag--${option.tone}` : "is-neutral"])
+				}, toDisplayString(option.label), 3)), option.value === __props.value ? (openBlock(), createBlock(unref(CheckIcon), {
+					key: 2,
+					class: "dou-sheet__option-check"
+				})) : createCommentVNode("", true)], 42, _hoisted_2);
+			}), 128)), !options.value.length ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(unref(messages).noOptions), 1)) : createCommentVNode("", true)], 8, _hoisted_1);
+		};
+	}
+});
+export { option_panel_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=option-panel.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/option-panel.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-panel.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_unref","_Fragment","_renderList","_normalizeClass","_toDisplayString","_createBlock","_createCommentVNode"],"sources":["../../src/components/option-panel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CheckIcon } from '@dou-ui/icons'\nimport { computed, nextTick, shallowRef, useId, watch } from 'vue'\nimport { optionOf, type SheetCellPanelProps } from '../core/cell-type'\nimport { formatValue, inputText } from '../core/format'\nimport type { SheetValue } from '../core/model'\nimport { useSheet } from '../context'\n\nconst props = defineProps<SheetCellPanelProps>()\nconst emit = defineEmits<{ pick: [value: SheetValue] }>()\nconst { messages } = useSheet()\nconst id = `dou-sheet-options-${useId()}`\n\nconst all = computed(() =>\n  (props.setup.options ?? []).map((option) => {\n    const { value, tone } = optionOf(option)\n    return { value, tone, label: formatValue(value) }\n  }),\n)\n/** The options that start with (or contain) what was typed; all of them until something is. */\nconst options = computed(() => {\n  const query = props.typed ? props.text.trim().toLowerCase() : ''\n  if (!query) return all.value\n  const starts = all.value.filter((o) => o.label.toLowerCase().startsWith(query))\n  const contains = all.value.filter(\n    (o) => !starts.includes(o) && o.label.toLowerCase().includes(query),\n  )\n  return [...starts, ...contains]\n})\n\nconst active = shallowRef(-1)\nwatch(\n  options,\n  (list) => {\n    const current = list.findIndex((o) => o.value === props.value)\n    active.value = props.typed ? (list.length ? 0 : -1) : current\n  },\n  { immediate: true },\n)\nwatch(active, (index) => {\n  void nextTick(() =>\n    document.getElementById(`${id}-${index}`)?.scrollIntoView({ block: 'nearest' }),\n  )\n})\n\nfunction onKey(event: KeyboardEvent) {\n  const count = options.value.length\n  if (!count || event.altKey || event.ctrlKey || event.metaKey) return false\n  switch (event.key) {\n    case 'ArrowDown':\n    case 'ArrowUp': {\n      const step = event.key === 'ArrowDown' ? 1 : -1\n      active.value =\n        active.value < 0 ? (step > 0 ? 0 : count - 1) : (active.value + step + count) % count\n      return true\n    }\n    case 'Enter':\n    case 'Tab': {\n      const option = options.value[active.value]\n      // with nothing picked, Enter writes what was typed\n      if (!option || (!props.typed && option.value === props.value)) return false\n      emit('pick', option.value)\n      return true\n    }\n    default:\n      return false\n  }\n}\n\ndefineExpose({\n  onKey,\n  activeId: computed(() => (active.value >= 0 ? `${id}-${active.value}` : null)),\n})\n</script>\n\n<template>\n  <div :id=\"id\" class=\"dou-sheet__options\" role=\"listbox\" :aria-label=\"messages.options\">\n    <div\n      v-for=\"(option, index) in options\"\n      :id=\"`${id}-${index}`\"\n      :key=\"inputText(option.value)\"\n      role=\"option\"\n      class=\"dou-dropdown__item dou-sheet__option\"\n      :class=\"{ 'is-active': index === active }\"\n      :aria-selected=\"option.value === value\"\n      @pointermove=\"active = index\"\n      @click=\"emit('pick', option.value)\"\n    >\n      <span v-if=\"setup.plain\" class=\"dou-sheet__option-text\">{{ option.label }}</span>\n      <span\n        v-else\n        class=\"dou-tag dou-tag--soft dou-sheet__tag\"\n        :class=\"option.tone && option.tone !== 'neutral' ? `dou-tag--${option.tone}` : 'is-neutral'\"\n        >{{ option.label }}</span\n      >\n      <CheckIcon v-if=\"option.value === value\" class=\"dou-sheet__option-check\" />\n    </div>\n    <div v-if=\"!options.length\" class=\"dou-sheet__options-empty\">{{ messages.noOptions }}</div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAQA,MAAM,QAAQ;EACd,MAAM,OAAO;EACb,MAAM,EAAE,aAAa,SAAS;EAC9B,MAAM,KAAK,qBAAqB,MAAM;EAEtC,MAAM,MAAM,gBACT,MAAM,MAAM,WAAW,CAAC,EAAA,CAAG,KAAK,WAAW;GAC1C,MAAM,EAAE,OAAO,SAAS,SAAS,MAAM;GACvC,OAAO;IAAE;IAAO;IAAM,OAAO,YAAY,KAAK;GAAE;EAClD,CAAC,CACH;;EAEA,MAAM,UAAU,eAAe;GAC7B,MAAM,QAAQ,MAAM,QAAQ,MAAM,KAAK,KAAK,CAAC,CAAC,YAAY,IAAI;GAC9D,IAAI,CAAC,OAAO,OAAO,IAAI;GACvB,MAAM,SAAS,IAAI,MAAM,QAAQ,MAAM,EAAE,MAAM,YAAY,CAAC,CAAC,WAAW,KAAK,CAAC;GAC9E,MAAM,WAAW,IAAI,MAAM,QACxB,MAAM,CAAC,OAAO,SAAS,CAAC,KAAK,EAAE,MAAM,YAAY,CAAC,CAAC,SAAS,KAAK,CACpE;GACA,OAAO,CAAC,GAAG,QAAQ,GAAG,QAAQ;EAChC,CAAC;EAED,MAAM,SAAS,WAAW,EAAE;EAC5B,MACE,UACC,SAAS;GACR,MAAM,UAAU,KAAK,WAAW,MAAM,EAAE,UAAU,MAAM,KAAK;GAC7D,OAAO,QAAQ,MAAM,QAAS,KAAK,SAAS,IAAI,KAAM;EACxD,GACA,EAAE,WAAW,KAAK,CACpB;EACA,MAAM,SAAS,UAAU;GACvB,eACE,SAAS,eAAe,GAAG,GAAG,GAAG,OAAO,CAAC,EAAE,eAAe,EAAE,OAAO,UAAU,CAAC,CAChF;EACF,CAAC;EAED,SAAS,MAAM,OAAsB;GACnC,MAAM,QAAQ,QAAQ,MAAM;GAC5B,IAAI,CAAC,SAAS,MAAM,UAAU,MAAM,WAAW,MAAM,SAAS,OAAO;GACrE,QAAQ,MAAM,KAAd;IACE,KAAK;IACL,KAAK,WAAW;KACd,MAAM,OAAO,MAAM,QAAQ,cAAc,IAAI;KAC7C,OAAO,QACL,OAAO,QAAQ,IAAK,OAAO,IAAI,IAAI,QAAQ,KAAM,OAAO,QAAQ,OAAO,SAAS;KAClF,OAAO;IACT;IACA,KAAK;IACL,KAAK,OAAO;KACV,MAAM,SAAS,QAAQ,MAAM,OAAO;KAEpC,IAAI,CAAC,UAAW,CAAC,MAAM,SAAS,OAAO,UAAU,MAAM,OAAQ,OAAO;KACtE,KAAK,QAAQ,OAAO,KAAK;KACzB,OAAO;IACT;IACA,SACE,OAAO;GACX;EACF;EAEA,SAAa;GACX;GACA,UAAU,eAAgB,OAAO,SAAS,IAAI,GAAG,GAAG,GAAG,OAAO,UAAU,IAAK;EAC/E,CAAC;;GAIC,OAAAA,UAAA,GAAAC,mBAsBM,OAAA;IAtBI;IAAI,OAAM;IAAqB,MAAK;IAAW,cAAYC,MAAA,QAAA,CAAQ,CAAC;G,KAC5EF,UAAA,IAAA,GAAAC,mBAmBME,UAAA,MAAAC,WAlBsB,QAAA,QAAlB,QAAQ,UAAK;IADvB,OAAAJ,UAAA,GAAAC,mBAmBM,OAAA;KAjBH,IAAE,GAAK,GAAE,GAAI;KACb,KAAKC,MAAA,SAAA,CAAS,CAAC,OAAO,KAAK;KAC5B,MAAK;KACL,OAAKG,eAAA,CAAC,wCAAsC,EAAA,aACrB,UAAU,OAAA,MAAM,CAAA,CAAA;KACtC,iBAAe,OAAO,UAAU,QAAA;KAChC,gBAAW,WAAE,OAAA,QAAS;KACtB,UAAK,WAAE,KAAI,QAAS,OAAO,KAAK;I,IAErB,QAAA,MAAM,SAAlBL,UAAA,GAAAC,mBAAiF,QAAjF,YAAiFK,gBAAtB,OAAO,KAAK,GAAA,CAAA,MACvEN,UAAA,GAAAC,mBAKC,QAAA;;KAHC,OAAKI,eAAA,CAAC,wCACE,OAAO,QAAQ,OAAO,SAAI,YAAA,YAA6B,OAAO,SAAI,YAAA,CAAA;IACtE,GAAAC,gBAAA,OAAO,KAAK,GAAA,CAAA,IAED,OAAO,UAAU,QAAA,SAAlCN,UAAA,GAAAO,YAA2EL,MAAA,SAAA,GAAA;;KAAlC,OAAM;;G,WAErC,CAAA,QAAA,MAAQ,UAApBF,UAAA,GAAAC,mBAA2F,OAA3F,YAA2FK,gBAA3BJ,MAAA,QAAA,CAAQ,CAAC,SAAS,GAAA,CAAA,K"}

package/dist/components/sheet-comment.js

@@ -0,0 +1,6 @@
+import sheet_comment_vue_vue_type_script_setup_true_lang_default from "./sheet-comment.vue_vue_type_script_setup_true_lang.js";
+// src/components/sheet-comment.vue
+var sheet_comment_default = sheet_comment_vue_vue_type_script_setup_true_lang_default;
+export { sheet_comment_default as default };
+
+//# sourceMappingURL=sheet-comment.js.map

package/dist/components/sheet-comment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet-comment.js","names":["_sfc_main"],"sources":["../../src/components/sheet-comment.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  DouCommentThread,\n  useFloating,\n  useLayer,\n  useZIndex,\n  type CommentAction,\n  type CommentAuthor,\n  type CommentThread,\n  type VirtualElement,\n} from 'dou-ui'\nimport { nextTick, shallowRef, watch } from 'vue'\n\n/*\n * The thread about a cell, beside the cell: opened by a click on the cell,\n * `Mod+Alt+M`, the menu or `v-model:active-comment`; or empty while a new\n * thread's first comment is being written.\n */\n\nconst props = defineProps<{\n  /** The cell it is about. */\n  anchor: VirtualElement\n  /** The thread; `null` to write the first comment. */\n  thread: CommentThread | null\n  author?: CommentAuthor\n  readonly: boolean\n  label: string\n  /** Bumped to put the cursor in the reply box. */\n  focusRequest: number\n  /** The last request the cursor was put there for; a card opened for a newer one takes it. */\n  focusHandled: number\n  /** What belongs to the grid: a press there is the grid's, not outside the card. */\n  grid: () => HTMLElement | null\n}>()\n\nconst emit = defineEmits<{\n  action: [action: CommentAction]\n  /** Escape, the cancel button, or a press outside. `refocus` asks for the grid's focus back. */\n  close: [refocus: boolean]\n  /** The request the cursor was put in the reply box for. */\n  focused: [request: number]\n}>()\n\nconst panel = shallowRef<HTMLElement | null>(null)\nconst threadView = shallowRef<InstanceType<typeof DouCommentThread> | null>(null)\n\n/**\n * Beside the cell, or under it (above when there's no room below) on a\n * screen too narrow for the card on either side, so it never covers the\n * cell it is about.\n */\nfunction side(): 'right-start' | 'bottom-start' {\n  if (typeof window === 'undefined') return 'right-start'\n  const anchor = props.anchor.getBoundingClientRect()\n  const width = panel.value?.offsetWidth ?? 340\n  const room = Math.max(window.innerWidth - anchor.right, anchor.left)\n  return room >= width + 6 ? 'right-start' : 'bottom-start'\n}\n\nconst { style, placement } = useFloating(() => props.anchor, panel, {\n  open: true,\n  placement: side,\n  offset: 6,\n})\nconst zIndex = useZIndex().next()\n\n/** Focus was in the card, or went nowhere when what held it went away. */\nconst focusLost = () => {\n  const el = document.activeElement\n  return !el || el === document.body || !!panel.value?.contains(el)\n}\n\n// a layer: Escape goes to a menu opened from it first, and a press on such\n// a menu isn't outside. A press on the grid is the grid's: it opens the\n// thread of the cell pressed, or closes the card.\nuseLayer({\n  open: true,\n  elements: () => [panel.value, props.grid()],\n  onEscape: () => emit('close', focusLost()),\n  onOutside: () => emit('close', false),\n})\n\n// asked to (the keyboard shortcut, a thread just started): the reply box,\n// also when the card opens for the request\nwatch(\n  () => props.focusRequest,\n  async (request) => {\n    if (request <= props.focusHandled) return\n    emit('focused', request)\n    await nextTick()\n    threadView.value?.focus()\n  },\n  { flush: 'post', immediate: true },\n)\n\ndefineExpose({ panel })\n</script>\n\n<template>\n  <Transition name=\"dou-floating\" appear>\n    <div\n      ref=\"panel\"\n      class=\"dou-floating dou-sheet-comment\"\n      role=\"dialog\"\n      :aria-label=\"label\"\n      :style=\"[style, { zIndex }]\"\n      :data-placement=\"placement\"\n      @pointerdown.stop\n      @contextmenu.stop\n      @wheel.stop\n    >\n      <DouCommentThread\n        ref=\"threadView\"\n        :key=\"thread?.id ?? 'new'\"\n        :thread=\"thread\"\n        :author=\"author\"\n        :readonly=\"readonly\"\n        :autofocus=\"!thread\"\n        @action=\"emit('action', $event)\"\n        @cancel=\"emit('close', true)\"\n      />\n    </div>\n  </Transition>\n</template>\n"],"mappings":""}

package/dist/components/sheet-comment.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,104 @@
+import { DouCommentThread, useFloating, useLayer, useZIndex } from "dou-ui";
+import { Transition, createBlock, createElementVNode, defineComponent, nextTick, normalizeStyle, openBlock, shallowRef, unref, watch, withCtx, withModifiers } from "vue";
+// src/components/sheet-comment.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label", "data-placement"];
+var sheet_comment_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "sheet-comment",
+	props: {
+		anchor: {},
+		thread: {},
+		author: {},
+		readonly: { type: Boolean },
+		label: {},
+		focusRequest: {},
+		focusHandled: {},
+		grid: { type: Function }
+	},
+	emits: [
+		"action",
+		"close",
+		"focused"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const panel = shallowRef(null);
+		const threadView = shallowRef(null);
+		/**
+		* Beside the cell, or under it (above when there's no room below) on a
+		* screen too narrow for the card on either side, so it never covers the
+		* cell it is about.
+		*/
+		function side() {
+			if (typeof window === "undefined") return "right-start";
+			const anchor = props.anchor.getBoundingClientRect();
+			const width = panel.value?.offsetWidth ?? 340;
+			return Math.max(window.innerWidth - anchor.right, anchor.left) >= width + 6 ? "right-start" : "bottom-start";
+		}
+		const { style, placement } = useFloating(() => props.anchor, panel, {
+			open: true,
+			placement: side,
+			offset: 6
+		});
+		const zIndex = useZIndex().next();
+		/** Focus was in the card, or went nowhere when what held it went away. */
+		const focusLost = () => {
+			const el = document.activeElement;
+			return !el || el === document.body || !!panel.value?.contains(el);
+		};
+		useLayer({
+			open: true,
+			elements: () => [panel.value, props.grid()],
+			onEscape: () => emit("close", focusLost()),
+			onOutside: () => emit("close", false)
+		});
+		watch(() => props.focusRequest, async (request) => {
+			if (request <= props.focusHandled) return;
+			emit("focused", request);
+			await nextTick();
+			threadView.value?.focus();
+		}, {
+			flush: "post",
+			immediate: true
+		});
+		__expose({ panel });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Transition, {
+				name: "dou-floating",
+				appear: ""
+			}, {
+				default: withCtx(() => [createElementVNode("div", {
+					ref_key: "panel",
+					ref: panel,
+					class: "dou-floating dou-sheet-comment",
+					role: "dialog",
+					"aria-label": __props.label,
+					style: normalizeStyle([unref(style), { zIndex: unref(zIndex) }]),
+					"data-placement": unref(placement),
+					onPointerdown: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"])),
+					onContextmenu: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"])),
+					onWheel: _cache[4] || (_cache[4] = withModifiers(() => {}, ["stop"]))
+				}, [(openBlock(), createBlock(unref(DouCommentThread), {
+					ref_key: "threadView",
+					ref: threadView,
+					key: __props.thread?.id ?? "new",
+					thread: __props.thread,
+					author: __props.author,
+					readonly: __props.readonly,
+					autofocus: !__props.thread,
+					onAction: _cache[0] || (_cache[0] = ($event) => emit("action", $event)),
+					onCancel: _cache[1] || (_cache[1] = ($event) => emit("close", true))
+				}, null, 8, [
+					"thread",
+					"author",
+					"readonly",
+					"autofocus"
+				]))], 44, _hoisted_1)]),
+				_: 1
+			});
+		};
+	}
+});
+export { sheet_comment_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=sheet-comment.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/sheet-comment.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet-comment.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_Transition","_withCtx","_createElementVNode","_normalizeStyle","_unref","_withModifiers"],"sources":["../../src/components/sheet-comment.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  DouCommentThread,\n  useFloating,\n  useLayer,\n  useZIndex,\n  type CommentAction,\n  type CommentAuthor,\n  type CommentThread,\n  type VirtualElement,\n} from 'dou-ui'\nimport { nextTick, shallowRef, watch } from 'vue'\n\n/*\n * The thread about a cell, beside the cell: opened by a click on the cell,\n * `Mod+Alt+M`, the menu or `v-model:active-comment`; or empty while a new\n * thread's first comment is being written.\n */\n\nconst props = defineProps<{\n  /** The cell it is about. */\n  anchor: VirtualElement\n  /** The thread; `null` to write the first comment. */\n  thread: CommentThread | null\n  author?: CommentAuthor\n  readonly: boolean\n  label: string\n  /** Bumped to put the cursor in the reply box. */\n  focusRequest: number\n  /** The last request the cursor was put there for; a card opened for a newer one takes it. */\n  focusHandled: number\n  /** What belongs to the grid: a press there is the grid's, not outside the card. */\n  grid: () => HTMLElement | null\n}>()\n\nconst emit = defineEmits<{\n  action: [action: CommentAction]\n  /** Escape, the cancel button, or a press outside. `refocus` asks for the grid's focus back. */\n  close: [refocus: boolean]\n  /** The request the cursor was put in the reply box for. */\n  focused: [request: number]\n}>()\n\nconst panel = shallowRef<HTMLElement | null>(null)\nconst threadView = shallowRef<InstanceType<typeof DouCommentThread> | null>(null)\n\n/**\n * Beside the cell, or under it (above when there's no room below) on a\n * screen too narrow for the card on either side, so it never covers the\n * cell it is about.\n */\nfunction side(): 'right-start' | 'bottom-start' {\n  if (typeof window === 'undefined') return 'right-start'\n  const anchor = props.anchor.getBoundingClientRect()\n  const width = panel.value?.offsetWidth ?? 340\n  const room = Math.max(window.innerWidth - anchor.right, anchor.left)\n  return room >= width + 6 ? 'right-start' : 'bottom-start'\n}\n\nconst { style, placement } = useFloating(() => props.anchor, panel, {\n  open: true,\n  placement: side,\n  offset: 6,\n})\nconst zIndex = useZIndex().next()\n\n/** Focus was in the card, or went nowhere when what held it went away. */\nconst focusLost = () => {\n  const el = document.activeElement\n  return !el || el === document.body || !!panel.value?.contains(el)\n}\n\n// a layer: Escape goes to a menu opened from it first, and a press on such\n// a menu isn't outside. A press on the grid is the grid's: it opens the\n// thread of the cell pressed, or closes the card.\nuseLayer({\n  open: true,\n  elements: () => [panel.value, props.grid()],\n  onEscape: () => emit('close', focusLost()),\n  onOutside: () => emit('close', false),\n})\n\n// asked to (the keyboard shortcut, a thread just started): the reply box,\n// also when the card opens for the request\nwatch(\n  () => props.focusRequest,\n  async (request) => {\n    if (request <= props.focusHandled) return\n    emit('focused', request)\n    await nextTick()\n    threadView.value?.focus()\n  },\n  { flush: 'post', immediate: true },\n)\n\ndefineExpose({ panel })\n</script>\n\n<template>\n  <Transition name=\"dou-floating\" appear>\n    <div\n      ref=\"panel\"\n      class=\"dou-floating dou-sheet-comment\"\n      role=\"dialog\"\n      :aria-label=\"label\"\n      :style=\"[style, { zIndex }]\"\n      :data-placement=\"placement\"\n      @pointerdown.stop\n      @contextmenu.stop\n      @wheel.stop\n    >\n      <DouCommentThread\n        ref=\"threadView\"\n        :key=\"thread?.id ?? 'new'\"\n        :thread=\"thread\"\n        :author=\"author\"\n        :readonly=\"readonly\"\n        :autofocus=\"!thread\"\n        @action=\"emit('action', $event)\"\n        @cancel=\"emit('close', true)\"\n      />\n    </div>\n  </Transition>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAmBA,MAAM,QAAQ;EAgBd,MAAM,OAAO;EAQb,MAAM,QAAQ,WAA+B,IAAI;EACjD,MAAM,aAAa,WAAyD,IAAI;;;;;;EAOhF,SAAS,OAAuC;GAC9C,IAAI,OAAO,WAAW,aAAa,OAAO;GAC1C,MAAM,SAAS,MAAM,OAAO,sBAAsB;GAClD,MAAM,QAAQ,MAAM,OAAO,eAAe;GAE1C,OADa,KAAK,IAAI,OAAO,aAAa,OAAO,OAAO,OAAO,IACxD,KAAQ,QAAQ,IAAI,gBAAgB;EAC7C;EAEA,MAAM,EAAE,OAAO,cAAc,kBAAkB,MAAM,QAAQ,OAAO;GAClE,MAAM;GACN,WAAW;GACX,QAAQ;EACV,CAAC;EACD,MAAM,SAAS,UAAU,CAAC,CAAC,KAAK;;EAGhC,MAAM,kBAAkB;GACtB,MAAM,KAAK,SAAS;GACpB,OAAO,CAAC,MAAM,OAAO,SAAS,QAAQ,CAAC,CAAC,MAAM,OAAO,SAAS,EAAE;EAClE;EAKA,SAAS;GACP,MAAM;GACN,gBAAgB,CAAC,MAAM,OAAO,MAAM,KAAK,CAAC;GAC1C,gBAAgB,KAAK,SAAS,UAAU,CAAC;GACzC,iBAAiB,KAAK,SAAS,KAAK;EACtC,CAAC;EAID,YACQ,MAAM,cACZ,OAAO,YAAY;GACjB,IAAI,WAAW,MAAM,cAAc;GACnC,KAAK,WAAW,OAAO;GACvB,MAAM,SAAS;GACf,WAAW,OAAO,MAAM;EAC1B,GACA;GAAE,OAAO;GAAQ,WAAW;EAAK,CACnC;EAEA,SAAa,EAAE,MAAM,CAAC;;GAIpB,OAAAA,UAAA,GAAAC,YAuBaC,YAAA;IAvBD,MAAK;IAAe,QAAA;;IAC9B,SAAAC,cAqBM,CArBNC,mBAqBM,OAAA;KApBA,SAAA;KAAJ,KAAI;KACJ,OAAM;KACN,MAAK;KACJ,cAAY,QAAA;KACZ,OAAKC,eAAA,CAAGC,MAAA,KAAA,GAAK,EAAA,QAAIA,MAAA,MAAA,EAAM,CAAA,CAAA;KACvB,kBAAgBA,MAAA,SAAA;KAChB,eAAW,OAAA,OAAA,OAAA,KAAAC,oBAAZ,CAAA,GAAiB,CAAA,MAAA,CAAA;KAChB,eAAW,OAAA,OAAA,OAAA,KAAAA,oBAAZ,CAAA,GAAiB,CAAA,MAAA,CAAA;KAChB,SAAK,OAAA,OAAA,OAAA,KAAAA,oBAAN,CAAA,GAAW,CAAA,MAAA,CAAA;I,KAEXP,UAAA,GAAAC,YASEK,MAAA,gBAAA,GAAA;KARI,SAAA;KAAJ,KAAI;KACH,KAAK,QAAA,QAAQ,MAAE;KACf,QAAQ,QAAA;KACR,QAAQ,QAAA;KACR,UAAU,QAAA;KACV,WAAS,CAAG,QAAA;KACZ,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAW,MAAM;KAC7B,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,SAAA,IAAA"}

package/dist/components/sheet-formula-bar.js

@@ -0,0 +1,6 @@
+import sheet_formula_bar_vue_vue_type_script_setup_true_lang_default from "./sheet-formula-bar.vue_vue_type_script_setup_true_lang.js";
+// src/components/sheet-formula-bar.vue
+var sheet_formula_bar_default = sheet_formula_bar_vue_vue_type_script_setup_true_lang_default;
+export { sheet_formula_bar_default as default };
+
+//# sourceMappingURL=sheet-formula-bar.js.map

package/dist/components/sheet-formula-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet-formula-bar.js","names":["_sfc_main"],"sources":["../../src/components/sheet-formula-bar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { FunctionIcon } from '@dou-ui/icons'\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'\nimport { useSheet } from '../context'\nimport SheetNameBox from './sheet-name-box.vue'\nimport { formulaParts, formulaReferences, partClass } from '../formula/edit'\n\ndefineOptions({ name: 'DouSheetFormulaBar' })\n\nconst sheet = useSheet()\nconst { editor, messages: m } = sheet\n\nconst input = useTemplateRef<HTMLTextAreaElement>('input')\nconst mirror = useTemplateRef<HTMLElement>('mirror')\n\n// The formula box: what the active cell holds, edited along with the cell ----------------------\n\nconst editingHere = computed(() => !!editor.cell.value)\nconst text = computed(() =>\n  editingHere.value ? editor.text.value : editor.textAt(sheet.active.value),\n)\nconst marks = computed(() => (editingHere.value ? formulaReferences(text.value) : []))\n/** A formula is shown in its colors, under the box's clear text. */\nconst isFormula = computed(() => text.value.startsWith('='))\nconst parts = computed(() => (isFormula.value ? formulaParts(text.value, marks.value) : []))\n\n/** As many lines as the text has, up to five; more scroll. */\nconst lines = computed(() => Math.min(5, text.value.split('\\n').length))\n\nlet composing = false\nconst setComposing = (value: boolean) => (composing = value)\n\nfunction onInput(event: Event) {\n  const el = event.target as HTMLTextAreaElement\n  if (!editor.input(el.value, el.selectionStart)) el.value = text.value\n  syncMirror()\n}\n\nfunction onKey(event: KeyboardEvent) {\n  if (composing || event.isComposing) return\n  if (editingHere.value) {\n    // Enter, Tab and Escape finish the edit as in the cell; completion and pointing too\n    if (editor.key(event) && !editor.cell.value) sheet.focus()\n    return\n  }\n  if (event.key === 'Escape' || event.key === 'Enter') {\n    event.preventDefault()\n    sheet.focus()\n  }\n}\n\nfunction syncCaret() {\n  const el = input.value\n  if (el && editingHere.value) editor.moveCaret(el.selectionStart)\n  syncMirror()\n}\n\nfunction syncMirror() {\n  const el = input.value\n  const shown = mirror.value\n  if (!el || !shown) return\n  shown.scrollLeft = el.scrollLeft\n  shown.scrollTop = el.scrollTop\n}\n\nfunction onBlur(event: FocusEvent) {\n  // a press on a cell finished the edit already; going elsewhere saves it, as leaving the cell does\n  const next = event.relatedTarget as Element | null\n  if (!editor.cell.value || !document.hasFocus()) return\n  if (next?.closest('.dou-sheet__input, .dou-sheet__assist')) return\n  editor.commit()\n}\n\nwatch(text, () => void nextTick(syncMirror))\n\nlet detach: (() => void) | undefined\nonMounted(() => {\n  if (input.value) detach = editor.attach(input.value)\n})\nonBeforeUnmount(() => detach?.())\n</script>\n\n<template>\n  <div class=\"dou-sheet-formula-bar\">\n    <SheetNameBox />\n    <span class=\"dou-sheet-formula-bar__mark\" aria-hidden=\"true\"><FunctionIcon /></span>\n    <div class=\"dou-sheet-formula-bar__box\" :style=\"`--dou-sheet-bar-lines:${lines}`\">\n      <div v-if=\"isFormula\" ref=\"mirror\" class=\"dou-sheet-formula-bar__mirror\" aria-hidden=\"true\">\n        <span v-for=\"(part, i) in parts\" :key=\"i\" :class=\"partClass(part)\">{{ part.text }}</span>\n      </div>\n      <textarea\n        ref=\"input\"\n        class=\"dou-sheet-formula-bar__input\"\n        :class=\"{ 'is-formula': isFormula }\"\n        :value=\"text\"\n        :aria-label=\"m.formulaBox\"\n        :aria-autocomplete=\"editingHere ? 'list' : undefined\"\n        :aria-controls=\"editingHere ? editor.helpId : undefined\"\n        :readonly=\"sheet.readonly.value\"\n        rows=\"1\"\n        autocomplete=\"off\"\n        autocapitalize=\"off\"\n        spellcheck=\"false\"\n        @input=\"onInput\"\n        @keydown=\"onKey\"\n        @keyup=\"syncCaret\"\n        @click=\"syncCaret\"\n        @select=\"syncCaret\"\n        @scroll=\"syncMirror\"\n        @compositionstart=\"setComposing(true)\"\n        @compositionend=\"setComposing(false)\"\n        @blur=\"onBlur\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":""}