@saasquatch/mint-components 2.4.2-1 → 2.4.2

package/dist/collection/tables/GenericTableView.js

@@ -6,9 +6,6 @@ export function GenericTableView(props) {
   const { columns, rows } = elements;
   const { show } = states;
   const hiddenCols = data.hiddenColumns && data.hiddenColumns.split(",").map(Number);
-  // Non-string columns are the editor's raisins plop targets, so the header has to stay rendered for them
-  const hasDropZones = !!(columns === null || columns === void 0 ? void 0 : columns.some((column) => typeof column !== "string"));
-  const showLabels = data.textOverrides.showLabels;
   const mobile = "@media (max-width: " + data.mdBreakpoint + "px)";
   const tablet = `@media (min-width: ${Boolean(rows.length < 2) ? data.mdBreakpoint : data.smBreakpoint}px) and (max-width: ${data.mdBreakpoint}px)`;
   // Due to mobile media queries being dependant on props, not feasiable to move out of render function
@@ -29,13 +26,6 @@ export function GenericTableView(props) {
         fontWeight: "var(--sl-font-weight-semibold)",
         overflowWrap: "anywhere",
       },
-      "& th.collapsed": {
-        fontSize: "0",
-        padding: "14px 0",
-      },
-      "& th.drop-zone": {
-        width: "30px",
-      },
       "& td": {
         padding: "var(--sl-spacing-small)",
         paddingLeft: "0",
@@ -43,35 +33,10 @@ export function GenericTableView(props) {
         textOverflow: "ellipsis",
       },
       [mobile]: {
-        // Body rows become blocks here, so the header has to leave the table layout to stay full width
         "& thead": {
-          display: hasDropZones ? "block" : "none",
-        },
-        // Columns read top-to-bottom inside a card, so the drop zones between them stack the same way
-        "& thead tr": {
-          display: "flex",
-          flexDirection: "column",
-        },
-        "& thead th.label": {
-          padding: "0",
-          lineHeight: "20px",
-          fontSize: "var(--sl-font-size-small)",
-          color: "var(--sl-color-neutral-500)",
-        },
-        "& thead th.drop-zone": {
-          width: "auto",
-          padding: "14px 0",
-          lineHeight: "0",
-          position: "relative",
-        },
-        // The plop target is inline-styled position:absolute, so it needs the cell as its containing block to span it
-        "& thead th.drop-zone slot::slotted(raisins-plop-target)": {
-          width: "100%",
-        },
-        "& tbody td.drop-zone": {
           display: "none",
         },
-        "& tbody tr": {
+        "& tr": {
           display: "block",
           background: "inherit",
           border: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
@@ -128,11 +93,11 @@ export function GenericTableView(props) {
   return (h("div", null,
     h("style", { type: "text/css" }, styleString),
     h("table", { class: sheet.classes.Table },
-      (showLabels || hasDropZones) && (h("thead", null,
+      data.textOverrides.showLabels && (h("thead", null,
         h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => {
           if (typeof column === "string")
-            return (h("th", { class: showLabels ? "label" : "collapsed" }, column));
-          return h("th", { class: "drop-zone" }, column);
+            return h("th", null, column);
+          return h("th", { style: { width: "30px" } }, column);
         })))),
       h("tbody", null,
         show === "loading" && elements.loadingElement,
@@ -143,7 +108,7 @@ export function GenericTableView(props) {
             return typeof columns[j] === "string" ? (h("td", { class: (hiddenCols === null || hiddenCols === void 0 ? void 0 : hiddenCols.includes(j)) ? "hidden" : "", "data-label": columns[j] + ":", style: {
                 gridTemplateColumns: (hiddenCols === null || hiddenCols === void 0 ? void 0 : hiddenCols.includes(j)) ? "1fr"
                   : "0.5fr 0.5fr",
-              } }, cell)) : (h("td", { class: "drop-zone" }, cell));
+              } }, cell)) : (h("td", null, cell));
           })));
         })))),
     h("div", { class: sheet.classes.ButtonContainer, part: states.namespace + "-button-wrapper" },

package/dist/esm/{GenericTableView-2555736c.js → GenericTableView-8c72ac30.js}

@@ -7,9 +7,6 @@ function GenericTableView(props) {
   const { columns, rows } = elements;
   const { show } = states;
   const hiddenCols = data.hiddenColumns && data.hiddenColumns.split(",").map(Number);
-  // Non-string columns are the editor's raisins plop targets, so the header has to stay rendered for them
-  const hasDropZones = !!(columns === null || columns === void 0 ? void 0 : columns.some((column) => typeof column !== "string"));
-  const showLabels = data.textOverrides.showLabels;
   const mobile = "@media (max-width: " + data.mdBreakpoint + "px)";
   const tablet = `@media (min-width: ${Boolean(rows.length < 2) ? data.mdBreakpoint : data.smBreakpoint}px) and (max-width: ${data.mdBreakpoint}px)`;
   // Due to mobile media queries being dependant on props, not feasiable to move out of render function
@@ -30,13 +27,6 @@ function GenericTableView(props) {
         fontWeight: "var(--sl-font-weight-semibold)",
         overflowWrap: "anywhere",
       },
-      "& th.collapsed": {
-        fontSize: "0",
-        padding: "14px 0",
-      },
-      "& th.drop-zone": {
-        width: "30px",
-      },
       "& td": {
         padding: "var(--sl-spacing-small)",
         paddingLeft: "0",
@@ -44,35 +34,10 @@ function GenericTableView(props) {
         textOverflow: "ellipsis",
       },
       [mobile]: {
-        // Body rows become blocks here, so the header has to leave the table layout to stay full width
         "& thead": {
-          display: hasDropZones ? "block" : "none",
-        },
-        // Columns read top-to-bottom inside a card, so the drop zones between them stack the same way
-        "& thead tr": {
-          display: "flex",
-          flexDirection: "column",
-        },
-        "& thead th.label": {
-          padding: "0",
-          lineHeight: "20px",
-          fontSize: "var(--sl-font-size-small)",
-          color: "var(--sl-color-neutral-500)",
-        },
-        "& thead th.drop-zone": {
-          width: "auto",
-          padding: "14px 0",
-          lineHeight: "0",
-          position: "relative",
-        },
-        // The plop target is inline-styled position:absolute, so it needs the cell as its containing block to span it
-        "& thead th.drop-zone slot::slotted(raisins-plop-target)": {
-          width: "100%",
-        },
-        "& tbody td.drop-zone": {
           display: "none",
         },
-        "& tbody tr": {
+        "& tr": {
           display: "block",
           background: "inherit",
           border: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
@@ -129,11 +94,11 @@ function GenericTableView(props) {
   return (h("div", null,
     h("style", { type: "text/css" }, styleString),
     h("table", { class: sheet.classes.Table },
-      (showLabels || hasDropZones) && (h("thead", null,
+      data.textOverrides.showLabels && (h("thead", null,
         h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => {
           if (typeof column === "string")
-            return (h("th", { class: showLabels ? "label" : "collapsed" }, column));
-          return h("th", { class: "drop-zone" }, column);
+            return h("th", null, column);
+          return h("th", { style: { width: "30px" } }, column);
         })))),
       h("tbody", null,
         show === "loading" && elements.loadingElement,
@@ -144,7 +109,7 @@ function GenericTableView(props) {
             return typeof columns[j] === "string" ? (h("td", { class: (hiddenCols === null || hiddenCols === void 0 ? void 0 : hiddenCols.includes(j)) ? "hidden" : "", "data-label": columns[j] + ":", style: {
                 gridTemplateColumns: (hiddenCols === null || hiddenCols === void 0 ? void 0 : hiddenCols.includes(j)) ? "1fr"
                   : "0.5fr 0.5fr",
-              } }, cell)) : (h("td", { class: "drop-zone" }, cell));
+              } }, cell)) : (h("td", null, cell));
           })));
         })))),
     h("div", { class: sheet.classes.ButtonContainer, part: states.namespace + "-button-wrapper" },