@jskit-ai/users-web 0.1.127 → 0.1.128

package/package.descriptor.mjs

@@ -3,7 +3,7 @@ import { HOME_COG_OUTLET } from "./src/shared/toolsOutletContracts.js";
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/users-web",
-  version: "0.1.127",
+  version: "0.1.128",
   kind: "runtime",
   description: "Users web module: account/profile UI plus shared users web widgets.",
   dependsOn: [
@@ -286,12 +286,12 @@ export default Object.freeze({
     dependencies: {
       runtime: {
         "@mdi/js": "^7.4.47",
-        "@jskit-ai/http-runtime": "0.1.111",
-        "@jskit-ai/realtime": "0.1.111",
-        "@jskit-ai/kernel": "0.1.113",
-        "@jskit-ai/shell-web": "0.1.112",
-        "@jskit-ai/uploads-image-web": "0.1.90",
-        "@jskit-ai/users-core": "0.1.122"
+        "@jskit-ai/http-runtime": "0.1.112",
+        "@jskit-ai/realtime": "0.1.112",
+        "@jskit-ai/kernel": "0.1.114",
+        "@jskit-ai/shell-web": "0.1.113",
+        "@jskit-ai/uploads-image-web": "0.1.91",
+        "@jskit-ai/users-core": "0.1.123"
       },
       dev: {}
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/users-web",
-  "version": "0.1.127",
+  "version": "0.1.128",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -46,12 +46,12 @@
   },
   "dependencies": {
     "@mdi/js": "^7.4.47",
-    "@jskit-ai/http-runtime": "0.1.111",
-    "@jskit-ai/kernel": "0.1.113",
-    "@jskit-ai/realtime": "0.1.111",
-    "@jskit-ai/shell-web": "0.1.112",
-    "@jskit-ai/uploads-image-web": "0.1.90",
-    "@jskit-ai/users-core": "0.1.122"
+    "@jskit-ai/http-runtime": "0.1.112",
+    "@jskit-ai/kernel": "0.1.114",
+    "@jskit-ai/realtime": "0.1.112",
+    "@jskit-ai/shell-web": "0.1.113",
+    "@jskit-ai/uploads-image-web": "0.1.91",
+    "@jskit-ai/users-core": "0.1.123"
   },
   "peerDependencies": {
     "@tanstack/vue-query": "^5.90.5",

package/src/client/components/CrudListScreen.vue

@@ -191,7 +191,7 @@ function setSelectableRowsSelected(selected = true) {
         </div>
 
         <template v-else>
-          <div class="ui-generator-list-cards d-md-none">
+          <div class="ui-generator-list-cards">
             <v-sheet
               v-for="row in displayRows"
               :key="row.key"
@@ -237,7 +237,7 @@ function setSelectableRowsSelected(selected = true) {
             </v-sheet>
           </div>
 
-          <div class="ui-generator-list-table d-none d-md-block">
+          <div class="ui-generator-list-table">
             <v-table density="comfortable">
               <thead>
                 <tr>
@@ -325,7 +325,7 @@ function setSelectableRowsSelected(selected = true) {
 
     <v-btn
       v-if="listPrimaryAction"
-      class="ui-generator-list-fab d-md-none"
+      class="ui-generator-list-fab"
       color="primary"
       variant="flat"
       :to="listPrimaryAction"
@@ -447,6 +447,7 @@ function setSelectableRowsSelected(selected = true) {
 }
 
 .ui-generator-list-table {
+  display: none;
   overflow-x: auto;
 }
 
@@ -456,11 +457,26 @@ function setSelectableRowsSelected(selected = true) {
 
 .ui-generator-list-fab {
   bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
+  display: flex;
   position: fixed;
   right: 1rem;
   z-index: 6;
 }
 
+@media (min-width: 960px) {
+  .ui-generator-list-cards {
+    display: none;
+  }
+
+  .ui-generator-list-table {
+    display: block;
+  }
+
+  .ui-generator-list-fab {
+    display: none;
+  }
+}
+
 @media (max-width: 960px) {
   .ui-generator-list-header {
     flex-direction: column;

package/test/crudScreenComponents.test.js

@@ -23,9 +23,17 @@ test("CRUD screen components own generated list/view/form chrome centrally", asy
   assert.match(listSource, /CrudListBulkActionSurface/);
   assert.match(listSource, /CrudListFilterSurface/);
   assert.match(listSource, /CrudListRecordActionMenu/);
-  assert.match(listSource, /ui-generator-list-cards d-md-none/);
-  assert.match(listSource, /ui-generator-list-table d-none d-md-block/);
-  assert.match(listSource, /class="ui-generator-list-fab d-md-none"/);
+  assert.match(listSource, /class="ui-generator-list-cards"/);
+  assert.match(listSource, /class="ui-generator-list-table"/);
+  assert.match(listSource, /class="ui-generator-list-fab"/);
+  assert.doesNotMatch(listSource, /ui-generator-list-cards d-md-none/);
+  assert.doesNotMatch(listSource, /ui-generator-list-table d-none d-md-block/);
+  assert.doesNotMatch(listSource, /class="ui-generator-list-fab d-md-none"/);
+  assert.match(listSource, /\.ui-generator-list-table\s*\{\s*display:\s*none;/);
+  assert.match(
+    listSource,
+    /@media \(min-width: 960px\)[\s\S]*\.ui-generator-list-cards\s*\{\s*display:\s*none;[\s\S]*\.ui-generator-list-table\s*\{\s*display:\s*block;[\s\S]*\.ui-generator-list-fab\s*\{\s*display:\s*none;/
+  );
   assert.match(listSource, /button-label="More"/);
   assert.match(listSource, /selectableRows/);
   assert.match(listSource, /min-height:\s*48px/);