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

package/dist/fields/fields.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,881 @@
+import { BUILTIN_AGGREGATORS } from "../engine/aggregate.js";
+import { DATE_PERIODS, groupKey } from "../engine/group.js";
+import { resolveConfig } from "../engine/compute.js";
+import { format, usePivotMessages } from "../locale.js";
+import { valueLabel } from "../core/labels.js";
+import { usePivotSource } from "../core/source.js";
+import filter_list_default from "./filter-list.js";
+import formula_dialog_default from "./formula-dialog.js";
+import top_dialog_default from "./top-dialog.js";
+import { AREAS, areasOf, configOf, isFiltering, moveItem, stepsFor, withAggregate, withDimension, withFilter, withRank, withValue } from "./model.js";
+import { DouButton, DouCheckbox, DouDrawer, DouDropdown, DouDropdownItem, DouDropdownRadioGroup, DouDropdownSub, DouInput, DouPopover, DouSortable, useBreakpoints } from "dou-ui";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, onMounted, openBlock, ref, renderList, resolveDynamicComponent, toDisplayString, unref, useId, useModel, withCtx } from "vue";
+import { CalendarIcon, ChevronDownIcon, FilterIcon, HashIcon, LayoutThreeColumnsIcon, LayoutThreeRowsIcon, PlusIcon, SearchIcon, SigmaIcon, TablePivotIcon, ToggleLeftIcon, TypeIcon } from "@dou-ui/icons";
+// src/fields/fields.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["role", "aria-label"];
+var _hoisted_2 = ["aria-label"];
+var _hoisted_3 = { class: "dou-pivot-fields__field" };
+var _hoisted_4 = { class: "dou-pivot-fields__name" };
+var _hoisted_5 = { class: "dou-pivot-fields__none" };
+var _hoisted_6 = { class: "dou-pivot-fields__areas" };
+var _hoisted_7 = ["aria-label"];
+var _hoisted_8 = { class: "dou-pivot-fields__area-title" };
+var _hoisted_9 = ["title"];
+var _hoisted_10 = { class: "dou-pivot-fields__chip-name" };
+var _hoisted_11 = {
+	key: 0,
+	class: "dou-pivot-fields__chip-group"
+};
+var _hoisted_12 = ["aria-label"];
+var _hoisted_13 = ["aria-label"];
+var _hoisted_14 = { class: "dou-pivot-fields__drop" };
+var fields_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DouPivotFields",
+	__name: "fields",
+	props: /*@__PURE__*/ mergeModels({
+		data: {},
+		fields: {},
+		config: {},
+		aggregators: {},
+		drawer: {
+			type: [Boolean, String],
+			default: "auto"
+		},
+		messages: {}
+	}, {
+		"config": { default: () => ({}) },
+		"configModifiers": {}
+	}),
+	emits: ["update:config"],
+	setup(__props) {
+		const props = __props;
+		const config = useModel(__props, "config");
+		const messages = usePivotMessages(() => props.messages);
+		const source = usePivotSource(() => props.data, () => props.fields);
+		const group = `dou-pivot-fields-${useId()}`;
+		const TYPE_ICON = {
+			string: TypeIcon,
+			number: HashIcon,
+			date: CalendarIcon,
+			boolean: ToggleLeftIcon
+		};
+		const AREA_ICON = {
+			filters: FilterIcon,
+			columns: LayoutThreeColumnsIcon,
+			rows: LayoutThreeRowsIcon,
+			values: SigmaIcon
+		};
+		const allFields = computed(() => {
+			return [...source.value.fields.values()];
+		});
+		const field = (name) => source.value.field(name);
+		const query = ref("");
+		const listItems = computed({
+			get: () => {
+				const q = query.value.trim().toLocaleLowerCase();
+				return allFields.value.filter((f) => !q || f.label.toLocaleLowerCase().includes(q) || f.name.includes(q)).map((f, index) => ({
+					key: `l:${f.name}`,
+					kind: "field",
+					field: f.name,
+					index
+				}));
+			},
+			set: () => {}
+		});
+		const areas = computed(() => areasOf(config.value));
+		const used = computed(() => {
+			const set = /* @__PURE__ */ new Set();
+			for (const area of AREAS) for (const item of areas.value[area]) set.add(item.field);
+			return set;
+		});
+		let pending = null;
+		/** One drop updates two lists (the one left and the one entered); both land in one change. */
+		function setArea(area, items) {
+			if (!pending) {
+				pending = { ...areas.value };
+				queueMicrotask(() => {
+					const next = pending;
+					pending = null;
+					config.value = configOf(next, config.value);
+				});
+			}
+			pending[area] = items;
+		}
+		const areaModel = (area) => computed({
+			get: () => areas.value[area],
+			set: (items) => setArea(area, items)
+		});
+		const models = Object.fromEntries(AREAS.map((a) => [a, areaModel(a)]));
+		const areaOf = (item) => AREAS.find((a) => areas.value[a].some((i) => i.key === item.key)) ?? null;
+		function moveTo(item, to) {
+			config.value = configOf(moveItem(areas.value, areaOf(item), item, to), config.value);
+		}
+		/** Moves an item one place up or down in its area. */
+		function shift(item, by) {
+			const area = areaOf(item);
+			if (!area) return;
+			const list = [...areas.value[area]];
+			const at = list.findIndex((i) => i.key === item.key);
+			const to = at + by;
+			if (to < 0 || to >= list.length) return;
+			list.splice(at, 1);
+			list.splice(to, 0, item);
+			config.value = configOf({
+				...areas.value,
+				[area]: list
+			}, config.value);
+		}
+		const placeOf = (item) => {
+			const area = areaOf(item);
+			const list = area ? areas.value[area] : [];
+			return {
+				first: list[0]?.key === item.key,
+				last: list[list.length - 1]?.key === item.key
+			};
+		};
+		/** The checkbox in the list: adds a field where it fits (numbers to the values), or takes it out everywhere. */
+		function toggleField(name, on) {
+			if (!on) {
+				let next = areas.value;
+				for (const area of AREAS) next = {
+					...next,
+					[area]: next[area].filter((i) => i.field !== name)
+				};
+				config.value = configOf(next, config.value);
+				return;
+			}
+			moveTo({
+				key: `l:${name}`,
+				kind: "field",
+				field: name,
+				index: 0
+			}, field(name).type === "number" ? "values" : "rows");
+		}
+		const itemLabel = (item) => item.field ? field(item.field).label : "";
+		const resolved = computed(() => {
+			try {
+				return resolveConfig(source.value, config.value, { aggregators: aggregatorMap.value });
+			} catch {
+				return null;
+			}
+		});
+		const aggregatorMap = computed(() => {
+			const map = {};
+			for (const a of props.aggregators ?? []) map[a.name] = a;
+			return map;
+		});
+		/** How a grouping reads, as in the grouping menu. */
+		function groupText(by) {
+			const m = messages.value.fields;
+			if (typeof by === "string") return m.periods[by];
+			const write = new Intl.NumberFormat(void 0, { maximumFractionDigits: 6 });
+			return format(m.step, { step: write.format(by.step) });
+		}
+		/** A chip's grouping, shown apart from its name so it can go on a line of its own. */
+		function chipGroup(item) {
+			if (item.kind !== "dimension") return "";
+			const by = dimensionOf(axisOf(item), item.field)?.by;
+			const top = topText(item.field);
+			return [by === void 0 ? "" : groupText(by), top].filter(Boolean).join(" · ");
+		}
+		/** How a field's top N or range reads ("前 10 项", "合计 ≥ 100"), or ''. */
+		function topText(name) {
+			const filter = filterOf(name);
+			const m = messages.value.fields;
+			if (filter?.top) return format(filter.top.order === "asc" ? m.bottomN : m.topN, { count: filter.top.count });
+			if (filter?.between) {
+				const write = new Intl.NumberFormat(void 0, { maximumFractionDigits: 6 });
+				const { min, max } = filter.between;
+				const range = min !== void 0 && max !== void 0 ? format(messages.value.rangeLabel, {
+					from: write.format(min),
+					to: write.format(max)
+				}) : min !== void 0 ? `≥ ${write.format(min)}` : `≤ ${write.format(max ?? 0)}`;
+				return format(m.between, { range });
+			}
+			return "";
+		}
+		const chipName = (item) => item.kind === "dimension" ? itemLabel(item) : chipText(item);
+		function chipText(item) {
+			if (item.kind === "dimension") {
+				const extra = chipGroup(item);
+				return extra ? format(messages.value.fields.grouped, {
+					field: itemLabel(item),
+					group: extra
+				}) : itemLabel(item);
+			}
+			if (item.kind !== "value") return itemLabel(item);
+			const value = resolved.value?.values[item.index];
+			const given = config.value.values?.[item.index];
+			if (!value) return item.field ? itemLabel(item) : messages.value.aggregates.count;
+			return valueLabel(value, typeof given === "object" ? given.label : void 0, messages.value);
+		}
+		const dimensionOf = (axis, name) => {
+			const d = (config.value[axis] ?? []).find((x) => (typeof x === "string" ? x : x.field) === name);
+			return typeof d === "string" ? { field: d } : d;
+		};
+		const filterOf = (name) => config.value.filters?.[name];
+		/** Whether a field's values can be filtered from its chip (not a value: it sums the field up). */
+		const canFilter = (item) => item.kind !== "value" && !!item.field;
+		const aggregatesFor = (name) => {
+			const type = name ? field(name).type : "string";
+			const builtIn = type === "number" ? [
+				"sum",
+				"count",
+				"avg",
+				"min",
+				"max",
+				"distinct",
+				"median"
+			] : type === "date" ? [
+				"count",
+				"distinct",
+				"min",
+				"max"
+			] : ["count", "distinct"];
+			const custom = (props.aggregators ?? []).filter((a) => type === "number" || a.input === "value").map((a) => a.name);
+			return [...builtIn, ...custom.filter((n) => !builtIn.includes(n))];
+		};
+		const aggregateText = (name) => messages.value.aggregates[name] ?? aggregatorMap.value[name]?.label ?? BUILTIN_AGGREGATORS[name]?.label ?? name;
+		const currentAggregate = (index) => resolved.value?.values[index]?.aggregate ?? "count";
+		/** The groupings a field offers: periods for dates, round range sizes for numbers. */
+		function groupingsFor(name) {
+			const f = field(name);
+			const m = messages.value.fields;
+			const none = {
+				key: "",
+				by: null,
+				text: m.noGroup
+			};
+			if (f.type === "date") return [none, ...DATE_PERIODS.map((p) => ({
+				key: p,
+				by: p,
+				text: m.periods[p]
+			}))];
+			if (f.type !== "number") return [];
+			const measure = source.value.measure(name);
+			let min = Infinity;
+			let max = -Infinity;
+			for (let i = 0; i < measure.length; i++) {
+				const v = measure[i];
+				if (v < min) min = v;
+				if (v > max) max = v;
+			}
+			const write = new Intl.NumberFormat(void 0, { maximumFractionDigits: 6 });
+			return [none, ...stepsFor(min, max).map((step) => ({
+				key: groupKey({ step }),
+				by: { step },
+				text: format(m.step, { step: write.format(step) })
+			}))];
+		}
+		/** The sort a row field's menu shows: by its labels, or the rows by a value's grand total. */
+		function sortKey(axis, name) {
+			const sort = config.value.sort;
+			if (axis === "rows" && sort && !sort.column?.length) return `v:${sort.valueIndex}:${sort.order}`;
+			return dimensionOf(axis, name)?.sort ?? "asc";
+		}
+		function onSort(axis, name, key) {
+			const by = /^v:(\d+):(asc|desc)$/.exec(String(key));
+			if (by) {
+				const order = by[2];
+				config.value = {
+					...config.value,
+					sort: {
+						valueIndex: +by[1],
+						column: [],
+						order
+					}
+				};
+				return;
+			}
+			const next = withDimension(config.value, axis, name, { sort: key });
+			if (axis === "rows") next.sort = null;
+			config.value = next;
+		}
+		function onGroup(axis, name, key) {
+			const option = groupingsFor(name).find((g) => g.key === key);
+			if (!option) return;
+			config.value = withDimension(config.value, axis, name, { by: option.by });
+		}
+		function onSubtotal(axis, name, on) {
+			config.value = withDimension(config.value, axis, name, { subtotal: on });
+		}
+		function onAggregate(index, name) {
+			config.value = withAggregate(config.value, index, String(name));
+		}
+		const SHOWS = [
+			"percentOfTotal",
+			"percentOfRow",
+			"percentOfColumn",
+			"percentOfParent",
+			"difference",
+			"percentDifference",
+			"runningTotal",
+			"rank"
+		];
+		const valueSpec = (index) => {
+			const v = config.value.values?.[index];
+			return typeof v === "object" ? v : void 0;
+		};
+		const showKey = (index) => {
+			const show = valueSpec(index)?.show;
+			return show === void 0 ? "" : typeof show === "string" ? show : show.as;
+		};
+		function onShow(index, key) {
+			const spec = valueSpec(index)?.show;
+			const axis = typeof spec === "object" ? spec.axis : void 0;
+			const show = key === "" ? null : axis ? {
+				as: key,
+				axis
+			} : key;
+			config.value = withValue(config.value, index, { show });
+		}
+		const markKey = (index) => {
+			const mark = valueSpec(index)?.mark;
+			return mark === void 0 ? "" : typeof mark === "string" ? mark : mark.type;
+		};
+		function onMark(index, key) {
+			config.value = withValue(config.value, index, { mark: key === "" ? null : key });
+		}
+		const TOPS = [
+			{
+				key: "t5",
+				count: 5,
+				order: "desc"
+			},
+			{
+				key: "t10",
+				count: 10,
+				order: "desc"
+			},
+			{
+				key: "t20",
+				count: 20,
+				order: "desc"
+			},
+			{
+				key: "b5",
+				count: 5,
+				order: "asc"
+			},
+			{
+				key: "b10",
+				count: 10,
+				order: "asc"
+			}
+		];
+		function topKey(name) {
+			const filter = filterOf(name);
+			if (filter?.between) return "range";
+			if (!filter?.top) return "";
+			return `${filter.top.order === "asc" ? "b" : "t"}${filter.top.count}`;
+		}
+		const topOptions = (name) => {
+			const m = messages.value.fields;
+			const options = [{
+				key: "",
+				text: m.noTop
+			}];
+			for (const t of TOPS) options.push({
+				key: t.key,
+				text: format(t.order === "asc" ? m.bottomN : m.topN, { count: t.count })
+			});
+			const key = topKey(name);
+			if (key && !options.some((o) => o.key === key)) options.push({
+				key,
+				text: topText(name)
+			});
+			return options;
+		};
+		function onTop(item, key) {
+			if (key === "range") return;
+			const match = /^([tb])(\d+)$/.exec(String(key));
+			const old = filterOf(item.field)?.top;
+			setRank(item, match ? { top: {
+				...old?.valueIndex ? { valueIndex: old.valueIndex } : {},
+				count: Number(match[2]),
+				...match[1] === "b" ? { order: "asc" } : {}
+			} } : null);
+		}
+		function setRank(item, rank) {
+			config.value = withRank(config.value, item.field, rank, item.kind === "filter");
+		}
+		/** The field whose top N or range is set in the dialog. */
+		const topItem = ref(null);
+		const topOpen = ref(false);
+		function openTop(item) {
+			topItem.value = item;
+			nextTick(() => topOpen.value = true);
+		}
+		const formulaOpen = ref(false);
+		/** The value being changed in the dialog, or -1 for a new one. */
+		const formulaIndex = ref(-1);
+		const formulaInitial = computed(() => {
+			const spec = formulaIndex.value >= 0 ? valueSpec(formulaIndex.value) : void 0;
+			return spec?.formula === void 0 ? null : {
+				formula: spec.formula,
+				label: spec.label
+			};
+		});
+		function openFormula(index) {
+			formulaIndex.value = index;
+			nextTick(() => formulaOpen.value = true);
+		}
+		function applyFormula(value) {
+			const index = formulaIndex.value;
+			if (index < 0) {
+				config.value = {
+					...config.value,
+					values: [...config.value.values ?? [], value]
+				};
+				return;
+			}
+			config.value = withValue(config.value, index, {
+				formula: value.formula,
+				label: value.label ?? null
+			});
+		}
+		const isFormula = (item) => item.kind === "value" && valueSpec(item.index)?.formula !== void 0;
+		const filterOpen = ref(null);
+		function setFilterOpen(key, open) {
+			if (open) filterOpen.value = key;
+			else if (filterOpen.value === key) filterOpen.value = null;
+		}
+		function openFilter(item) {
+			nextTick(() => filterOpen.value = item.key);
+		}
+		const filterBy = (item) => {
+			if (item.kind === "dimension") {
+				const axis = areas.value.rows.some((i) => i.key === item.key) ? "rows" : "columns";
+				return dimensionOf(axis, item.field)?.by;
+			}
+			return filterOf(item.field)?.by;
+		};
+		function applyFilter(item, filter) {
+			const old = filterOf(item.field);
+			const kept = {
+				top: old?.top,
+				between: old?.between
+			};
+			if (kept.top || kept.between) {
+				filter = {
+					...filter,
+					...kept.top ? { top: kept.top } : {},
+					...kept.between ? { between: kept.between } : {}
+				};
+				if (filter.by === void 0 && old?.by !== void 0) filter.by = old.by;
+			}
+			config.value = withFilter(config.value, item.field, filter, item.kind === "filter");
+			filterOpen.value = null;
+		}
+		const breakpoints = useBreakpoints();
+		const mounted = ref(false);
+		onMounted(() => mounted.value = true);
+		const inDrawer = computed(() => props.drawer === "auto" ? mounted.value && !breakpoints.sm : props.drawer);
+		const drawerOpen = ref(false);
+		const areaTitle = (area) => messages.value.fields.areas[area];
+		/** Where else an item can go; a count of records has no field to group or filter by. */
+		const otherAreas = (item) => {
+			const here = areaOf(item);
+			return AREAS.filter((a) => a !== here && (item.field || a === "values"));
+		};
+		const axisOf = (item) => areas.value.rows.some((i) => i.key === item.key) ? "rows" : "columns";
+		const filtered = (item) => isFiltering(filterOf(item.field));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(inDrawer.value ? "dou-pivot-fields-trigger" : "dou-pivot-fields"),
+				role: inDrawer.value ? void 0 : "region",
+				"aria-label": inDrawer.value ? void 0 : unref(messages).fields.panel
+			}, [
+				inDrawer.value ? (openBlock(), createBlock(unref(DouButton), {
+					key: 0,
+					size: "sm",
+					variant: "outline",
+					onClick: _cache[0] || (_cache[0] = ($event) => drawerOpen.value = true)
+				}, {
+					leading: withCtx(() => [createVNode(unref(TablePivotIcon), { "aria-hidden": "true" })]),
+					default: withCtx(() => [createTextVNode(" " + toDisplayString(unref(messages).fields.open), 1)]),
+					_: 1
+				})) : createCommentVNode("", true),
+				(openBlock(), createBlock(resolveDynamicComponent(inDrawer.value ? unref(DouDrawer) : "div"), mergeProps(inDrawer.value ? {
+					open: drawerOpen.value,
+					title: unref(messages).fields.panel,
+					placement: "bottom",
+					size: "80%"
+				} : { class: "dou-pivot-fields__inner" }, { "onUpdate:open": _cache[6] || (_cache[6] = ($event) => drawerOpen.value = $event) }), {
+					default: withCtx(() => [createElementVNode("div", { class: normalizeClass(inDrawer.value ? "dou-pivot-fields is-in-drawer" : "dou-pivot-fields__body") }, [createElementVNode("section", {
+						class: "dou-pivot-fields__list-part",
+						"aria-label": unref(messages).fields.list
+					}, [createVNode(unref(DouInput), {
+						modelValue: query.value,
+						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => query.value = $event),
+						size: "sm",
+						type: "search",
+						clearable: "",
+						placeholder: unref(messages).fields.search,
+						"aria-label": unref(messages).fields.search
+					}, {
+						prefix: withCtx(() => [createVNode(unref(SearchIcon), { "aria-hidden": "true" })]),
+						_: 1
+					}, 8, [
+						"modelValue",
+						"placeholder",
+						"aria-label"
+					]), createVNode(unref(DouSortable), {
+						modelValue: listItems.value,
+						"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => listItems.value = $event),
+						class: "dou-pivot-fields__list",
+						group,
+						animation: false,
+						"item-key": "key",
+						"item-label": (item) => itemLabel(item)
+					}, {
+						default: withCtx(({ item }) => [createElementVNode("div", _hoisted_3, [
+							createVNode(unref(DouCheckbox), {
+								size: "sm",
+								"model-value": used.value.has(item.field),
+								"aria-label": itemLabel(item),
+								"onUpdate:modelValue": ($event) => toggleField(item.field, !!$event)
+							}, null, 8, [
+								"model-value",
+								"aria-label",
+								"onUpdate:modelValue"
+							]),
+							(openBlock(), createBlock(resolveDynamicComponent(TYPE_ICON[field(item.field).type]), {
+								class: "dou-pivot-fields__type",
+								"aria-hidden": "true"
+							})),
+							createElementVNode("span", _hoisted_4, toDisplayString(itemLabel(item)), 1)
+						])]),
+						empty: withCtx(() => [createElementVNode("p", _hoisted_5, toDisplayString(unref(messages).fields.noFields), 1)]),
+						_: 1
+					}, 8, ["modelValue", "item-label"])], 8, _hoisted_2), createElementVNode("div", _hoisted_6, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(AREAS), (area) => {
+						return openBlock(), createElementBlock("section", {
+							key: area,
+							class: normalizeClass(["dou-pivot-fields__area", `is-${area}`]),
+							"aria-label": areaTitle(area)
+						}, [
+							createElementVNode("h3", _hoisted_8, [(openBlock(), createBlock(resolveDynamicComponent(AREA_ICON[area]), { "aria-hidden": "true" })), createTextVNode(" " + toDisplayString(areaTitle(area)), 1)]),
+							createVNode(unref(DouSortable), {
+								modelValue: unref(models)[area].value,
+								"onUpdate:modelValue": ($event) => unref(models)[area].value = $event,
+								class: "dou-pivot-fields__chips",
+								group,
+								"item-key": "key",
+								"item-label": (item) => chipText(item)
+							}, {
+								default: withCtx(({ item }) => [createElementVNode("div", { class: normalizeClass(["dou-pivot-fields__chip", { "is-filtered": filtered(item) }]) }, [
+									createElementVNode("span", {
+										class: "dou-pivot-fields__chip-text",
+										title: chipText(item)
+									}, [createElementVNode("span", _hoisted_10, toDisplayString(chipName(item)), 1), chipGroup(item) ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(chipGroup(item)), 1)) : createCommentVNode("", true)], 8, _hoisted_9),
+									canFilter(item) ? (openBlock(), createBlock(unref(DouPopover), {
+										key: 0,
+										open: filterOpen.value === item.key,
+										placement: "bottom-start",
+										width: 260,
+										"onUpdate:open": ($event) => setFilterOpen(item.key, $event)
+									}, {
+										content: withCtx(() => [(openBlock(), createBlock(filter_list_default, {
+											key: filterOpen.value === item.key ? "open" : "closed",
+											source: unref(source),
+											field: item.field,
+											by: filterBy(item),
+											filter: filterOf(item.field),
+											messages: unref(messages),
+											onApply: ($event) => applyFilter(item, $event),
+											onCancel: _cache[3] || (_cache[3] = ($event) => filterOpen.value = null)
+										}, null, 8, [
+											"source",
+											"field",
+											"by",
+											"filter",
+											"messages",
+											"onApply"
+										]))]),
+										default: withCtx(() => [createElementVNode("button", {
+											type: "button",
+											class: normalizeClass(["dou-pivot-fields__chip-button", { "is-on": filtered(item) }]),
+											"aria-label": filtered(item) ? `${unref(messages).fields.filtered}，${unref(format)(unref(messages).filter.title, { field: itemLabel(item) })}` : unref(format)(unref(messages).filter.title, { field: itemLabel(item) })
+										}, [createVNode(unref(FilterIcon), { "aria-hidden": "true" })], 10, _hoisted_12)]),
+										_: 2
+									}, 1032, ["open", "onUpdate:open"])) : createCommentVNode("", true),
+									createVNode(unref(DouDropdown), { placement: "bottom-end" }, {
+										menu: withCtx(() => [
+											item.kind === "dimension" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+												createVNode(unref(DouDropdownSub), { title: unref(messages).fields.sort }, {
+													default: withCtx(() => [createVNode(unref(DouDropdownRadioGroup), {
+														"model-value": sortKey(axisOf(item), item.field),
+														"onUpdate:modelValue": ($event) => onSort(axisOf(item), item.field, $event)
+													}, {
+														default: withCtx(() => [
+															createVNode(unref(DouDropdownItem), { value: "asc" }, {
+																default: withCtx(() => [createTextVNode(toDisplayString(unref(messages).fields.asc), 1)]),
+																_: 1
+															}),
+															createVNode(unref(DouDropdownItem), { value: "desc" }, {
+																default: withCtx(() => [createTextVNode(toDisplayString(unref(messages).fields.desc), 1)]),
+																_: 1
+															}),
+															axisOf(item) === "rows" ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(areas.value.values, (value, index) => {
+																return openBlock(), createElementBlock(Fragment, { key: value.key }, [createVNode(unref(DouDropdownItem), {
+																	value: `v:${index}:desc`,
+																	divided: index === 0
+																}, {
+																	default: withCtx(() => [createTextVNode(toDisplayString(unref(format)(unref(messages).fields.byValueDesc, { value: chipText(value) })), 1)]),
+																	_: 2
+																}, 1032, ["value", "divided"]), createVNode(unref(DouDropdownItem), { value: `v:${index}:asc` }, {
+																	default: withCtx(() => [createTextVNode(toDisplayString(unref(format)(unref(messages).fields.byValueAsc, { value: chipText(value) })), 1)]),
+																	_: 2
+																}, 1032, ["value"])], 64);
+															}), 128)) : createCommentVNode("", true)
+														]),
+														_: 2
+													}, 1032, ["model-value", "onUpdate:modelValue"])]),
+													_: 2
+												}, 1032, ["title"]),
+												groupingsFor(item.field).length ? (openBlock(), createBlock(unref(DouDropdownSub), {
+													key: 0,
+													title: unref(messages).fields.groupBy
+												}, {
+													default: withCtx(() => [createVNode(unref(DouDropdownRadioGroup), {
+														"model-value": unref(groupKey)(dimensionOf(axisOf(item), item.field)?.by),
+														"onUpdate:modelValue": ($event) => onGroup(axisOf(item), item.field, $event)
+													}, {
+														default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(groupingsFor(item.field), (option) => {
+															return openBlock(), createBlock(unref(DouDropdownItem), {
+																key: option.key,
+																value: option.key
+															}, {
+																default: withCtx(() => [createTextVNode(toDisplayString(option.text), 1)]),
+																_: 2
+															}, 1032, ["value"]);
+														}), 128))]),
+														_: 2
+													}, 1032, ["model-value", "onUpdate:modelValue"])]),
+													_: 2
+												}, 1032, ["title"])) : createCommentVNode("", true),
+												createVNode(unref(DouDropdownSub), { title: unref(messages).fields.top }, {
+													default: withCtx(() => [createVNode(unref(DouDropdownRadioGroup), {
+														"model-value": topKey(item.field),
+														"onUpdate:modelValue": ($event) => onTop(item, $event)
+													}, {
+														default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(topOptions(item.field), (option) => {
+															return openBlock(), createBlock(unref(DouDropdownItem), {
+																key: option.key,
+																value: option.key,
+																divided: option.key === "b5"
+															}, {
+																default: withCtx(() => [createTextVNode(toDisplayString(option.text), 1)]),
+																_: 2
+															}, 1032, ["value", "divided"]);
+														}), 128))]),
+														_: 2
+													}, 1032, ["model-value", "onUpdate:modelValue"]), createVNode(unref(DouDropdownItem), {
+														divided: "",
+														onClick: ($event) => openTop(item)
+													}, {
+														default: withCtx(() => [createTextVNode(toDisplayString(unref(messages).fields.customTop), 1)]),
+														_: 1
+													}, 8, ["onClick"])]),
+													_: 2
+												}, 1032, ["title"]),
+												createVNode(unref(DouDropdownItem), {
+													checked: dimensionOf(axisOf(item), item.field)?.subtotal !== false,
+													"onUpdate:checked": ($event) => onSubtotal(axisOf(item), item.field, $event)
+												}, {
+													default: withCtx(() => [createTextVNode(toDisplayString(unref(messages).fields.subtotal), 1)]),
+													_: 1
+												}, 8, ["checked", "onUpdate:checked"])
+											], 64)) : createCommentVNode("", true),
+											item.kind === "value" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+												isFormula(item) ? (openBlock(), createBlock(unref(DouDropdownItem), {
+													key: 0,
+													onClick: ($event) => openFormula(item.index)
+												}, {
+													default: withCtx(() => [createTextVNode(toDisplayString(unref(messages).fields.editFormula), 1)]),
+													_: 1
+												}, 8, ["onClick"])) : (openBlock(), createBlock(unref(DouDropdownSub), {
+													key: 1,
+													title: unref(messages).fields.aggregate
+												}, {
+													default: withCtx(() => [createVNode(unref(DouDropdownRadioGroup), {
+														"model-value": currentAggregate(item.index),
+														"onUpdate:modelValue": ($event) => onAggregate(item.index, $event)
+													}, {
+														default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(aggregatesFor(item.field), (name) => {
+															return openBlock(), createBlock(unref(DouDropdownItem), {
+																key: name,
+																value: name
+															}, {
+																default: withCtx(() => [createTextVNode(toDisplayString(aggregateText(name)), 1)]),
+																_: 2
+															}, 1032, ["value"]);
+														}), 128))]),
+														_: 2
+													}, 1032, ["model-value", "onUpdate:modelValue"])]),
+													_: 2
+												}, 1032, ["title"])),
+												createVNode(unref(DouDropdownSub), { title: unref(messages).fields.showAs }, {
+													default: withCtx(() => [createVNode(unref(DouDropdownRadioGroup), {
+														"model-value": showKey(item.index),
+														"onUpdate:modelValue": ($event) => onShow(item.index, $event)
+													}, {
+														default: withCtx(() => [createVNode(unref(DouDropdownItem), { value: "" }, {
+															default: withCtx(() => [createTextVNode(toDisplayString(unref(messages).fields.showPlain), 1)]),
+															_: 1
+														}), (openBlock(), createElementBlock(Fragment, null, renderList(SHOWS, (show, i) => {
+															return createVNode(unref(DouDropdownItem), {
+																key: show,
+																value: show,
+																divided: i === 0 || show === "difference"
+															}, {
+																default: withCtx(() => [createTextVNode(toDisplayString(unref(messages).shows[show]), 1)]),
+																_: 2
+															}, 1032, ["value", "divided"]);
+														}), 64))]),
+														_: 1
+													}, 8, ["model-value", "onUpdate:modelValue"])]),
+													_: 2
+												}, 1032, ["title"]),
+												createVNode(unref(DouDropdownSub), { title: unref(messages).fields.mark }, {
+													default: withCtx(() => [createVNode(unref(DouDropdownRadioGroup), {
+														"model-value": markKey(item.index),
+														"onUpdate:modelValue": ($event) => onMark(item.index, $event)
+													}, {
+														default: withCtx(() => [
+															createVNode(unref(DouDropdownItem), { value: "" }, {
+																default: withCtx(() => [createTextVNode(toDisplayString(unref(messages).fields.noMark), 1)]),
+																_: 1
+															}),
+															createVNode(unref(DouDropdownItem), { value: "bar" }, {
+																default: withCtx(() => [createTextVNode(toDisplayString(unref(messages).fields.bar), 1)]),
+																_: 1
+															}),
+															createVNode(unref(DouDropdownItem), { value: "scale" }, {
+																default: withCtx(() => [createTextVNode(toDisplayString(unref(messages).fields.scale), 1)]),
+																_: 1
+															})
+														]),
+														_: 1
+													}, 8, ["model-value", "onUpdate:modelValue"])]),
+													_: 2
+												}, 1032, ["title"]),
+												(config.value.values?.length ?? 0) > 1 ? (openBlock(), createBlock(unref(DouDropdownItem), {
+													key: 2,
+													checked: config.value.valuesOn === "rows",
+													"onUpdate:checked": _cache[4] || (_cache[4] = ($event) => config.value = {
+														...config.value,
+														valuesOn: $event ? "rows" : "columns"
+													})
+												}, {
+													default: withCtx(() => [createTextVNode(toDisplayString(unref(messages).fields.valuesOnRows), 1)]),
+													_: 1
+												}, 8, ["checked"])) : createCommentVNode("", true)
+											], 64)) : createCommentVNode("", true),
+											canFilter(item) ? (openBlock(), createBlock(unref(DouDropdownItem), {
+												key: 2,
+												onClick: ($event) => openFilter(item)
+											}, {
+												default: withCtx(() => [createTextVNode(toDisplayString(unref(messages).fields.filter), 1)]),
+												_: 1
+											}, 8, ["onClick"])) : createCommentVNode("", true),
+											createVNode(unref(DouDropdownItem), {
+												divided: "",
+												disabled: placeOf(item).first,
+												onClick: ($event) => shift(item, -1)
+											}, {
+												default: withCtx(() => [createTextVNode(toDisplayString(unref(messages).fields.moveUp), 1)]),
+												_: 1
+											}, 8, ["disabled", "onClick"]),
+											createVNode(unref(DouDropdownItem), {
+												disabled: placeOf(item).last,
+												onClick: ($event) => shift(item, 1)
+											}, {
+												default: withCtx(() => [createTextVNode(toDisplayString(unref(messages).fields.moveDown), 1)]),
+												_: 1
+											}, 8, ["disabled", "onClick"]),
+											createVNode(unref(DouDropdownSub), { title: unref(messages).fields.moveTo }, {
+												default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(otherAreas(item), (to) => {
+													return openBlock(), createBlock(unref(DouDropdownItem), {
+														key: to,
+														onClick: ($event) => moveTo(item, to)
+													}, {
+														default: withCtx(() => [createTextVNode(toDisplayString(areaTitle(to)), 1)]),
+														_: 2
+													}, 1032, ["onClick"]);
+												}), 128))]),
+												_: 2
+											}, 1032, ["title"]),
+											createVNode(unref(DouDropdownItem), {
+												tone: "danger",
+												onClick: ($event) => moveTo(item, null)
+											}, {
+												default: withCtx(() => [createTextVNode(toDisplayString(unref(messages).fields.remove), 1)]),
+												_: 1
+											}, 8, ["onClick"])
+										]),
+										default: withCtx(() => [createElementVNode("button", {
+											type: "button",
+											class: "dou-pivot-fields__chip-button",
+											"aria-label": unref(format)(unref(messages).fields.menu, { field: chipText(item) })
+										}, [createVNode(unref(ChevronDownIcon), { "aria-hidden": "true" })], 8, _hoisted_13)]),
+										_: 2
+									}, 1024)
+								], 2)]),
+								empty: withCtx(() => [createElementVNode("p", _hoisted_14, toDisplayString(unref(messages).fields.dropHere), 1)]),
+								_: 1
+							}, 8, [
+								"modelValue",
+								"onUpdate:modelValue",
+								"item-label"
+							]),
+							area === "values" ? (openBlock(), createBlock(unref(DouButton), {
+								key: 0,
+								class: "dou-pivot-fields__add",
+								size: "sm",
+								variant: "ghost",
+								onClick: _cache[5] || (_cache[5] = ($event) => openFormula(-1))
+							}, {
+								leading: withCtx(() => [createVNode(unref(PlusIcon), { "aria-hidden": "true" })]),
+								default: withCtx(() => [createTextVNode(" " + toDisplayString(unref(messages).fields.addFormula), 1)]),
+								_: 1
+							})) : createCommentVNode("", true)
+						], 10, _hoisted_7);
+					}), 128))])], 2)]),
+					_: 1
+				}, 16)),
+				createVNode(formula_dialog_default, {
+					open: formulaOpen.value,
+					"onUpdate:open": _cache[7] || (_cache[7] = ($event) => formulaOpen.value = $event),
+					source: unref(source),
+					messages: unref(messages),
+					initial: formulaInitial.value,
+					onApply: applyFormula
+				}, null, 8, [
+					"open",
+					"source",
+					"messages",
+					"initial"
+				]),
+				createVNode(top_dialog_default, {
+					open: topOpen.value,
+					"onUpdate:open": _cache[8] || (_cache[8] = ($event) => topOpen.value = $event),
+					messages: unref(messages),
+					field: topItem.value ? itemLabel(topItem.value) : "",
+					values: areas.value.values.map((v) => chipText(v)),
+					filter: topItem.value ? filterOf(topItem.value.field) : void 0,
+					onApply: _cache[9] || (_cache[9] = ($event) => topItem.value && setRank(topItem.value, $event))
+				}, null, 8, [
+					"open",
+					"messages",
+					"field",
+					"values",
+					"filter"
+				])
+			], 10, _hoisted_1);
+		};
+	}
+});
+export { fields_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=fields.vue_vue_type_script_setup_true_lang.js.map