apostrophe 3.53.0 → 3.55.0

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

@@ -27,90 +27,10 @@
 </template>
 
 <script>
-import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin.js';
-import AposInputFollowingMixin from 'Modules/@apostrophecms/schema/mixins/AposInputFollowingMixin.js';
-import AposInputConditionalFieldsMixin from 'Modules/@apostrophecms/schema/mixins/AposInputConditionalFieldsMixin.js';
-
+import AposInputObjectLogic from '../logic/AposInputObject';
 export default {
   name: 'AposInputObject',
-  mixins: [
-    AposInputMixin,
-    AposInputFollowingMixin,
-    AposInputConditionalFieldsMixin
-  ],
-  props: {
-    generation: {
-      type: Number,
-      required: false,
-      default() {
-        return null;
-      }
-    },
-    docId: {
-      type: String,
-      required: false,
-      default() {
-        return null;
-      }
-    }
-  },
-  data () {
-    const next = this.getNext();
-    return {
-      schemaInput: {
-        data: next
-      },
-      next
-    };
-  },
-  computed: {
-    followingValuesWithParent() {
-      return this.computeFollowingValues(this.schemaInput.data);
-    },
-    // Reqiured for AposInputConditionalFieldsMixin
-    schema() {
-      return this.field.schema;
-    },
-    values() {
-      return this.schemaInput.data;
-    }
-  },
-  watch: {
-    schemaInput: {
-      deep: true,
-      handler() {
-        if (!this.schemaInput.hasErrors) {
-          this.next = this.schemaInput.data;
-        }
-        // Our validate method was called first before that of
-        // the subfields, so remedy that by calling again on any
-        // change to the subfield state during validation
-        if (this.triggerValidation) {
-          this.validateAndEmit();
-        }
-      }
-    },
-    generation() {
-      this.next = this.getNext();
-      this.schemaInput = {
-        data: this.next
-      };
-    }
-  },
-  async created() {
-    await this.evaluateExternalConditions();
-  },
-  methods: {
-    validate (value) {
-      if (this.schemaInput.hasErrors) {
-        return 'invalid';
-      }
-    },
-    // Return next at mount or when generation changes
-    getNext() {
-      return this.value ? this.value.data : (this.field.def || {});
-    }
-  }
+  mixins: [ AposInputObjectLogic ]
 };
 </script>
 

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

@@ -23,44 +23,9 @@
 </template>
 
 <script>
-import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
-
+import AposInputPasswordLogic from '../logic/AposInputPassword';
 export default {
   name: 'AposInputPassword',
-  mixins: [ AposInputMixin ],
-  emits: [ 'return' ],
-  computed: {
-    tabindex () {
-      return this.field.disableFocus ? '-1' : '0';
-    }
-  },
-  methods: {
-    validate(value) {
-      if (this.field.required) {
-        if (!value.length) {
-          return { message: 'required' };
-        }
-      }
-      if (this.field.min) {
-        if (value.length && (value.length < this.field.min)) {
-          return {
-            message: this.$t('apostrophe:passwordErrorMin', {
-              min: this.field.min
-            })
-          };
-        }
-      }
-      if (this.field.max) {
-        if (value.length && (value.length > this.field.max)) {
-          return {
-            message: this.$t('apostrophe:passwordErrorMax', {
-              max: this.field.max
-            })
-          };
-        }
-      }
-      return false;
-    }
-  }
+  mixins: [ AposInputPasswordLogic ]
 };
 </script>

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

@@ -42,34 +42,10 @@
 </template>
 
 <script>
-import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
-import AposInputChoicesMixin from 'Modules/@apostrophecms/schema/mixins/AposInputChoicesMixin';
-import InformationIcon from 'vue-material-design-icons/Information.vue';
-
+import AposInputRadioLogic from '../logic/AposInputRadio';
 export default {
   name: 'AposInputRadio',
-  components: { InformationIcon },
-  mixins: [ AposInputMixin, AposInputChoicesMixin ],
-  methods: {
-    getChoiceId(uid, value) {
-      return (uid + JSON.stringify(value)).replace(/\s+/g, '');
-    },
-    validate(value) {
-      if (this.field.required && (value === '')) {
-        return 'required';
-      }
-
-      if (value && !this.choices.find(choice => choice.value === value)) {
-        return 'invalid';
-      }
-
-      return false;
-    },
-    change(value) {
-      // Allows expression of non-string values
-      this.next = this.choices.find(choice => choice.value === JSON.parse(value)).value;
-    }
-  }
+  mixins: [ AposInputRadioLogic ]
 };
 </script>
 

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

@@ -51,65 +51,10 @@
 </template>
 
 <script>
-import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
-
+import AposInputRangeLogic from '../logic/AposInputRange';
 export default {
   name: 'AposInputRange',
-  mixins: [ AposInputMixin ],
-  data() {
-    return {
-      unit: this.field.unit || ''
-    };
-  },
-  computed: {
-    minLabel() {
-      return this.field.min + this.unit;
-    },
-    maxLabel() {
-      return this.field.max + this.unit;
-    },
-    valueLabel() {
-      return this.next + this.unit;
-    },
-    isSet() {
-      // Detect whether or not a range is currently unset
-      // Use this flag to hide/show UI elements
-      if (this.next >= this.field.min) {
-        return true;
-      } else {
-        return false;
-      }
-    }
-  },
-  mounted() {
-    // The range spec defaults to a value of midway between the min and max
-    // Example: a range with an unset value and a min of 0 and max of 100 will become 50
-    // This does not allow ranges to go unset :(
-    if (!this.next) {
-      this.unset();
-    }
-  },
-  methods: {
-    // Default to a value outside the range when no def is defined,
-    // to be used as a flag.
-    // The value will be set to null later in validation
-    unset() {
-      this.next = typeof this.field.def === 'number'
-        ? this.field.def
-        : this.field.min - 1;
-    },
-    validate(value) {
-      if (this.field.required) {
-        if (!value) {
-          return 'required';
-        }
-      }
-      return false;
-    },
-    convert(value) {
-      return parseFloat(value);
-    }
-  }
+  mixins: [ AposInputRangeLogic ]
 };
 </script>
 

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

@@ -76,267 +76,10 @@
 </template>
 
 <script>
-import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
-import { klona } from 'klona';
-
+import AposInputRelationshipLogic from '../logic/AposInputRelationship';
 export default {
   name: 'AposInputRelationship',
-  mixins: [ AposInputMixin ],
-  emits: [ 'input' ],
-  data () {
-    const next = (this.value && Array.isArray(this.value.data))
-      ? klona(this.value.data) : (klona(this.field.def) || []);
-
-    // Remember relationship subfield values even if a document
-    // is temporarily deselected, easing the user's pain if they
-    // inadvertently deselect something for a moment
-    const subfields = Object.fromEntries(
-      (next || []).filter(doc => doc._fields)
-        .map(doc => [ doc._id, doc._fields ])
-    );
-
-    return {
-      searchTerm: '',
-      searchList: [],
-      next,
-      subfields,
-      disabled: false,
-      searching: false,
-      choosing: false,
-      relationshipSchema: null
-    };
-  },
-  computed: {
-    limitReached() {
-      return this.field.max === this.next.length;
-    },
-    pluralLabel() {
-      return apos.modules[this.field.withType].pluralLabel;
-    },
-    // TODO get 'Search' server for better i18n
-    placeholder() {
-      return this.field.placeholder || {
-        key: 'apostrophe:searchDocType',
-        type: this.$t(this.pluralLabel)
-      };
-    },
-    // TODO get 'Browse' for better i18n
-    browseLabel() {
-      return {
-        key: 'apostrophe:browseDocType',
-        type: this.$t(this.pluralLabel)
-      };
-    },
-    suggestion() {
-      return {
-        disabled: true,
-        tooltip: false,
-        icon: false,
-        classes: [ 'suggestion' ],
-        title: this.$t(this.field.suggestionLabel),
-        help: this.$t({
-          key: this.field.suggestionHelp || 'apostrophe:relationshipSuggestionHelp',
-          type: this.$t(this.pluralLabel)
-        }),
-        customFields: [ 'help' ]
-      };
-    },
-    hint() {
-      return {
-        disabled: true,
-        tooltip: false,
-        icon: 'binoculars-icon',
-        iconSize: 35,
-        classes: [ 'hint' ],
-        title: this.$t('apostrophe:relationshipSuggestionNoResults'),
-        help: this.$t({
-          key: this.field.browse
-            ? 'apostrophe:relationshipSuggestionSearchAndBrowse'
-            : 'apostrophe:relationshipSuggestionSearch',
-          type: this.$t(this.pluralLabel)
-        }),
-        customFields: [ 'help' ]
-      };
-    },
-    chooserComponent () {
-      return apos.modules[this.field.withType].components.managerModal;
-    },
-    disableUnpublished() {
-      return apos.modules[this.field.withType].localized;
-    },
-    buttonModifiers() {
-      const modifiers = [ 'small' ];
-      if (this.modifiers.includes('no-search')) {
-        modifiers.push('block');
-      }
-      return modifiers;
-    },
-    minSize() {
-      const [ widgetOptions = {} ] = apos.area.widgetOptions;
-
-      return widgetOptions.minSize || [];
-    },
-    duplicate () {
-      return this.value.duplicate ? 'apos-input--error' : null;
-    }
-  },
-  watch: {
-    next(after, before) {
-      for (const doc of before) {
-        this.subfields[doc._id] = doc._fields;
-      }
-      for (const doc of after) {
-        if (Object.keys(doc._fields || {}).length) {
-          continue;
-        }
-        doc._fields = this.field.schema && (this.subfields[doc._id]
-          ? this.subfields[doc._id]
-          : this.getDefault());
-      }
-    }
-  },
-  mounted () {
-    this.checkLimit();
-  },
-  methods: {
-    validate(value) {
-      this.checkLimit();
-
-      if (this.field.required && !value.length) {
-        return { message: 'required' };
-      }
-
-      if (this.field.min && this.field.min > value.length) {
-        return { message: `minimum of ${this.field.min} required` };
-      }
-
-      return false;
-    },
-    checkLimit() {
-      if (this.limitReached) {
-        this.searchTerm = 'Limit reached!';
-      } else if (this.searchTerm === 'Limit reached!') {
-        this.searchTerm = '';
-      }
-
-      this.disabled = !!this.limitReached;
-    },
-    updateSelected(items) {
-      this.next = items;
-    },
-    async search(qs) {
-      if (this.field.suggestionLimit) {
-        qs.perPage = this.field.suggestionLimit;
-      }
-      if (this.field.suggestionSort) {
-        qs.sort = this.field.suggestionSort;
-      }
-      if (this.field.withType === '@apostrophecms/image') {
-        apos.bus.$emit('piece-relationship-query', qs);
-      }
-
-      this.searching = true;
-      const list = await apos.http.get(
-        apos.modules[this.field.withType].action,
-        {
-          busy: false,
-          draft: true,
-          qs
-        }
-      );
-
-      const removeSelectedItem = item => !this.next.map(i => i._id).includes(item._id);
-      const formatItems = item => ({
-        ...item,
-        disabled: this.disableUnpublished && !item.lastPublishedAt
-      });
-
-      const results = (list.results || [])
-        .filter(removeSelectedItem)
-        .map(formatItems);
-
-      const suggestion = !qs.autocomplete && this.suggestion;
-      const hint = (!qs.autocomplete || !results.length) && this.hint;
-
-      this.searchList = [ suggestion, ...results, hint ].filter(Boolean);
-      this.searching = false;
-    },
-    async input () {
-      if (this.searching) {
-        return;
-      }
-
-      const trimmed = this.searchTerm.trim();
-      const qs = trimmed.length
-        ? {
-          autocomplete: trimmed
-        }
-        : {};
-
-      await this.search(qs);
-    },
-    handleFocusOut() {
-      // hide search list when click outside the input
-      // timeout to execute "@select" method before
-      setTimeout(() => {
-        this.searchList = [];
-      }, 200);
-    },
-    watchValue () {
-      this.error = this.value.error;
-      // Ensure the internal state is an array.
-      this.next = Array.isArray(this.value.data) ? this.value.data : [];
-    },
-    async choose () {
-      const result = await apos.modal.execute(this.chooserComponent, {
-        title: this.field.label || this.field.name,
-        moduleName: this.field.withType,
-        chosen: this.next,
-        relationshipField: this.field
-      });
-      if (result) {
-        this.updateSelected(result);
-      }
-    },
-    async editRelationship (item) {
-      const editor = this.field.editor || 'AposRelationshipEditor';
-
-      const result = await apos.modal.execute(editor, {
-        schema: this.field.schema,
-        item,
-        title: item.title,
-        value: item._fields
-      });
-
-      if (result) {
-        const index = this.next.findIndex(_item => _item._id === item._id);
-        this.$set(this.next, index, {
-          ...this.next[index],
-          _fields: result
-        });
-      }
-    },
-    getEditRelationshipLabel () {
-      if (this.field.editor === 'AposImageRelationshipEditor') {
-        return 'apostrophe:editImageAdjustments';
-      }
-    },
-    getDefault() {
-      const object = {};
-      this.field.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');
-        object[field.name] = hasDefaultValue
-          ? klona(field.def)
-          : null;
-      });
-      return object;
-    }
-  }
+  mixins: [ AposInputRelationshipLogic ]
 };
 </script>
 

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

@@ -20,45 +20,9 @@
 </template>
 
 <script>
-import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
-import AposInputChoicesMixin from 'Modules/@apostrophecms/schema/mixins/AposInputChoicesMixin';
-
+import AposInputSelectLogic from '../logic/AposInputSelect';
 export default {
   name: 'AposInputSelect',
-  mixins: [ AposInputMixin, AposInputChoicesMixin ],
-  props: {
-    icon: {
-      type: String,
-      default: 'menu-down-icon'
-    }
-  },
-  data() {
-    return {
-      next: (this.value.data == null) ? null : this.value.data,
-      choices: []
-    };
-  },
-  computed: {
-    classes () {
-      return [ this.value.duplicate && 'apos-input--error' ];
-    }
-  },
-  methods: {
-    validate(value) {
-      if (this.field.required && (value === null)) {
-        return 'required';
-      }
-
-      if (value && !this.choices.find(choice => choice.value === value)) {
-        return 'invalid';
-      }
-
-      return false;
-    },
-    change(value) {
-      // Allows expression of non-string values
-      this.next = this.choices.find(choice => choice.value === value).value;
-    }
-  }
+  mixins: [ AposInputSelectLogic ]
 };
 </script>