@antelopejs/dms 0.3.6 → 0.3.7

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## v0.3.7
+
+[compare changes](https://github.com/AntelopeJS/dms/compare/v0.3.6...v0.3.7)
+
+### 🩹 Fixes
+
+- **ui:** Let Grid drop columns instead of overflowing its container ([#26](https://github.com/AntelopeJS/dms/pull/26))
+
+### 🏡 Chore
+
+- Make playground orb setup reliable ([#23](https://github.com/AntelopeJS/dms/pull/23))
+- **playground:** Use dms frontend 0.2.1 ([#24](https://github.com/AntelopeJS/dms/pull/24))
+
+### ❤️ Contributors
+
+- Antony Rizzitelli <rizzitelli.antony@pm.me>
+
 ## v0.3.6
 
 [compare changes](https://github.com/AntelopeJS/dms/compare/v0.3.5...v0.3.6)

package/frontend-vue/layers/dms-ui/app/components/grid/Grid.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
 import { GRID_CONTEXT, type GridContext } from "./constants";
+import { GRID_DEFAULT_MIN_COLUMN_WIDTH, gridColumnsTemplate } from "./columns";
 
 interface GridProps extends DefaultComponentProps {
   gap?: string;
+  minColumnWidth?: string;
 }
 
 const props = withDefaults(defineProps<GridProps>(), {
   gap: "1rem",
+  minColumnWidth: GRID_DEFAULT_MIN_COLUMN_WIDTH,
 });
 
 const rowColumnCounts = ref<number[]>([]);
@@ -18,6 +21,7 @@ const maxColumns = computed(() => {
 });
 
 const gapRef = computed(() => props.gap);
+const minColumnWidthRef = computed(() => props.minColumnWidth);
 
 provide<GridContext>(GRID_CONTEXT, {
   registerRowColumnCount: (columnCount: number) => {
@@ -25,11 +29,16 @@ provide<GridContext>(GRID_CONTEXT, {
   },
   maxColumns,
   gap: gapRef,
+  minColumnWidth: minColumnWidthRef,
 });
 
 const gridStyle = computed(() => ({
   display: "grid",
-  gridTemplateColumns: `repeat(${maxColumns.value}, 1fr)`,
+  gridTemplateColumns: gridColumnsTemplate(
+    maxColumns.value,
+    props.gap,
+    props.minColumnWidth,
+  ),
   gap: props.gap,
   width: "100%",
 }));

package/frontend-vue/layers/dms-ui/app/components/grid/GridRow.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
 import { GRID_CONTEXT, type GridContext } from "./constants";
+import { GRID_DEFAULT_MIN_COLUMN_WIDTH, gridColumnsTemplate } from "./columns";
 
 interface GridRowProps extends DefaultComponentProps {}
 
+const DEFAULT_GAP = "1rem";
+
 const props = defineProps<GridRowProps>();
 
 const gridContext = inject<GridContext>(GRID_CONTEXT);
@@ -13,12 +16,19 @@ if (gridContext) {
   gridContext.registerRowColumnCount(columnCount);
 }
 
-const rowStyle = computed(() => ({
-  gridColumn: "1 / -1",
-  display: "grid",
-  gridTemplateColumns: `repeat(${gridContext?.maxColumns.value || 1}, 1fr)`,
-  gap: gridContext?.gap.value ?? "1rem",
-}));
+const rowStyle = computed(() => {
+  const gap = gridContext?.gap.value ?? DEFAULT_GAP;
+  return {
+    gridColumn: "1 / -1",
+    display: "grid",
+    gridTemplateColumns: gridColumnsTemplate(
+      gridContext?.maxColumns.value || 1,
+      gap,
+      gridContext?.minColumnWidth.value ?? GRID_DEFAULT_MIN_COLUMN_WIDTH,
+    ),
+    gap,
+  };
+});
 </script>
 
 <template>

package/frontend-vue/layers/dms-ui/app/components/grid/columns.ts

@@ -0,0 +1,29 @@
+const SINGLE_COLUMN = 1;
+
+/** Track floor below which a column stops being usable, as a CSS length. */
+export const GRID_DEFAULT_MIN_COLUMN_WIDTH = "240px";
+
+/**
+ * The column track template a `Grid` and every `GridRow` inside it share.
+ *
+ * `auto-fill` drops tracks as the container narrows, which is what makes the
+ * grid responsive without a breakpoint list. The track floor is the larger of
+ * `minColumnWidth` and the width one column would have at `maxColumns`: once
+ * the container is wide enough, that share exceeds `minColumnWidth` and leaves
+ * no room for an extra track, so `auto-fill` settles on exactly `maxColumns`
+ * and the wide layout stays what it was. The outer `min(100%, ...)` keeps a
+ * container narrower than `minColumnWidth` from overflowing it.
+ *
+ * Rows resolve this same template against the same width, so they keep lining
+ * up on one another — what `maxColumns` was introduced for — at every width
+ * rather than only at the widest.
+ */
+export function gridColumnsTemplate(
+  maxColumns: number,
+  gap: string,
+  minColumnWidth: string,
+): string {
+  const columns = Math.max(maxColumns, SINGLE_COLUMN);
+  const columnShare = `(100% - ${columns - SINGLE_COLUMN} * ${gap}) / ${columns}`;
+  return `repeat(auto-fill, minmax(min(100%, max(${minColumnWidth}, ${columnShare})), 1fr))`;
+}

package/frontend-vue/layers/dms-ui/app/components/grid/constants.ts

@@ -4,4 +4,5 @@ export interface GridContext {
   registerRowColumnCount: (count: number) => void;
   maxColumns: ComputedRef<number>;
   gap: ComputedRef<string>;
+  minColumnWidth: ComputedRef<string>;
 }

package/frontend-vue/tests/grid-responsive-columns.test.ts

@@ -0,0 +1,105 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+import { gridColumnsTemplate } from "../layers/dms-ui/app/components/grid/columns";
+
+const GAP = "1rem";
+const MIN = "240px";
+
+const sourceOf = (file: string) =>
+  readFileSync(
+    new URL(`../layers/dms-ui/app/components/grid/${file}`, import.meta.url),
+    "utf8",
+  );
+
+// Guards the exact-fit case: at the width where the track floor is precisely
+// one Nth of the container, binary floats land a hair under the integer.
+const FIT_EPSILON = 1e-6;
+
+/**
+ * Resolves the template the way a browser would, in pixels, and reports how
+ * many tracks `auto-fill` ends up with for a given container width.
+ */
+function resolveColumnCount(
+  template: string,
+  containerWidth: number,
+  gapPx: number,
+): number {
+  const match = template.match(
+    /repeat\(auto-fill, minmax\(min\(100%, max\((\d+)px, \(100% - (\d+) \* [^)]+\) \/ (\d+)\)\), 1fr\)\)/,
+  );
+  if (!match) throw new Error(`unexpected template: ${template}`);
+  const [, min, gapCount, maxColumns] = match;
+  const share =
+    (containerWidth - Number(gapCount) * gapPx) / Number(maxColumns);
+  const floor = Math.min(containerWidth, Math.max(Number(min), share));
+  if (floor <= 0) return Number(maxColumns);
+  return Math.max(
+    1,
+    Math.floor((containerWidth + gapPx) / (floor + gapPx) + FIT_EPSILON),
+  );
+}
+
+describe("grid column template", () => {
+  it("keeps every column at the widest row's count once the container is wide", () => {
+    const template = gridColumnsTemplate(6, GAP, MIN);
+    expect(resolveColumnCount(template, 1600, 16)).toBe(6);
+    expect(resolveColumnCount(template, 2400, 16)).toBe(6);
+  });
+
+  it("drops columns rather than shrinking them below the minimum", () => {
+    const template = gridColumnsTemplate(6, GAP, MIN);
+    expect(resolveColumnCount(template, 976, 16)).toBe(3);
+    expect(resolveColumnCount(template, 657, 16)).toBe(2);
+    expect(resolveColumnCount(template, 328, 16)).toBe(1);
+  });
+
+  it("never asks for a track wider than the container", () => {
+    const template = gridColumnsTemplate(4, GAP, MIN);
+    expect(template).toContain("min(100%,");
+    expect(resolveColumnCount(template, 200, 16)).toBe(1);
+  });
+
+  it("gives rows of the same grid one shared template, so they stay aligned", () => {
+    expect(gridColumnsTemplate(4, GAP, MIN)).toBe(
+      gridColumnsTemplate(4, GAP, MIN),
+    );
+    expect(gridColumnsTemplate(4, GAP, MIN)).not.toBe(
+      gridColumnsTemplate(3, GAP, MIN),
+    );
+  });
+
+  it("treats a row-less grid as a single column", () => {
+    expect(gridColumnsTemplate(0, GAP, MIN)).toBe(
+      gridColumnsTemplate(1, GAP, MIN),
+    );
+    expect(resolveColumnCount(gridColumnsTemplate(1, GAP, MIN), 976, 16)).toBe(
+      1,
+    );
+  });
+
+  it("subtracts the gaps the row actually renders", () => {
+    expect(gridColumnsTemplate(3, "2rem", MIN)).toContain("(100% - 2 * 2rem)");
+    expect(gridColumnsTemplate(1, GAP, MIN)).toContain("(100% - 0 * 1rem)");
+  });
+
+  it("honours a caller-supplied minimum", () => {
+    expect(gridColumnsTemplate(4, GAP, "120px")).toContain("120px");
+    expect(
+      resolveColumnCount(gridColumnsTemplate(4, GAP, "120px"), 657, 16),
+    ).toBe(4);
+  });
+});
+
+describe("grid components", () => {
+  it("drive both the container and its rows from the shared template", () => {
+    for (const file of ["Grid.vue", "GridRow.vue"]) {
+      const source = sourceOf(file);
+      expect(source).toContain("gridColumnsTemplate(");
+      expect(source).not.toMatch(/repeat\(\$\{/);
+    }
+  });
+
+  it("keeps rows spanning the full grid width", () => {
+    expect(sourceOf("GridRow.vue")).toContain('gridColumn: "1 / -1"');
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AntelopeJS/dms.git"