apostrophe 4.7.0 → 4.8.0

package/modules/@apostrophecms/ui/ui/apos/components/AposFile.vue

@@ -2,10 +2,12 @@
   <div>
     <label
       class="apos-input-wrapper apos-file-dropzone"
+      tabindex="0"
       :class="{
         'apos-file-dropzone--dragover': dragging,
         'apos-is-disabled': disabled || fileOrAttachment
       }"
+      @keydown="handleKeydown"
       @drop.prevent="uploadFile"
       @dragover="dragHandler"
       @dragleave="dragging = false"
@@ -29,6 +31,7 @@
         class="apos-sr-only"
         :disabled="disabled || fileOrAttachment"
         :accept="allowedExtensions"
+        tabindex="-1"
         @input="uploadFile"
       >
     </label>
@@ -101,6 +104,15 @@ export default {
     }
   },
   methods: {
+    handleKeydown(event) {
+      switch (event.key) {
+        case ' ':
+        case 'Enter':
+          event.preventDefault();
+          this.$refs.uploadField.click();
+          break;
+      }
+    },
     async uploadFile ({ target, dataTransfer }) {
       this.dragging = false;
       const [ file ] = target.files ? target.files : (dataTransfer.files || []);
@@ -174,14 +186,12 @@ export default {
       transition: all 200ms ease;
     }
 
-    &:hover {
-      border-color: var(--a-primary);
-      background-color: var(--a-base-10);
-    }
-
+    &:hover,
     &:active,
     &:focus {
-      border: 2px solid var(--a-primary);
+      border-color: var(--a-primary);
+      background-color: var(--a-base-10);
+      outline: none;
     }
 
     &.apos-is-disabled {

package/modules/@apostrophecms/ui/ui/apos/components/AposIndicator.vue

@@ -4,6 +4,7 @@
     v-apos-tooltip="tooltip"
     class="apos-indicator"
     :aria-hidden="decorative"
+    :tabindex="decorative ? '-1' : '0'"
   >
     <component
       :is="icon"

package/modules/@apostrophecms/ui/ui/apos/components/AposLocalePicker.vue

@@ -151,10 +151,12 @@ function getForbiddenTooltip(locale) {
 .apos-locale-picker__locale-display {
   @include apos-button-reset();
 
-  display: block;
-  box-sizing: border-box;
-  width: 100%;
-  padding: 12px 35px;
+  & {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 12px 35px;
+  }
 
   &:focus, &:active {
     outline: none;

package/modules/@apostrophecms/ui/ui/apos/components/AposSlatList.vue

@@ -132,6 +132,8 @@ export default {
       oldIndex, newIndex
     }) {
       this.next.splice(newIndex, 0, this.next.splice(oldIndex, 1)[0]);
+      // FIX: swapping the items does not trigger the watcher
+      this.next = this.next.slice();
     },
     engage(id) {
       this.engaged = id;
@@ -199,8 +201,10 @@ export default {
   .apos-slat-list {
     @include apos-list-reset();
 
-    min-height: 20px;
-    max-width: $input-max-width;
+    & {
+      min-height: 20px;
+      max-width: $input-max-width;
+    }
   }
 
   .apos-slat-status {

package/modules/@apostrophecms/ui/ui/apos/components/AposTagApply.vue

@@ -317,12 +317,14 @@ export default {
   .apos-apply-tag-menu__tags {
     @include apos-list-reset();
 
-    max-height: 160px;
-    overflow-y: auto;
-    margin-top: 15px;
-    // Negative margin/padding below is for the checkbox focus state.
-    margin-left: -10px;
-    padding-left: 10px;
+    & {
+      max-height: 160px;
+      overflow-y: auto;
+      margin-top: 15px;
+      // Negative margin/padding below is for the checkbox focus state.
+      margin-left: -10px;
+      padding-left: 10px;
+    }
   }
 
   .apos-apply-tag-menu__tag {

package/modules/@apostrophecms/ui/ui/apos/scss/global/_breakpoint_preview.scss

@@ -0,0 +1,38 @@
+[data-apos-context-label] {
+  @include type-help;
+
+  & {
+    position: relative;
+    top: $spacing-base * 5;
+    display: none;
+    text-align: center;
+  }
+}
+
+body[data-breakpoint-preview-mode] {
+  background: var(--a-base-10);
+
+  [data-apos-context-label] {
+    display: block;
+  }
+
+  [data-apos-refreshable] {
+    container-type: size;
+    overflow: clip scroll;
+    flex-grow: unset;
+    margin: $spacing-base * 6 auto auto;
+    border: 1px solid var(--a-base-6);
+    box-shadow: 0 0 12px 0 var(--a-base-7);
+    background-color: var(--a-background-primary);
+
+    &[data-resizable="false"] {
+      transition: width 400ms ease, height 400ms ease;
+    }
+
+    &[data-resizable="true"] {
+      resize: both;
+      overflow: scroll;
+    }
+  }
+
+}

package/modules/@apostrophecms/ui/ui/apos/scss/global/_tables.scss

@@ -19,7 +19,9 @@
 .apos-table__header-icon {
   @include apos-align-icon();
 
-  margin-right: 5px;
+  & {
+    margin-right: 5px;
+  }
 }
 
 .apos-table__header-label,

package/modules/@apostrophecms/ui/ui/apos/scss/global/import-all.scss

@@ -11,3 +11,4 @@
 @import './_tables';
 @import './_tooltips';
 @import './_widgets';
+@import './_breakpoint_preview';

package/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue

@@ -67,6 +67,7 @@ import AposModalTabsMixin from 'Modules/@apostrophecms/modal/mixins/AposModalTab
 import { detectDocChange } from 'Modules/@apostrophecms/schema/lib/detectChange';
 import { createId } from '@paralleldrive/cuid2';
 import { klona } from 'klona';
+import newInstance from 'apostrophe/modules/@apostrophecms/schema/lib/newInstance.js';
 
 export default {
   name: 'AposWidgetEditor',
@@ -234,19 +235,7 @@ export default {
       });
     },
     getDefault() {
-      const widget = {};
-      this.schema.forEach(field => {
-        if (field.name.startsWith('_')) {
-          return;
-        }
-        // Using `hasOwn` here, not simply checking if `field.def` is truthy
-        // so that `false`, `null`, `''` or `0` are taken into account:
-        const hasDefaultValue = Object.hasOwn(field, 'def');
-        widget[field.name] = hasDefaultValue
-          ? klona(field.def)
-          : null;
-      });
-      return widget;
+      return newInstance(this.schema);
     },
     getAposSchema(field) {
       return this.$refs[field.group.name][0];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apostrophe",
-  "version": "4.7.0",
+  "version": "4.8.0",
   "description": "The Apostrophe Content Management System.",
   "main": "index.js",
   "scripts": {
@@ -100,6 +100,7 @@
     "path-to-regexp": "^1.8.0",
     "performance-now": "^2.1.0",
     "pinia": "^2.1.7",
+    "postcss": "^8.4.47",
     "postcss-html": "^1.3.0",
     "postcss-loader": "^5.0.0",
     "postcss-scss": "^4.0.3",
@@ -140,7 +141,7 @@
     "nyc": "^15.1.0",
     "replace-in-file": "^6.1.0",
     "stylelint": "^16.5.0",
-    "stylelint-config-apostrophe": "4.1.0",
+    "stylelint-config-apostrophe": "^4.2.0",
     "vue-eslint-parser": "^7.1.1",
     "vue-template-compiler": "^2.7.14"
   },

package/test/add-missing-schema-fields.js

@@ -0,0 +1,323 @@
+const t = require('../test-lib/test.js');
+const assert = require('assert');
+const _ = require('lodash');
+
+const cleanup = [];
+
+after(async () => {
+  for (const apos of cleanup) {
+    await t.destroy(apos);
+  }
+});
+
+describe('add missing schema fields', function() {
+
+  this.timeout(t.timeout);
+
+  it('first generation & sanity checks', async function() {
+    const apos = await t.create({
+      root: module,
+      shortName: 'test-amsf',
+      modules: {
+        product: {
+          extend: '@apostrophecms/piece-type',
+          options: {
+            alias: 'product'
+          },
+          fields: {
+            add: {
+              price: {
+                type: 'integer',
+                required: true,
+                def: 10
+              },
+              body: {
+                type: 'area',
+                widgets: {
+                  hero: {},
+                  '@apostrophecms/rich-text': {}
+                }
+              }
+            }
+          }
+        },
+        'hero-widget': {
+          extend: '@apostrophecms/widget-type',
+          fields: {
+            add: {
+              label: {
+                type: 'string'
+              }
+            }
+          }
+        }
+      }
+    });
+    cleanup.push(apos);
+    const product = apos.product.newInstance();
+    product.title = 'Product 1';
+    // Intentionally not equal to the default
+    product.price = 15;
+    product.body = {
+      metaType: 'area',
+      items: [
+        {
+          type: 'hero',
+          label: 'Sample Label'
+        }
+      ]
+    };
+    const req = apos.task.getReq();
+    await apos.product.insert(req, product);
+    const products = await apos.doc.db.find({
+      type: 'product'
+    }).sort({
+      aposMode: 1
+    }).toArray();
+    assert.strictEqual(products.length, 2);
+    for (const product of products) {
+      // Not a thing yet
+      assert.strictEqual(product.code, undefined);
+      assert.strictEqual(product.title, 'Product 1');
+      assert.strictEqual(product.price, 15);
+      assert.strictEqual(product.body.items[0].label, 'Sample Label');
+    }
+  });
+
+  it('second generation schema (objects, arrays, new widget fields)', async function() {
+    const apos = await t.create({
+      root: module,
+      // Same on purpose so we reuse the database
+      shortName: 'test-amsf',
+      modules: {
+        product: {
+          extend: '@apostrophecms/piece-type',
+          options: {
+            alias: 'product'
+          },
+          fields: {
+            add: {
+              price: {
+                type: 'float',
+                required: true
+              },
+              body: {
+                type: 'area',
+                widgets: {
+                  hero: {},
+                  '@apostrophecms/rich-text': {}
+                }
+              },
+              code: {
+                type: 'integer',
+                required: true,
+                def: 20
+              },
+              attitude: {
+                // Test the fallback default of the type
+                type: 'string'
+              },
+              addresses: {
+                type: 'array',
+                fields: {
+                  add: {
+                    street: {
+                      type: 'string'
+                    }
+                  }
+                }
+              },
+              flavors: {
+                type: 'object',
+                fields: {
+                  add: {
+                    chocolate: {
+                      type: 'boolean',
+                      def: true
+                    },
+                    vanilla: {
+                      type: 'boolean',
+                      def: false
+                    },
+                    strawberry: {
+                      type: 'boolean'
+                      // should get fallback default
+                    }
+                  }
+                }
+              }
+            }
+          }
+        },
+        'hero-widget': {
+          extend: '@apostrophecms/widget-type',
+          fields: {
+            add: {
+              label: {
+                type: 'string'
+              },
+              // New properties, with defaults
+              sublabel: {
+                type: 'string',
+                def: 'Default Sublabel'
+              },
+              specialized: {
+                type: 'boolean',
+                def: false
+              }
+            }
+          }
+        }
+      }
+    });
+    cleanup.push(apos);
+    const products = await apos.doc.db.find({
+      type: 'product'
+    }).sort({
+      aposMode: 1
+    }).toArray();
+    assert.strictEqual(products.length, 2);
+    for (const product of products) {
+      assert.strictEqual(product.code, 20);
+      assert.strictEqual(product.title, 'Product 1');
+      // Still unchanged from existing non-default value
+      assert.strictEqual(product.price, 15);
+      assert.strictEqual(product.attitude, '');
+      assert(_.isEqual(product.addresses, []));
+      assert.strictEqual(product.flavors.chocolate, true);
+      assert.strictEqual(product.flavors.vanilla, false);
+      // Type has no fallback default (update test if this changes)
+      assert.strictEqual(product.flavors.strawberry, undefined);
+      assert.strictEqual(product.body.items[0].label, 'Sample Label');
+      assert.strictEqual(product.body.items[0].sublabel, 'Default Sublabel');
+      assert.strictEqual(product.body.items[0].specialized, false);
+    }
+    const product = products.find(product => product.aposMode === 'draft');
+    const req = apos.task.getReq({
+      mode: 'draft'
+    });
+    product.addresses.push({
+      street: '1168 E Passyunk Ave'
+    });
+    const result = await apos.product.update(req, product);
+    await apos.product.publish(req, result);
+    assert.strictEqual(result.addresses.length, 1);
+    assert.strictEqual(result.addresses[0].street, '1168 E Passyunk Ave');
+  });
+
+  it('third generation schema (new array fields & verify new defaults do not crush existing values)', async function() {
+    const apos = await t.create({
+      root: module,
+      // Same on purpose so we reuse the database
+      shortName: 'test-amsf',
+      modules: {
+        product: {
+          extend: '@apostrophecms/piece-type',
+          options: {
+            alias: 'product'
+          },
+          fields: {
+            add: {
+              price: {
+                type: 'float',
+                required: true
+              },
+              body: {
+                type: 'area',
+                widgets: {
+                  hero: {},
+                  '@apostrophecms/rich-text': {}
+                }
+              },
+              code: {
+                type: 'integer',
+                required: true,
+                def: 20
+              },
+              addresses: {
+                type: 'array',
+                fields: {
+                  add: {
+                    street: {
+                      type: 'string'
+                    },
+                    city: {
+                      type: 'string',
+                      def: 'Philadelphia'
+                    }
+                  }
+                }
+              },
+              flavors: {
+                type: 'object',
+                fields: {
+                  add: {
+                    chocolate: {
+                      type: 'boolean',
+                      def: true
+                    },
+                    vanilla: {
+                      type: 'boolean',
+                      // Verify change of default does NOT mess up an existing property
+                      def: true
+                    },
+                    strawberry: {
+                      type: 'boolean'
+                      // should get fallback default
+                    }
+                  }
+                }
+              }
+            }
+          }
+        },
+        'hero-widget': {
+          extend: '@apostrophecms/widget-type',
+          fields: {
+            add: {
+              label: {
+                type: 'string'
+              },
+              // New properties, with defaults
+              sublabel: {
+                type: 'string',
+                def: 'Default Sublabel'
+              },
+              specialized: {
+                type: 'boolean',
+                def: false
+              }
+            }
+          }
+        }
+      }
+    });
+    cleanup.push(apos);
+    const products = await apos.doc.db.find({
+      type: 'product',
+      aposMode: {
+        $in: [ 'draft', 'published' ]
+      }
+    }).sort({
+      aposMode: 1
+    }).toArray();
+    assert.strictEqual(products.length, 2);
+    for (const product of products) {
+      assert.strictEqual(product.code, 20);
+      assert.strictEqual(product.title, 'Product 1');
+      assert.strictEqual(product.addresses.length, 1);
+      // Should NOT change because it already has a value
+      assert.strictEqual(product.flavors.vanilla, false);
+      assert.strictEqual(product.addresses[0].street, '1168 E Passyunk Ave');
+      assert.strictEqual(product.addresses[0].city, 'Philadelphia');
+    }
+
+    // Direct invocation to make sure an additional invocation with the same schemas
+    // does no new work
+
+    const { scans, updates } = await apos.migration.addMissingSchemaFields();
+    assert.strictEqual(scans, 0);
+    assert.strictEqual(updates, 0);
+  });
+
+});

package/test/content-i18n.js

@@ -96,7 +96,7 @@ describe('content-i18n', function() {
     peoplePageFrCA = await apos.page.find(frCAReq, {
       parkedId: 'people'
     }).toObject();
-    assert(peoplePageFrCA.title === 'Altered');
+    assert(peoplePageFrCA.title === 'People');
   });
 
   let home;

package/test/events2.js

@@ -45,10 +45,12 @@ describe('Promisified Events: @apostrophecms/doc-type:beforeInsert', function()
               {
                 type: 'default-page',
                 findMeAgain: true,
-                title: 'Test',
                 slug: '/test',
                 visibility: 'public',
-                parkedId: 'test'
+                parkedId: 'test',
+                _defaults: {
+                  title: 'Test'
+                }
               }
             ]
           }

package/test/pages.js

@@ -421,6 +421,16 @@ describe('Pages', function() {
     assert.strictEqual(page.rank, 1);
   });
 
+  it('is not able to move a page under itself', async function() {
+    await assert.rejects(
+      apos.page.move(apos.task.getReq(), 'cousin:en:published', 'cousin:en:published', 'lastChild'),
+      {
+        name: 'forbidden',
+        message: 'Cannot move a page under itself'
+      }
+    );
+  });
+
   it('is able to move root/cousin before root/parent/child', async function() {
     // 'Cousin' _id === 4312
     // 'Child' _id === 2341

package/test/parked-pages.js

@@ -271,6 +271,81 @@ describe('Parked Pages', function() {
     });
     await validate(apos6, [ '/', '/archive', '/default1', '/default2', '/default3', '/default3/child1' ]);
   });
+
+  it('field override on save is possible only when it is configured as default', async function () {
+    this.timeout(20000);
+    await t.destroy(apos6);
+    apos6 = await t.create({
+      root: module,
+      modules: {
+        '@apostrophecms/page': {
+          options: {
+            park: [
+              ...park2,
+              {
+                parkedId: 'default3',
+                type: 'default-page',
+                title: 'Default 3',
+                slug: '/default3'
+              },
+              {
+                parkedId: 'default4',
+                type: 'default-page',
+                title: 'Default 4',
+                _defaults: {
+                  slug: '/default4'
+                }
+              }
+            ]
+          }
+        },
+        'default-page': {}
+      }
+    });
+    const manager = apos6.doc.getManager('default-page');
+    const req = apos.task.getReq({ mode: 'draft' });
+
+    // slug override not possible, slug is NOT configured in defaults
+    {
+      const page = await manager.find(req, {
+        parkedId: 'default3',
+        aposMode: 'draft'
+      }).toObject();
+      assert.strictEqual(page.slug, '/default3');
+      assert.deepStrictEqual(page.parked, [ 'parkedId', 'type', 'title', 'slug' ]);
+
+      page.slug = '/default3-overridden';
+      await manager.update(req, page);
+      const updated = await manager.find(req, {
+        parkedId: 'default3',
+        aposMode: 'draft'
+      }).toObject();
+
+      assert.strictEqual(updated.slug, '/default3');
+    }
+
+    // slug override is possible because slug is configured in defaults
+    {
+      const page = await manager.find(req, {
+        parkedId: 'default4',
+        aposMode: 'draft'
+      }).toObject();
+      assert.strictEqual(page.slug, '/default4');
+      assert.deepStrictEqual(page.parked, [ 'parkedId', 'type', 'title' ]);
+
+      page.slug = '/default4-overridden';
+      await manager.update(req, page);
+      const updated = await manager.find(req, {
+        parkedId: 'default4',
+        aposMode: 'draft'
+      }).toObject();
+
+      assert.strictEqual(updated.slug, '/default4-overridden');
+    }
+
+    await t.destroy(apos6);
+    apos6 = null;
+  });
 });
 
 async function validate(apos, expected) {