@jskit-ai/http-web 0.1.92 → 0.1.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/http-web",
-  "version": "0.1.92",
+  "version": "0.1.93",
   "type": "module",
   "scripts": {
     "test": "node --test --test-concurrency=1"
@@ -44,14 +44,14 @@
     "./client/support/contractGuards": "./src/client/support/contractGuards.js"
   },
   "dependencies": {
-    "@jskit-ai/resource-crud-core": "0.1.187",
+    "@jskit-ai/resource-crud-core": "0.1.188",
     "@mdi/js": "^7.4.47"
   },
   "peerDependencies": {
-    "@jskit-ai/http-runtime": "0.1.243",
-    "@jskit-ai/kernel": "0.1.245",
-    "@jskit-ai/realtime": "0.1.244",
-    "@jskit-ai/shell-web": "0.1.251",
+    "@jskit-ai/http-runtime": "0.1.244",
+    "@jskit-ai/kernel": "0.1.246",
+    "@jskit-ai/realtime": "0.1.245",
+    "@jskit-ai/shell-web": "0.1.252",
     "@tanstack/vue-query": "^5.90.5",
     "vue": "^3.5.13",
     "vue-router": "^5.0.4",

package/patterns/crud-screen-set/PATTERN.md

@@ -76,9 +76,19 @@ id (or a distinct new-record marker) so form cache entries stay separate.
 The New/Edit examples supply it; list/view screen wrappers derive their
 standard keys from `resourceNamespace`.
 
+Each form fact has one input. `resource`, `input`, `buildPayload`,
+`mapPayloadToModel` and `createModel` are top-level `useCrudAddEditScreen()`
+options; `addEditOptions` carries only request and route options for
+`useAddEdit()` (such as `apiSuffix`, `queryKeyFactory`, `readEnabled`,
+`writeMethod`, URL templates, permissions, `client`, `transport` and
+`onSaveSuccess`) and rejects anything else. The save-error message is
+`addEditOptions.fallbackSaveError` when given, otherwise the resource's
+`messages.saveError`; the request error and its toast use the same string.
+
 Save navigation is configured in the top-level `saveSuccess` object. The default
 prefers a configured record-view URL, then the list. A create-and-list variation
-sets `navigateToView: false` and `listUrlTemplate` to its list route. Set both
+sets `navigateToView: false` and `saveSuccess.listUrlTemplate` to its list
+route; `addEditOptions.listUrlTemplate` does not drive save navigation. Set both
 `navigateToView` and `navigateToList` to `false` to stay on the form. A custom
 `addEditOptions.onSaveSuccess` replaces default invalidation and navigation;
 it is unnecessary for ordinary list navigation. The generic CRUD guide explains

package/src/client/bulkActions.js

@@ -1,47 +1,20 @@
 import { normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
-
-function normalizeCrudListBulkAction(rawAction = {}, index = 0) {
-  if (!rawAction || typeof rawAction !== "object" || Array.isArray(rawAction)) {
-    return null;
-  }
-
-  const key = normalizeText(rawAction.key || rawAction.id || `action-${index + 1}`);
-  const label = normalizeText(rawAction.label || rawAction.title);
-  if (!key || !label) {
-    return null;
-  }
-
-  return Object.freeze({
-    key,
-    label,
-    icon: normalizeText(rawAction.icon),
-    color: normalizeText(rawAction.color, { fallback: "primary" }),
-    variant: normalizeText(rawAction.variant, { fallback: "tonal" }),
-    confirmLabel: normalizeText(rawAction.confirmLabel),
-    run: typeof rawAction.run === "function" ? rawAction.run : null,
-    disabled: rawAction.disabled
-  });
-}
+import { defineCrudListActions } from "./support/crudListActionSupport.js";
 
 function defineCrudListBulkActions(actions = []) {
-  if (!Array.isArray(actions)) {
-    throw new TypeError("defineCrudListBulkActions requires an array.");
-  }
-
-  const normalizedActions = [];
-  const seenKeys = new Set();
-
-  actions.forEach((rawAction, index) => {
-    const action = normalizeCrudListBulkAction(rawAction, index);
-    if (!action || seenKeys.has(action.key)) {
-      return;
-    }
-
-    seenKeys.add(action.key);
-    normalizedActions.push(action);
+  return defineCrudListActions(actions, {
+    name: "defineCrudListBulkActions",
+    createAction: (rawAction, { key, label }) => ({
+      key,
+      label,
+      icon: normalizeText(rawAction.icon),
+      color: normalizeText(rawAction.color, { fallback: "primary" }),
+      variant: normalizeText(rawAction.variant, { fallback: "tonal" }),
+      confirmLabel: normalizeText(rawAction.confirmLabel),
+      run: typeof rawAction.run === "function" ? rawAction.run : null,
+      disabled: rawAction.disabled
+    })
   });
-
-  return Object.freeze(normalizedActions);
 }
 
 export { defineCrudListBulkActions };

package/src/client/components/CrudAddEditScreen.vue

@@ -116,14 +116,6 @@ function resolveCancelTo(target = cancelTo.value) {
 </template>
 
 <style scoped>
-.crud-screen {
-  --crud-screen-state-padding: 2.5rem 1.25rem;
-}
-
-.crud-screen--operator {
-  --crud-screen-state-padding: 2rem 1rem;
-}
-
 .crud-add-edit-form__actions {
   display: flex;
   flex-wrap: wrap;
@@ -138,7 +130,7 @@ function resolveCancelTo(target = cancelTo.value) {
 .crud-add-edit-form__state {
   margin-inline: auto;
   max-width: 30rem;
-  padding: var(--crud-screen-state-padding);
+  padding: 2rem 1rem;
   text-align: center;
 }
 

package/src/client/components/CrudListBulkActionSurface.vue

@@ -13,11 +13,8 @@ const props = defineProps({
   }
 });
 
-const display = useDisplay();
-const isCompactLayout = computed(() => {
-  const displayName = String(display?.name?.value || "").trim().toLowerCase();
-  return displayName === "xs" || displayName === "sm";
-});
+const { smAndDown: isCompactLayout } = useDisplay();
+
 const actions = computed(() => Array.isArray(props.runtime?.actions) ? props.runtime.actions : []);
 const selectedCount = computed(() => Number(props.runtime?.selectedCount?.value || 0));
 const shouldRender = computed(() =>

package/src/client/components/CrudListFilterControls.vue

@@ -0,0 +1,175 @@
+<script setup>
+import { computed } from "vue";
+import CrudListDateFilterControl from "./CrudListDateFilterControl.vue";
+
+const props = defineProps({
+  filters: {
+    type: Array,
+    default: () => []
+  },
+  runtime: {
+    type: Object,
+    default: null
+  },
+  stacked: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const runtimeValues = computed(() => props.runtime?.values || {});
+
+function optionItems(filter = {}) {
+  return Array.isArray(filter.options) ? filter.options : [];
+}
+
+function placeholder(filter = {}, fallback = "") {
+  return String(filter?.ui?.placeholder || fallback || "").trim();
+}
+</script>
+
+<template>
+  <div
+    class="crud-list-filter-surface__controls"
+    :class="{ 'crud-list-filter-surface__controls--stacked': stacked }"
+  >
+    <template v-for="filter in filters" :key="filter.key">
+      <v-switch
+        v-if="filter.type === 'flag'"
+        v-model="runtimeValues[filter.key]"
+        :label="filter.label"
+        color="primary"
+        density="comfortable"
+        hide-details
+        class="crud-list-filter-surface__control"
+      />
+      <v-select
+        v-else-if="filter.type === 'enum' || filter.type === 'enumMany' || filter.type === 'presence'"
+        v-model="runtimeValues[filter.key]"
+        :items="optionItems(filter)"
+        :label="filter.label"
+        :placeholder="placeholder(filter)"
+        :multiple="filter.type === 'enumMany'"
+        :chips="filter.type === 'enumMany'"
+        :closable-chips="filter.type === 'enumMany'"
+        clearable
+        item-title="label"
+        item-value="value"
+        variant="outlined"
+        density="comfortable"
+        hide-details="auto"
+        class="crud-list-filter-surface__control"
+      />
+      <v-combobox
+        v-else-if="filter.type === 'recordIdMany'"
+        v-model="runtimeValues[filter.key]"
+        :label="filter.label"
+        :placeholder="placeholder(filter, 'Enter ids')"
+        multiple
+        chips
+        closable-chips
+        clearable
+        variant="outlined"
+        density="comfortable"
+        hide-details="auto"
+        class="crud-list-filter-surface__control"
+      />
+      <v-text-field
+        v-else-if="filter.type === 'recordId'"
+        v-model="runtimeValues[filter.key]"
+        :label="filter.label"
+        :placeholder="placeholder(filter, 'Enter id')"
+        clearable
+        variant="outlined"
+        density="comfortable"
+        hide-details="auto"
+        class="crud-list-filter-surface__control"
+      />
+      <div
+        v-else-if="filter.type === 'dateRange'"
+        class="crud-list-filter-surface__range crud-list-filter-surface__range--date"
+        role="group"
+        :aria-label="`${filter.label} date range`"
+        :data-filter-key="filter.key"
+        data-filter-type="date-range"
+      >
+        <CrudListDateFilterControl
+          v-model="runtimeValues[filter.key].from"
+          :label="`${filter.label} from`"
+          :control-id="`${filter.key}-from`"
+          :placeholder="placeholder(filter, 'Select start date')"
+        />
+        <CrudListDateFilterControl
+          v-model="runtimeValues[filter.key].to"
+          :label="`${filter.label} to`"
+          :control-id="`${filter.key}-to`"
+          :placeholder="placeholder(filter, 'Select end date')"
+        />
+      </div>
+      <div v-else-if="filter.type === 'numberRange'" class="crud-list-filter-surface__range">
+        <v-text-field
+          v-model="runtimeValues[filter.key].min"
+          :label="`${filter.label} min`"
+          type="number"
+          variant="outlined"
+          density="comfortable"
+          hide-details="auto"
+        />
+        <v-text-field
+          v-model="runtimeValues[filter.key].max"
+          :label="`${filter.label} max`"
+          type="number"
+          variant="outlined"
+          density="comfortable"
+          hide-details="auto"
+        />
+      </div>
+      <CrudListDateFilterControl
+        v-else-if="filter.type === 'date'"
+        v-model="runtimeValues[filter.key]"
+        :label="filter.label"
+        :control-id="filter.key"
+        :placeholder="placeholder(filter, 'Select date')"
+        class="crud-list-filter-surface__control"
+      />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.crud-list-filter-surface__controls {
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+}
+
+.crud-list-filter-surface__controls--stacked {
+  grid-template-columns: 1fr;
+}
+
+.crud-list-filter-surface__control {
+  min-width: 0;
+}
+
+.crud-list-filter-surface__range {
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  min-width: 0;
+}
+
+.crud-list-filter-surface__range--date {
+  grid-column: span 2;
+  grid-template-columns: repeat(2, minmax(14rem, 1fr));
+}
+
+.crud-list-filter-surface__controls--stacked .crud-list-filter-surface__range--date {
+  grid-column: auto;
+}
+
+@media (max-width: 640px) {
+  .crud-list-filter-surface__range {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

package/src/client/components/CrudListFilterSurface.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, ref } from "vue";
 import { useDisplay } from "vuetify";
-import CrudListDateFilterControl from "./CrudListDateFilterControl.vue";
+import CrudListFilterControls from "./CrudListFilterControls.vue";
 
 const props = defineProps({
   filters: {
@@ -18,7 +18,8 @@ const props = defineProps({
   }
 });
 
-const display = useDisplay();
+const { smAndDown: isCompactLayout } = useDisplay();
+
 const sheetOpen = ref(false);
 
 const filterEntries = computed(() =>
@@ -27,22 +28,9 @@ const filterEntries = computed(() =>
     : {})
     .filter((filter) => filter?.key && filter?.type)
 );
-const runtimeValues = computed(() => props.runtime?.values || {});
 const activeChips = computed(() => Array.isArray(props.runtime?.activeChips?.value) ? props.runtime.activeChips.value : []);
 const hasActiveFilters = computed(() => Boolean(props.runtime?.hasActiveFilters?.value));
 const shouldRender = computed(() => filterEntries.value.length > 0 && Boolean(props.runtime?.values));
-const isCompactLayout = computed(() => {
-  const displayName = String(display?.name?.value || "").trim().toLowerCase();
-  return displayName === "xs" || displayName === "sm";
-});
-
-function optionItems(filter = {}) {
-  return Array.isArray(filter.options) ? filter.options : [];
-}
-
-function placeholder(filter = {}, fallback = "") {
-  return String(filter?.ui?.placeholder || fallback || "").trim();
-}
 
 function clearChip(chip = {}) {
   props.runtime?.clearChip?.(chip);
@@ -85,108 +73,7 @@ function clearFilters() {
     </div>
 
     <v-sheet v-if="!isCompactLayout" rounded="lg" border class="crud-list-filter-surface__panel">
-      <div class="crud-list-filter-surface__controls">
-        <template v-for="filter in filterEntries" :key="filter.key">
-          <v-switch
-            v-if="filter.type === 'flag'"
-            v-model="runtimeValues[filter.key]"
-            :label="filter.label"
-            color="primary"
-            density="comfortable"
-            hide-details
-            class="crud-list-filter-surface__control"
-          />
-          <v-select
-            v-else-if="filter.type === 'enum' || filter.type === 'enumMany' || filter.type === 'presence'"
-            v-model="runtimeValues[filter.key]"
-            :items="optionItems(filter)"
-            :label="filter.label"
-            :placeholder="placeholder(filter)"
-            :multiple="filter.type === 'enumMany'"
-            :chips="filter.type === 'enumMany'"
-            :closable-chips="filter.type === 'enumMany'"
-            clearable
-            item-title="label"
-            item-value="value"
-            variant="outlined"
-            density="comfortable"
-            hide-details="auto"
-            class="crud-list-filter-surface__control"
-          />
-          <v-combobox
-            v-else-if="filter.type === 'recordIdMany'"
-            v-model="runtimeValues[filter.key]"
-            :label="filter.label"
-            :placeholder="placeholder(filter, 'Enter ids')"
-            multiple
-            chips
-            closable-chips
-            clearable
-            variant="outlined"
-            density="comfortable"
-            hide-details="auto"
-            class="crud-list-filter-surface__control"
-          />
-          <v-text-field
-            v-else-if="filter.type === 'recordId'"
-            v-model="runtimeValues[filter.key]"
-            :label="filter.label"
-            :placeholder="placeholder(filter, 'Enter id')"
-            clearable
-            variant="outlined"
-            density="comfortable"
-            hide-details="auto"
-            class="crud-list-filter-surface__control"
-          />
-          <div
-            v-else-if="filter.type === 'dateRange'"
-            class="crud-list-filter-surface__range crud-list-filter-surface__range--date"
-            role="group"
-            :aria-label="`${filter.label} date range`"
-            :data-filter-key="filter.key"
-            data-filter-type="date-range"
-          >
-            <CrudListDateFilterControl
-              v-model="runtimeValues[filter.key].from"
-              :label="`${filter.label} from`"
-              :control-id="`${filter.key}-from`"
-              :placeholder="placeholder(filter, 'Select start date')"
-            />
-            <CrudListDateFilterControl
-              v-model="runtimeValues[filter.key].to"
-              :label="`${filter.label} to`"
-              :control-id="`${filter.key}-to`"
-              :placeholder="placeholder(filter, 'Select end date')"
-            />
-          </div>
-          <div v-else-if="filter.type === 'numberRange'" class="crud-list-filter-surface__range">
-            <v-text-field
-              v-model="runtimeValues[filter.key].min"
-              :label="`${filter.label} min`"
-              type="number"
-              variant="outlined"
-              density="comfortable"
-              hide-details="auto"
-            />
-            <v-text-field
-              v-model="runtimeValues[filter.key].max"
-              :label="`${filter.label} max`"
-              type="number"
-              variant="outlined"
-              density="comfortable"
-              hide-details="auto"
-            />
-          </div>
-          <CrudListDateFilterControl
-            v-else-if="filter.type === 'date'"
-            v-model="runtimeValues[filter.key]"
-            :label="filter.label"
-            :control-id="filter.key"
-            :placeholder="placeholder(filter, 'Select date')"
-            class="crud-list-filter-surface__control"
-          />
-        </template>
-      </div>
+      <CrudListFilterControls :filters="filterEntries" :runtime="runtime" />
     </v-sheet>
 
     <v-dialog v-model="sheetOpen" max-width="640" location="bottom">
@@ -196,103 +83,7 @@ function clearFilters() {
           <v-btn variant="text" @click="sheetOpen = false">Close</v-btn>
         </v-card-title>
         <v-card-text>
-          <div class="crud-list-filter-surface__controls crud-list-filter-surface__controls--stacked">
-            <template v-for="filter in filterEntries" :key="filter.key">
-              <v-switch
-                v-if="filter.type === 'flag'"
-                v-model="runtimeValues[filter.key]"
-                :label="filter.label"
-                color="primary"
-                density="comfortable"
-                hide-details
-              />
-              <v-select
-                v-else-if="filter.type === 'enum' || filter.type === 'enumMany' || filter.type === 'presence'"
-                v-model="runtimeValues[filter.key]"
-                :items="optionItems(filter)"
-                :label="filter.label"
-                :placeholder="placeholder(filter)"
-                :multiple="filter.type === 'enumMany'"
-                :chips="filter.type === 'enumMany'"
-                :closable-chips="filter.type === 'enumMany'"
-                clearable
-                item-title="label"
-                item-value="value"
-                variant="outlined"
-                density="comfortable"
-                hide-details="auto"
-              />
-              <v-combobox
-                v-else-if="filter.type === 'recordIdMany'"
-                v-model="runtimeValues[filter.key]"
-                :label="filter.label"
-                :placeholder="placeholder(filter, 'Enter ids')"
-                multiple
-                chips
-                closable-chips
-                clearable
-                variant="outlined"
-                density="comfortable"
-                hide-details="auto"
-              />
-              <v-text-field
-                v-else-if="filter.type === 'recordId'"
-                v-model="runtimeValues[filter.key]"
-                :label="filter.label"
-                :placeholder="placeholder(filter, 'Enter id')"
-                clearable
-                variant="outlined"
-                density="comfortable"
-                hide-details="auto"
-              />
-              <div
-                v-else-if="filter.type === 'dateRange'"
-                class="crud-list-filter-surface__range crud-list-filter-surface__range--date"
-                role="group"
-                :aria-label="`${filter.label} date range`"
-                :data-filter-key="filter.key"
-                data-filter-type="date-range"
-              >
-                <CrudListDateFilterControl
-                  v-model="runtimeValues[filter.key].from"
-                  :label="`${filter.label} from`"
-                  :control-id="`${filter.key}-from`"
-                  :placeholder="placeholder(filter, 'Select start date')"
-                />
-                <CrudListDateFilterControl
-                  v-model="runtimeValues[filter.key].to"
-                  :label="`${filter.label} to`"
-                  :control-id="`${filter.key}-to`"
-                  :placeholder="placeholder(filter, 'Select end date')"
-                />
-              </div>
-              <div v-else-if="filter.type === 'numberRange'" class="crud-list-filter-surface__range">
-                <v-text-field
-                  v-model="runtimeValues[filter.key].min"
-                  :label="`${filter.label} min`"
-                  type="number"
-                  variant="outlined"
-                  density="comfortable"
-                  hide-details="auto"
-                />
-                <v-text-field
-                  v-model="runtimeValues[filter.key].max"
-                  :label="`${filter.label} max`"
-                  type="number"
-                  variant="outlined"
-                  density="comfortable"
-                  hide-details="auto"
-                />
-              </div>
-              <CrudListDateFilterControl
-                v-else-if="filter.type === 'date'"
-                v-model="runtimeValues[filter.key]"
-                :label="filter.label"
-                :control-id="filter.key"
-                :placeholder="placeholder(filter, 'Select date')"
-              />
-            </template>
-          </div>
+          <CrudListFilterControls :filters="filterEntries" :runtime="runtime" stacked />
         </v-card-text>
         <v-card-actions class="justify-space-between">
           <v-btn variant="text" @click="clearFilters">Clear all</v-btn>
@@ -335,36 +126,6 @@ function clearFilters() {
   padding: 1rem;
 }
 
-.crud-list-filter-surface__controls {
-  display: grid;
-  gap: 0.75rem;
-  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
-}
-
-.crud-list-filter-surface__controls--stacked {
-  grid-template-columns: 1fr;
-}
-
-.crud-list-filter-surface__control {
-  min-width: 0;
-}
-
-.crud-list-filter-surface__range {
-  display: grid;
-  gap: 0.75rem;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  min-width: 0;
-}
-
-.crud-list-filter-surface__range--date {
-  grid-column: span 2;
-  grid-template-columns: repeat(2, minmax(14rem, 1fr));
-}
-
-.crud-list-filter-surface__controls--stacked .crud-list-filter-surface__range--date {
-  grid-column: auto;
-}
-
 .crud-list-filter-surface__sheet {
   margin: 0.75rem;
 }
@@ -380,9 +141,5 @@ function clearFilters() {
     align-items: stretch;
     flex-direction: column;
   }
-
-  .crud-list-filter-surface__range {
-    grid-template-columns: 1fr;
-  }
 }
 </style>

package/src/client/components/CrudListScreen.vue

@@ -320,14 +320,6 @@ function setSelectableRowsSelected(selected = true) {
 </template>
 
 <style scoped>
-.crud-screen {
-  --crud-screen-state-padding: 2.5rem 1.25rem;
-}
-
-.crud-screen--operator {
-  --crud-screen-state-padding: 2rem 1rem;
-}
-
 .crud-list-actions {
   display: flex;
   flex-wrap: wrap;
@@ -350,7 +342,7 @@ function setSelectableRowsSelected(selected = true) {
 .crud-list-state {
   margin-inline: auto;
   max-width: 30rem;
-  padding: var(--crud-screen-state-padding);
+  padding: 2rem 1rem;
   text-align: center;
 }
 
@@ -391,25 +383,6 @@ function setSelectableRowsSelected(selected = true) {
   margin-top: 0.85rem;
 }
 
-.crud-list-card__field {
-  display: grid;
-  gap: 0.15rem;
-}
-
-.crud-list-card__field-label {
-  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
-  font-size: 0.72rem;
-  letter-spacing: 0.04em;
-  line-height: 1.2;
-  text-transform: uppercase;
-}
-
-.crud-list-card__field-value {
-  font-size: 0.95rem;
-  line-height: 1.35;
-  overflow-wrap: anywhere;
-}
-
 .crud-list-table {
   display: none;
   overflow-x: auto;