@chelone/vue 0.6.0 → 0.9.0

package/dist/components/block-editor/block-picker.js

@@ -0,0 +1,4 @@
+import block_picker_vue_vue_type_script_setup_true_lang_default from "./block-picker.vue_vue_type_script_setup_true_lang.js";
+// src/components/block-editor/block-picker.vue
+var block_picker_default = block_picker_vue_vue_type_script_setup_true_lang_default;
+export { block_picker_default as default };

package/dist/components/block-editor/block-picker.vue.d.ts

@@ -0,0 +1,26 @@
+import type { BlockDefinition } from "./block-nodes.js";
+/** Props for {@link BlockPicker}. */
+export interface BlockPickerProps {
+    blocks: readonly BlockDefinition[];
+    query: string;
+    /** Shows a search box that edits `query`. The slash menu has none: the editor holds the text. */
+    searchable?: boolean;
+    anchor: () => DOMRect | null;
+    /** The picker puts its handler for the editor's arrow and Enter keys here. */
+    keyHandler: {
+        current: ((event: KeyboardEvent) => boolean) | null;
+    };
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<BlockPickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (block: BlockDefinition<import("@chelone/core").BlockAttrs>) => any;
+    close: () => any;
+    "update:query": (query: string) => any;
+}, string, import("vue").PublicProps, Readonly<BlockPickerProps> & Readonly<{
+    onSelect?: ((block: BlockDefinition<import("@chelone/core").BlockAttrs>) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    "onUpdate:query"?: ((query: string) => any) | undefined;
+}>, {
+    searchable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/block-editor/block-picker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,141 @@
+import { useTranslate } from "../../i18n/use-translate.js";
+import command_default from "../ui/command/command.js";
+import { CommandEmpty, CommandList } from "../ui/command/parts.js";
+import command_group_default from "../ui/command/command-group.js";
+import command_input_default from "../ui/command/command-input.js";
+import command_item_default from "../ui/command/command-item.js";
+import { useCommand } from "../ui/command/context.js";
+import { translateBlock } from "./block-nodes.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, resolveDynamicComponent, toDisplayString, unref, withCtx, withKeys } from "vue";
+import { matchBlocks } from "@chelone/core";
+// src/components/block-editor/block-picker.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex flex-col" };
+var _hoisted_2 = {
+	key: 0,
+	class: "text-muted-foreground text-xs"
+};
+var block_picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "block-picker",
+	props: {
+		blocks: {},
+		query: {},
+		searchable: {
+			type: Boolean,
+			default: false
+		},
+		anchor: {},
+		keyHandler: {}
+	},
+	emits: [
+		"update:query",
+		"select",
+		"close"
+	],
+	setup(__props, { emit: __emit }) {
+		/**
+		* The block menu, placed at a client rect, listing the blocks that match
+		* `query` by group. Built on the `Command` family with its own filter off:
+		* `matchBlocks` decides what shows.
+		*/
+		const props = __props;
+		const emit = __emit;
+		const translate = useTranslate();
+		const root = ref(null);
+		const matches = computed(() => matchBlocks(props.blocks.map((block) => translateBlock(translate, block)), props.query));
+		const groups = computed(() => {
+			const byGroup = /* @__PURE__ */ new Map();
+			for (const block of matches.value) byGroup.set(block.group, [...byGroup.get(block.group) ?? [], block]);
+			return [...byGroup];
+		});
+		const KeyBridge = defineComponent({ setup() {
+			const command = useCommand();
+			props.keyHandler.current = (event) => {
+				if (event.key === "ArrowDown") command.move("next");
+				else if (event.key === "ArrowUp") command.move("prev");
+				else if (event.key === "Enter") {
+					if (command.activeId.value === null) return false;
+					command.selectActive();
+				} else return false;
+				return true;
+			};
+			onBeforeUnmount(() => {
+				props.keyHandler.current = null;
+			});
+			return () => null;
+		} });
+		function closeOnOutsidePointer(event) {
+			const target = event.target;
+			if (!(target instanceof Element)) return;
+			if (root.value?.contains(target)) return;
+			if (target.closest("[data-slot=\"block-editor-add\"]")) return;
+			emit("close");
+		}
+		onMounted(() => document.addEventListener("pointerdown", closeOnOutsidePointer));
+		onBeforeUnmount(() => document.removeEventListener("pointerdown", closeOnOutsidePointer));
+		function keepEditorFocus(event) {
+			if (!props.searchable) event.preventDefault();
+		}
+		const position = computed(() => {
+			const rect = props.anchor();
+			return {
+				position: "fixed",
+				left: `${rect?.left ?? 0}px`,
+				top: `${(rect?.bottom ?? 0) + 4}px`,
+				zIndex: 50
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Teleport, { to: "body" }, [createElementVNode("div", {
+				ref_key: "root",
+				ref: root,
+				"data-slot": "block-editor-picker",
+				class: "w-72 rounded-md border bg-popover shadow-md",
+				style: normalizeStyle(position.value),
+				onMousedown: keepEditorFocus,
+				onKeydown: _cache[1] || (_cache[1] = withKeys(($event) => emit("close"), ["escape"]))
+			}, [createVNode(unref(command_default), {
+				"should-filter": false,
+				"model-value": __props.query,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:query", $event))
+			}, {
+				default: withCtx(() => [
+					createVNode(unref(KeyBridge)),
+					__props.searchable ? (openBlock(), createBlock(unref(command_input_default), {
+						key: 0,
+						autofocus: "",
+						placeholder: unref(translate)("chelone.block_editor.search", { _: "Search blocks" })
+					}, null, 8, ["placeholder"])) : createCommentVNode("", true),
+					createVNode(unref(CommandList), null, {
+						default: withCtx(() => [createVNode(unref(CommandEmpty), null, {
+							default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("chelone.block_editor.no_blocks", { _: "No blocks found" })), 1)]),
+							_: 1
+						}), (openBlock(true), createElementBlock(Fragment, null, renderList(groups.value, ([group, members]) => {
+							return openBlock(), createBlock(unref(command_group_default), {
+								key: group,
+								heading: group
+							}, {
+								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(members, (block) => {
+									return openBlock(), createBlock(unref(command_item_default), {
+										key: block.name,
+										value: block.name,
+										onSelect: ($event) => emit("select", block)
+									}, {
+										default: withCtx(() => [block.icon ? (openBlock(), createBlock(resolveDynamicComponent(block.icon), {
+											key: 0,
+											class: "size-4"
+										})) : createCommentVNode("", true), createElementVNode("span", _hoisted_1, [createElementVNode("span", null, toDisplayString(block.label), 1), block.description ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(block.description), 1)) : createCommentVNode("", true)])]),
+										_: 2
+									}, 1032, ["value", "onSelect"]);
+								}), 128))]),
+								_: 2
+							}, 1032, ["heading"]);
+						}), 128))]),
+						_: 1
+					})
+				]),
+				_: 1
+			}, 8, ["model-value"])], 36)]);
+		};
+	}
+});
+export { block_picker_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/block-editor/block-toolbar.js

@@ -0,0 +1,4 @@
+import block_toolbar_vue_vue_type_script_setup_true_lang_default, { moveTopLevelBlock } from "./block-toolbar.vue_vue_type_script_setup_true_lang.js";
+// src/components/block-editor/block-toolbar.vue
+var block_toolbar_default = block_toolbar_vue_vue_type_script_setup_true_lang_default;
+export { block_toolbar_default as default, moveTopLevelBlock };

package/dist/components/block-editor/block-toolbar.vue.d.ts

@@ -0,0 +1,16 @@
+import type { BlockRegistry } from "@chelone/core";
+import type { Editor } from "@tiptap/core";
+import type { BlockDefinition } from "./block-nodes.js";
+/** Props for {@link BlockToolbar}. */
+export interface BlockToolbarProps {
+    editor: Editor;
+    registry: BlockRegistry<BlockDefinition>;
+}
+/**
+ * Moves the top-level block at index `from` to index `to` in one transaction,
+ * so one undo puts it back, and selects it there.
+ */
+export declare function moveTopLevelBlock(editor: Editor, from: number, to: number): void;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<BlockToolbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlockToolbarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/block-editor/block-toolbar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,223 @@
+import { useTranslate } from "../../i18n/use-translate.js";
+import button_default from "../ui/button.js";
+import auto_config_form_default from "./auto-config-form.js";
+import { ArrowDownIcon, ArrowUpIcon, CopyIcon, SettingsIcon, Trash2Icon } from "./block-icons.js";
+import { translateBlock } from "./block-nodes.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeProps, onBeforeUnmount, openBlock, ref, renderList, resolveDynamicComponent, shallowRef, toDisplayString, unref, watch, withCtx } from "vue";
+import { deepEqual } from "@chelone/core";
+import { NodeSelection } from "@tiptap/pm/state";
+// src/components/block-editor/block-toolbar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = { class: "px-2 text-muted-foreground text-xs" };
+var _hoisted_3 = {
+	key: 0,
+	"data-slot": "block-config",
+	class: "border-b p-3"
+};
+/** Moves child `from` of `parent` to index `to`, and selects it. `start` is where the parent's content begins. */
+function moveChild(tr, parent, start, from, to) {
+	const lo = Math.min(from, to);
+	const hi = Math.max(from, to);
+	const moved = parent.child(from);
+	const between = [];
+	let rangeStart = start;
+	let rangeEnd = start;
+	parent.forEach((child, _offset, index) => {
+		if (index < lo) rangeStart += child.nodeSize;
+		if (index <= hi) rangeEnd += child.nodeSize;
+		if (index >= lo && index <= hi && index !== from) between.push(child);
+	});
+	between.splice(to - lo, 0, moved);
+	tr.replaceWith(rangeStart, rangeEnd, between);
+	let at = rangeStart;
+	for (const child of between.slice(0, to - lo)) at += child.nodeSize;
+	tr.setSelection(NodeSelection.create(tr.doc, at));
+}
+/**
+* Moves the top-level block at index `from` to index `to` in one transaction,
+* so one undo puts it back, and selects it there.
+*/
+function moveTopLevelBlock(editor, from, to) {
+	const { doc } = editor.state;
+	if (from === to || from < 0 || to < 0) return;
+	if (from >= doc.childCount || to >= doc.childCount) return;
+	const { tr } = editor.state;
+	moveChild(tr, doc, 0, from, to);
+	editor.view.dispatch(tr.scrollIntoView());
+	editor.view.focus();
+}
+var block_toolbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "block-toolbar",
+	props: {
+		editor: {},
+		registry: {}
+	},
+	setup(__props) {
+		/**
+		* A bar above the document for the block that is selected or holds the caret:
+		* configure, duplicate, move and delete. Configure opens a panel under the
+		* bar. The Vue twin of `@chelone/react`'s `block-editor/block-toolbar.tsx`.
+		*/
+		const props = __props;
+		function selectedBlock() {
+			const { selection } = props.editor.state;
+			const { $from } = selection;
+			if (selection instanceof NodeSelection && props.registry.get(selection.node.type.name)) return {
+				name: selection.node.type.name,
+				pos: selection.from,
+				index: $from.index(),
+				count: $from.parent.childCount,
+				attrs: selection.node.attrs
+			};
+			for (let depth = $from.depth; depth > 0; depth--) {
+				const node = $from.node(depth);
+				if (props.registry.get(node.type.name)) return {
+					name: node.type.name,
+					pos: $from.before(depth),
+					index: $from.index(depth - 1),
+					count: $from.node(depth - 1).childCount,
+					attrs: node.attrs
+				};
+			}
+			return null;
+		}
+		const translate = useTranslate();
+		const selected = shallowRef(selectedBlock());
+		const configFor = ref(null);
+		const refresh = () => {
+			const next = selectedBlock();
+			if (!deepEqual(next, selected.value)) selected.value = next;
+		};
+		props.editor.on("transaction", refresh);
+		onBeforeUnmount(() => props.editor.off("transaction", refresh));
+		watch(() => selected.value === null, (none) => {
+			if (none) configFor.value = null;
+		});
+		const definition = computed(() => selected.value ? props.registry.get(selected.value.name) : void 0);
+		function runOnBlock(pos, act, { focus = true } = {}) {
+			const { editor } = props;
+			const block = editor.state.doc.nodeAt(pos);
+			if (!block) return;
+			const { tr } = editor.state;
+			act(tr, block);
+			editor.view.dispatch(tr.scrollIntoView());
+			if (focus) editor.view.focus();
+		}
+		function duplicate(pos) {
+			runOnBlock(pos, (tr, block) => {
+				const end = pos + block.nodeSize;
+				tr.insert(end, block);
+				tr.setSelection(NodeSelection.create(tr.doc, end));
+			});
+		}
+		function remove(pos) {
+			runOnBlock(pos, (tr, block) => {
+				tr.delete(pos, pos + block.nodeSize);
+			});
+		}
+		/** Moves the block at `pos` one place among its siblings. */
+		function moveSibling(pos, step) {
+			const { editor } = props;
+			const $pos = editor.state.doc.resolve(pos);
+			const index = $pos.index();
+			const to = index + step;
+			if (to < 0 || to >= $pos.parent.childCount) return;
+			if ($pos.depth === 0) {
+				moveTopLevelBlock(editor, index, to);
+				return;
+			}
+			runOnBlock(pos, (tr) => {
+				moveChild(tr, $pos.parent, $pos.start(), index, to);
+			});
+		}
+		const moveUp = (pos) => moveSibling(pos, -1);
+		const moveDown = (pos) => moveSibling(pos, 1);
+		const patchAt = (pos) => (attrs) => runOnBlock(pos, (tr, block) => {
+			tr.setNodeMarkup(pos, void 0, {
+				...block.attrs,
+				...attrs
+			});
+		}, { focus: false });
+		const patch = computed(() => patchAt(selected.value?.pos ?? 0));
+		const configOpen = computed(() => selected.value !== null && configFor.value === selected.value.name);
+		function toggleConfig() {
+			configFor.value = configOpen.value ? null : selected.value?.name ?? null;
+		}
+		const actions = computed(() => {
+			const current = selected.value;
+			if (!current) return [];
+			return [
+				...definition.value?.config === void 0 ? [] : [{
+					id: "configure",
+					label: translate("chelone.block_editor.toolbar.configure", { _: "Configure" }),
+					icon: SettingsIcon,
+					pressed: configOpen.value,
+					run: toggleConfig
+				}],
+				{
+					id: "duplicate",
+					label: translate("chelone.block_editor.toolbar.duplicate", { _: "Duplicate" }),
+					icon: CopyIcon,
+					run: () => duplicate(current.pos)
+				},
+				{
+					id: "move-up",
+					label: translate("chelone.block_editor.toolbar.move_up", { _: "Move up" }),
+					icon: ArrowUpIcon,
+					disabled: current.index === 0,
+					run: () => moveUp(current.pos)
+				},
+				{
+					id: "move-down",
+					label: translate("chelone.block_editor.toolbar.move_down", { _: "Move down" }),
+					icon: ArrowDownIcon,
+					disabled: current.index === current.count - 1,
+					run: () => moveDown(current.pos)
+				},
+				{
+					id: "delete",
+					label: translate("chelone.block_editor.toolbar.delete", { _: "Delete" }),
+					icon: Trash2Icon,
+					run: () => remove(current.pos)
+				}
+			];
+		});
+		const config = computed(() => definition.value?.config);
+		return (_ctx, _cache) => {
+			return selected.value && definition.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("div", {
+				role: "toolbar",
+				"data-slot": "block-toolbar",
+				"aria-label": unref(translate)("chelone.block_editor.toolbar.label", { _: "Block actions" }),
+				class: "flex items-center gap-1 border-b p-1"
+			}, [createElementVNode("span", _hoisted_2, toDisplayString(unref(translateBlock)(unref(translate), definition.value).label), 1), (openBlock(true), createElementBlock(Fragment, null, renderList(actions.value, (action) => {
+				return openBlock(), createBlock(button_default, {
+					key: action.id,
+					variant: "ghost",
+					size: "icon",
+					"aria-label": action.label,
+					"aria-pressed": action.pressed,
+					title: action.label,
+					disabled: action.disabled,
+					onClick: action.run
+				}, {
+					default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(action.icon)))]),
+					_: 2
+				}, 1032, [
+					"aria-label",
+					"aria-pressed",
+					"title",
+					"disabled",
+					"onClick"
+				]);
+			}), 128))], 8, _hoisted_1), config.value !== void 0 && configOpen.value ? (openBlock(), createElementBlock("div", _hoisted_3, [config.value === "auto" ? (openBlock(), createBlock(auto_config_form_default, mergeProps({
+				key: 0,
+				schema: definition.value.schema,
+				attrs: selected.value.attrs
+			}, { onChange: patch.value }), null, 16, ["schema", "attrs"])) : (openBlock(), createBlock(resolveDynamicComponent(config.value), normalizeProps(mergeProps({ key: 1 }, {
+				attrs: selected.value.attrs,
+				onChange: patch.value
+			})), null, 16))])) : createCommentVNode("", true)], 64)) : createCommentVNode("", true);
+		};
+	}
+});
+export { block_toolbar_vue_vue_type_script_setup_true_lang_default as default, moveTopLevelBlock };

package/dist/components/block-editor/callout-block.js

@@ -0,0 +1,4 @@
+import callout_block_vue_vue_type_script_setup_true_lang_default from "./callout-block.vue_vue_type_script_setup_true_lang.js";
+// src/components/block-editor/callout-block.vue
+var callout_block_default = callout_block_vue_vue_type_script_setup_true_lang_default;
+export { callout_block_default as default };

package/dist/components/block-editor/callout-block.vue.d.ts

@@ -0,0 +1,10 @@
+import type { CalloutAttrs } from "./default-blocks.js";
+type __VLS_Props = {
+    attrs: CalloutAttrs;
+    mode: "edit" | "read";
+    selected?: boolean;
+    updateAttrs?: (attrs: Partial<CalloutAttrs>) => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/block-editor/callout-block.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,29 @@
+import { cn } from "../../lib/utils.js";
+import { NodeViewContent } from "./block-nodes.js";
+import { createElementBlock, createVNode, defineComponent, normalizeClass, openBlock, unref } from "vue";
+// src/components/block-editor/callout-block.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-variant"];
+var callout_block_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "callout-block",
+	props: {
+		attrs: {},
+		mode: {},
+		selected: { type: Boolean },
+		updateAttrs: { type: Function }
+	},
+	setup(__props) {
+		/** The view of the callout block: a bordered box of blocks, tinted by `variant`. */
+		const variantClass = {
+			info: "border-blue-500/50 bg-blue-500/10",
+			warning: "border-amber-500/50 bg-amber-500/10",
+			success: "border-green-500/50 bg-green-500/10"
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-variant": __props.attrs.variant,
+				class: normalizeClass(unref(cn)("my-2 rounded-md border p-3", variantClass[__props.attrs.variant]))
+			}, [createVNode(unref(NodeViewContent))], 10, _hoisted_1);
+		};
+	}
+});
+export { callout_block_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/block-editor/chart-block-config.js

@@ -0,0 +1,4 @@
+import chart_block_config_vue_vue_type_script_setup_true_lang_default from "./chart-block-config.vue_vue_type_script_setup_true_lang.js";
+// src/components/block-editor/chart-block-config.vue
+var chart_block_config_default = chart_block_config_vue_vue_type_script_setup_true_lang_default;
+export { chart_block_config_default as default };

package/dist/components/block-editor/chart-block-config.vue.d.ts

@@ -0,0 +1,8 @@
+import type { ChartAttrs } from "./data-blocks.js";
+type __VLS_Props = {
+    attrs: ChartAttrs;
+    onChange: (attrs: Partial<ChartAttrs>) => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/block-editor/chart-block-config.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,115 @@
+import { useTranslate } from "../../i18n/use-translate.js";
+import { FieldLabel } from "../ui/field.js";
+import input_default from "../ui/input.js";
+import native_select_default from "../ui/native-select.js";
+import data_block_resource_select_default from "./data-block-resource-select.js";
+import { createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, toDisplayString, unref, useId, withCtx } from "vue";
+// src/components/block-editor/chart-block-config.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "grid gap-3 sm:grid-cols-2" };
+var _hoisted_2 = { class: "flex flex-col gap-1.5" };
+var _hoisted_3 = { class: "flex flex-col gap-1.5" };
+var _hoisted_4 = { class: "flex flex-col gap-1.5" };
+var _hoisted_5 = { class: "flex flex-col gap-1.5" };
+var chart_block_config_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "chart-block-config",
+	props: {
+		attrs: {},
+		onChange: { type: Function }
+	},
+	setup(__props) {
+		/** The config of the chart block: resource, chart type, category and value fields, and aggregate. */
+		const props = __props;
+		const translate = useTranslate();
+		const typeId = useId();
+		const categoryId = useId();
+		const valueId = useId();
+		const aggregateId = useId();
+		const types = [
+			{
+				value: "bar",
+				label: translate("chelone.block_editor.chart.bar", { _: "Bar" })
+			},
+			{
+				value: "line",
+				label: translate("chelone.block_editor.chart.line", { _: "Line" })
+			},
+			{
+				value: "pie",
+				label: translate("chelone.block_editor.chart.pie", { _: "Pie" })
+			}
+		];
+		const aggregates = [
+			{
+				value: "count",
+				label: translate("chelone.block_editor.chart.count", { _: "Count" })
+			},
+			{
+				value: "sum",
+				label: translate("chelone.block_editor.chart.sum", { _: "Sum" })
+			},
+			{
+				value: "avg",
+				label: translate("chelone.block_editor.chart.avg", { _: "Average" })
+			}
+		];
+		function setType(value) {
+			const chosen = types.find((choice) => choice.value === value);
+			if (chosen) props.onChange({ type: chosen.value });
+		}
+		function setAggregate(value) {
+			const chosen = aggregates.find((choice) => choice.value === value);
+			if (chosen) props.onChange({ aggregate: chosen.value });
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				createVNode(data_block_resource_select_default, {
+					value: __props.attrs.resource,
+					onChange: _cache[0] || (_cache[0] = ($event) => __props.onChange({ resource: $event }))
+				}, null, 8, ["value"]),
+				createElementVNode("div", _hoisted_2, [createVNode(unref(FieldLabel), { "html-for": unref(typeId) }, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("chelone.block_editor.chart.type", { _: "Chart type" })), 1)]),
+					_: 1
+				}, 8, ["html-for"]), createVNode(native_select_default, {
+					id: unref(typeId),
+					"model-value": __props.attrs.type,
+					options: [...types],
+					"onUpdate:modelValue": setType
+				}, null, 8, [
+					"id",
+					"model-value",
+					"options"
+				])]),
+				createElementVNode("div", _hoisted_3, [createVNode(unref(FieldLabel), { "html-for": unref(categoryId) }, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("chelone.block_editor.chart.category", { _: "Category field" })), 1)]),
+					_: 1
+				}, 8, ["html-for"]), createVNode(input_default, {
+					id: unref(categoryId),
+					"model-value": __props.attrs.category,
+					"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => __props.onChange({ category: $event }))
+				}, null, 8, ["id", "model-value"])]),
+				createElementVNode("div", _hoisted_4, [createVNode(unref(FieldLabel), { "html-for": unref(valueId) }, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("chelone.block_editor.chart.value", { _: "Value field" })), 1)]),
+					_: 1
+				}, 8, ["html-for"]), createVNode(input_default, {
+					id: unref(valueId),
+					"model-value": __props.attrs.value,
+					"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => __props.onChange({ value: $event }))
+				}, null, 8, ["id", "model-value"])]),
+				createElementVNode("div", _hoisted_5, [createVNode(unref(FieldLabel), { "html-for": unref(aggregateId) }, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("chelone.block_editor.chart.aggregate", { _: "Aggregate" })), 1)]),
+					_: 1
+				}, 8, ["html-for"]), createVNode(native_select_default, {
+					id: unref(aggregateId),
+					"model-value": __props.attrs.aggregate,
+					options: [...aggregates],
+					"onUpdate:modelValue": setAggregate
+				}, null, 8, [
+					"id",
+					"model-value",
+					"options"
+				])])
+			]);
+		};
+	}
+});
+export { chart_block_config_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/block-editor/chart-block.js

@@ -0,0 +1,4 @@
+import chart_block_vue_vue_type_script_setup_true_lang_default from "./chart-block.vue_vue_type_script_setup_true_lang.js";
+// src/components/block-editor/chart-block.vue
+var chart_block_default = chart_block_vue_vue_type_script_setup_true_lang_default;
+export { chart_block_default as default };

package/dist/components/block-editor/chart-block.vue.d.ts

@@ -0,0 +1,10 @@
+import type { ChartAttrs } from "./data-blocks.js";
+type __VLS_Props = {
+    attrs: ChartAttrs;
+    mode: "edit" | "read";
+    selected?: boolean;
+    updateAttrs?: (attrs: Partial<ChartAttrs>) => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;