@tailor-cms/ce-flashcards-edit 0.0.2 → 0.0.3

package/dist/index.cjs

@@ -3670,6 +3670,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]";
@@ -5538,7 +5571,7 @@ Bt.mounted, Bt.unmounted;
 //#endregion
 //#region src/components/FlashcardItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$1 = { class: "d-flex align-center w-100" };
-var _hoisted_2$1 = { class: "ml-2" };
+var _hoisted_2 = { class: "ml-2" };
 var _hoisted_3 = { class: "text-title-small text-left mt-1" };
 var FlashcardItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 	__name: "FlashcardItem",
@@ -5618,11 +5651,13 @@ var FlashcardItem_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, [
@@ -5631,7 +5666,7 @@ var FlashcardItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0
 								class: "flashcard-drag-handle",
 								onDrag: _cache[0] || (_cache[0] = (0, vue.withModifiers)(() => {}, ["stop", "prevent"]))
 							}, [(0, vue.createVNode)(_component_VIcon, { icon: "mdi-drag-vertical" })], 32)) : (0, vue.createCommentVNode)("", true),
-							(0, vue.createElementVNode)("span", _hoisted_2$1, "Card " + (0, vue.toDisplayString)(__props.position), 1),
+							(0, vue.createElementVNode)("span", _hoisted_2, "Card " + (0, vue.toDisplayString)(__props.position), 1),
 							(0, vue.createVNode)(_component_VSpacer),
 							(0, vue.createVNode)(_component_VFadeTransition, null, {
 								default: (0, vue.withCtx)(() => [(isHovering || __props.isExpanded) && !__props.isReadonly && __props.allowDeletion ? (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createBlock)(_component_VBtn, {
@@ -5666,7 +5701,8 @@ var FlashcardItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0
 								key: 0,
 								class: "mt-4",
 								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 side. ")], 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
@@ -5697,7 +5733,6 @@ var FlashcardItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0
 									border: ""
 								}, {
 									default: (0, vue.withCtx)(() => [(0, vue.createVNode)(_component_VIcon, {
-										class: "text-medium-emphasis",
 										icon: "mdi-sync",
 										size: "18"
 									})]),
@@ -5723,11 +5758,10 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
 };
 //#endregion
 //#region src/components/FlashcardItem.vue
-var FlashcardItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(FlashcardItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-bd92ec6b"]]);
+var FlashcardItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(FlashcardItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-462cae17"]]);
 //#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-flashcards text-center" };
 //#endregion
 //#region src/components/Edit.vue
 var Edit_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ (0, vue.defineComponent)({
@@ -5796,83 +5830,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-flashcards",
-				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),
+				class: "text-left",
+				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)(() => [!!cardCount.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_VExpandTransition, {
+					key: 0,
+					group: ""
 				}, {
-					default: (0, vue.withCtx)(() => [!!cardCount.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)(cards.value, (item, index) => {
-							return (0, vue.openBlock)(), (0, vue.createBlock)(FlashcardItem_default, {
-								key: item.id,
-								"allow-deletion": cardCount.value > 1,
-								"embed-element-config": __props.embedElementConfig,
-								embeds: embedsByFace.value[item.id],
-								"is-expanded": expanded.value.includes(item.id),
-								"is-focused": __props.isFocused,
-								"is-readonly": __props.isReadonly,
-								item,
-								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-focused",
-								"is-readonly",
-								"item",
-								"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)(cards.value, (item, index) => {
+						return (0, vue.openBlock)(), (0, vue.createBlock)(FlashcardItem_default, {
+							key: item.id,
+							"allow-deletion": cardCount.value > 1,
+							"embed-element-config": __props.embedElementConfig,
+							embeds: embedsByFace.value[item.id],
+							"is-expanded": expanded.value.includes(item.id),
+							"is-focused": __props.isFocused,
+							"is-readonly": __props.isReadonly,
+							item,
+							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-focused",
+							"is-readonly",
+							"item",
+							"position",
+							"onDelete"
+						]);
+					}), 128))]),
 					_: 1
-				}, 8, ["modelValue"]), !__props.isReadonly ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_VBtn, {
-					key: 0,
-					class: "mt-6",
-					"prepend-icon": "mdi-card-plus-outline",
-					text: "Add Card",
-					variant: "text",
-					onClick: addCard
-				})) : (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 Card",
+				variant: "text",
+				onClick: addCard
+			})) : (0, vue.createCommentVNode)("", true)]);
 		};
 	}
-}), [["__scopeId", "data-v-a6cbf847"]]);
+}), [["__scopeId", "data-v-4b1514a0"]]);
 //#endregion
 //#region src/components/TopToolbar.vue
 var TopToolbar_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -5883,6 +5901,10 @@ var TopToolbar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const elementBus = (0, vue.inject)("$elementBus");
 		const form = (0, vue.ref)();
 		const height = (0, vue.ref)(props.element.data.height);
+		(0, vue.watch)(() => props.element.data.height, (value) => {
+			if (value === height.value) return;
+			height.value = value;
+		});
 		(0, vue.watch)(height, debounce(async () => {
 			if (!form.value) return;
 			const { valid } = await form.value.validate();

package/dist/index.css

@@ -1,11 +1,5 @@
-.v-expansion-panel[data-v-bd92ec6b] {
-  border: thin solid rgba(0, 0, 0, 0.12);
-}
-.flashcard-drag-handle[data-v-bd92ec6b] {
+.flashcard-drag-handle[data-v-462cae17] {
   cursor: pointer;
-}.tce-flashcards[data-v-a6cbf847] {
-  text-align: left;
-}
-[data-v-a6cbf847] .sortable-ghost > * {
+}[data-v-4b1514a0] .sortable-ghost > * {
   visibility: hidden;
 }

package/dist/index.js

@@ -3666,6 +3666,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]";
@@ -5534,7 +5567,7 @@ Bt.mounted, Bt.unmounted;
 //#endregion
 //#region src/components/FlashcardItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$1 = { class: "d-flex align-center w-100" };
-var _hoisted_2$1 = { class: "ml-2" };
+var _hoisted_2 = { class: "ml-2" };
 var _hoisted_3 = { class: "text-title-small text-left mt-1" };
 var FlashcardItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "FlashcardItem",
@@ -5614,11 +5647,13 @@ var FlashcardItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			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, [
@@ -5627,7 +5662,7 @@ var FlashcardItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 								class: "flashcard-drag-handle",
 								onDrag: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop", "prevent"]))
 							}, [createVNode(_component_VIcon, { icon: "mdi-drag-vertical" })], 32)) : createCommentVNode("", true),
-							createElementVNode("span", _hoisted_2$1, "Card " + toDisplayString(__props.position), 1),
+							createElementVNode("span", _hoisted_2, "Card " + toDisplayString(__props.position), 1),
 							createVNode(_component_VSpacer),
 							createVNode(_component_VFadeTransition, null, {
 								default: withCtx(() => [(isHovering || __props.isExpanded) && !__props.isReadonly && __props.allowDeletion ? withDirectives((openBlock(), createBlock(_component_VBtn, {
@@ -5662,7 +5697,8 @@ var FlashcardItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 								key: 0,
 								class: "mt-4",
 								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 side. ")], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(" Click the button below to add a content element. ")], 64))]),
 								_: 1
@@ -5693,7 +5729,6 @@ var FlashcardItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 									border: ""
 								}, {
 									default: withCtx(() => [createVNode(_component_VIcon, {
-										class: "text-medium-emphasis",
 										icon: "mdi-sync",
 										size: "18"
 									})]),
@@ -5719,11 +5754,10 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
 };
 //#endregion
 //#region src/components/FlashcardItem.vue
-var FlashcardItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(FlashcardItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-bd92ec6b"]]);
+var FlashcardItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(FlashcardItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-462cae17"]]);
 //#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-flashcards text-center" };
 //#endregion
 //#region src/components/Edit.vue
 var Edit_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -5792,83 +5826,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-flashcards",
-				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),
+				class: "text-left",
+				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(() => [!!cardCount.value ? (openBlock(), createBlock(_component_VExpandTransition, {
+					key: 0,
+					group: ""
 				}, {
-					default: withCtx(() => [!!cardCount.value ? (openBlock(), createBlock(_component_VExpandTransition, {
-						key: 0,
-						group: ""
-					}, {
-						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(cards.value, (item, index) => {
-							return openBlock(), createBlock(FlashcardItem_default, {
-								key: item.id,
-								"allow-deletion": cardCount.value > 1,
-								"embed-element-config": __props.embedElementConfig,
-								embeds: embedsByFace.value[item.id],
-								"is-expanded": expanded.value.includes(item.id),
-								"is-focused": __props.isFocused,
-								"is-readonly": __props.isReadonly,
-								item,
-								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-focused",
-								"is-readonly",
-								"item",
-								"position",
-								"onDelete"
-							]);
-						}), 128))]),
-						_: 1
-					})) : createCommentVNode("", true)]),
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(cards.value, (item, index) => {
+						return openBlock(), createBlock(FlashcardItem_default, {
+							key: item.id,
+							"allow-deletion": cardCount.value > 1,
+							"embed-element-config": __props.embedElementConfig,
+							embeds: embedsByFace.value[item.id],
+							"is-expanded": expanded.value.includes(item.id),
+							"is-focused": __props.isFocused,
+							"is-readonly": __props.isReadonly,
+							item,
+							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-focused",
+							"is-readonly",
+							"item",
+							"position",
+							"onDelete"
+						]);
+					}), 128))]),
 					_: 1
-				}, 8, ["modelValue"]), !__props.isReadonly ? (openBlock(), createBlock(_component_VBtn, {
-					key: 0,
-					class: "mt-6",
-					"prepend-icon": "mdi-card-plus-outline",
-					text: "Add Card",
-					variant: "text",
-					onClick: addCard
-				})) : createCommentVNode("", true)])]),
+				})) : createCommentVNode("", true)]),
 				_: 1
-			});
+			}, 8, ["modelValue"]), !__props.isReadonly ? (openBlock(), createBlock(_component_VBtn, {
+				key: 0,
+				class: "mt-4",
+				"prepend-icon": "mdi-plus",
+				text: "Add Card",
+				variant: "text",
+				onClick: addCard
+			})) : createCommentVNode("", true)]);
 		};
 	}
-}), [["__scopeId", "data-v-a6cbf847"]]);
+}), [["__scopeId", "data-v-4b1514a0"]]);
 //#endregion
 //#region src/components/TopToolbar.vue
 var TopToolbar_default = /* @__PURE__ */ defineComponent({
@@ -5879,6 +5897,10 @@ var TopToolbar_default = /* @__PURE__ */ defineComponent({
 		const elementBus = inject("$elementBus");
 		const form = ref();
 		const height = ref(props.element.data.height);
+		watch(() => props.element.data.height, (value) => {
+			if (value === height.value) return;
+			height.value = value;
+		});
 		watch(height, debounce(async () => {
 			if (!form.value) return;
 			const { valid } = await form.value.validate();

package/package.json

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