apostrophe 3.7.0 → 3.8.0

package/.eslintrc

@@ -10,6 +10,10 @@
     "no-var": "error",
     "no-console": 0,
     "multiline-ternary": "off",
+    "no-unused-vars": [
+      "error",
+      { "varsIgnorePattern": "^_.", "args": "none" }
+    ],
     "vue/no-deprecated-destroyed-lifecycle": 0,
     "vue/v-on-event-hyphenation": 1,
     "vue/custom-event-name-casing": ["warn", "kebab-case"],

package/.scratch.md

@@ -0,0 +1,2 @@
+- `/deep/ .apos-button` to `:deep(.apos-button)`
+- Remove v-popover, v-tooltip, VueClickOutsideElement

package/CHANGELOG.md

@@ -1,11 +1,43 @@
 # Changelog
 
+## 3.8.0 - 2021-11-15
+
+### Adds
+
+* Checkboxes for pieces are back, a main checkbox allows to select all page items. When all pieces on a page are checked, a banner where the user can select all pieces appears. A launder for mongo projections has been added.
+* Registered `batchOperations` on a piece-type will now become buttons in the manager batch operations "more menu" (styled as a kebab icon). Batch operations should include a label, `messages` object, and `modalOptions` for the confirmation modal.
+* `batchOperations` can be grouped into a single button with a menu using the `group` cascade subproperty.
+* `batchOperations` can be conditional with an `if` conditional object. This allows developers to pass a single value or an array of values.
+* Piece types can have `utilityOperations` configured as a top-level cascade property. These operations are made available in the piece manager as new buttons.
+* Notifications may now include an `event` property, which the AposNotification component will emit on mount. The `event` property should be set to an object with `name` (the event name) and optionally `data` (data included with the event emission).
+* Adds support for using the attachments query builder in REST API calls via the query string.
+* Adds contextual menu for pieces, any module extending the piece-type one can add actions in this contextual menu.
+* When clicking on a batch operation, it opens a confirmation modal using modal options from the batch operation, it also works for operations in grouped ones. operations name property has been renamed in action to work with AposContextMenu component.
+* Beginning with this release, a module-specific static asset in your project such as `modules/mymodulename/public/images/bg.png` can always be referenced in your `.scss` and `.css` files as `/modules/mymodulename/images/bg.png`, even if assets are actually being deployed to S3, CDNs, etc. Note that `public` and `ui/public` module subdirectories have separate functions. See the documentation for more information.
+* Adds AposFile.vue component to abstract file dropzone UI, uses it in AposInputAttachment, and uses it in the confirmation modal for pieces import.
+* Optionally add `dimensionAttrs` option to image widget, which sets width & height attributes to optimize for Cumulative Layout Shift. Thank you to [Qiao Lin](https://github.com/qclin) for the contribution.
+
+### Fixes
+
+* The `apos.util.attachmentUrl` method now works correctly. To facilitate that, `apos.uploadsUrl` is now populated browser-side at all times as the frontend logic originally expected. For backwards compatibility `apos.attachment.uploadsUrl` is still populated when logged in.
+* Widget players are now prevented from being played twice by the implementing vue component.
+
+### Changes
+* Removes Apostrophe 2 documentation and UI configuration from the `@apostrophecms/job` module. These options were not yet in use for A3.
+* Renames methods and removes unsupported routes in the `@apostrophecms/job` module that were not yet in use. This was not done lightly, but specifically because of the minimal likelihood that they were in use in project code given the lack of UI support.
+  * The deprecated `cancel` route was removed and will likely be replaced at a later date.
+  * `run` was renamed `runBatch` as its purpose is specifically to run processes on a "batch selected" array of pieces or pages.
+  * `runNonBatch` was renamed to `run` as it is the more generic job-running method. It is likely that `runBatch` will eventually be refactored to use this method.
+  * The `good` and `bad` methods are renamed `success` and `failure`, respectively. The expected methods used in the `run` method were similarly renamed. They still increment job document properties called `good` and `bad`.
+* Comments out the unused `batchSimpleRoute` methods in the page and piece-type modules to avoid usage before they are fully implemented.
+* Optionally add `dimensionAttrs` option to image widget, which sets width & height attributes to optimize for Cumulative Layout Shift.
+* Temporarily removes `npm audit` from our automated tests because of a sub-dependency of uploadfs that doesn't actually cause a security vulnerability for apostrophe.
+
 ## 3.7.0 - 2021-10-28
 
 ### Adds
 
 * Schema select field choices can now be populated by a server side function, like an API call. Set the `choices` property to a method name of the calling module. That function should take a single argument of `req`, and return an array of objects with `label` and `value` properties. The function can be async and will be awaited.
-
 * Apostrophe now has built-in support for the Node.js cluster module. If the `APOS_CLUSTER_PROCESSES` environment variable is set to a number, that number of child processes are forked, sharing the same listening port. If the variable is set to `0`, one process is forked for each CPU core, with a minimum of `2` to provide availability during restarts. If the variable is set to a negative number, that number is added to the number of CPU cores, e.g. `-1` is a good way to reserve one core for MongoDB if it is running on the same server. This is for production use only (`NODE_ENV=production`). If a child process fails it is restarted automatically.
 
 ### Fixes
@@ -187,8 +219,7 @@ No changes. Publishing to correctly mark the latest 3.x release as "latest" in n
 can include the widget on the clipboard, a special Clipboard widget will appear in area's Add UI. This works across pages as well.
 
 ### Changes
-* Apostrophe's Global's UI (the @apostrophecms/global singleton has moved from the admin bar's content controls to
-the admin utility tray under a cog icon.
+* Apostrophe's Global's UI (the @apostrophecms/global singleton has moved from the admin bar's content controls to the admin utility tray under a cog icon.
 * The context bar's document Edit button, which was a cog icon, has been rolled into the doc's context menu.
 
 ## 3.1.3 - 2021-07-16

package/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextBar.vue

@@ -463,7 +463,11 @@ export default {
       }
     },
     async onContentChanged(e) {
-      if (e.doc && (e.doc._id === this.context._id)) {
+
+      if (
+        (e.doc && (e.doc._id === this.context._id)) ||
+        (e.docIds && e.docIds.includes(this.context._id))
+      ) {
         if (e.action === 'delete') {
           if (!this.contextStack.length) {
             // With the current page gone, we need to move to safe ground

package/modules/@apostrophecms/asset/index.js

@@ -73,6 +73,12 @@ module.exports = {
           await fs.remove(buildDir);
           await fs.mkdirp(buildDir);
 
+          // Static asset files in `public` subdirs of each module are copied
+          // to the same relative path `/public/apos-frontend/namespace/modules/modulename`.
+          // Inherited files are also copied, with the deepest subclass overriding in the
+          // event of a conflict
+          await moduleOverrides(`${bundleDir}/modules`, 'public');
+
           for (const [ name, options ] of Object.entries(self.builds)) {
             // If the option is not present always rebuild everything
             let rebuild = argv && !argv['check-apos-build'];
@@ -122,12 +128,17 @@ module.exports = {
           // just `public` and `apos`) by examining those specified as
           // targets for the various builds
           const scenes = [ ...new Set(Object.values(self.builds).map(options => options.scenes).flat()) ];
-          let bundles = [];
+          let deployFiles = [];
           for (const scene of scenes) {
-            bundles = [ ...bundles, ...merge(scene) ];
+            deployFiles = [ ...deployFiles, ...merge(scene) ];
           }
-
-          await deploy(bundles);
+          // enumerate public assets and include them in deployment if appropriate
+          const publicAssets = glob.sync('modules/**/*', {
+            cwd: bundleDir,
+            mark: true
+          }).filter(match => !match.endsWith('/'));
+          deployFiles = [ ...deployFiles, ...publicAssets ];
+          await deploy(deployFiles);
 
           if (process.env.APOS_BUNDLE_ANALYZER) {
             return new Promise((resolve, reject) => {
@@ -162,7 +173,7 @@ module.exports = {
             for (const name of names) {
               const moduleDir = `${modulesDir}/${name}`;
               for (const dir of directories[name]) {
-                const srcDir = `${dir}/ui/${source}`;
+                const srcDir = `${dir}/${source}`;
                 if (fs.existsSync(srcDir)) {
                   await fs.copy(srcDir, moduleDir);
                 }
@@ -176,7 +187,7 @@ module.exports = {
             }));
             const modulesDir = `${buildDir}/${name}/modules`;
             const source = options.source || name;
-            await moduleOverrides(modulesDir, source);
+            await moduleOverrides(modulesDir, `ui/${source}`);
 
             let iconImports, componentImports, tiptapExtensionImports, appImports, indexJsImports, indexSassImports;
             if (options.apos) {
@@ -233,7 +244,8 @@ module.exports = {
               // Remove previous build artifacts, as some pipelines won't build all artifacts
               // if there is no input, and we don't want stale output in the bundle
               fs.removeSync(`${bundleDir}/${outputFilename}`);
-              fs.removeSync(`${bundleDir}/${outputFilename}`.replace(/\.js$/, '.css'));
+              const cssPath = `${bundleDir}/${outputFilename}`.replace(/\.js$/, '.css');
+              fs.removeSync(cssPath);
               await Promise.promisify(webpackModule)(require(`./lib/webpack/${name}/webpack.config`)(
                 {
                   importFile,
@@ -243,6 +255,11 @@ module.exports = {
                 },
                 self.apos
               ));
+              if (fs.existsSync(cssPath)) {
+                fs.writeFileSync(cssPath, self.filterCss(fs.readFileSync(cssPath, 'utf8'), {
+                  modulesPrefix: `${self.getAssetBaseUrl()}/modules`
+                }));
+              }
               if (options.apos) {
                 const now = Date.now().toString();
                 fs.writeFileSync(`${bundleDir}/${name}-build-timestamp.txt`, now);
@@ -269,7 +286,9 @@ module.exports = {
                 const publicImports = getImports(name, '*.css', { });
                 fs.writeFileSync(`${bundleDir}/${name}-build.css`,
                   publicImports.paths.map(path => {
-                    return fs.readFileSync(path, 'utf8');
+                    return self.filterCss(fs.readFileSync(path, 'utf8'), {
+                      modulesPrefix: `${self.getAssetBaseUrl()}/modules`
+                    });
                   }).join('\n')
                 );
               }
@@ -358,7 +377,19 @@ module.exports = {
             return [ jsModules, jsNoModules, css ];
           }
 
-          async function deploy(bundles) {
+          // If NODE_ENV is production, this function will copy the given
+          // array of asset files from `${bundleDir}/${file}` to
+          // the same relative location in the appropriate release subdirectory in
+          // `/public/apos-frontend/releases`, or in `/apos-frontend/releases` in
+          // uploadfs if `APOS_UPLOADFS_ASSETS` is present.
+          //
+          // If NODE_ENV is not production this function does nothing and
+          // the assets are served directly from `/public/apos-frontend/${file}`.
+          //
+          // The namespace (e.g. default) should be part of each filename given.
+          // A leading slash should NOT be passed.
+
+          async function deploy(files) {
             if (process.env.NODE_ENV !== 'production') {
               return;
             }
@@ -373,17 +404,23 @@ module.exports = {
             } else {
               // The right choice with Docker if uploadfs is just the local filesystem
               // mapped to a volume (a Docker build step can't access that)
-              copyIn = fs.copyFile;
+              copyIn = fsCopyIn;
               releaseDir = `${self.apos.rootDir}/public/apos-frontend/releases/${releaseId}/${namespace}`;
               await fs.mkdirp(releaseDir);
             }
-            for (const bundle of bundles) {
-              const src = `${bundleDir}/${bundle}`;
-              await copyIn(src, `${releaseDir}/${bundle}`);
+            for (const file of files) {
+              const src = `${bundleDir}/${file}`;
+              await copyIn(src, `${releaseDir}/${file}`);
               await fs.remove(src);
             }
           }
 
+          async function fsCopyIn(from, to) {
+            const base = path.dirname(to);
+            await fs.mkdirp(base);
+            return fs.copyFile(from, to);
+          }
+
           function getImports(folder, pattern, options) {
             let components = [];
             const seen = {};
@@ -650,6 +687,30 @@ module.exports = {
         if (!self.options.es5) {
           delete self.builds['src-es5'];
         }
+      },
+      // Filter the given css performing any necessary transformations,
+      // such as support for the /modules path regardless of where
+      // static assets are actually deployed
+      filterCss(css, { modulesPrefix }) {
+        return self.filterCssUrls(css, url => {
+          if (url.startsWith('/modules')) {
+            return url.replace('/modules', modulesPrefix);
+          }
+          return url;
+        });
+      },
+      // Run all URLs in CSS through a filter function
+      filterCssUrls(css, filter) {
+        css = css.replace(/url\(([^'"].*?)\)/g, function(s, url) {
+          return 'url(' + filter(url) + ')';
+        });
+        css = css.replace(/url\("([^"]+?)"\)/g, function(s, url) {
+          return 'url("' + filter(url) + '")';
+        });
+        css = css.replace(/url\('([^']+?)'\)/g, function(s, url) {
+          return 'url(\'' + filter(url) + '\')';
+        });
+        return css;
       }
     };
   },
@@ -667,6 +728,9 @@ module.exports = {
         }
         const script = fs.readFileSync(path.join(__dirname, '/lib/refresh-on-restart.js'), 'utf8');
         return self.apos.template.safe(`<script data-apos-refresh-on-restart="${self.action}/restart-id">\n${script}</script>`);
+      },
+      url(path) {
+        return `${self.getAssetBaseUrl()}${path}`;
       }
     };
   },

package/modules/@apostrophecms/attachment/index.js

@@ -1038,6 +1038,7 @@ module.exports = {
           action: self.action,
           fileGroups: self.fileGroups,
           name: self.name,
+          // for bc
           uploadsUrl: self.uploadfs.getUrl(),
           croppable: self.croppable,
           sized: self.sized

package/modules/@apostrophecms/db/index.js

@@ -1,4 +1,4 @@
-// This module establishes `apos.db`, the mongodb driver connection object.
+// This module establishes `apos.db`, the MongoDB database object.
 //
 // ## Options
 //
@@ -20,8 +20,7 @@
 //
 // ### `client`
 //
-// An existing MongoDB connection (MongoClient) object. If present, a new
-// connection instance is created that reuses the same sockets,
+// An existing MongoDB connection (MongoClient) object. If present, it is used
 // and `uri`, `host`, `connect`, etc. are ignored.
 //
 // ### `versionCheck`
@@ -40,7 +39,7 @@
 // allow other modules to drop related non-MongoDB resources at the
 // same time, if desired.
 //
-// Note that `apos.db` is the mongodb database object, not this module.
+// Note that `apos.db` is the MongoDB database object, not this module.
 // You shouldn't need to talk to this module after startup, but you can
 // access it as `apos.modules['@apostrophecms/db']` if you wish. You can
 // also access `apos.dbClient` if you need the MongoClient object.
@@ -81,8 +80,8 @@ module.exports = {
   },
   methods(self) {
     return {
-      // Open the database connection. Always use MongoClient with its
-      // sensible defaults. Build a URI if we need to, so we can call it
+      // Open the database connection. Always uses MongoClient with its
+      // sensible defaults. Builds a URI if necessary, so we can call it
       // in a consistent way.
       //
       // One default we override: if the connection is lost, we keep

package/modules/@apostrophecms/doc-type/index.js

@@ -738,7 +738,7 @@ module.exports = {
       },
       // Localize (export) the given draft to another locale, creating the document in the
       // other locale if necessary. By default, if the document already exists in the
-      // other locale, it is not ovewritten. Use the `update: true` option to change that.
+      // other locale, it is not overwritten. Use the `update: true` option to change that.
       // You can localize starting from either draft or published content. Either way what
       // gets created or updated in the other locale is a draft.
       async localize(req, draft, toLocale, options = { update: false }) {
@@ -1217,6 +1217,21 @@ module.exports = {
         // cursors.
 
         project: {
+          launder (p) {
+            // check that project is an object
+            if (!p || typeof p !== 'object' || Array.isArray(p)) {
+              return {};
+            }
+
+            const projection = Object.entries(p).reduce((acc, [ key, val ]) => {
+              return {
+                ...acc,
+                [key]: self.apos.launder.boolean(val)
+              };
+            }, {});
+
+            return projection;
+          },
           finalize() {
             let projection = query.get('project') || {};
             // Keys beginning with `_` are computed values
@@ -1442,9 +1457,14 @@ module.exports = {
         attachments: {
           def: false,
           after(results) {
-            for (const doc of results) {
-              self.apos.attachment.all(doc, { annotate: true });
+            const attachments = query.get('attachments');
+
+            if (attachments) {
+              self.apos.attachment.all(results, { annotate: true });
             }
+          },
+          launder(b) {
+            return self.apos.launder.boolean(b);
           }
         },
 

package/modules/@apostrophecms/doc-type/ui/apos/components/AposDocContextMenu.vue

@@ -286,9 +286,21 @@ export default {
     apos.bus.$off('content-changed', this.onContentChanged);
   },
   methods: {
-    onContentChanged(e) {
+    async onContentChanged(e) {
       if (e.doc && (e.doc._id === this.context._id)) {
         this.context = e.doc;
+      } else if (e.docIds && e.docIds.includes(this.context._id)) {
+        try {
+          this.context = await apos.http.get(`${this.moduleOptions.action}/${this.context._id}`, {
+            busy: true
+          });
+        } catch (error) {
+          // If not found it is likely that there was an archiving or restoring
+          // batch operation.
+          if (error.name !== 'notfound') {
+            console.error(error);
+          }
+        }
       }
     },
     menuHandler(action) {

package/modules/@apostrophecms/i18n/i18n/en.json

@@ -3,6 +3,7 @@
   "addItem": "Add Item",
   "addWidgetType": "Add {{ label }}",
   "admin": "Admin",
+  "affirmativeLabel": "Yes, continue.",
   "altText": "Alt Text",
   "altTextHelp": "Image description used for accessibility",
   "any": "Any",
@@ -17,6 +18,8 @@
   "archiveTypeAffirmativeLabel": "Yes, archive {{ type }}",
   "archiveTypeNote": "You are currently viewing the {{ type }} you want to archive. When it is archived you will be returned to the home page.",
   "archived": "Archived",
+  "archivingBatchConfirmation": "Are you sure you want to archive {{ count }} {{ type }}?",
+  "archivingBatchConfirmationButton": "Yes, archive content.",
   "archivingDraftChildCount": "{{ count }} of those descendants have never been published.",
   "archivingPageHasChild": "That page has one descendant.",
   "archivingPageHasChild_plural": "That page has {{ count }} descendants.",
@@ -204,6 +207,7 @@
   "notFoundPageStatusCode": "404",
   "notFoundPageTitle": "404 - Page not found",
   "notInLocale": "The current page doesn’t exist in {{ label }}. Localize the version from {{ currentLocale }}?",
+  "notificationClearEventError": "There was an error clearing a registered notification event.",
   "noTypeFound": "No {{ type }} Found",
   "parentNotLocalized": "Localize the parent page first",
   "notYetPublished": "This document hasn't been published yet.",
@@ -255,12 +259,12 @@
   "provideButtonLabel": "Provide a Button Label",
   "previousPage": "Previous Page",
   "public": "Public",
-  "modernBuild": "public-facing modern JavaScript and Sass",
-  "ie11Build": "public-facing modern JavaScript and Sass (IE11 build)",
+  "modernBuild": "Public-facing modern JavaScript and Sass",
+  "ie11Build": "Public-facing modern JavaScript and Sass (IE11 build)",
   "publish": "Publish",
   "publishBeforeUsingTooltip": "Publish this content before using it in a relationship",
   "published": "Published",
-  "rawCssAndJs": "raw CSS and JS",
+  "rawCssAndJs": "Raw CSS and JS",
   "rawHtml": "Raw HTML",
   "rawHtmlCode": "Raw HTML (Code)",
   "rawHtmlCodeHelp": "Be careful when embedding third-party code, as it can break the website editing functionality. If a page becomes unusable, add \"?safe_mode=1\" to the URL to make it work temporarily without the problem code being rendered.",
@@ -279,6 +283,8 @@
   "relatedDocsOnly": "Related documents only",
   "relatedDocsDefinition": "Related documents are documents referenced by this document. This typically includes images, content defined by relationships, etc.",
   "restore": "Restore",
+  "restoreBatchConfirmation": "Are you sure you want to restore {{ count }} {{ type }}?",
+  "restoreBatchConfirmationButton": "Yes, restore content.",
   "resolveErrorsBeforeSaving": "Resolve errors before saving.",
   "resolveErrorsFirst": "Resolve errors first.",
   "restoreOnlyThisPage": "Restore only this page",
@@ -307,6 +313,12 @@
   "select": "Select",
   "selectedMenuItem": "✓ {{ label }}",
   "selectAll": "Select All",
+  "selectBoxMessage": "{{ num }} {{ label }} selected.",
+  "selectBoxMessagePage": "{{ num }} {{ label }} on this page selected.",
+  "selectBoxMessageAllButton": "Select all {{ num }} {{ label }}.",
+  "selectBoxMessageButton": "Select {{ num }} {{ label }}.",
+  "selectBoxMessageSelected": "{{ num }} {{ label }} selected.",
+  "selectBoxMessageAllSelected": "All {{ num }} {{ label }} selected.",
   "deselectAll": "Deselect All",
   "selectContent": "Select Content",
   "selectContentToLocalize": "What content do you want to localize?",
@@ -375,7 +387,6 @@
   "videoUrlHelp": "Enter the URL for a media source you wish to embed (e.g., YouTube, Vimeo, or other hosted video URL).",
   "view": "View",
   "visibility": "Visibility",
-  "visibilityLabel": "Who can view this?",
   "willMoveImageToArchive": "This will move the image to the archive.",
   "yes": "Yes",
   "yesLocalizeAndSwitchLocales": "Yes, localize this page and switch locales",

package/modules/@apostrophecms/i18n/i18n/es.json

@@ -375,7 +375,6 @@
   "videoUrlHelp": "Ingresa la dirección URL del video que quiere insertar (e.j., YouTube, Vimeo, o otra dirección URL de video).",
   "view": "Mirar",
   "visibility": "Visibilidad",
-  "visibilityLabel": "¿Quién puede mirar esto?",
   "willMoveImageToArchive": "Esto moverá la imagen al archivo de documentos.",
   "yes": "Sí",
   "yesLocalizeAndSwitchLocales": "Sí, traducir esta página y cambiar de configuración regional",

package/modules/@apostrophecms/i18n/i18n/pt-BR.json

@@ -372,7 +372,6 @@
   "videoUrlHelp": "Insira o URL de uma fonte de mídia que deseja incorporar (por exemplo, YouTube, Vimeo ou outro URL de vídeo).",
   "view": "Visualizar",
   "visibility": "Visibilidade",
-  "visibilityLabel": "Quem pode ver isto?",
   "willMoveImageToArchive": "Isso moverá a imagem para o arquivo.",
   "yes": "Sim",
   "yesLocalizeAndSwitchLocales": "Sim, localize esta página e mude de local",

package/modules/@apostrophecms/i18n/i18n/sk.json

@@ -253,12 +253,12 @@
   "provideButtonLabel": "Poskytnite štítok s tlačidlom",
   "previousPage": "Predchádzajúca strana",
   "public": "Verejné",
-  "modernBuild": "verejnosti orientovaný moderný JavaScript a Sass",
-  "ie11Build": "verejný moderný JavaScript a Sass (zostava IE11)",
+  "modernBuild": "Verejnosti orientovaný moderný JavaScript a Sass",
+  "ie11Build": "Verejný moderný JavaScript a Sass (zostava IE11)",
   "publish": "Publikovať",
   "publishBeforeUsingTooltip": "Pred použitím v kontexte zverejnite tento obsah",
   "published": "Publikovaný",
-  "rawCssAndJs": "zdrojový CSS a JS",
+  "rawCssAndJs": "Zdrojový CSS a JS",
   "rawHtml": "Zdrojový HTML",
   "rawHtmlCode": "Zdrojový HTML (kód)",
   "rawHtmlCodeHelp": "Pri vkladaní kódu tretej strany buďte opatrní, pretože môže narušiť funkciu úprav webových stránok. Ak sa stránka stane nepoužiteľnou, pridajte \"?safe_mode=1\" na adresu URL, aby dočasne fungovala bez toho, aby sa zobrazil problémový kód.",
@@ -373,7 +373,6 @@
   "videoUrlHelp": "Zadajte webovú adresu zdroja média, ktorý chcete vložiť (napr. YouTube, Vimeo alebo inej adresy URL hosteného videa).",
   "view": "Pozrieť",
   "visibility": "Viditeľnosť",
-  "visibilityLabel": "Kto to môže vidieť?",
   "willMoveImageToArchive": "Tým sa obrázok presunie do archívu.",
   "yes": "Áno",
   "yesLocalizeAndSwitchLocales": "Áno, preložte túto stránku a prepnite jazykovú mutáciu",

package/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue

@@ -45,10 +45,13 @@
         <template #bodyHeader>
           <AposDocsManagerToolbar
             :selected-state="selectAllState"
-            :total-pages="totalPages" :current-page="currentPage"
-            :filters="toolbarFilters" :labels="moduleLabels"
+            :total-pages="totalPages"
+            :current-page="currentPage"
+            :filters="toolbarFilters"
+            :labels="moduleLabels"
             :disable="relationshipErrors === 'min'"
-            :options="{ hideSelectAll: !relationshipField }"
+            :displayed-items="items.length"
+            :checked-count="checked.length"
             @page-change="updatePage"
             @select-click="selectClick"
             @search="search"

package/modules/@apostrophecms/image-widget/index.js

@@ -3,7 +3,8 @@ module.exports = {
   options: {
     label: 'apostrophe:image',
     className: false,
-    icon: 'image-icon'
+    icon: 'image-icon',
+    dimensionAttrs: false
   },
   fields: {
     add: {

package/modules/@apostrophecms/image-widget/views/widget.html

@@ -4,15 +4,25 @@
   {% set className = data.manager.options.className %}
 {% endif %}
 
+{% if data.options.dimensionAttrs %}
+  {% set dimensionAttrs = data.options.dimensionAttrs %}
+{% elif data.manager.options.dimensionAttrs  %}
+  {% set dimensionAttrs = data.manager.options.dimensionAttrs  %}
+{% endif %}
+
 {% set attachment = apos.image.first(data.widget._image) %}
 
 {% if attachment %}
-  <img{% if className %} class="{{ className }}"{% endif %}
+  <img {% if className %} class="{{ className }}"{% endif %}
     srcset="{{ apos.image.srcset(attachment) }}"
     src="{{ apos.attachment.url(attachment, { size: data.options.size or 'full' }) }}"
     alt="{{ attachment._alt or '' }}"
+    {% if dimensionAttrs %}
+      {% if attachment.width %} width="{{ attachment.width }}" {% endif %}
+      {% if attachment.height %} height="{{ attachment.height }}" {% endif %}
+    {% endif %}
     {% if data.contextOptions and data.contextOptions.sizes %}
       sizes="{{ data.contextOptions.sizes }}"
     {% endif %}
   />
-{% endif %}
+{% endif %}