@tailor-cms/ce-table-display 2.0.3 → 2.0.4

package/dist/index.cjs

@@ -3041,10 +3041,12 @@ var manifest$1 = {
 };
 //#endregion
 //#region src/components/Display.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "tce-table-root" };
+var _hoisted_1 = {
+	class: "tce-table-root",
+	tabindex: "0"
+};
 var _hoisted_2 = { class: "table" };
-var _hoisted_3 = { class: "cell col-xs-12" };
-var _hoisted_4 = ["innerHTML"];
+var _hoisted_3 = ["innerHTML"];
 var Display_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 	__name: "Display",
 	props: { element: {} },
@@ -3068,20 +3070,20 @@ var Display_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.
 			return sortBy(props.element.data.rows, "position").map((row) => mapRow(row, props.element.data.embeds));
 		});
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, [(0, vue.createElementVNode)("div", _hoisted_2, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(table.value, (row) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, [(0, vue.createElementVNode)("table", _hoisted_2, [(0, vue.createElementVNode)("tbody", null, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(table.value, (row) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("tr", {
 					key: row.id,
 					class: "table-row"
 				}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(row.cells, (cell) => {
-					return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					return (0, vue.openBlock)(), (0, vue.createElementBlock)("td", {
 						key: cell.id,
 						class: "table-cell"
-					}, [(0, vue.createElementVNode)("div", _hoisted_3, [(0, vue.createElementVNode)("div", {
+					}, [(0, vue.createElementVNode)("div", {
 						class: "cell-content",
 						innerHTML: cell.content
-					}, null, 8, _hoisted_4)])]);
+					}, null, 8, _hoisted_3)]);
 				}), 128))]);
-			}), 128))])]);
+			}), 128))])])]);
 		};
 	}
 });
@@ -3094,7 +3096,7 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
 };
 //#endregion
 //#region src/components/Display.vue
-var Display_default = /*#__PURE__*/ _plugin_vue_export_helper_default(Display_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-ed3d2c98"]]);
+var Display_default = /*#__PURE__*/ _plugin_vue_export_helper_default(Display_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d508aa75"]]);
 //#endregion
 //#region src/index.ts
 var manifest = {

package/dist/index.css

@@ -1,32 +1,32 @@
 
-.table {
-&[data-v-ed3d2c98] {
-  display: table;
-  border-collapse: collapse;
-}
-.table-row[data-v-ed3d2c98] {
-    display: table-row;
-}
-.table-cell {
-&[data-v-ed3d2c98] {
-    display: table-cell;
-    width: 312px;
-    border: 1px solid rgba(var(--v-theme-on-surface), 0.12);
-}
-.cell {
-&[data-v-ed3d2c98] {
-      padding: 0;
-}
-.cell-content {
-&[data-v-ed3d2c98] {
-        min-height: 42px;
-        padding: 12px 15px;
-}
-[data-v-ed3d2c98] {
-          margin: 0;
-          padding: 0;
+/* Wide tables scroll instead of compressing columns to unreadable slivers. */
+.tce-table-root[data-v-d508aa75] {
+  max-width: 100%;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
 }
+.table[data-v-d508aa75] {
+  border-collapse: collapse;
+  inline-size: max-content;
+  max-inline-size: 100%;
+}
+.table-cell[data-v-d508aa75] {
+  min-width: 12rem;
+  padding: 0.75rem 1rem;
+  /* The M3 `outline-*` roles are not defined in the display runtime's theme. */
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  vertical-align: top;
+  text-align: left;
+  overflow-wrap: break-word;
 }
+
+/* Keep the authored rich text's spacing, flush with the cell padding. */
+.cell-content[data-v-d508aa75] > :first-child {
+  margin-block-start: 0;
 }
+.cell-content[data-v-d508aa75] > :last-child {
+  margin-block-end: 0;
 }
+.cell-content[data-v-d508aa75] :where(ul, ol) {
+  padding-inline-start: 1.25rem;
 }

package/dist/index.js

@@ -3037,10 +3037,12 @@ var manifest$1 = {
 };
 //#endregion
 //#region src/components/Display.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "tce-table-root" };
+var _hoisted_1 = {
+	class: "tce-table-root",
+	tabindex: "0"
+};
 var _hoisted_2 = { class: "table" };
-var _hoisted_3 = { class: "cell col-xs-12" };
-var _hoisted_4 = ["innerHTML"];
+var _hoisted_3 = ["innerHTML"];
 var Display_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "Display",
 	props: { element: {} },
@@ -3064,20 +3066,20 @@ var Display_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			return sortBy(props.element.data.rows, "position").map((row) => mapRow(row, props.element.data.embeds));
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(table.value, (row) => {
-				return openBlock(), createElementBlock("div", {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("table", _hoisted_2, [createElementVNode("tbody", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(table.value, (row) => {
+				return openBlock(), createElementBlock("tr", {
 					key: row.id,
 					class: "table-row"
 				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(row.cells, (cell) => {
-					return openBlock(), createElementBlock("div", {
+					return openBlock(), createElementBlock("td", {
 						key: cell.id,
 						class: "table-cell"
-					}, [createElementVNode("div", _hoisted_3, [createElementVNode("div", {
+					}, [createElementVNode("div", {
 						class: "cell-content",
 						innerHTML: cell.content
-					}, null, 8, _hoisted_4)])]);
+					}, null, 8, _hoisted_3)]);
 				}), 128))]);
-			}), 128))])]);
+			}), 128))])])]);
 		};
 	}
 });
@@ -3090,7 +3092,7 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
 };
 //#endregion
 //#region src/components/Display.vue
-var Display_default = /*#__PURE__*/ _plugin_vue_export_helper_default(Display_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-ed3d2c98"]]);
+var Display_default = /*#__PURE__*/ _plugin_vue_export_helper_default(Display_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d508aa75"]]);
 //#endregion
 //#region src/index.ts
 var manifest = {

package/package.json

@@ -3,7 +3,7 @@
   "description": "Tailor CMS table end-user component",
   "author": "Studion <info@gostudion.com> (https://github.com/tailor-cms)",
   "type": "module",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -27,7 +27,7 @@
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vue-tsc": "^3.3.8",
     "vuetify": "^4.1.6",
-    "@tailor-cms/ce-table-manifest": "2.0.3"
+    "@tailor-cms/ce-table-manifest": "2.0.4"
   },
   "dependencies": {
     "lodash-es": "^4.18.1"