@antelopejs/dms 0.3.5 → 0.3.7

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # 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)
+
+### 🩹 Fixes
+
+- **frontend:** Match sidebar search design ([#21](https://github.com/AntelopeJS/dms/pull/21))
+
+### 🏡 Chore
+
+- Migrate dms frontend commands to ajs plugin ([#22](https://github.com/AntelopeJS/dms/pull/22))
+
+### ❤️ Contributors
+
+- Antony Rizzitelli <rizzitelli.antony@pm.me>
+
 ## v0.3.5
 
 [compare changes](https://github.com/AntelopeJS/dms/compare/v0.3.4...v0.3.5)

package/README.md

@@ -20,7 +20,7 @@ ajs project modules add @antelopejs/dms
 ```
 
 The dashboard also requires an API module, a module implementing the Database interface, and an
-authentication module. The frontend is served separately by the `ajs-dms` CLI from
+authentication module. The frontend is served separately by the `ajs dms` CLI from
 [`@antelopejs/dms-frontend`](https://github.com/AntelopeJS/dms-frontend).
 
 ## Getting started

package/frontend-vue/layers/dms-layout/app/build/components/layout/DashboardSidebar.vue

@@ -277,7 +277,17 @@ const footerItems = computed((): NavigationMenuItem[] => {
 
       <UDashboardSearchButton
         :collapsed="collapsed"
-        class="bg-elevated ring-default"
+        :label="t('commandPalette.button')"
+        :kbds="['⌘K']"
+        icon="i-ph-magnifying-glass-light"
+        variant="outline"
+        class="border-default bg-elevated text-dimmed hover:border-accented hover:bg-elevated hover:text-muted w-full justify-between rounded-md border px-2.5 py-2 text-[12.5px] font-normal"
+        :ui="{
+          base: 'gap-2',
+          leadingIcon: 'size-[15px]',
+          trailing:
+            '[&>kbd]:rounded-[4px] [&>kbd]:border [&>kbd]:border-accented [&>kbd]:px-[5px] [&>kbd]:py-px [&>kbd]:text-[10px] [&>kbd]:font-normal [&>kbd]:tracking-normal',
+        }"
       />
 
       <div

package/frontend-vue/layers/dms-layout/i18n/locales/layout-en-GB.json

@@ -43,6 +43,7 @@
     "title": "Quick actions"
   },
   "commandPalette": {
+    "button": "Search…",
     "dialog": {
       "title": "Search",
       "description": "Search pages, actions and settings"

package/frontend-vue/layers/dms-layout/i18n/locales/layout-fr-FR.json

@@ -43,6 +43,7 @@
     "title": "Actions rapides"
   },
   "commandPalette": {
+    "button": "Rechercher…",
     "dialog": {
       "title": "Recherche",
       "description": "Rechercher des pages, des actions et des réglages"

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/package.json

@@ -11,13 +11,13 @@
   "license": "Apache-2.0",
   "packageManager": "pnpm@10.6.5",
   "scripts": {
-    "typecheck": "ajs-dms verify-source --layer \"$PWD\" --local-package @antelopejs/dms=.. --local-package @antelopejs/interface-dms=../../interface-dms",
+    "typecheck": "ajs dms verify-source --layer \"$PWD\" --local-package @antelopejs/dms=.. --local-package @antelopejs/interface-dms=../../interface-dms",
     "test": "vitest run",
     "format": "prettier --write .",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "frontend:build": "ajs-dms build -b http://127.0.0.1:5010",
-    "frontend:start": "ajs-dms start -p 3001"
+    "frontend:build": "ajs dms build -b http://127.0.0.1:5010",
+    "frontend:start": "ajs dms start -p 3001"
   },
   "dependencies": {
     "@iconify-json/lucide": "^1.2.64",
@@ -58,6 +58,7 @@
     "zod": "^3.24.2"
   },
   "devDependencies": {
+    "@antelopejs/core": ">=1.8.0 <2",
     "@antelopejs/dms-frontend": ">=0.2.0 <1.0.0",
     "@eslint/js": "^8.57.0",
     "@inertiajs/vue3": "^3.7.0",