apostrophe 3.53.0 → 3.55.0

package/modules/@apostrophecms/schema/ui/apos/logic/AposInputAttachment.js

@@ -0,0 +1,81 @@
+
+import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin.js';
+
+export default {
+  name: 'AposInputAttachment',
+  mixins: [ AposInputMixin ],
+  emits: [ 'upload-started', 'upload-complete' ],
+  data () {
+    return {
+      // Next should consistently be an object or null (an attachment field with
+      // no value yet is null, per server side).
+      next: (this.value && (typeof this.value.data === 'object'))
+        ? this.value.data : (this.field.def || null),
+      disabled: false,
+      uploading: false
+    };
+  },
+  async mounted () {
+    this.disabled = this.field.readOnly;
+  },
+  methods: {
+    updated (items) {
+      // NOTE: This is limited to a single item.
+      this.next = items.length > 0 ? items[0] : null;
+    },
+    validate (value) {
+      if (this.field.required && !value) {
+        return 'required';
+      }
+
+      return false;
+    },
+    async uploadMedia (file) {
+      if (!this.disabled || !this.limitReached) {
+        try {
+          this.disabled = true;
+          this.uploading = true;
+
+          await apos.notify('apostrophe:uploading', {
+            dismiss: true,
+            icon: 'cloud-upload-icon',
+            interpolate: {
+              name: file.name
+            }
+          });
+
+          const formData = new window.FormData();
+          formData.append('file', file);
+          const attachment = await apos.http.post('/api/v1/@apostrophecms/attachment/upload', {
+            body: formData
+          });
+
+          await apos.notify('apostrophe:uploaded', {
+            type: 'success',
+            dismiss: true,
+            icon: 'check-all-icon',
+            interpolate: {
+              name: file.name,
+              count: 1
+            }
+          });
+
+          this.$emit('upload-complete');
+          this.value.data = attachment;
+        } catch (error) {
+          console.error('Error uploading file.', error);
+          const msg = error.body && error.body.message ? error.body.message : this.$t('apostrophe:uploadError');
+          await apos.notify(msg, {
+            type: 'danger',
+            icon: 'alert-circle-icon',
+            dismiss: true,
+            localize: false
+          });
+        } finally {
+          this.disabled = false;
+          this.uploading = false;
+        }
+      }
+    }
+  }
+};

package/modules/@apostrophecms/schema/ui/apos/logic/AposInputBoolean.js

@@ -0,0 +1,48 @@
+
+import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
+
+export default {
+  name: 'AposInputBoolean',
+  mixins: [ AposInputMixin ],
+  computed: {
+    classList: function () {
+      return [
+        'apos-input-wrapper',
+        'apos-boolean',
+        {
+          'apos-boolean--toggle': this.field.toggle
+        }
+      ];
+    },
+    trueLabel: function () {
+      if (this.field.toggle && this.field.toggle.true &&
+        typeof this.field.toggle.true === 'string') {
+        return this.field.toggle.true;
+      } else {
+        return false;
+      }
+    },
+    falseLabel: function () {
+      if (this.field.toggle && this.field.toggle &&
+        typeof this.field.toggle.false === 'string') {
+        return this.field.toggle.false;
+      } else {
+        return false;
+      }
+    }
+  },
+  methods: {
+    setValue(val) {
+      this.next = val;
+      this.$refs[(!val).toString()].checked = false;
+    },
+    validate(value) {
+      if (this.field.required) {
+        if (!value && value !== false) {
+          return 'required';
+        }
+      }
+      return false;
+    }
+  }
+};

package/modules/@apostrophecms/schema/ui/apos/logic/AposInputCheckboxes.js

@@ -0,0 +1,68 @@
+
+import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
+import AposInputChoicesMixin from 'Modules/@apostrophecms/schema/mixins/AposInputChoicesMixin';
+
+export default {
+  name: 'AposInputCheckboxes',
+  mixins: [ AposInputMixin, AposInputChoicesMixin ],
+  beforeMount () {
+    this.value.data = Array.isArray(this.value.data) ? this.value.data : [];
+  },
+  methods: {
+    getChoiceId(uid, value) {
+      return uid + value.replace(/\s/g, '');
+    },
+    watchValue () {
+      this.error = this.value.error;
+      this.next = this.value.data || [];
+    },
+    validate(values) {
+      // The choices and values should always be arrays.
+      if (!Array.isArray(this.choices) || !Array.isArray(values)) {
+        return 'malformed';
+      }
+
+      if (this.field.required && !values.length) {
+        return 'required';
+      }
+
+      if (this.field.min) {
+        if ((values != null) && (values.length < this.field.min)) {
+          return this.$t('apostrophe:minUi', { number: this.field.min });
+        }
+      }
+      if (this.field.max) {
+        if ((values != null) && (values.length > this.field.max)) {
+          return this.$t('apostrophe:maxUi', { number: this.field.max });
+        }
+      }
+
+      if (Array.isArray(values)) {
+        values.forEach(chosen => {
+          if (!this.choices.map(choice => {
+            return choice.value;
+          }).includes(chosen)) {
+            return 'invalid';
+          }
+        });
+      }
+
+      return false;
+    },
+    selectItems(choice) {
+      if (choice.value === '__all') {
+        this.value.data = this.choices.length === this.value.data.length
+          ? []
+          : this.choices.map(({ value }) => value);
+
+        return;
+      }
+
+      if (this.value.data.includes(choice.value)) {
+        this.value.data = this.value.data.filter((val) => val !== choice.value);
+      } else {
+        this.value.data.push(choice.value);
+      }
+    }
+  }
+};

package/modules/@apostrophecms/schema/ui/apos/logic/AposInputColor.js

@@ -0,0 +1,98 @@
+
+import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
+import Picker from '@apostrophecms/vue-color/src/components/Sketch';
+import tinycolor from 'tinycolor2';
+
+export default {
+  name: 'AposInputColor',
+  components: {
+    Picker
+  },
+  mixins: [ AposInputMixin ],
+  data() {
+    return {
+      active: false,
+      tinyColorObj: null,
+      startsNull: false,
+      defaultFormat: 'hex8',
+      defaultPickerOptions: {
+        presetColors: [
+          '#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321',
+          '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2',
+          '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF'
+        ],
+        disableAlpha: false,
+        disableFields: false
+      }
+    };
+  },
+  computed: {
+    buttonOptions() {
+      return {
+        label: this.field.label,
+        type: 'color',
+        color: this.value.data || ''
+      };
+    },
+    format() {
+      return this.field.options && this.field.options.format
+        ? this.field.options.format
+        : this.defaultFormat;
+    },
+    pickerOptions() {
+      let fieldOptions = {};
+      if (this.field.options && this.field.options.pickerOptions) {
+        fieldOptions = this.field.options.pickerOptions;
+      }
+      return Object.assign(this.defaultPickerOptions, fieldOptions);
+    },
+
+    valueLabel() {
+      if (this.next) {
+        return this.next;
+      } else {
+        return 'None Selected';
+      }
+    },
+    classList() {
+      return [
+        'apos-input-wrapper',
+        'apos-color'
+      ];
+    }
+  },
+  mounted() {
+    if (!this.next) {
+      this.next = null;
+    }
+  },
+  methods: {
+    open() {
+      this.active = true;
+    },
+    close() {
+      this.active = false;
+    },
+    update(value) {
+      this.tinyColorObj = tinycolor(value.hsl);
+      this.next = this.tinyColorObj.toString(this.format);
+    },
+    validate(value) {
+      if (this.field.required) {
+        if (!value) {
+          return 'required';
+        }
+      }
+
+      if (!value) {
+        return false;
+      }
+
+      const color = tinycolor(value);
+      return color.isValid() ? false : 'Error';
+    },
+    clear() {
+      this.next = null;
+    }
+  }
+};

package/modules/@apostrophecms/schema/ui/apos/logic/AposInputDateAndTime.js

@@ -0,0 +1,49 @@
+import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
+import dayjs from 'dayjs';
+
+export default {
+  mixins: [ AposInputMixin ],
+  emits: [ 'return' ],
+  data() {
+    return {
+      next: (this.value && this.value.data) || null,
+      date: '',
+      time: '',
+      disabled: !this.field.required
+    };
+  },
+  mounted () {
+    this.initDateAndTime();
+  },
+  methods: {
+    toggle() {
+      this.disabled = !this.disabled;
+
+      if (this.disabled) {
+        this.next = null;
+      }
+    },
+    validate() {
+      if (this.field.required && !this.next) {
+        return 'required';
+      }
+    },
+    initDateAndTime() {
+      if (this.next) {
+        this.date = dayjs(this.next).format('YYYY-MM-DD');
+        this.time = dayjs(this.next).format('HH:mm:ss');
+        this.disabled = false;
+      }
+    },
+    setDateAndTime() {
+      if (this.date) {
+        this.next = dayjs(`${this.date} ${this.time}`.trim()).toISOString();
+        this.disabled = false;
+      } else {
+        this.next = null;
+        this.disabled = true;
+      }
+    }
+  }
+
+};

package/modules/@apostrophecms/schema/ui/apos/logic/AposInputObject.js

@@ -0,0 +1,86 @@
+
+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';
+
+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 || {});
+    }
+  }
+};

package/modules/@apostrophecms/schema/ui/apos/logic/AposInputPassword.js

@@ -0,0 +1,41 @@
+
+import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
+
+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;
+    }
+  }
+};

package/modules/@apostrophecms/schema/ui/apos/logic/AposInputRadio.js

@@ -0,0 +1,29 @@
+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';
+
+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;
+    }
+  }
+};

package/modules/@apostrophecms/schema/ui/apos/logic/AposInputRange.js

@@ -0,0 +1,60 @@
+import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
+
+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);
+    }
+  }
+};