@jskit-ai/http-web 0.1.92 → 0.1.93

package/src/client/composables/support/routeTemplateHelpers.js

@@ -220,6 +220,62 @@ function resolveRouteTemplateLocation(routeTemplate = "", { params = {}, current
   return resolvedPathname;
 }
 
+function createRouteTemplateResolver({
+  recordIdParam,
+  routeParams = null,
+  routeParamNames = null,
+  routePath = "",
+  routeRecordId = null,
+  anchorMode = "at",
+  anchorOnTargetRecord = false,
+  fillRecordId = true
+} = {}) {
+  function resolveCurrentRecordId(currentRouteParams = resolveRouteParamsSource(routeParams)) {
+    const explicitRecordId = toRouteParamValue(resolveRouteSourceValue(routeRecordId));
+    if (explicitRecordId) {
+      return explicitRecordId;
+    }
+
+    return toRouteParamValue(currentRouteParams[recordIdParam]);
+  }
+
+  function resolveTemplatePath(urlTemplate = "", extraParams = {}) {
+    const normalizedTemplate = String(urlTemplate || "").trim();
+    if (!normalizedTemplate) {
+      return "";
+    }
+
+    const currentRouteParams = resolveRouteParamsSource(routeParams);
+    const sourceParams = {
+      ...currentRouteParams,
+      ...asPlainObject(extraParams)
+    };
+    const currentRecordId = resolveCurrentRecordId(currentRouteParams);
+    const targetRecordId = toRouteParamValue(sourceParams[recordIdParam]) || currentRecordId;
+    if (fillRecordId) {
+      sourceParams[recordIdParam] = targetRecordId;
+    }
+    const currentPathname = resolveScopedRoutePathname({
+      currentPathname: routePath,
+      params: currentRouteParams,
+      orderedParamNames: routeParamNames,
+      anchorParamName: recordIdParam,
+      anchorParamValue: anchorOnTargetRecord ? targetRecordId : currentRecordId,
+      anchorMode
+    });
+
+    return resolveRouteTemplateLocation(normalizedTemplate, {
+      params: sourceParams,
+      currentPathname
+    });
+  }
+
+  return Object.freeze({
+    resolveRecordId: () => resolveCurrentRecordId(),
+    resolveTemplatePath
+  });
+}
+
 function extractRouteParamNames(pathTemplate = "") {
   const normalizedTemplate = String(pathTemplate || "").trim();
   if (!normalizedTemplate) {
@@ -280,6 +336,7 @@ export {
   resolveScopedRoutePathname,
   resolveRouteTemplatePath,
   resolveRouteTemplateLocation,
+  createRouteTemplateResolver,
   extractRouteParamNames,
   resolveRouteParamNamesInOrder
 };

package/src/client/composables/useAccess.js

@@ -1,6 +1,6 @@
 import { computed } from "vue";
 import { hasPermission, normalizePermissionList } from "../lib/permissions.js";
-import { resolveEnabledRef, resolveTextRef } from "./support/refValueHelpers.js";
+import { resolveEnabledRef } from "./support/refValueHelpers.js";
 import {
   normalizeAccessMode,
   resolveAccessModeEnabled
@@ -19,8 +19,10 @@ function asPermissionList(value) {
   return [value];
 }
 
+// Permissions come only from the web placement context, which the shell fills
+// from its bootstrap. Until that context carries a `permissions` key, access is
+// awaiting placement permissions and reports them as unavailable.
 function useAccess({
-  scopeParamValue = "",
   enabled = true,
   access = "always",
   hasPermissionRequirements = false
@@ -30,9 +32,8 @@ function useAccess({
     hasPermissionRequirements: hasPermissionRequirements === true
   });
   const { context: placementContext } = useWebPlacementContext();
-  const normalizedScopeParamValue = computed(() => resolveTextRef(scopeParamValue));
   const queryEnabled = computed(() => resolveEnabledRef(enabled) && accessRequired);
-  const hasPlacementBootstrapPermissions = computed(() => {
+  const hasPlacementPermissions = computed(() => {
     const source = placementContext.value;
     if (!source || typeof source !== "object") {
       return false;
@@ -41,18 +42,18 @@ function useAccess({
   });
   const placementPermissions = computed(() => normalizePermissionList(placementContext.value?.permissions));
   const permissions = computed(() => {
-    if (!queryEnabled.value || !hasPlacementBootstrapPermissions.value) {
+    if (!queryEnabled.value || !hasPlacementPermissions.value) {
       return [];
     }
     return placementPermissions.value;
   });
-  const bootstrapError = computed(() => {
-    if (!queryEnabled.value || hasPlacementBootstrapPermissions.value) {
+  const permissionsUnavailableError = computed(() => {
+    if (!queryEnabled.value || hasPlacementPermissions.value) {
       return "";
     }
     return "Permissions are unavailable in placement context.";
   });
-  const isBootstrapping = computed(() => queryEnabled.value && !hasPlacementBootstrapPermissions.value);
+  const awaitingPlacementPermissions = computed(() => queryEnabled.value && !hasPlacementPermissions.value);
 
   function can(permission) {
     return hasPermission(permissions.value, permission);
@@ -88,21 +89,15 @@ function useAccess({
     return true;
   }
 
-  async function refreshBootstrap() {
-    return null;
-  }
-
   return Object.freeze({
     accessMode: normalizedAccessMode,
     accessRequired,
-    scopeParamValue: normalizedScopeParamValue,
     permissions,
-    bootstrapError,
-    isBootstrapping,
+    permissionsUnavailableError,
+    awaitingPlacementPermissions,
     can,
     canAny,
-    canAll,
-    refreshBootstrap
+    canAll
   });
 }
 

package/src/client/composables/useCommand.js

@@ -40,7 +40,6 @@ function useCommand({
     ownershipFilter,
     surfaceId,
     access,
-    placementSource,
     apiSuffix,
     model,
     readEnabled: false,

package/src/client/composables/useCrudDeleteAction.js

@@ -1,4 +1,4 @@
-import { computed, proxyRefs, ref, unref } from "vue";
+import { computed, nextTick, proxyRefs, ref, unref } from "vue";
 import { useRouter } from "vue-router";
 import { normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
 import { resolveCrudJsonApiTransport } from "./crud/crudJsonApiTransportSupport.js";
@@ -62,17 +62,19 @@ function useCrudDeleteAction({
   const deleteApiSuffix = computed(() => resolveDeleteApiSuffix(resolvedScreen, apiUrlTemplate));
 
   async function handleDeleteSuccess(_response, context = {}) {
-    await context?.queryClient?.invalidateQueries?.({
-      queryKey: ["crud", namespace]
-    });
-
     const listLocation = resolveListLocation(resolvedScreen);
     if (!listLocation) {
       throw new Error("Deleted the record, but the generated list route is unavailable.");
     }
 
     isOpen.value = false;
+    // Leave the deleted record's view before invalidating: while its view query is
+    // still observed, invalidation would refetch it and report "Record not found.".
     await activeRouter.push(listLocation);
+    await nextTick();
+    await context?.queryClient?.invalidateQueries?.({
+      queryKey: ["crud", namespace]
+    });
   }
 
   function handleDeleteError(cause) {

package/src/client/composables/useCrudListBulkActions.js

@@ -1,18 +1,10 @@
 import { computed, ref } from "vue";
-import { normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
 import { defineCrudListBulkActions } from "../bulkActions.js";
-
-function normalizeSelectedId(value = "") {
-  return normalizeText(value);
-}
-
-function resolveActionKey(actionOrKey = "") {
-  return normalizeText(
-    actionOrKey && typeof actionOrKey === "object"
-      ? actionOrKey.key
-      : actionOrKey
-  );
-}
+import {
+  normalizeListActionKey,
+  resolveListActionBaseContext,
+  resolveListRecordId
+} from "../support/crudListActionSupport.js";
 
 function useCrudListBulkActions(actions = [], {
   resolveRecordId = null,
@@ -28,10 +20,7 @@ function useCrudListBulkActions(actions = [], {
   const hasActions = computed(() => normalizedActions.length > 0);
 
   function getRecordId(record = {}, index = 0) {
-    const resolvedId = typeof resolveRecordId === "function"
-      ? resolveRecordId(record, index)
-      : record?.id ?? record?.attributes?.id ?? index;
-    return normalizeSelectedId(resolvedId);
+    return resolveListRecordId(record, index, resolveRecordId);
   }
 
   function setRecordSelected(record = {}, index = 0, selected = true) {
@@ -78,12 +67,12 @@ function useCrudListBulkActions(actions = [], {
   }
 
   function findAction(actionOrKey = "") {
-    const actionKey = resolveActionKey(actionOrKey);
+    const actionKey = normalizeListActionKey(actionOrKey);
     return normalizedActions.find((action) => action.key === actionKey) || null;
   }
 
   function isActionExecuting(actionOrKey = "") {
-    const actionKey = resolveActionKey(actionOrKey);
+    const actionKey = normalizeListActionKey(actionOrKey);
     return Boolean(actionKey && executingActionKey.value === actionKey);
   }
 
@@ -110,9 +99,8 @@ function useCrudListBulkActions(actions = [], {
 
     executingActionKey.value = action.key;
     try {
-      const baseContext = typeof resolveContext === "function" ? resolveContext() : {};
       return await action.run({
-        ...(baseContext && typeof baseContext === "object" && !Array.isArray(baseContext) ? baseContext : {}),
+        ...resolveListActionBaseContext(resolveContext),
         action,
         ids: selectedIds.value.slice(),
         selectedIds: selectedIds.value.slice(),

package/src/client/composables/useCrudListFilterLookups.js

@@ -21,7 +21,6 @@ function useCrudListFilterLookups(
   definitions = {},
   {
     values = {},
-    adapter = null,
     recordIdParam = "recordId",
     queryKeyPrefix = [],
     placementSourcePrefix = "",
@@ -52,7 +51,6 @@ function useCrudListFilterLookups(
     });
 
     const runtime = useList({
-      adapter: adapter || undefined,
       apiSuffix: filter.lookup.apiSuffix,
       ...(transport ? { transport } : {}),
       queryKeyFactory: (surfaceId = "", scopeParamValue = "") => [
@@ -106,7 +104,7 @@ function useCrudListFilterLookups(
       options,
       searchQuery: computed(() => String(runtime.searchQuery || "")),
       isLoading: computed(() => {
-        return Boolean(runtime.isInitialLoading || runtime.isFetching || runtime.isRefetching || runtime.isSearchDebouncing);
+        return Boolean(runtime.isInitialLoading || runtime.isFetching || runtime.isSearchDebouncing);
       }),
       resolveLabel(value, fallback = filter.label || "Option") {
         return resolveLookupOptionLabel(options.value, cachedOptions.value, value, fallback);

package/src/client/composables/useCrudListParentTitle.js

@@ -27,7 +27,6 @@ function normalizeQueryKeyPrefix(value = []) {
 function useCrudListParentTitle({
   listRuntime = null,
   resource = {},
-  adapter = null,
   recordIdParam = "recordId",
   queryKeyPrefix = ["http-web", "crud-list-parent-title"],
   placementSource = "http-web.crud-list-parent-title",
@@ -93,7 +92,6 @@ function useCrudListParentTitle({
   });
 
   const parentView = viewRuntimeFactory({
-    adapter,
     apiUrlTemplate: normalizeText(initialParentDescriptor.apiUrlTemplate),
     transport: parentTransport,
     readEnabled: shouldLoadParentRecord,

package/src/client/composables/useCrudListRowActions.js

@@ -1,18 +1,10 @@
 import { computed, ref } from "vue";
-import { normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
 import { defineCrudListRowActions } from "../rowActions.js";
-
-function normalizeRowActionKey(actionOrKey = "") {
-  return normalizeText(
-    actionOrKey && typeof actionOrKey === "object"
-      ? actionOrKey.key
-      : actionOrKey
-  );
-}
-
-function normalizeRowId(value = "") {
-  return normalizeText(value);
-}
+import {
+  normalizeListActionKey,
+  resolveListActionBaseContext,
+  resolveListRecordId
+} from "../support/crudListActionSupport.js";
 
 function createExecutionKey(actionKey = "", recordId = "", index = 0) {
   return [
@@ -21,10 +13,6 @@ function createExecutionKey(actionKey = "", recordId = "", index = 0) {
   ].join(":");
 }
 
-function asContextObject(value = null) {
-  return value && typeof value === "object" && !Array.isArray(value) ? value : {};
-}
-
 function useCrudListRowActions(actions = [], {
   resolveRecordId = null,
   resolveContext = null
@@ -34,16 +22,12 @@ function useCrudListRowActions(actions = [], {
   const hasActions = computed(() => normalizedActions.length > 0);
 
   function getRecordId(record = {}, index = 0) {
-    const resolvedId = typeof resolveRecordId === "function"
-      ? resolveRecordId(record, index)
-      : record?.id ?? record?.attributes?.id ?? index;
-    return normalizeRowId(resolvedId);
+    return resolveListRecordId(record, index, resolveRecordId);
   }
 
   function createActionContext(action = {}, record = {}, index = 0) {
-    const baseContext = typeof resolveContext === "function" ? resolveContext() : {};
     return {
-      ...asContextObject(baseContext),
+      ...resolveListActionBaseContext(resolveContext),
       action,
       record,
       index,
@@ -52,7 +36,7 @@ function useCrudListRowActions(actions = [], {
   }
 
   function findAction(actionOrKey = "") {
-    const actionKey = normalizeRowActionKey(actionOrKey);
+    const actionKey = normalizeListActionKey(actionOrKey);
     return normalizedActions.find((action) => action.key === actionKey) || null;
   }
 

package/src/client/composables/useCrudListScreen.js

@@ -4,6 +4,7 @@ import { useCrudListBulkActions } from "./useCrudListBulkActions.js";
 import { useCrudListFilters } from "./useCrudListFilters.js";
 import { useCrudListRowActions } from "./useCrudListRowActions.js";
 import { resolveCrudHttpClient } from "./crud/crudHttpClientSupport.js";
+import { resolveRecordTitle as resolveCrudRecordTitle } from "./crud/crudLookupFieldLabelSupport.js";
 
 function buildCrudListActionContext(records, client) {
   return Object.freeze({
@@ -110,7 +111,6 @@ function createCrudListDisplayRow(record = {}, index = 0, records = {}) {
 }
 
 function useCrudListScreen({
-  adapter = null,
   client = null,
   resource = null,
   resourceNamespace = "resource",
@@ -140,7 +140,6 @@ function useCrudListScreen({
     : [];
   const normalizedResourceNamespace = String(resourceNamespace || "resource").trim() || "resource";
   const records = useCrudList({
-    adapter: adapter || undefined,
     client: crudHttpClient,
     resource,
     apiSuffix,
@@ -207,7 +206,7 @@ function useCrudListScreen({
   );
 
   function resolveRecordTitle(record) {
-    return records.resolveRecordTitle(record, {
+    return resolveCrudRecordTitle(record, {
       fallbackKey: titleFallbackFieldKey,
       defaultValue: "Record"
     });
@@ -223,8 +222,8 @@ function useCrudListScreen({
     displayRows,
     selectableRows,
     listPrimaryAction,
-    hasViewUrl: Boolean(viewUrlTemplate),
-    hasEditUrl: Boolean(editUrlTemplate),
+    hasViewUrl: records.hasViewUrl,
+    hasEditUrl: records.hasEditUrl,
     resolveRecordTitle,
     formatListCardValue: formatCrudListCardValue
   });

package/src/client/composables/useCrudViewScreen.js

@@ -1,9 +1,9 @@
 import { computed, unref } from "vue";
 import { useRoute } from "vue-router";
 import { useCrudView } from "./records/useCrudView.js";
+import { resolveRecordTitle } from "./crud/crudLookupFieldLabelSupport.js";
 
 function useCrudViewScreen({
-  adapter = null,
   resource = null,
   resourceNamespace = "resource",
   apiUrlTemplate = "",
@@ -30,7 +30,6 @@ function useCrudViewScreen({
     String(workspaceSlug || "")
   ];
   const view = useCrudView({
-    adapter: adapter || undefined,
     resource,
     apiUrlTemplate,
     recordIdParam,
@@ -52,7 +51,7 @@ function useCrudViewScreen({
       : null
   });
   const recordTitle = computed(() =>
-    view.resolveRecordTitle(view.record, {
+    resolveRecordTitle(view.record, {
       fallbackKey: titleFallbackFieldKey,
       defaultValue: "Record"
     })

package/src/client/composables/useRealtimeQueryInvalidation.js

@@ -2,6 +2,7 @@ import { computed, unref } from "vue";
 import { useQueryClient } from "@tanstack/vue-query";
 import { normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
 import { useRealtimeEvent } from "@jskit-ai/realtime/client/composables/useRealtimeEvent";
+import { resolveEnabledRef } from "./support/refValueHelpers.js";
 
 function normalizeRealtimeOptions(value = {}) {
   if (value === null || value === undefined || value === false) {
@@ -39,14 +40,6 @@ function resolveOperationRealtimeOptions({
   });
 }
 
-function resolveEnabled(value) {
-  if (typeof value === "undefined") {
-    return true;
-  }
-
-  return Boolean(unref(value));
-}
-
 function toQueryKeyList(value) {
   const resolved = typeof value === "function" ? value() : unref(value);
   if (!Array.isArray(resolved) || resolved.length < 1) {
@@ -71,7 +64,7 @@ function useRealtimeQueryInvalidation({
 } = {}) {
   const queryClient = useQueryClient();
   const normalizedEvent = computed(() => normalizeText(unref(event)));
-  const active = computed(() => resolveEnabled(enabled) && Boolean(normalizedEvent.value));
+  const active = computed(() => resolveEnabledRef(enabled) && Boolean(normalizedEvent.value));
 
   const listener = useRealtimeEvent({
     event: normalizedEvent,
@@ -131,7 +124,7 @@ function useOperationRealtime({
   const resolvedQueryKey = Object.hasOwn(source, "queryKey") ? source.queryKey : queryKey;
   const active = computed(() => {
     const sourceEnabled = Object.hasOwn(source, "enabled") ? source.enabled : true;
-    return resolveEnabled(enabled) && resolveEnabled(sourceEnabled);
+    return resolveEnabledRef(enabled) && resolveEnabledRef(sourceEnabled);
   });
 
   const bindings = eventList.map((event) =>

package/src/client/composables/useScopeRuntime.js

@@ -25,8 +25,7 @@ function useScopeRuntime({
   ownershipFilter = ROUTE_VISIBILITY_WORKSPACE,
   surfaceId = "",
   accessMode = "auto",
-  hasPermissionRequirements = false,
-  placementSource = "http-web.scope-runtime"
+  hasPermissionRequirements = false
 } = {}) {
   const normalizedOwnershipFilter = normalizeOwnershipFilter(ownershipFilter);
   const normalizedAccessMode = ensureAccessModeCompatibility({
@@ -83,11 +82,9 @@ function useScopeRuntime({
   });
 
   const accessRuntime = useAccess({
-    scopeParamValue,
     enabled: computed(() => accessRequired && hasRequiredRouteScope.value),
     access: normalizedAccessMode,
-    hasPermissionRequirements,
-    placementSource: String(placementSource || "http-web.scope-runtime")
+    hasPermissionRequirements
   });
 
   function resolveApiPath(apiSuffix = "", context = {}) {

package/src/client/rowActions.js

@@ -1,47 +1,20 @@
 import { normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
-
-function normalizeCrudListRowAction(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" }),
-    run: typeof rawAction.run === "function" ? rawAction.run : null,
-    visible: rawAction.visible,
-    disabled: rawAction.disabled,
-    loading: rawAction.loading
-  });
-}
+import { defineCrudListActions } from "./support/crudListActionSupport.js";
 
 function defineCrudListRowActions(actions = []) {
-  if (!Array.isArray(actions)) {
-    throw new TypeError("defineCrudListRowActions requires an array.");
-  }
-
-  const normalizedActions = [];
-  const seenKeys = new Set();
-
-  actions.forEach((rawAction, index) => {
-    const action = normalizeCrudListRowAction(rawAction, index);
-    if (!action || seenKeys.has(action.key)) {
-      return;
-    }
-
-    seenKeys.add(action.key);
-    normalizedActions.push(action);
+  return defineCrudListActions(actions, {
+    name: "defineCrudListRowActions",
+    createAction: (rawAction, { key, label }) => ({
+      key,
+      label,
+      icon: normalizeText(rawAction.icon),
+      color: normalizeText(rawAction.color, { fallback: "primary" }),
+      run: typeof rawAction.run === "function" ? rawAction.run : null,
+      visible: rawAction.visible,
+      disabled: rawAction.disabled,
+      loading: rawAction.loading
+    })
   });
-
-  return Object.freeze(normalizedActions);
 }
 
 export { defineCrudListRowActions };

package/src/client/support/crudListActionSupport.js

@@ -0,0 +1,54 @@
+import { normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
+
+function defineCrudListActions(actions, { name, createAction }) {
+  if (!Array.isArray(actions)) {
+    throw new TypeError(`${name} requires an array.`);
+  }
+
+  const normalizedActions = [];
+  const seenKeys = new Set();
+
+  actions.forEach((rawAction, index) => {
+    if (!rawAction || typeof rawAction !== "object" || Array.isArray(rawAction)) {
+      return;
+    }
+
+    const key = normalizeText(rawAction.key || rawAction.id || `action-${index + 1}`);
+    const label = normalizeText(rawAction.label || rawAction.title);
+    if (!key || !label || seenKeys.has(key)) {
+      return;
+    }
+
+    seenKeys.add(key);
+    normalizedActions.push(Object.freeze(createAction(rawAction, { key, label })));
+  });
+
+  return Object.freeze(normalizedActions);
+}
+
+function normalizeListActionKey(actionOrKey = "") {
+  return normalizeText(
+    actionOrKey && typeof actionOrKey === "object"
+      ? actionOrKey.key
+      : actionOrKey
+  );
+}
+
+function resolveListRecordId(record = {}, index = 0, resolveRecordId = null) {
+  const resolvedId = typeof resolveRecordId === "function"
+    ? resolveRecordId(record, index)
+    : record?.id ?? record?.attributes?.id ?? index;
+  return normalizeText(resolvedId);
+}
+
+function resolveListActionBaseContext(resolveContext = null) {
+  const baseContext = typeof resolveContext === "function" ? resolveContext() : {};
+  return baseContext && typeof baseContext === "object" && !Array.isArray(baseContext) ? baseContext : {};
+}
+
+export {
+  defineCrudListActions,
+  normalizeListActionKey,
+  resolveListRecordId,
+  resolveListActionBaseContext
+};