@tailor-cms/ce-table-edit 2.0.0 → 2.0.1

package/dist/index.cjs

@@ -3498,6 +3498,39 @@ function isString(value) {
 	return typeof value == "string" || !isArray(value) && isObjectLike(value) && baseGetTag(value) == stringTag;
 }
 //#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/_baseSortBy.js
 /**
 * The base implementation of `_.sortBy` which uses `comparer` to define the
@@ -4059,11 +4092,10 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
 };
 //#endregion
 //#region src/components/TableCell.vue
-var TableCell_default = /* @__PURE__ */ _plugin_vue_export_helper_default(TableCell_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-8818c80b"]]);
+var TableCell_default = /* @__PURE__ */ _plugin_vue_export_helper_default(TableCell_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d04f0fd5"]]);
 //#endregion
 //#region src/components/Edit.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "text-subtitle-2" };
-var _hoisted_2 = { class: "body" };
+var _hoisted_1 = { class: "tce-table" };
 var MIN_ROWS = 1;
 var MIN_COLUMNS = 1;
 //#endregion
@@ -4181,57 +4213,40 @@ var Edit_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE_
 			elementData.embeds[element.id] = element;
 			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_VCard = (0, vue.resolveComponent)("VCard");
-			return (0, vue.openBlock)(), (0, vue.createBlock)(_component_VCard, {
-				class: "tce-table my-2",
-				color: "grey-lighten-5"
-			}, {
-				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.createElementVNode)("div", { class: (0, vue.normalizeClass)([{ readonly: __props.isReadonly }, "table ma-4"]) }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(table.value, (row) => {
-					return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-						key: row.id,
-						class: "table-row"
-					}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(cells(row), (cell) => {
-						return (0, vue.openBlock)(), (0, vue.createBlock)(TableCell_default, {
-							key: cell.id,
-							cell: embeds.value[cell.id],
-							"is-readonly": __props.isReadonly,
-							table: __props.element,
-							"onCol:add": ($event) => addColumn(cell.id, $event),
-							"onCol:remove": ($event) => removeColumn(cell.id),
-							"onRow:add": ($event) => addRow(cell.id, $event),
-							"onRow:remove": ($event) => removeRow(cell.id),
-							onSave: saveCell
-						}, null, 8, [
-							"cell",
-							"is-readonly",
-							"table",
-							"onCol:add",
-							"onCol:remove",
-							"onRow:add",
-							"onRow:remove"
-						]);
-					}), 128))]);
-				}), 128))], 2)])]),
-				_: 1
-			});
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)([{ readonly: __props.isReadonly }, "table"]) }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(table.value, (row) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					key: row.id,
+					class: "table-row"
+				}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(cells(row), (cell) => {
+					return (0, vue.openBlock)(), (0, vue.createBlock)(TableCell_default, {
+						key: cell.id,
+						cell: embeds.value[cell.id],
+						"is-readonly": __props.isReadonly,
+						table: __props.element,
+						"onCol:add": ($event) => addColumn(cell.id, $event),
+						"onCol:remove": ($event) => removeColumn(cell.id),
+						"onRow:add": ($event) => addRow(cell.id, $event),
+						"onRow:remove": ($event) => removeRow(cell.id),
+						onSave: saveCell
+					}, null, 8, [
+						"cell",
+						"is-readonly",
+						"table",
+						"onCol:add",
+						"onCol:remove",
+						"onRow:add",
+						"onRow:remove"
+					]);
+				}), 128))]);
+			}), 128))], 2)]);
 		};
 	}
-}), [["__scopeId", "data-v-8f7ed988"]]);
+}), [["__scopeId", "data-v-2c198b5d"]]);
 //#endregion
 //#region src/index.ts
 var manifest = {

package/dist/index.css

@@ -1,24 +1,21 @@
-.table-cell[data-v-8818c80b] {
+.table-cell[data-v-d04f0fd5] {
   display: table-cell;
   border: 1px solid black;
-  width: 312px;
-  max-width: 312px;
+  width: 24rem;
+  max-width: 24rem;
   height: 100%;
   vertical-align: top;
-}.tce-accordion[data-v-8f7ed988] {
+}.tce-table[data-v-2c198b5d] {
   text-align: left;
-  margin: 1rem 0;
-}
-.body[data-v-8f7ed988] {
   overflow-y: auto;
 }
-.table[data-v-8f7ed988] {
+.table[data-v-2c198b5d] {
   display: table;
   border-collapse: collapse;
 }
-.table .table-row[data-v-8f7ed988] {
+.table .table-row[data-v-2c198b5d] {
   display: table-row;
 }
-.readonly[data-v-8f7ed988] {
+.readonly[data-v-2c198b5d] {
   pointer-events: none;
 }

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, reactive, renderList, resolveComponent, resolveDirective, toDisplayString, unref, withCtx, withDirectives } from "vue";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, reactive, renderList, resolveComponent, resolveDirective, watch, withCtx, withDirectives } from "vue";
 import './index.css';//#region ../manifest/dist/chunk-CfYAbeIz.mjs
 var __defProp = Object.defineProperty;
 var __exportAll = (all, no_symbols) => {
@@ -3494,6 +3494,39 @@ function isString(value) {
 	return typeof value == "string" || !isArray(value) && isObjectLike(value) && baseGetTag(value) == stringTag;
 }
 //#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/_baseSortBy.js
 /**
 * The base implementation of `_.sortBy` which uses `comparer` to define the
@@ -4055,11 +4088,10 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
 };
 //#endregion
 //#region src/components/TableCell.vue
-var TableCell_default = /* @__PURE__ */ _plugin_vue_export_helper_default(TableCell_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-8818c80b"]]);
+var TableCell_default = /* @__PURE__ */ _plugin_vue_export_helper_default(TableCell_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d04f0fd5"]]);
 //#endregion
 //#region src/components/Edit.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "text-subtitle-2" };
-var _hoisted_2 = { class: "body" };
+var _hoisted_1 = { class: "tce-table" };
 var MIN_ROWS = 1;
 var MIN_COLUMNS = 1;
 //#endregion
@@ -4177,57 +4209,40 @@ var Edit_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE_
 			elementData.embeds[element.id] = element;
 			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_VCard = resolveComponent("VCard");
-			return openBlock(), createBlock(_component_VCard, {
-				class: "tce-table my-2",
-				color: "grey-lighten-5"
-			}, {
-				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, [createElementVNode("div", { class: normalizeClass([{ readonly: __props.isReadonly }, "table ma-4"]) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(table.value, (row) => {
-					return openBlock(), createElementBlock("div", {
-						key: row.id,
-						class: "table-row"
-					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(cells(row), (cell) => {
-						return openBlock(), createBlock(TableCell_default, {
-							key: cell.id,
-							cell: embeds.value[cell.id],
-							"is-readonly": __props.isReadonly,
-							table: __props.element,
-							"onCol:add": ($event) => addColumn(cell.id, $event),
-							"onCol:remove": ($event) => removeColumn(cell.id),
-							"onRow:add": ($event) => addRow(cell.id, $event),
-							"onRow:remove": ($event) => removeRow(cell.id),
-							onSave: saveCell
-						}, null, 8, [
-							"cell",
-							"is-readonly",
-							"table",
-							"onCol:add",
-							"onCol:remove",
-							"onRow:add",
-							"onRow:remove"
-						]);
-					}), 128))]);
-				}), 128))], 2)])]),
-				_: 1
-			});
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", { class: normalizeClass([{ readonly: __props.isReadonly }, "table"]) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(table.value, (row) => {
+				return openBlock(), createElementBlock("div", {
+					key: row.id,
+					class: "table-row"
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(cells(row), (cell) => {
+					return openBlock(), createBlock(TableCell_default, {
+						key: cell.id,
+						cell: embeds.value[cell.id],
+						"is-readonly": __props.isReadonly,
+						table: __props.element,
+						"onCol:add": ($event) => addColumn(cell.id, $event),
+						"onCol:remove": ($event) => removeColumn(cell.id),
+						"onRow:add": ($event) => addRow(cell.id, $event),
+						"onRow:remove": ($event) => removeRow(cell.id),
+						onSave: saveCell
+					}, null, 8, [
+						"cell",
+						"is-readonly",
+						"table",
+						"onCol:add",
+						"onCol:remove",
+						"onRow:add",
+						"onRow:remove"
+					]);
+				}), 128))]);
+			}), 128))], 2)]);
 		};
 	}
-}), [["__scopeId", "data-v-8f7ed988"]]);
+}), [["__scopeId", "data-v-2c198b5d"]]);
 //#endregion
 //#region src/index.ts
 var manifest = {

package/package.json

@@ -3,7 +3,7 @@
   "description": "Tailor CMS table authoring component",
   "author": "Studion <info@gostudion.com> (https://github.com/tailor-cms)",
   "type": "module",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -27,7 +27,7 @@
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vue-tsc": "^3.2.7",
     "vuetify": "^4.0.6",
-    "@tailor-cms/ce-table-manifest": "2.0.0"
+    "@tailor-cms/ce-table-manifest": "2.0.1"
   },
   "dependencies": {
     "@tailor-cms/cek-common": "2.0.1",