@tailor-cms/ce-sequence-edit 0.0.1 → 0.0.2

package/dist/index.cjs

@@ -37,30 +37,32 @@ function _v4(options, buf, offset) {
 }
 //#endregion
 //#region ../manifest/dist/index.mjs
-var id1 = v4();
-var id2 = v4();
 var type = "SEQUENCE";
 var name = "Sequence";
-var initState = () => ({
-	mode: "steps",
-	embeds: {},
-	items: {
-		[id1]: {
-			id: id1,
-			marker: "",
-			title: "",
-			body: {},
-			position: 1
-		},
-		[id2]: {
-			id: id2,
-			marker: "",
-			title: "",
-			body: {},
-			position: 2
+var initState = () => {
+	const id1 = v4();
+	const id2 = v4();
+	return {
+		mode: "steps",
+		embeds: {},
+		items: {
+			[id1]: {
+				id: id1,
+				marker: "",
+				title: "",
+				body: {},
+				position: 1
+			},
+			[id2]: {
+				id: id2,
+				marker: "",
+				title: "",
+				body: {},
+				position: 2
+			}
 		}
-	}
-});
+	};
+};
 var ui = {
 	icon: "mdi-timeline-text",
 	forceFullWidth: true
@@ -3690,6 +3692,39 @@ function isEmpty(value) {
 	return true;
 }
 //#endregion
+//#region ../../node_modules/.pnpm/lodash-es@4.18.1/node_modules/lodash-es/isEqual.js
+/**
+* Performs a deep comparison between two values to determine if they are
+* equivalent.
+*
+* **Note:** This method supports comparing arrays, array buffers, booleans,
+* date objects, error objects, maps, numbers, `Object` objects, regexes,
+* sets, strings, symbols, and typed arrays. `Object` objects are compared
+* by their own, not inherited, enumerable properties. Functions and DOM
+* nodes are compared by strict equality, i.e. `===`.
+*
+* @static
+* @memberOf _
+* @since 0.1.0
+* @category Lang
+* @param {*} value The value to compare.
+* @param {*} other The other value to compare.
+* @returns {boolean} Returns `true` if the values are equivalent, else `false`.
+* @example
+*
+* var object = { 'a': 1 };
+* var other = { 'a': 1 };
+*
+* _.isEqual(object, other);
+* // => true
+*
+* object === other;
+* // => false
+*/
+function isEqual(value, other) {
+	return baseIsEqual(value, other);
+}
+//#endregion
 //#region ../../node_modules/.pnpm/lodash-es@4.18.1/node_modules/lodash-es/isNumber.js
 /** `Object#toString` result references. */
 var numberTag = "[object Number]";
@@ -5558,7 +5593,8 @@ Bt.mounted, Bt.unmounted;
 //#endregion
 //#region src/components/SequenceItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$1 = { class: "d-flex align-center w-100 ga-2" };
-var _hoisted_2$1 = { class: "text-caption" };
+var _hoisted_2 = { class: "text-label-large" };
+var SAVE_DEBOUNCE = 3e3;
 var SequenceItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 	__name: "SequenceItem",
 	props: {
@@ -5596,7 +5632,7 @@ var SequenceItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 				item: currentItem(),
 				embeds: props.embeds
 			});
-		}, 500);
+		}, SAVE_DEBOUNCE);
 		const saveEmbed = (embeds) => {
 			const item = currentItem();
 			forEach(embeds, (it) => item.body[it.id] = true);
@@ -5626,6 +5662,7 @@ var SequenceItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 			const _component_VIcon = (0, vue.resolveComponent)("VIcon");
 			const _component_VAvatar = (0, vue.resolveComponent)("VAvatar");
 			const _component_VTextField = (0, vue.resolveComponent)("VTextField");
+			const _component_VDivider = (0, vue.resolveComponent)("VDivider");
 			const _component_VBtn = (0, vue.resolveComponent)("VBtn");
 			const _component_VFadeTransition = (0, vue.resolveComponent)("VFadeTransition");
 			const _component_VExpansionPanelTitle = (0, vue.resolveComponent)("VExpansionPanelTitle");
@@ -5635,11 +5672,13 @@ var SequenceItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 			const _component_VExpansionPanelText = (0, vue.resolveComponent)("VExpansionPanelText");
 			const _component_VExpansionPanel = (0, vue.resolveComponent)("VExpansionPanel");
 			const _directive_tooltip = (0, vue.resolveDirective)("tooltip");
-			return (0, vue.openBlock)(), (0, vue.createBlock)(_component_VExpansionPanel, { value: __props.item.id }, {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(_component_VExpansionPanel, {
+				value: __props.item.id,
+				class: "border sm"
+			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.createVNode)(_component_VHover, null, {
 					default: (0, vue.withCtx)(({ isHovering, props: hoverProps }) => [(0, vue.createVNode)(_component_VExpansionPanelTitle, (0, vue.mergeProps)(hoverProps, {
 						class: "pa-2 pr-4",
-						color: "primary-lighten-5",
 						"min-height": "56"
 					}), {
 						default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", _hoisted_1$1, [
@@ -5650,45 +5689,48 @@ var SequenceItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 							}, [(0, vue.createVNode)(_component_VIcon, { icon: "mdi-drag-vertical" })], 32)) : (0, vue.createCommentVNode)("", true),
 							__props.mode === "steps" ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_VAvatar, {
 								key: 1,
-								color: "primary",
-								size: "24",
+								color: "surface-container",
+								size: "26",
 								start: ""
 							}, {
-								default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", _hoisted_2$1, (0, vue.toDisplayString)(__props.position), 1)]),
+								default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", _hoisted_2, (0, vue.toDisplayString)(__props.position), 1)]),
 								_: 1
-							})) : (0, vue.createCommentVNode)("", true),
-							__props.mode === "timeline" ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_VTextField, {
-								key: 2,
+							})) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [(0, vue.createVNode)(_component_VTextField, {
 								modelValue: draft.marker,
 								"onUpdate:modelValue": [_cache[1] || (_cache[1] = ($event) => draft.marker = $event), (0, vue.unref)(save)],
 								readonly: __props.isReadonly,
-								autocomplete: "off",
-								"bg-color": "white",
-								class: "sequence-item-marker flex-grow-0 mr-2",
+								"bg-color": "transparent",
+								class: "sequence-item-marker flex-grow-0",
 								density: "compact",
 								placeholder: "Date",
-								variant: "outlined",
-								width: "96",
+								variant: "plain",
+								width: "120",
 								"hide-details": "",
-								onClick: _cache[2] || (_cache[2] = (0, vue.withModifiers)(() => {}, ["stop"]))
+								onBlur: _cache[2] || (_cache[2] = ($event) => (0, vue.unref)(save).flush()),
+								onClick: _cache[3] || (_cache[3] = (0, vue.withModifiers)(() => {}, ["stop"])),
+								onKeyup: _cache[4] || (_cache[4] = (0, vue.withKeys)((0, vue.withModifiers)(() => {}, ["prevent"]), ["space"]))
 							}, null, 8, [
 								"modelValue",
 								"readonly",
 								"onUpdate:modelValue"
-							])) : (0, vue.createCommentVNode)("", true),
+							]), (0, vue.createVNode)(_component_VDivider, {
+								class: "mx-2 my-1",
+								opacity: "0.5",
+								vertical: ""
+							})], 64)),
 							(0, vue.createVNode)(_component_VTextField, {
 								modelValue: draft.title,
-								"onUpdate:modelValue": [_cache[3] || (_cache[3] = ($event) => draft.title = $event), (0, vue.unref)(save)],
+								"onUpdate:modelValue": [_cache[5] || (_cache[5] = ($event) => draft.title = $event), (0, vue.unref)(save)],
 								readonly: __props.isReadonly,
-								autocomplete: "off",
 								"bg-color": "transparent",
 								class: "sequence-item-title",
 								density: "compact",
 								placeholder: "Title",
 								variant: "plain",
-								flat: "",
 								"hide-details": "",
-								onClick: _cache[4] || (_cache[4] = (0, vue.withModifiers)(() => {}, ["stop"]))
+								onBlur: _cache[6] || (_cache[6] = ($event) => (0, vue.unref)(save).flush()),
+								onClick: _cache[7] || (_cache[7] = (0, vue.withModifiers)(() => {}, ["stop"])),
+								onKeyup: _cache[8] || (_cache[8] = (0, vue.withKeys)((0, vue.withModifiers)(() => {}, ["prevent"]), ["space"]))
 							}, null, 8, [
 								"modelValue",
 								"readonly",
@@ -5723,9 +5765,9 @@ var SequenceItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 					default: (0, vue.withCtx)(() => [!hasElements.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_VAlert, {
 						key: 0,
 						class: "mx-6 mt-4",
-						color: "primary-darken-1",
 						icon: "mdi-information-outline",
-						variant: "tonal"
+						variant: "tonal",
+						prominent: ""
 					}, {
 						default: (0, vue.withCtx)(() => [__props.isReadonly ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createTextVNode)(" No content elements added to this entry. ")], 64)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createTextVNode)(" Click the button below to add a content element. ")], 64))]),
 						_: 1
@@ -5735,7 +5777,7 @@ var SequenceItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 						"is-readonly": __props.isReadonly,
 						class: "text-center",
 						onDelete: deleteEmbed,
-						onSave: _cache[5] || (_cache[5] = ($event) => saveEmbed($event.embeds))
+						onSave: _cache[9] || (_cache[9] = ($event) => saveEmbed($event.embeds))
 					}, null, 8, [
 						"allowed-element-config",
 						"container",
@@ -5757,11 +5799,10 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
 };
 //#endregion
 //#region src/components/SequenceItem.vue
-var SequenceItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(SequenceItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-ac126efa"]]);
+var SequenceItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(SequenceItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-8056cb4a"]]);
 //#endregion
 //#region src/components/Edit.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "text-title-small" };
-var _hoisted_2 = { class: "pa-6 text-center" };
+var _hoisted_1 = { class: "tce-sequence text-center" };
 //#endregion
 //#region src/components/Edit.vue
 var Edit_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ (0, vue.defineComponent)({
@@ -5833,84 +5874,67 @@ var Edit_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				emit("save", elementData);
 			}
 		});
+		(0, vue.watch)(() => props.element.data, (data) => {
+			if (isEqual(data, elementData)) return;
+			Object.assign(elementData, cloneDeep(data));
+		});
 		return (_ctx, _cache) => {
-			const _component_VIcon = (0, vue.resolveComponent)("VIcon");
-			const _component_VToolbar = (0, vue.resolveComponent)("VToolbar");
 			const _component_VExpandTransition = (0, vue.resolveComponent)("VExpandTransition");
 			const _component_VExpansionPanels = (0, vue.resolveComponent)("VExpansionPanels");
 			const _component_VBtn = (0, vue.resolveComponent)("VBtn");
-			const _component_VCard = (0, vue.resolveComponent)("VCard");
-			return (0, vue.openBlock)(), (0, vue.createBlock)(_component_VCard, {
-				class: "tce-sequence",
-				color: "grey-lighten-5"
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, [(0, vue.createVNode)(_component_VExpansionPanels, {
+				ref_key: "panels",
+				ref: panels,
+				modelValue: expanded.value,
+				"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => expanded.value = $event),
+				rounded: "lg",
+				flat: "",
+				multiple: ""
 			}, {
-				default: (0, vue.withCtx)(() => [(0, vue.createVNode)(_component_VToolbar, {
-					class: "px-4",
-					color: "primary-darken-2",
-					height: "36"
-				}, {
-					default: (0, vue.withCtx)(() => [(0, vue.createVNode)(_component_VIcon, {
-						icon: (0, vue.unref)(manifest$1).ui.icon,
-						color: "secondary-lighten-2",
-						size: "18",
-						start: ""
-					}, null, 8, ["icon"]), (0, vue.createElementVNode)("span", _hoisted_1, (0, vue.toDisplayString)((0, vue.unref)(manifest$1).name), 1)]),
-					_: 1
-				}), (0, vue.createElementVNode)("div", _hoisted_2, [(0, vue.createVNode)(_component_VExpansionPanels, {
-					ref_key: "panels",
-					ref: panels,
-					modelValue: expanded.value,
-					"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => expanded.value = $event),
-					rounded: "lg",
-					flat: "",
-					multiple: ""
+				default: (0, vue.withCtx)(() => [!!itemCount.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_VExpandTransition, {
+					key: 0,
+					group: ""
 				}, {
-					default: (0, vue.withCtx)(() => [!!itemCount.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_VExpandTransition, {
-						key: 0,
-						group: ""
-					}, {
-						default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(items.value, (item, index) => {
-							return (0, vue.openBlock)(), (0, vue.createBlock)(SequenceItem_default, {
-								key: item.id,
-								"allow-deletion": itemCount.value > 1,
-								"embed-element-config": __props.embedElementConfig,
-								embeds: embedsByItem.value[item.id],
-								"is-expanded": expanded.value.includes(item.id),
-								"is-readonly": __props.isReadonly,
-								item,
-								mode: elementData.mode,
-								position: index + 1,
-								onDelete: ($event) => deleteItem(item.id),
-								onSave: _cache[0] || (_cache[0] = ($event) => saveItem($event))
-							}, null, 8, [
-								"allow-deletion",
-								"embed-element-config",
-								"embeds",
-								"is-expanded",
-								"is-readonly",
-								"item",
-								"mode",
-								"position",
-								"onDelete"
-							]);
-						}), 128))]),
-						_: 1
-					})) : (0, vue.createCommentVNode)("", true)]),
+					default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(items.value, (item, index) => {
+						return (0, vue.openBlock)(), (0, vue.createBlock)(SequenceItem_default, {
+							key: item.id,
+							"allow-deletion": itemCount.value > 1,
+							"embed-element-config": __props.embedElementConfig,
+							embeds: embedsByItem.value[item.id],
+							"is-expanded": expanded.value.includes(item.id),
+							"is-readonly": __props.isReadonly,
+							item,
+							mode: elementData.mode,
+							position: index + 1,
+							class: "text-left",
+							onDelete: ($event) => deleteItem(item.id),
+							onSave: _cache[0] || (_cache[0] = ($event) => saveItem($event))
+						}, null, 8, [
+							"allow-deletion",
+							"embed-element-config",
+							"embeds",
+							"is-expanded",
+							"is-readonly",
+							"item",
+							"mode",
+							"position",
+							"onDelete"
+						]);
+					}), 128))]),
 					_: 1
-				}, 8, ["modelValue"]), !__props.isReadonly ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_VBtn, {
-					key: 0,
-					class: "mt-6",
-					color: "primary-darken-4",
-					"prepend-icon": "mdi-plus",
-					text: "Add Entry",
-					variant: "text",
-					onClick: addItem
-				})) : (0, vue.createCommentVNode)("", true)])]),
+				})) : (0, vue.createCommentVNode)("", true)]),
 				_: 1
-			});
+			}, 8, ["modelValue"]), !__props.isReadonly ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_VBtn, {
+				key: 0,
+				class: "mt-4",
+				"prepend-icon": "mdi-plus",
+				text: "Add Entry",
+				variant: "text",
+				onClick: addItem
+			})) : (0, vue.createCommentVNode)("", true)]);
 		};
 	}
-}), [["__scopeId", "data-v-abd59587"]]);
+}), [["__scopeId", "data-v-7ccd7f10"]]);
 //#endregion
 //#region src/components/SideToolbar.vue
 var SideToolbar_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -5920,6 +5944,11 @@ var SideToolbar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const props = __props;
 		const elementBus = (0, vue.inject)("$elementBus");
 		const mode = (0, vue.ref)(props.element.data.mode ?? "steps");
+		(0, vue.watch)(() => props.element.data.mode, (value) => {
+			const next = value ?? "steps";
+			if (next === mode.value) return;
+			mode.value = next;
+		});
 		const onChange = (value) => {
 			if (!value) return;
 			mode.value = value;

package/dist/index.css

@@ -1,14 +1,9 @@
-.v-expansion-panel[data-v-ac126efa] {
-  border: thin solid rgba(0, 0, 0, 0.12);
-}
-.sequence-drag-handle[data-v-ac126efa] {
+.sequence-drag-handle[data-v-8056cb4a] {
   cursor: pointer;
 }
-.sequence-item-title[data-v-ac126efa] .v-field {
+.sequence-item-title[data-v-8056cb4a] .v-field,
+.sequence-item-marker[data-v-8056cb4a] .v-field {
   --v-field-input-padding-top: 0;
-}.tce-sequence[data-v-abd59587] {
-  text-align: left;
-}
-[data-v-abd59587] .sortable-ghost > * {
+}[data-v-7ccd7f10] .sortable-ghost > * {
   visibility: hidden;
 }

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, h, inject, isRef, mergeProps, nextTick, onMounted, onUnmounted, openBlock, reactive, ref, renderList, resolveComponent, resolveDirective, toDisplayString, toRefs, unref, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, h, inject, isRef, mergeProps, nextTick, onMounted, onUnmounted, openBlock, reactive, ref, renderList, resolveComponent, resolveDirective, toDisplayString, toRefs, unref, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
 import './index.css';//#region ../../node_modules/.pnpm/uuid@14.0.0/node_modules/uuid/dist/stringify.js
 var byteToHex = [];
 for (let i = 0; i < 256; ++i) byteToHex.push((i + 256).toString(16).slice(1));
@@ -33,30 +33,32 @@ function _v4(options, buf, offset) {
 }
 //#endregion
 //#region ../manifest/dist/index.mjs
-var id1 = v4();
-var id2 = v4();
 var type = "SEQUENCE";
 var name = "Sequence";
-var initState = () => ({
-	mode: "steps",
-	embeds: {},
-	items: {
-		[id1]: {
-			id: id1,
-			marker: "",
-			title: "",
-			body: {},
-			position: 1
-		},
-		[id2]: {
-			id: id2,
-			marker: "",
-			title: "",
-			body: {},
-			position: 2
+var initState = () => {
+	const id1 = v4();
+	const id2 = v4();
+	return {
+		mode: "steps",
+		embeds: {},
+		items: {
+			[id1]: {
+				id: id1,
+				marker: "",
+				title: "",
+				body: {},
+				position: 1
+			},
+			[id2]: {
+				id: id2,
+				marker: "",
+				title: "",
+				body: {},
+				position: 2
+			}
 		}
-	}
-});
+	};
+};
 var ui = {
 	icon: "mdi-timeline-text",
 	forceFullWidth: true
@@ -3686,6 +3688,39 @@ function isEmpty(value) {
 	return true;
 }
 //#endregion
+//#region ../../node_modules/.pnpm/lodash-es@4.18.1/node_modules/lodash-es/isEqual.js
+/**
+* Performs a deep comparison between two values to determine if they are
+* equivalent.
+*
+* **Note:** This method supports comparing arrays, array buffers, booleans,
+* date objects, error objects, maps, numbers, `Object` objects, regexes,
+* sets, strings, symbols, and typed arrays. `Object` objects are compared
+* by their own, not inherited, enumerable properties. Functions and DOM
+* nodes are compared by strict equality, i.e. `===`.
+*
+* @static
+* @memberOf _
+* @since 0.1.0
+* @category Lang
+* @param {*} value The value to compare.
+* @param {*} other The other value to compare.
+* @returns {boolean} Returns `true` if the values are equivalent, else `false`.
+* @example
+*
+* var object = { 'a': 1 };
+* var other = { 'a': 1 };
+*
+* _.isEqual(object, other);
+* // => true
+*
+* object === other;
+* // => false
+*/
+function isEqual(value, other) {
+	return baseIsEqual(value, other);
+}
+//#endregion
 //#region ../../node_modules/.pnpm/lodash-es@4.18.1/node_modules/lodash-es/isNumber.js
 /** `Object#toString` result references. */
 var numberTag = "[object Number]";
@@ -5554,7 +5589,8 @@ Bt.mounted, Bt.unmounted;
 //#endregion
 //#region src/components/SequenceItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$1 = { class: "d-flex align-center w-100 ga-2" };
-var _hoisted_2$1 = { class: "text-caption" };
+var _hoisted_2 = { class: "text-label-large" };
+var SAVE_DEBOUNCE = 3e3;
 var SequenceItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "SequenceItem",
 	props: {
@@ -5592,7 +5628,7 @@ var SequenceItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 				item: currentItem(),
 				embeds: props.embeds
 			});
-		}, 500);
+		}, SAVE_DEBOUNCE);
 		const saveEmbed = (embeds) => {
 			const item = currentItem();
 			forEach(embeds, (it) => item.body[it.id] = true);
@@ -5622,6 +5658,7 @@ var SequenceItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			const _component_VIcon = resolveComponent("VIcon");
 			const _component_VAvatar = resolveComponent("VAvatar");
 			const _component_VTextField = resolveComponent("VTextField");
+			const _component_VDivider = resolveComponent("VDivider");
 			const _component_VBtn = resolveComponent("VBtn");
 			const _component_VFadeTransition = resolveComponent("VFadeTransition");
 			const _component_VExpansionPanelTitle = resolveComponent("VExpansionPanelTitle");
@@ -5631,11 +5668,13 @@ var SequenceItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			const _component_VExpansionPanelText = resolveComponent("VExpansionPanelText");
 			const _component_VExpansionPanel = resolveComponent("VExpansionPanel");
 			const _directive_tooltip = resolveDirective("tooltip");
-			return openBlock(), createBlock(_component_VExpansionPanel, { value: __props.item.id }, {
+			return openBlock(), createBlock(_component_VExpansionPanel, {
+				value: __props.item.id,
+				class: "border sm"
+			}, {
 				default: withCtx(() => [createVNode(_component_VHover, null, {
 					default: withCtx(({ isHovering, props: hoverProps }) => [createVNode(_component_VExpansionPanelTitle, mergeProps(hoverProps, {
 						class: "pa-2 pr-4",
-						color: "primary-lighten-5",
 						"min-height": "56"
 					}), {
 						default: withCtx(() => [createElementVNode("div", _hoisted_1$1, [
@@ -5646,45 +5685,48 @@ var SequenceItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 							}, [createVNode(_component_VIcon, { icon: "mdi-drag-vertical" })], 32)) : createCommentVNode("", true),
 							__props.mode === "steps" ? (openBlock(), createBlock(_component_VAvatar, {
 								key: 1,
-								color: "primary",
-								size: "24",
+								color: "surface-container",
+								size: "26",
 								start: ""
 							}, {
-								default: withCtx(() => [createElementVNode("span", _hoisted_2$1, toDisplayString(__props.position), 1)]),
+								default: withCtx(() => [createElementVNode("span", _hoisted_2, toDisplayString(__props.position), 1)]),
 								_: 1
-							})) : createCommentVNode("", true),
-							__props.mode === "timeline" ? (openBlock(), createBlock(_component_VTextField, {
-								key: 2,
+							})) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createVNode(_component_VTextField, {
 								modelValue: draft.marker,
 								"onUpdate:modelValue": [_cache[1] || (_cache[1] = ($event) => draft.marker = $event), unref(save)],
 								readonly: __props.isReadonly,
-								autocomplete: "off",
-								"bg-color": "white",
-								class: "sequence-item-marker flex-grow-0 mr-2",
+								"bg-color": "transparent",
+								class: "sequence-item-marker flex-grow-0",
 								density: "compact",
 								placeholder: "Date",
-								variant: "outlined",
-								width: "96",
+								variant: "plain",
+								width: "120",
 								"hide-details": "",
-								onClick: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"]))
+								onBlur: _cache[2] || (_cache[2] = ($event) => unref(save).flush()),
+								onClick: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"])),
+								onKeyup: _cache[4] || (_cache[4] = withKeys(withModifiers(() => {}, ["prevent"]), ["space"]))
 							}, null, 8, [
 								"modelValue",
 								"readonly",
 								"onUpdate:modelValue"
-							])) : createCommentVNode("", true),
+							]), createVNode(_component_VDivider, {
+								class: "mx-2 my-1",
+								opacity: "0.5",
+								vertical: ""
+							})], 64)),
 							createVNode(_component_VTextField, {
 								modelValue: draft.title,
-								"onUpdate:modelValue": [_cache[3] || (_cache[3] = ($event) => draft.title = $event), unref(save)],
+								"onUpdate:modelValue": [_cache[5] || (_cache[5] = ($event) => draft.title = $event), unref(save)],
 								readonly: __props.isReadonly,
-								autocomplete: "off",
 								"bg-color": "transparent",
 								class: "sequence-item-title",
 								density: "compact",
 								placeholder: "Title",
 								variant: "plain",
-								flat: "",
 								"hide-details": "",
-								onClick: _cache[4] || (_cache[4] = withModifiers(() => {}, ["stop"]))
+								onBlur: _cache[6] || (_cache[6] = ($event) => unref(save).flush()),
+								onClick: _cache[7] || (_cache[7] = withModifiers(() => {}, ["stop"])),
+								onKeyup: _cache[8] || (_cache[8] = withKeys(withModifiers(() => {}, ["prevent"]), ["space"]))
 							}, null, 8, [
 								"modelValue",
 								"readonly",
@@ -5719,9 +5761,9 @@ var SequenceItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 					default: withCtx(() => [!hasElements.value ? (openBlock(), createBlock(_component_VAlert, {
 						key: 0,
 						class: "mx-6 mt-4",
-						color: "primary-darken-1",
 						icon: "mdi-information-outline",
-						variant: "tonal"
+						variant: "tonal",
+						prominent: ""
 					}, {
 						default: withCtx(() => [__props.isReadonly ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(" No content elements added to this entry. ")], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(" Click the button below to add a content element. ")], 64))]),
 						_: 1
@@ -5731,7 +5773,7 @@ var SequenceItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 						"is-readonly": __props.isReadonly,
 						class: "text-center",
 						onDelete: deleteEmbed,
-						onSave: _cache[5] || (_cache[5] = ($event) => saveEmbed($event.embeds))
+						onSave: _cache[9] || (_cache[9] = ($event) => saveEmbed($event.embeds))
 					}, null, 8, [
 						"allowed-element-config",
 						"container",
@@ -5753,11 +5795,10 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
 };
 //#endregion
 //#region src/components/SequenceItem.vue
-var SequenceItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(SequenceItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-ac126efa"]]);
+var SequenceItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(SequenceItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-8056cb4a"]]);
 //#endregion
 //#region src/components/Edit.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "text-title-small" };
-var _hoisted_2 = { class: "pa-6 text-center" };
+var _hoisted_1 = { class: "tce-sequence text-center" };
 //#endregion
 //#region src/components/Edit.vue
 var Edit_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -5829,84 +5870,67 @@ var Edit_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				emit("save", elementData);
 			}
 		});
+		watch(() => props.element.data, (data) => {
+			if (isEqual(data, elementData)) return;
+			Object.assign(elementData, cloneDeep(data));
+		});
 		return (_ctx, _cache) => {
-			const _component_VIcon = resolveComponent("VIcon");
-			const _component_VToolbar = resolveComponent("VToolbar");
 			const _component_VExpandTransition = resolveComponent("VExpandTransition");
 			const _component_VExpansionPanels = resolveComponent("VExpansionPanels");
 			const _component_VBtn = resolveComponent("VBtn");
-			const _component_VCard = resolveComponent("VCard");
-			return openBlock(), createBlock(_component_VCard, {
-				class: "tce-sequence",
-				color: "grey-lighten-5"
+			return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(_component_VExpansionPanels, {
+				ref_key: "panels",
+				ref: panels,
+				modelValue: expanded.value,
+				"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => expanded.value = $event),
+				rounded: "lg",
+				flat: "",
+				multiple: ""
 			}, {
-				default: withCtx(() => [createVNode(_component_VToolbar, {
-					class: "px-4",
-					color: "primary-darken-2",
-					height: "36"
-				}, {
-					default: withCtx(() => [createVNode(_component_VIcon, {
-						icon: unref(manifest$1).ui.icon,
-						color: "secondary-lighten-2",
-						size: "18",
-						start: ""
-					}, null, 8, ["icon"]), createElementVNode("span", _hoisted_1, toDisplayString(unref(manifest$1).name), 1)]),
-					_: 1
-				}), createElementVNode("div", _hoisted_2, [createVNode(_component_VExpansionPanels, {
-					ref_key: "panels",
-					ref: panels,
-					modelValue: expanded.value,
-					"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => expanded.value = $event),
-					rounded: "lg",
-					flat: "",
-					multiple: ""
+				default: withCtx(() => [!!itemCount.value ? (openBlock(), createBlock(_component_VExpandTransition, {
+					key: 0,
+					group: ""
 				}, {
-					default: withCtx(() => [!!itemCount.value ? (openBlock(), createBlock(_component_VExpandTransition, {
-						key: 0,
-						group: ""
-					}, {
-						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item, index) => {
-							return openBlock(), createBlock(SequenceItem_default, {
-								key: item.id,
-								"allow-deletion": itemCount.value > 1,
-								"embed-element-config": __props.embedElementConfig,
-								embeds: embedsByItem.value[item.id],
-								"is-expanded": expanded.value.includes(item.id),
-								"is-readonly": __props.isReadonly,
-								item,
-								mode: elementData.mode,
-								position: index + 1,
-								onDelete: ($event) => deleteItem(item.id),
-								onSave: _cache[0] || (_cache[0] = ($event) => saveItem($event))
-							}, null, 8, [
-								"allow-deletion",
-								"embed-element-config",
-								"embeds",
-								"is-expanded",
-								"is-readonly",
-								"item",
-								"mode",
-								"position",
-								"onDelete"
-							]);
-						}), 128))]),
-						_: 1
-					})) : createCommentVNode("", true)]),
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item, index) => {
+						return openBlock(), createBlock(SequenceItem_default, {
+							key: item.id,
+							"allow-deletion": itemCount.value > 1,
+							"embed-element-config": __props.embedElementConfig,
+							embeds: embedsByItem.value[item.id],
+							"is-expanded": expanded.value.includes(item.id),
+							"is-readonly": __props.isReadonly,
+							item,
+							mode: elementData.mode,
+							position: index + 1,
+							class: "text-left",
+							onDelete: ($event) => deleteItem(item.id),
+							onSave: _cache[0] || (_cache[0] = ($event) => saveItem($event))
+						}, null, 8, [
+							"allow-deletion",
+							"embed-element-config",
+							"embeds",
+							"is-expanded",
+							"is-readonly",
+							"item",
+							"mode",
+							"position",
+							"onDelete"
+						]);
+					}), 128))]),
 					_: 1
-				}, 8, ["modelValue"]), !__props.isReadonly ? (openBlock(), createBlock(_component_VBtn, {
-					key: 0,
-					class: "mt-6",
-					color: "primary-darken-4",
-					"prepend-icon": "mdi-plus",
-					text: "Add Entry",
-					variant: "text",
-					onClick: addItem
-				})) : createCommentVNode("", true)])]),
+				})) : createCommentVNode("", true)]),
 				_: 1
-			});
+			}, 8, ["modelValue"]), !__props.isReadonly ? (openBlock(), createBlock(_component_VBtn, {
+				key: 0,
+				class: "mt-4",
+				"prepend-icon": "mdi-plus",
+				text: "Add Entry",
+				variant: "text",
+				onClick: addItem
+			})) : createCommentVNode("", true)]);
 		};
 	}
-}), [["__scopeId", "data-v-abd59587"]]);
+}), [["__scopeId", "data-v-7ccd7f10"]]);
 //#endregion
 //#region src/components/SideToolbar.vue
 var SideToolbar_default = /* @__PURE__ */ defineComponent({
@@ -5916,6 +5940,11 @@ var SideToolbar_default = /* @__PURE__ */ defineComponent({
 		const props = __props;
 		const elementBus = inject("$elementBus");
 		const mode = ref(props.element.data.mode ?? "steps");
+		watch(() => props.element.data.mode, (value) => {
+			const next = value ?? "steps";
+			if (next === mode.value) return;
+			mode.value = next;
+		});
 		const onChange = (value) => {
 			if (!value) return;
 			mode.value = value;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Tailor CMS sequence element authoring component",
   "author": "Studion <info@gostudion.com> (https://github.com/tailor-cms)",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -32,7 +32,7 @@
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vue-tsc": "^3.2.7",
     "vuetify": "^4.0.6",
-    "@tailor-cms/ce-sequence-manifest": "0.0.1"
+    "@tailor-cms/ce-sequence-manifest": "0.0.2"
   },
   "publishConfig": {
     "access": "public"