@jskit-ai/http-web 0.1.3 → 0.1.5

package/src/client/components/CrudListRecordActionMenu.vue

@@ -100,19 +100,13 @@ function runRowAction(action = {}) {
       <v-list-item
         v-for="action in visibleRowActions"
         :key="action.key"
-        :title="action.label"
+        :title="isRowActionLoading(action) ? `${action.label}…` : action.label"
         :base-color="action.color"
         :disabled="isRowActionDisabled(action)"
         @click="runRowAction(action)"
       >
-        <template v-if="isRowActionLoading(action) || action.icon" #prepend>
-          <v-progress-circular
-            v-if="isRowActionLoading(action)"
-            indeterminate
-            size="18"
-            width="2"
-          />
-          <v-icon v-else :icon="action.icon" />
+        <template v-if="action.icon" #prepend>
+          <v-icon :icon="action.icon" />
         </template>
       </v-list-item>
     </v-list>

package/src/client/components/CrudListScreen.vue

@@ -126,18 +126,25 @@ function setSelectableRowsSelected(selected = true) {
 </script>
 
 <template>
-  <section class="generated-ui-screen generated-ui-screen--operator ui-generator-list-element d-flex flex-column ga-4">
-    <header class="ui-generator-list-header">
-      <div class="ui-generator-list-header__copy">
+  <section class="crud-screen crud-screen--operator crud-list-element d-flex flex-column ga-4">
+    <header class="crud-list-header">
+      <div class="crud-list-header__copy">
         <p class="text-overline text-medium-emphasis mb-1">{{ titleLabel }}</p>
-        <h1 class="ui-generator-list-header__title">{{ resolvedHeadingTitle }}</h1>
+        <h1 class="crud-list-header__title">{{ resolvedHeadingTitle }}</h1>
         <p class="text-body-2 text-medium-emphasis mb-0">{{ resolvedSubtitle }}</p>
       </div>
-      <div class="ui-generator-list-header__actions">
-        <v-btn color="primary" variant="tonal" :loading="records.isFetching" @click="records.reload">Refresh</v-btn>
+      <div class="crud-list-header__actions">
+        <v-btn
+          color="primary"
+          variant="tonal"
+          :disabled="records.isFetching"
+          @click="records.reload"
+        >
+          {{ records.isFetching ? "Refreshing…" : "Refresh" }}
+        </v-btn>
         <v-btn
           v-if="listPrimaryAction"
-          class="ui-generator-list-header__primary-action"
+          class="crud-list-header__primary-action"
           color="primary"
           variant="flat"
           :to="listPrimaryAction"
@@ -147,8 +154,8 @@ function setSelectableRowsSelected(selected = true) {
       </div>
     </header>
 
-    <v-sheet rounded="lg" border class="ui-generator-list-panel">
-      <div class="ui-generator-list-toolbar">
+    <v-sheet rounded="lg" border class="crud-list-panel">
+      <div class="crud-list-toolbar">
         <v-text-field
           v-if="records.searchEnabled"
           v-model="records.searchQuery"
@@ -158,8 +165,8 @@ function setSelectableRowsSelected(selected = true) {
           density="comfortable"
           hide-details="auto"
           clearable
-          class="ui-generator-list-search"
-          :loading="records.isSearchDebouncing"
+          class="crud-list-search"
+          :aria-busy="records.isSearchDebouncing ? 'true' : undefined"
         />
         <CrudListFilterSurface
           :filters="listFilters"
@@ -174,15 +181,20 @@ function setSelectableRowsSelected(selected = true) {
         </div>
       </template>
       <template v-else>
-        <v-progress-linear v-if="records.isRefetching" indeterminate />
-
-        <div v-if="records.loadError" class="ui-generator-list-state">
+        <div v-if="records.loadError" class="crud-list-state">
           <h2 class="text-h6 mb-2">{{ loadErrorTitle }}</h2>
           <p class="text-body-2 text-medium-emphasis mb-4">{{ loadErrorBody }}</p>
-          <v-btn color="primary" variant="tonal" :loading="records.isFetching" @click="records.reload">Retry</v-btn>
+          <v-btn
+            color="primary"
+            variant="tonal"
+            :disabled="records.isFetching"
+            @click="records.reload"
+          >
+            {{ records.isFetching ? "Retrying…" : "Retry" }}
+          </v-btn>
         </div>
 
-        <div v-else-if="displayRows.length < 1" class="ui-generator-list-state">
+        <div v-else-if="displayRows.length < 1" class="crud-list-state">
           <h2 class="text-h6 mb-2">{{ emptyTitle }}</h2>
           <p class="text-body-2 text-medium-emphasis mb-4">{{ emptyBody }}</p>
           <v-btn v-if="listPrimaryAction" color="primary" variant="flat" :to="listPrimaryAction">
@@ -191,24 +203,24 @@ function setSelectableRowsSelected(selected = true) {
         </div>
 
         <template v-else>
-          <div class="ui-generator-list-cards">
+          <div class="crud-list-cards">
             <v-sheet
               v-for="row in displayRows"
               :key="row.key"
               rounded="lg"
               border
-              class="ui-generator-list-card"
+              class="crud-list-card"
             >
-              <div class="ui-generator-list-card__header">
+              <div class="crud-list-card__header">
                 <v-checkbox-btn
                   v-if="hasBulkActions && row.selectable !== false"
                   :model-value="isBulkRowSelected(row)"
                   :aria-label="`Select ${resolveListRecordTitle(row.record)}`"
-                  class="ui-generator-list-card__select"
+                  class="crud-list-card__select"
                   @update:model-value="setBulkRowSelected(row, $event)"
                 />
                 <div class="min-w-0">
-                  <div class="ui-generator-list-card__title">{{ resolveListRecordTitle(row.record) }}</div>
+                  <div class="crud-list-card__title">{{ resolveListRecordTitle(row.record) }}</div>
                   <div class="text-caption text-medium-emphasis">
                     {{ row.recordKey }}
                   </div>
@@ -224,7 +236,7 @@ function setSelectableRowsSelected(selected = true) {
                   :edit-location="resolveEditLocation(row.record)"
                 />
               </div>
-              <div class="ui-generator-list-card__fields">
+              <div class="crud-list-card__fields">
                 <slot
                   name="card-fields"
                   :record="row.record"
@@ -237,11 +249,11 @@ function setSelectableRowsSelected(selected = true) {
             </v-sheet>
           </div>
 
-          <div class="ui-generator-list-table">
+          <div class="crud-list-table">
             <v-table density="comfortable">
               <thead>
                 <tr>
-                  <th v-if="hasBulkActions" class="ui-generator-list-table__select">
+                  <th v-if="hasBulkActions" class="crud-list-table__select">
                     <v-checkbox-btn
                       :model-value="allSelectableRowsSelected()"
                       :indeterminate="
@@ -260,7 +272,7 @@ function setSelectableRowsSelected(selected = true) {
               </thead>
               <tbody>
                 <tr v-for="row in displayRows" :key="row.key">
-                  <td v-if="hasBulkActions" class="ui-generator-list-table__select">
+                  <td v-if="hasBulkActions" class="crud-list-table__select">
                     <v-checkbox-btn
                       v-if="row.selectable !== false"
                       :model-value="isBulkRowSelected(row)"
@@ -316,8 +328,13 @@ function setSelectableRowsSelected(selected = true) {
         </template>
 
         <div v-if="records.hasMore" class="d-flex justify-center pa-4">
-          <v-btn color="primary" variant="outlined" :loading="records.isLoadingMore" @click="records.loadMore">
-            Load more
+          <v-btn
+            color="primary"
+            variant="outlined"
+            :disabled="records.isLoadingMore"
+            @click="records.loadMore"
+          >
+            {{ records.isLoadingMore ? "Loading more…" : "Load more" }}
           </v-btn>
         </div>
       </template>
@@ -325,7 +342,7 @@ function setSelectableRowsSelected(selected = true) {
 
     <v-btn
       v-if="listPrimaryAction"
-      class="ui-generator-list-fab"
+      class="crud-list-fab"
       color="primary"
       variant="flat"
       :to="listPrimaryAction"
@@ -336,103 +353,103 @@ function setSelectableRowsSelected(selected = true) {
 </template>
 
 <style scoped>
-.generated-ui-screen {
-  --generated-ui-screen-title-size: clamp(1.35rem, 2vw, 1.85rem);
-  --generated-ui-screen-state-padding: 2.5rem 1.25rem;
+.crud-screen {
+  --crud-screen-title-size: clamp(1.35rem, 2vw, 1.85rem);
+  --crud-screen-state-padding: 2.5rem 1.25rem;
 }
 
-.generated-ui-screen--operator {
-  --generated-ui-screen-state-padding: 2rem 1rem;
+.crud-screen--operator {
+  --crud-screen-state-padding: 2rem 1rem;
 }
 
-.ui-generator-list-header {
+.crud-list-header {
   align-items: flex-start;
   display: flex;
   gap: 1rem;
   justify-content: space-between;
 }
 
-.ui-generator-list-header__copy {
+.crud-list-header__copy {
   min-width: 0;
 }
 
-.ui-generator-list-header__title {
-  font-size: var(--generated-ui-screen-title-size);
+.crud-list-header__title {
+  font-size: var(--crud-screen-title-size);
   font-weight: 650;
   letter-spacing: -0.02em;
   line-height: 1.15;
   margin: 0 0 0.35rem;
 }
 
-.ui-generator-list-header__actions {
+.crud-list-header__actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   justify-content: flex-end;
 }
 
-.ui-generator-list-panel {
+.crud-list-panel {
   overflow: hidden;
 }
 
-.ui-generator-list-toolbar {
+.crud-list-toolbar {
   padding: 1rem;
 }
 
-.ui-generator-list-search {
+.crud-list-search {
   max-width: 26rem;
 }
 
-.ui-generator-list-state {
+.crud-list-state {
   margin-inline: auto;
   max-width: 30rem;
-  padding: var(--generated-ui-screen-state-padding);
+  padding: var(--crud-screen-state-padding);
   text-align: center;
 }
 
-.ui-generator-list-cards {
+.crud-list-cards {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   padding: 0 1rem 1rem;
 }
 
-.ui-generator-list-card {
+.crud-list-card {
   padding: 0.875rem;
 }
 
-.ui-generator-list-card__header {
+.crud-list-card__header {
   align-items: flex-start;
   display: flex;
   gap: 0.75rem;
   justify-content: space-between;
 }
 
-.ui-generator-list-card__select {
+.crud-list-card__select {
   flex: 0 0 auto;
   margin-inline-start: -0.35rem;
   margin-top: -0.35rem;
 }
 
-.ui-generator-list-card__title {
+.crud-list-card__title {
   font-size: 1rem;
   font-weight: 650;
   line-height: 1.25;
   overflow-wrap: anywhere;
 }
 
-.ui-generator-list-card__fields {
+.crud-list-card__fields {
   display: grid;
   gap: 0.65rem;
   margin-top: 0.85rem;
 }
 
-.ui-generator-list-card__field {
+.crud-list-card__field {
   display: grid;
   gap: 0.15rem;
 }
 
-.ui-generator-list-card__field-label {
+.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;
@@ -440,22 +457,22 @@ function setSelectableRowsSelected(selected = true) {
   text-transform: uppercase;
 }
 
-.ui-generator-list-card__field-value {
+.crud-list-card__field-value {
   font-size: 0.95rem;
   line-height: 1.35;
   overflow-wrap: anywhere;
 }
 
-.ui-generator-list-table {
+.crud-list-table {
   display: none;
   overflow-x: auto;
 }
 
-.ui-generator-list-table__select {
+.crud-list-table__select {
   width: 3rem;
 }
 
-.ui-generator-list-fab {
+.crud-list-fab {
   bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
   display: flex;
   position: fixed;
@@ -464,37 +481,37 @@ function setSelectableRowsSelected(selected = true) {
 }
 
 @media (min-width: 960px) {
-  .ui-generator-list-cards {
+  .crud-list-cards {
     display: none;
   }
 
-  .ui-generator-list-table {
+  .crud-list-table {
     display: block;
   }
 
-  .ui-generator-list-fab {
+  .crud-list-fab {
     display: none;
   }
 }
 
 @media (max-width: 960px) {
-  .ui-generator-list-header {
+  .crud-list-header {
     flex-direction: column;
   }
 
-  .ui-generator-list-header__actions {
+  .crud-list-header__actions {
     width: 100%;
   }
 
-  .ui-generator-list-element :deep(.v-btn) {
+  .crud-list-element :deep(.v-btn) {
     min-height: 48px;
   }
 
-  .ui-generator-list-header__primary-action {
+  .crud-list-header__primary-action {
     display: none;
   }
 
-  .ui-generator-list-search {
+  .crud-list-search {
     max-width: none;
   }
 }

package/src/client/components/CrudViewScreen.vue

@@ -34,14 +34,14 @@ const resolvedDescription = computed(() =>
 </script>
 
 <template>
-  <section class="generated-ui-screen generated-ui-screen--operator ui-generator-view-element d-flex flex-column ga-4">
-    <header class="ui-generator-view-header">
-      <div class="ui-generator-view-header__copy">
+  <section class="crud-screen crud-screen--operator crud-view-element d-flex flex-column ga-4">
+    <header class="crud-view-header">
+      <div class="crud-view-header__copy">
         <p class="text-overline text-medium-emphasis mb-1">{{ resourceSingularTitle }}</p>
-        <h1 class="ui-generator-view-header__title">{{ recordTitle }}</h1>
+        <h1 class="crud-view-header__title">{{ recordTitle }}</h1>
         <p class="text-body-2 text-medium-emphasis mb-0">{{ resolvedDescription }}</p>
       </div>
-      <div class="ui-generator-view-header__actions">
+      <div class="crud-view-header__actions">
         <v-btn
           v-if="listLocation"
           color="primary"
@@ -62,21 +62,21 @@ const resolvedDescription = computed(() =>
       </div>
     </header>
 
-    <v-sheet rounded="lg" border class="ui-generator-view-panel">
-      <div v-if="view.loadError || view.isNotFound" class="ui-generator-view-state">
+    <v-sheet rounded="lg" border class="crud-view-panel">
+      <div v-if="view.loadError || view.isNotFound" class="crud-view-state">
         <h2 class="text-h6 mb-2">{{ unavailableTitle }}</h2>
         <p class="text-body-2 text-medium-emphasis mb-4">
           {{ view.loadError || `This ${resourceSingularTitle} could not be found.` }}
         </p>
-        <div class="ui-generator-view-state__actions">
+        <div class="crud-view-state__actions">
           <v-btn
             v-if="view.loadError"
             color="primary"
             variant="tonal"
-            :loading="view.isFetching"
+            :disabled="view.isFetching"
             @click="view.refresh"
           >
-            Retry
+            {{ view.isFetching ? "Retrying…" : "Retry" }}
           </v-btn>
           <v-btn
             v-else-if="listLocation"
@@ -96,10 +96,9 @@ const resolvedDescription = computed(() =>
       </template>
 
       <template v-else>
-        <v-progress-linear v-if="view.isRefetching" indeterminate />
         <div class="pa-4">
           <slot name="before-fields" :view="view" />
-          <v-row class="ui-generator-view-fields">
+          <v-row class="crud-view-fields">
             <slot name="fields" :view="view" />
           </v-row>
           <slot name="after-fields" :view="view" />
@@ -107,35 +106,35 @@ const resolvedDescription = computed(() =>
       </template>
     </v-sheet>
 
-    <div v-if="$slots['supporting-content']" class="ui-generator-view-supporting-content">
+    <div v-if="$slots['supporting-content']" class="crud-view-supporting-content">
       <slot name="supporting-content" :view="view" />
     </div>
   </section>
 </template>
 
 <style scoped>
-.generated-ui-screen {
-  --generated-ui-screen-title-size: clamp(1.35rem, 2vw, 1.85rem);
-  --generated-ui-screen-state-padding: 2.5rem 1.25rem;
+.crud-screen {
+  --crud-screen-title-size: clamp(1.35rem, 2vw, 1.85rem);
+  --crud-screen-state-padding: 2.5rem 1.25rem;
 }
 
-.generated-ui-screen--operator {
-  --generated-ui-screen-state-padding: 2rem 1rem;
+.crud-screen--operator {
+  --crud-screen-state-padding: 2rem 1rem;
 }
 
-.ui-generator-view-header {
+.crud-view-header {
   align-items: flex-start;
   display: flex;
   gap: 1rem;
   justify-content: space-between;
 }
 
-.ui-generator-view-header__copy {
+.crud-view-header__copy {
   min-width: 0;
 }
 
-.ui-generator-view-header__title {
-  font-size: var(--generated-ui-screen-title-size);
+.crud-view-header__title {
+  font-size: var(--crud-screen-title-size);
   font-weight: 650;
   letter-spacing: -0.02em;
   line-height: 1.15;
@@ -143,54 +142,54 @@ const resolvedDescription = computed(() =>
   overflow-wrap: anywhere;
 }
 
-.ui-generator-view-header__actions {
+.crud-view-header__actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   justify-content: flex-end;
 }
 
-.ui-generator-view-panel {
+.crud-view-panel {
   overflow: hidden;
 }
 
-.ui-generator-view-state {
+.crud-view-state {
   margin-inline: auto;
   max-width: 30rem;
-  padding: var(--generated-ui-screen-state-padding);
+  padding: var(--crud-screen-state-padding);
   text-align: center;
 }
 
-.ui-generator-view-state__actions {
+.crud-view-state__actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   justify-content: center;
 }
 
-.ui-generator-view-fields :deep(.v-col) {
+.crud-view-fields :deep(.v-col) {
   min-width: 0;
 }
 
-.ui-generator-view-supporting-content {
+.crud-view-supporting-content {
   min-width: 0;
 }
 
 @media (max-width: 960px) {
-  .ui-generator-view-header {
+  .crud-view-header {
     flex-direction: column;
   }
 
-  .ui-generator-view-header__actions {
+  .crud-view-header__actions {
     width: 100%;
   }
 
-  .ui-generator-view-header__actions :deep(.v-btn) {
+  .crud-view-header__actions :deep(.v-btn) {
     min-height: 48px;
     flex: 1 1 10rem;
   }
 
-  .ui-generator-view-state__actions :deep(.v-btn) {
+  .crud-view-state__actions :deep(.v-btn) {
     min-height: 48px;
   }
 }

package/src/client/composables/crud/crudSchemaFormHelpers.js

@@ -296,7 +296,7 @@ function buildCrudFormPayload(fields = [], model = {}) {
     }
 
     if (rawValue == null) {
-      if (clearAsNull) {
+      if (isNullableFormField(field)) {
         payload[fieldKey] = null;
       }
       continue;

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

@@ -48,11 +48,13 @@ function toQueryErrorMessage(error, fallbackMessage = "", defaultMessage = "Requ
 
 function toUiErrorMessage(error, fallbackMessage = "", defaultMessage = "Request failed.") {
   const normalizedFallback = String(fallbackMessage || "").trim();
+  const normalizedMessage = String(error?.message || "").trim();
+  if (normalizedMessage && !isGenericTransportMessage(error)) {
+    return normalizedMessage;
+  }
   if (normalizedFallback) {
     return normalizedFallback;
   }
-
-  const normalizedMessage = String(error?.message || "").trim();
   if (normalizedMessage) {
     return normalizedMessage;
   }

package/src/client/composables/useCrudDeleteAction.js

@@ -62,7 +62,7 @@ function useCrudDeleteAction({
 
   async function handleDeleteSuccess(_response, context = {}) {
     await context?.queryClient?.invalidateQueries?.({
-      queryKey: ["ui-generator", namespace]
+      queryKey: ["crud", namespace]
     });
 
     const listLocation = resolveListLocation(resolvedScreen);
@@ -90,7 +90,7 @@ function useCrudDeleteAction({
     transport: resolveCrudJsonApiTransport(undefined, resource, {
       mode: "delete"
     }),
-    placementSource: `ui-generator.${namespace}.view.delete`,
+    placementSource: `crud.${namespace}.view.delete`,
     fallbackRunError: fallbackDeleteError,
     onRunSuccess: handleDeleteSuccess,
     onRunError: handleDeleteError,

package/src/client/composables/useCrudListScreen.js

@@ -145,7 +145,7 @@ function useCrudListScreen({
     resource,
     apiSuffix,
     queryKeyFactory: (surfaceId = "", workspaceSlug = "") => [
-      "ui-generator",
+      "crud",
       normalizedResourceNamespace,
       "list",
       String(surfaceId || ""),
@@ -164,7 +164,7 @@ function useCrudListScreen({
       queryParams: true,
       queryParamBlacklist: routeQueryBlacklist
     },
-    placementSource: `ui-generator.${normalizedResourceNamespace}.list`,
+    placementSource: `crud.${normalizedResourceNamespace}.list`,
     requestQueryParams,
     requestFieldsets,
     readEnabled,

package/src/client/composables/useCrudViewScreen.js

@@ -23,7 +23,7 @@ function useCrudViewScreen({
   const route = useRoute();
   const normalizedResourceNamespace = String(resourceNamespace || "resource").trim() || "resource";
   const defaultQueryKeyFactory = (surfaceId = "", workspaceSlug = "") => [
-    "ui-generator",
+    "crud",
     normalizedResourceNamespace,
     "view",
     String(surfaceId || ""),
@@ -39,7 +39,7 @@ function useCrudViewScreen({
     requestQueryParams,
     requestFieldsets,
     readEnabled,
-    placementSource: `ui-generator.${normalizedResourceNamespace}.view`,
+    placementSource: `crud.${normalizedResourceNamespace}.view`,
     requestRecoveryLabel,
     fallbackLoadError,
     notFoundMessage,