apostrophe 3.4.1 → 3.8.0

package/modules/@apostrophecms/schema/ui/apos/components/AposInputSelect.vue

@@ -49,9 +49,27 @@ export default {
       choices: []
     };
   },
-  mounted() {
+  async mounted() {
+    let choices;
+    if (typeof this.field.choices === 'string') {
+      const action = this.options.action;
+      const response = await apos.http.get(
+        `${action}/choices`,
+        {
+          qs: {
+            fieldId: this.field._id
+          },
+          busy: true
+        }
+      );
+      if (response.choices) {
+        choices = response.choices;
+      }
+    } else {
+      choices = this.field.choices;
+    }
     // Add an null option if there isn't one already
-    if (!this.field.required && !this.field.choices.find(choice => {
+    if (!this.field.required && !choices.find(choice => {
       return choice.value === null;
     })) {
       this.choices.push({
@@ -59,12 +77,12 @@ export default {
         value: null
       });
     }
-    this.choices = this.choices.concat(this.field.choices);
+    this.choices = this.choices.concat(choices);
     this.$nextTick(() => {
       // this has to happen on nextTick to avoid emitting before schemaReady is
       // set in AposSchema
-      if (this.field.required && (this.next == null) && (this.field.choices[0] != null)) {
-        this.next = this.field.choices[0].value;
+      if (this.field.required && (this.next == null) && (this.choices[0] != null)) {
+        this.next = this.choices[0].value;
       }
     });
   },
@@ -74,7 +92,7 @@ export default {
         return 'required';
       }
 
-      if (value && !this.field.choices.find(choice => choice.value === value)) {
+      if (value && !this.choices.find(choice => choice.value === value)) {
         return 'invalid';
       }
 

package/modules/@apostrophecms/schema/ui/apos/components/AposInputSlug.vue

@@ -73,10 +73,6 @@ export default {
     icon () {
       if (this.error) {
         return 'circle-medium-icon';
-      } else if (this.field.type === 'date') {
-        return 'calendar-icon';
-      } else if (this.field.type === 'time') {
-        return 'clock-icon';
       } else if (this.field.icon) {
         return this.field.icon;
       } else {

package/modules/@apostrophecms/schema/ui/apos/components/AposInputString.vue

@@ -71,10 +71,6 @@ export default {
     icon () {
       if (this.error) {
         return 'circle-medium-icon';
-      } else if (this.field.type === 'date') {
-        return 'calendar-icon';
-      } else if (this.field.type === 'time') {
-        return 'clock-icon';
       } else if (this.field.icon) {
         return this.field.icon;
       } else {
@@ -207,9 +203,6 @@ export default {
     // height of date/time input is slightly larger than others due to the browser spinner ui
     height: 46px;
     padding-right: 40px;
-    &::-webkit-calendar-picker-indicator {
-      background: none;
-    }
   }
   .apos-input--date {
     &::-webkit-clear-button {

package/modules/@apostrophecms/schema/ui/apos/components/AposSchema.vue

@@ -10,8 +10,9 @@
       <component
         v-show="displayComponent(field.name)"
         v-model="fieldState[field.name]"
-        :following-values="followingValues[field.name]"
         :is="fieldComponentMap[field.type]"
+        :following-values="followingValues[field.name]"
+        :condition-met="conditionalFields[field.name]"
         :field="fields[field.name].field"
         :modifiers="fields[field.name].modifiers"
         :display-options="getDisplayOptions(field.name)"
@@ -89,7 +90,11 @@ export default {
       }
     }
   },
-  emits: [ 'input', 'reset' ],
+  emits: [
+    'input',
+    'reset',
+    'validate'
+  ],
   data() {
     return {
       schemaReady: false,
@@ -112,7 +117,10 @@ export default {
           data: this.value[item.name]
         };
         fields[item.name].serverError = this.serverErrors && this.serverErrors[item.name];
-        fields[item.name].modifiers = this.modifiers;
+        fields[item.name].modifiers = [
+          ...(this.modifiers || []),
+          ...(item.modifiers || [])
+        ];
       });
       return fields;
     }
@@ -142,6 +150,20 @@ export default {
           this.populateDocData();
         }
       }
+    },
+    conditionalFields(newVal, oldVal) {
+      for (const field in oldVal) {
+        if (!this.fieldState[field] || (newVal[field] === oldVal[field]) || !this.fieldState[field].ranValidation) {
+          continue;
+        }
+
+        if (
+          (newVal[field] === false) ||
+          (newVal[field] && this.fieldState[field].ranValidation)
+        ) {
+          this.$emit('validate');
+        }
+      }
     }
   },
   created() {

package/modules/@apostrophecms/schema/ui/apos/mixins/AposInputMixin.js

@@ -22,6 +22,10 @@ export default {
       type: Object,
       required: false
     },
+    conditionMet: {
+      type: Boolean,
+      required: false
+    },
     triggerValidation: {
       type: Boolean,
       default: false
@@ -117,10 +121,14 @@ export default {
     // You must supply the validate method. It receives the
     // internal representation used for editing (a string, for instance)
     validateAndEmit () {
-      const error = this.validate(this.next);
+      // If the field is conditional and isn't shown, disregard any errors.
+      const error = this.conditionMet === false ? false
+        : this.validate(this.next);
       this.$emit('input', {
         data: error ? this.next : this.convert(this.next),
-        error: this.validate(this.next)
+        error,
+        ranValidation: this.conditionMet === false ? this.value.ranValidation
+          : true
       });
     },
     watchValue () {

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

@@ -219,8 +219,8 @@ module.exports = {
         };
         addCloneMethod(req);
         req.res.__ = req.__;
-        const { role, ..._properties } = options || {};
-        Object.assign(req, _properties);
+        const { _role, ...properties } = options || {};
+        Object.assign(req, properties);
         self.apos.i18n.setPrefixUrls(req);
         return req;
 

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

@@ -61,11 +61,14 @@ module.exports = {
       prefix: self.apos.prefix
     };
 
+    self.envs = {};
+
     self.filters = {};
 
     self.nunjucks = self.options.language || require('nunjucks');
 
     self.insertions = {};
+
   },
   handlers(self) {
     return {
@@ -248,6 +251,34 @@ module.exports = {
 
         let result;
 
+        const args = self.getRenderArgs(req, data, module);
+
+        const env = self.getEnv(req, module);
+
+        if (type === 'file') {
+          let finalName = s;
+          if (!finalName.match(/\.\w+$/)) {
+            finalName += '.html';
+          }
+          result = await Promise.promisify(function (finalName, args, callback) {
+            return env.getTemplate(finalName).render(args, callback);
+          })(finalName, args);
+        } else if (type === 'string') {
+          result = await Promise.promisify(function (s, args, callback) {
+            return env.renderString(s, args, callback);
+          })(s, args);
+        } else {
+          throw new Error('renderBody does not support the type ' + type);
+        }
+        return result;
+      },
+
+      // Implementation detail of `renderBody` responsible for
+      // creating the input object passed to Nunjucks for rendering,
+      // with `data` merged into the `.data` property,
+      // `apos` available separately, `__req` available separately, etc.
+
+      getRenderArgs(req, data, module) {
         const merged = {};
 
         if (data) {
@@ -278,8 +309,6 @@ module.exports = {
 
         args.data.locale = args.data.locale || req.locale;
 
-        const env = self.getEnv(req, module);
-
         args.apos = self.templateApos;
         args.__t = req.t;
         args.__ = key => {
@@ -289,39 +318,39 @@ module.exports = {
           `);
           return key;
         };
-        if (type === 'file') {
-          let finalName = s;
-          if (!finalName.match(/\.\w+$/)) {
-            finalName += '.html';
+        args.__req = req;
+        args.getOption = (key, def) => {
+          const colonAt = key.indexOf(':');
+          let optionModule = self.apos.modules[module.__meta.name];
+          if (colonAt !== -1) {
+            const name = key.substring(0, colonAt);
+            key = key.substring(colonAt + 1);
+            optionModule = self.apos.modules[name];
           }
-          result = await Promise.promisify(function (finalName, args, callback) {
-            return env.getTemplate(finalName).render(args, callback);
-          })(finalName, args);
-        } else if (type === 'string') {
-          result = await Promise.promisify(function (s, args, callback) {
-            return env.renderString(s, args, callback);
-          })(s, args);
-        } else {
-          throw new Error('renderBody does not support the type ' + type);
-        }
-        return result;
+          return optionModule.getOption(req, key, def);
+        };
+        return args;
       },
 
       // Fetch a nunjucks environment in which `include`, `extends`, etc. search
       // the views directories of the specified module and its ancestors.
       // Typically you will call `self.render` or `self.partial` on your module
       // object rather than calling this directly.
+      //
+      // `req` is effectively here for bc purposes only. This method
+      // does NOT always pass `req` to `newEnv` for every new release, as
+      // `req` is separately supplied to each request to fix a memory leak
+      // that occurs when Nunjucks environments are created for every request.
 
       getEnv(req, module) {
         const name = module.__meta.name;
-
-        req.envs = req.envs || {};
-        // Cache for performance
-        if (_.has(req.envs, name)) {
-          return req.envs[name];
+        if (!_.has(self.envs, name)) {
+          // Pass the original req for bc purposes only,
+          // note that due to the reuse of envs there is
+          // no guarantee newEnv will be called for every req
+          self.envs[name] = self.newEnv(req, name, self.getViewFolders(module));
         }
-        req.envs[name] = self.newEnv(req, name, self.getViewFolders(module));
-        return req.envs[name];
+        return self.envs[name];
       },
 
       getViewFolders(module) {
@@ -343,7 +372,14 @@ module.exports = {
       // specified directories are searched for includes,
       // etc. Don't call this directly, use:
       //
-      // apos.template.getEnv(module)
+      // apos.template.getEnv(req, module)
+      //
+      // `req` is effectively here for bc purposes only. Apostrophe
+      // does NOT always pass `req` to `newEnv` for every new release, as
+      // `req` is separately supplied to each request to fix a memory leak
+      // that occurs when Nunjucks environments are created for every request.
+      // If you must access `req` in a custom Nunjucks tag use
+      // `context.ctx.__req`, NOT `env.opts.req` which is no longer provided.
 
       newEnv(req, moduleName, dirs) {
 
@@ -351,22 +387,11 @@ module.exports = {
 
         const env = new self.nunjucks.Environment(loader, {
           autoescape: true,
-          req,
           module: self.apos.modules[moduleName]
         });
 
         env.addGlobal('apos', self.templateApos);
         env.addGlobal('module', self.templateApos.modules[moduleName]);
-        env.addGlobal('getOption', function(key, def) {
-          const colonAt = key.indexOf(':');
-          let optionModule = self.apos.modules[moduleName];
-          if (colonAt !== -1) {
-            const name = key.substring(0, colonAt);
-            key = key.substring(colonAt + 1);
-            optionModule = self.apos.modules[name];
-          }
-          return optionModule.getOption(req, key, def);
-        });
 
         self.addStandardFilters(env);
 
@@ -627,6 +652,8 @@ module.exports = {
           locale: req.locale,
           csrfCookieName: self.apos.csrfCookieName,
           tabId: self.apos.util.generateId(),
+          uploadsUrl: self.apos.attachment.uploadfs.getUrl(),
+          assetBaseUrl: self.apos.asset.getAssetBaseUrl(),
           scene
         };
         if (req.user) {

package/modules/@apostrophecms/template/lib/custom-tags/component.js

@@ -23,7 +23,7 @@ module.exports = function(self) {
     },
     // Do the actual work
     async run(context, name, data) {
-      const req = context.env.opts.req;
+      const req = context.ctx.__req;
       if (!data) {
         data = {};
       }

package/modules/@apostrophecms/template/lib/custom-tags/render.js

@@ -98,9 +98,8 @@ module.exports = (self) => {
       const source = info.body();
       const input = createRenderInput(info);
 
-      const req = context.env.opts.req;
+      const req = context.ctx.__req;
       const env = self.getEnv(req, context.env.opts.module);
-      input.apos = self.templateApos;
 
       // attach the render caller as a function
       // it's just a string, but we keep
@@ -108,6 +107,11 @@ module.exports = (self) => {
       input.rendercaller = rendercaller;
 
       const result = await require('util').promisify((s, args, callback) => {
+        args = {
+          ...self.getRenderArgs(req, {}, context.env.opts.module),
+          // Parameters to fragments are top level, they are not in `data`
+          ...args
+        };
         return env.renderString(s, args, callback);
       })(source, input);
       return result;

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

@@ -1,6 +1,7 @@
 module.exports = {
   options: {
-    alias: 'ui'
+    alias: 'ui',
+    widgetMargin: '20px 0'
   },
   icons: {
     'earth-icon': 'Earth',
@@ -21,7 +22,10 @@ module.exports = {
         if (req.data.user && req.data.user.aposThemePrimary) {
           theme.primary = req.data.user.aposThemePrimary;
         }
-        return { theme };
+        return {
+          theme,
+          widgetMargin: self.options.widgetMargin
+        };
       }
     };
   }

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

@@ -1,5 +1,9 @@
 <template>
-  <span v-apos-tooltip="tooltip" class="apos-button__wrapper">
+  <span
+    v-apos-tooltip="tooltip"
+    class="apos-button__wrapper"
+    :class="{ 'apos-button__wrapper--block': modifiers.includes('block') }"
+  >
     <component
       :is="href ? 'a' : 'button'"
       v-on="href ? {} : {click: click}"
@@ -11,6 +15,7 @@
       :type="buttonType"
       :role="role"
       :id="attrs.id ? attrs.id : id"
+      :style="{color: textColor}"
       v-bind="attrs"
     >
       <transition name="fade">
@@ -67,6 +72,10 @@ export default {
       type: String,
       default: null
     },
+    textColor: {
+      type: String,
+      default: null
+    },
     href: {
       type: [ String, Boolean ],
       default: false
@@ -332,6 +341,9 @@ export default {
         color: var(--a-base-5);
       }
     }
+    .apos-button__label {
+      line-height: var(--a-line-tall);
+    }
   }
 
   .apos-button--subtle {
@@ -395,8 +407,6 @@ export default {
     box-sizing: border-box;
     display: block;
     width: 100%;
-    height: 47px;
-    max-width: 400px;
   }
 
   .apos-button--icon-right {
@@ -574,6 +584,10 @@ export default {
     padding: 3px;
   }
 
+  .apos-button--uppercase .apos-button__label {
+    text-transform: uppercase;
+  }
+
   .apos-button--inline {
     padding: 0;
     &, &[disabled], &:hover, &:active, &:focus {
@@ -605,6 +619,10 @@ export default {
     display: inline-block;
   }
 
+  .apos-button__wrapper--block {
+    display: block;
+  }
+
   @keyframes animateGradient {
     0% {
       background-position: 0% 50%;

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

@@ -64,7 +64,7 @@ export default {
   .apos-table__cell-field--context-menu__content {
     @include apos-transition();
     display: inline-block;
-    opacity: 0;
+    opacity: 0.3;
     &.apos-is-visible {
       opacity: 1;
     }

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

@@ -0,0 +1,205 @@
+<template>
+  <div>
+    <label
+      class="apos-input-wrapper apos-file-dropzone"
+      :class="{
+        'apos-file-dropzone--dragover': dragging,
+        'apos-is-disabled': disabled || fileOrAttachment
+      }"
+      @drop.prevent="uploadFile"
+      @dragover="dragHandler"
+      @dragleave="dragging = false"
+    >
+      <p class="apos-file-instructions">
+        <template v-if="dragging">
+          <cloud-upload-icon :size="38" />
+        </template>
+        <AposSpinner v-else-if="uploading" />
+        <template v-else>
+          <paperclip-icon :size="14" class="apos-file-icon" />
+          {{ messages.primary }}&nbsp;
+          <span class="apos-file-highlight" v-if="messages.highlighted">
+            {{ messages.highlighted }}
+          </span>
+        </template>
+      </p>
+      <input
+        type="file"
+        class="apos-sr-only"
+        :disabled="disabled || fileOrAttachment"
+        @input="uploadFile"
+        :accept="allowedExtensions"
+      >
+    </label>
+    <div v-if="fileOrAttachment" class="apos-file-files">
+      <AposSlatList
+        :value="[fileOrAttachment]"
+        @input="update"
+        :disabled="readOnly"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    uploading: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    attachment: {
+      type: Object,
+      default: null
+    },
+    allowedExtensions: {
+      type: String,
+      default: '*'
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+    def: {
+      type: String,
+      default: null
+    }
+  },
+  emits: [ 'upload-file', 'update' ],
+  data () {
+    return {
+      selectedFile: null,
+      dragging: false
+    };
+  },
+  computed: {
+    fileOrAttachment () {
+      return this.selectedFile || this.attachment;
+    },
+    messages () {
+      const msgs = {
+        primary: 'Drop a file here or',
+        highlighted: 'click to open the file explorer'
+      };
+      if (this.disabled) {
+        msgs.primary = 'Field is disabled';
+        msgs.highlighted = '';
+      }
+      if (this.fileOrAttachment) {
+        msgs.primary = 'Attachment limit reached';
+        msgs.highlighted = '';
+      }
+      return msgs;
+    }
+  },
+  methods: {
+    async uploadFile ({ target, dataTransfer }) {
+      this.dragging = false;
+      const [ file ] = target.files ? target.files : (dataTransfer.files || []);
+
+      const extension = file.name.split('.').pop();
+      const allowedFile = await this.checkFileGroup(`.${extension}`);
+
+      if (!allowedFile) {
+        return;
+      }
+
+      this.selectedFile = {
+        _id: file.name,
+        title: file.name,
+        extension,
+        _url: URL.createObjectURL(file)
+      };
+
+      this.$emit('upload-file', file);
+    },
+    dragHandler (event) {
+      event.preventDefault();
+
+      if (!this.disabled && !this.dragging) {
+        this.dragging = true;
+      }
+    },
+    update(items) {
+      if (this.selectedFile && this.selectedFile._url) {
+        URL.revokeObjectURL(this.selectedFile._url);
+      }
+
+      this.selectedFile = null;
+      this.$emit('update', items);
+    },
+    async checkFileGroup(fileExt) {
+      const allowedExt = this.allowedExtensions.split(',');
+      const allowed = allowedExt.includes(fileExt);
+
+      if (!allowed) {
+        await apos.notify('apostrophe:fileTypeNotAccepted', {
+          type: 'warning',
+          icon: 'alert-circle-icon',
+          interpolate: {
+            extensions: this.allowedExtensions
+          }
+        });
+      }
+
+      return allowed;
+    }
+  }
+};
+</script>
+<style scoped lang='scss'>
+  .apos-file-dropzone {
+    @include apos-button-reset();
+    @include type-base;
+    display: block;
+    margin: 10px 0;
+    padding: 20px;
+    border: 2px dashed var(--a-base-8);
+    border-radius: var(--a-border-radius);
+    transition: all 0.2s ease;
+    &:hover {
+      border-color: var(--a-primary);
+      background-color: var(--a-base-10);
+    }
+    &:active,
+    &:focus {
+      border: 2px solid var(--a-primary);
+    }
+    &.apos-is-disabled {
+      color: var(--a-base-4);
+      background-color: var(--a-base-7);
+      border-color: var(--a-base-4);
+
+      &:hover {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  .apos-file-dropzone--dragover {
+    border: 2px dashed var(--a-primary);
+    background-color: var(--a-base-10);
+  }
+
+  .apos-file-instructions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    // v-html goofiness
+    & ::v-deep .apos-file-highlight {
+      color: var(--a-primary);
+      font-weight: var(--a-weight-bold);
+    }
+  }
+
+  .apos-file-icon {
+    transform: rotate(45deg);
+    margin-right: 5px;
+  }
+</style>