apostrophe 3.53.0 → 3.55.0

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

@@ -35,283 +35,10 @@
 </template>
 
 <script>
-// NOTE: This is a temporary component, copying AposInputString. Base modules
-// already have `type: 'slug'` fields, so this is needed to avoid distracting
-// errors.
-import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
-import sluggo from 'sluggo';
-import debounce from 'debounce-async';
-import { klona } from 'klona';
-
+import AposInputSlugLogic from '../logic/AposInputSlug';
 export default {
   name: 'AposInputSlug',
-  mixins: [ AposInputMixin ],
-  emits: [ 'return' ],
-  data() {
-    return {
-      conflict: false,
-      isArchived: null,
-      originalSlugPartsLength: null
-    };
-  },
-  computed: {
-    tabindex () {
-      return this.field.disableFocus ? '-1' : '0';
-    },
-    type () {
-      if (this.field.type) {
-        return this.field.type;
-      } else {
-        return 'text';
-      }
-    },
-    classes () {
-      return [ 'apos-input', 'apos-input--text', 'apos-input--slug' ];
-    },
-    wrapperClasses () {
-      return [ 'apos-input-wrapper' ].concat(this.localePrefix ? [ 'apos-input-wrapper--with-prefix' ] : []);
-    },
-    icon () {
-      if (this.error) {
-        return 'circle-medium-icon';
-      } else if (this.field.icon) {
-        return this.field.icon;
-      } else {
-        return null;
-      }
-    },
-    prefix () {
-      return this.field.prefix || '';
-    },
-    localePrefix() {
-      return this.field.page && apos.i18n.locales[apos.i18n.locale].prefix;
-    }
-  },
-  watch: {
-    followingValues: {
-      // We are usually interested in followingValue.title, but a
-      // secondary slug field could be configured to watch
-      // one or more other fields
-      deep: true,
-      handler(newValue, oldValue) {
-        const newClone = klona(newValue);
-        const oldClone = klona(oldValue);
-
-        // Track whether the slug is archived for prefixing.
-        this.isArchived = newValue.archived;
-        // We only want the string properties to build the slug itself.
-        delete newClone.archived;
-        delete oldClone.archived;
-
-        oldValue = Object.values(oldClone).join(' ');
-        newValue = Object.values(newClone).join(' ');
-
-        if (this.compatible(oldValue, this.next) && !newValue.archived) {
-          // If this is a page slug, we only replace the last section of the slug.
-          if (this.field.page) {
-            let parts = this.next.split('/');
-            parts = parts.filter(part => part.length > 0);
-            if ((!this.originalSlugPartsLength && parts.length) || (this.originalSlugPartsLength && parts.length === (this.originalSlugPartsLength - 1))) {
-              // Remove last path component so we can replace it
-              parts.pop();
-            }
-            parts.push(this.slugify(newValue, { componentOnly: true }));
-            if (parts[0].length) {
-              // TODO: handle page archives.
-              this.next = `/${parts.join('/')}`;
-            }
-          } else {
-            this.next = this.slugify(newValue);
-          }
-        }
-      }
-    }
-  },
-  async mounted() {
-    this.debouncedCheckConflict = debounce(() => this.checkConflict(), 250);
-    if (this.next.length) {
-      await this.debouncedCheckConflict();
-    }
-    this.originalSlugPartsLength = this.next.split('/').length;
-  },
-  methods: {
-    async watchNext() {
-      this.next = this.slugify(this.next);
-      this.validateAndEmit();
-      try {
-        await this.debouncedCheckConflict();
-      } catch (e) {
-        if (e === 'canceled') {
-          // That's fine
-        } else {
-          throw e;
-        }
-      }
-    },
-    validate(value) {
-      if (this.conflict) {
-        return {
-          name: 'conflict',
-          message: 'apostrophe:slugInUse'
-        };
-      }
-      if (this.field.required) {
-        if (!value.length) {
-          return 'required';
-        }
-      }
-      if (this.field.min) {
-        if (value.length && (value.length < this.field.min)) {
-          return 'min';
-        }
-      }
-      if (this.field.max) {
-        if (value.length && (value.length > this.field.max)) {
-          return 'max';
-        }
-      }
-      return false;
-    },
-    compatible(title, slug) {
-      if ((typeof title) !== 'string') {
-        title = '';
-      }
-      if (this.field.page) {
-        const matches = slug.match(/[^/]+$/);
-        slug = (matches && matches[0]) || '';
-      }
-      return ((title === '') && (slug === `${this.prefix}`)) ||
-        this.slugify(title) === this.slugify(slug);
-    },
-    // if componentOnly is true, we are slugifying just one component of
-    // a slug as part of following the title field, and so we do *not*
-    // want to allow slashes (when editing a page) or set a prefix.
-    slugify(s, { componentOnly = false } = {}) {
-      const options = {
-        def: ''
-      };
-
-      if (this.field.page && !componentOnly) {
-        options.allow = '/';
-      }
-
-      let preserveDash = false;
-      // When you are typing a slug it feels wrong for hyphens you typed
-      // to disappear as you go, so if the last character is not valid in a slug,
-      // restore it after we call sluggo for the full string
-      if (this.focus && s.length && (sluggo(s.charAt(s.length - 1), options) === '')) {
-        preserveDash = true;
-      }
-
-      s = sluggo(s, options);
-      if (preserveDash) {
-        s += '-';
-      }
-
-      if (this.field.page && !componentOnly) {
-        if (!this.followingValues?.title) {
-          const nextParts = this.next.split('/');
-          if (s === nextParts[nextParts.length - 1]) {
-            s = '';
-            if (this.originalSlugPartsLength === nextParts.length) {
-              nextParts.pop();
-            }
-            this.next = nextParts.join('/');
-          }
-        }
-        if (!s.charAt(0) !== '/') {
-          s = `/${s}`;
-        }
-        s = s.replace(/\/+/g, '/');
-        if (s !== '/') {
-          s = s.replace(/\/$/, '');
-        }
-        if (!this.followingValues?.title && s.length) {
-          s += '/';
-        }
-      }
-
-      if (!componentOnly) {
-        s = this.setPrefix(s);
-      }
-
-      return s;
-    },
-    setPrefix (slug) {
-      // Get a fresh clone of the slug.
-      let updated = slug;
-      const archivedRegexp = new RegExp(`^deduplicate-[a-z0-9]+-${this.prefix}`);
-
-      // Prefix if the slug doesn't start with the prefix OR if its archived
-      // and it doesn't start with the dedupe+prefix pattern.
-      if (
-        !updated.startsWith(this.prefix) ||
-        (this.isArchived && !updated.match(archivedRegexp))
-      ) {
-        let archivePrefix = '';
-        // If archived, remove the dedupe pattern to add again later.
-        if (this.isArchived) {
-          archivePrefix = updated.match(/^deduplicate-[a-z0-9]+-/);
-          updated = updated.replace(archivePrefix, '');
-        }
-
-        if (this.prefix.startsWith(updated)) {
-          // If they delete the `-`, and the prefix is `recipe-`,
-          // we want to restore `recipe-`, not set it to `recipe-recipe`
-          updated = this.prefix;
-        } else {
-          // Make sure we're not double prefixing archived slugs.
-          updated = updated.startsWith(this.prefix) ? updated : this.prefix + updated;
-        }
-        // Reapply the dedupe pattern if archived. If being restored from the
-        // doc editor modal it will momentarily be tracked as archived but
-        // without not have the archive prefix, so check that too.
-        updated = this.isArchived && archivePrefix ? `${archivePrefix}${updated}` : updated;
-      }
-
-      return updated;
-    },
-    async checkConflict() {
-      let slug;
-      try {
-        slug = this.next;
-        if (slug.length) {
-          await apos.http.post(`${apos.doc.action}/slug-taken`, {
-            body: {
-              slug,
-              _id: this.docId
-            },
-            draft: true
-          });
-          // Still relevant?
-          if (slug === this.next) {
-            this.conflict = false;
-            this.validateAndEmit();
-          } else {
-            // Can ignore it, another request
-            // probably already in-flight
-          }
-        }
-      } catch (e) {
-        // 409: Conflict (slug in use)
-        if (e.status === 409) {
-          // Still relevant?
-          if (slug === this.next) {
-            this.conflict = true;
-            this.validateAndEmit();
-          } else {
-            // Can ignore it, another request
-            // probably already in-flight
-          }
-        } else {
-          throw e;
-        }
-      }
-    },
-    passFocus() {
-      this.$refs.input.focus();
-    }
-  }
+  mixins: [ AposInputSlugLogic ]
 };
 </script>
 

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

@@ -37,175 +37,10 @@
 </template>
 
 <script>
-import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
-
+import AposInputStringLogic from '../logic/AposInputString';
 export default {
   name: 'AposInputString',
-  mixins: [ AposInputMixin ],
-  emits: [ 'return' ],
-  data () {
-    return {
-      step: undefined,
-      wasPopulated: false
-    };
-  },
-  computed: {
-    tabindex () {
-      return this.field.disableFocus ? '-1' : '0';
-    },
-    type () {
-      if (this.field.type) {
-        if (this.field.type === 'float' || this.field.type === 'integer') {
-          return 'number';
-        }
-        if (this.field.type === 'string' || this.field.type === 'slug') {
-          return 'text';
-        }
-        return this.field.type;
-      } else {
-        return 'text';
-      }
-    },
-    classes () {
-      return [ 'apos-input', `apos-input--${this.type}`, this.value.duplicate && 'apos-input--error' ];
-    },
-    icon () {
-      if (this.error) {
-        return 'circle-medium-icon';
-      } else if (this.field.icon) {
-        return this.field.icon;
-      } else {
-        return null;
-      }
-    }
-  },
-  watch: {
-    followingValues: {
-      // We may be following multiple fields, like firstName and lastName,
-      // or none at all, depending
-      deep: true,
-      handler(newValue, oldValue) {
-        // Follow the value of the other field(s), but only if our
-        // previous value matched the previous value of the other field(s)
-        oldValue = Object.values(oldValue).join(' ').trim();
-        newValue = Object.values(newValue).join(' ').trim();
-        if ((!this.wasPopulated && ((this.next == null) || (!this.next.length))) || (this.next === oldValue)) {
-          this.next = newValue;
-        }
-      }
-    },
-    next() {
-      if (this.next && this.next.length) {
-        this.wasPopulated = true;
-      }
-    }
-  },
-  mounted() {
-    this.defineStep();
-    this.wasPopulated = this.next && this.next.length;
-  },
-  methods: {
-    enterEmit() {
-      if (this.field.enterSubmittable) {
-        // Include the validated results in cases where an Enter keydown should
-        // act as submitting a form.
-        this.$emit('return', {
-          data: this.next,
-          error: this.validate(this.next)
-        });
-      } else {
-        this.$emit('return');
-      }
-    },
-    validate(value) {
-      if (value == null) {
-        value = '';
-      }
-      if (typeof value === 'string' && !value.length) {
-        // Also correct for float and integer because Vue coerces
-        // number fields to either a number or the empty string
-        return this.field.required ? 'required' : false;
-      }
-
-      const minMaxFields = [
-        'integer',
-        'float',
-        'string',
-        'date',
-        'password'
-      ];
-
-      if (typeof value === 'string' && this.field.pattern) {
-        const regex = new RegExp(this.field.pattern);
-        if (!regex.test(value)) {
-          return 'invalid';
-        }
-      }
-
-      if (this.field.min && minMaxFields.includes(this.field.type)) {
-        if ((value != null) && value.length && (this.minMaxComparable(value) < this.field.min)) {
-          return 'min';
-        }
-      }
-      if (this.field.max && minMaxFields.includes(this.field.type)) {
-        if ((value != null) && value.length && (this.minMaxComparable(value) > this.field.max)) {
-          return 'max';
-        }
-      }
-      if (this.field.type === 'email' && value) {
-        // regex source: https://emailregex.com/
-        const matches = value.match(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
-        if (!matches) {
-          return 'invalid';
-        }
-      }
-      return false;
-    },
-    defineStep() {
-      if (this.type === 'number') {
-        this.step = this.field.type === 'float' ? 'any' : 1;
-      }
-    },
-    convert(s) {
-      if (this.field.type === 'integer') {
-        if ((s == null) || (s === '')) {
-          return s;
-        } else {
-          return parseInt(s);
-        }
-      } else if (this.field.type === 'float') {
-        if ((s == null) || (s === '')) {
-          return s;
-        } else {
-          // The native parse float converts 3.0 to 3 and makes
-          // next to become integer. In theory we don't need parseFloat
-          // as the value is natively guarded by the browser 'number' type.
-          // However we need a float value sent to the backend
-          // and we force that when focus is lost.
-          if (this.focus && `${s}`.match(/\.[0]*$/)) {
-            return s;
-          }
-          return parseFloat(s);
-        }
-      } else {
-        if (s == null) {
-          return '';
-        } else {
-          return s.toString();
-        }
-      }
-    },
-    minMaxComparable(s) {
-      const converted = this.convert(s);
-      if ([ 'integer', 'float', 'date', 'range', 'time' ].includes(this.field.type)) {
-        // Compare the actual values for these types
-        return converted;
-      } else {
-        // Compare the length for other types, like string or password or url
-        return converted.length;
-      }
-    }
-  }
+  mixins: [ AposInputStringLogic ]
 };
 </script>
 

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

@@ -57,123 +57,10 @@
 </template>
 
 <script>
-// A component designed to be used as a scaffold for AposInputString and
-// friends, which override the `body` slot
+import AposInputWrapperLogic from '../logic/AposInputWrapper';
 export default {
   name: 'AposInputWrapper',
-  inject: {
-    originalDoc: {
-      default: () => ({
-        ref: null
-      })
-    }
-  },
-  props: {
-    field: {
-      type: Object,
-      required: true
-    },
-    error: {
-      type: [ String, Boolean, Object ],
-      default: null
-    },
-    uid: {
-      type: Number,
-      required: true
-    },
-    modifiers: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
-    items: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
-    displayOptions: {
-      type: Object,
-      default() {
-        return {};
-      }
-    }
-  },
-  data () {
-    return {
-      wrapEl: 'div',
-      labelEl: 'label'
-    };
-  },
-  computed: {
-    label () {
-      const { label, publishedLabel } = this.field;
-
-      if (
-        this.originalDoc.ref &&
-        this.originalDoc.ref.lastPublishedAt &&
-        publishedLabel
-      ) {
-        return publishedLabel;
-      }
-
-      return label;
-    },
-    classList: function () {
-      const classes = [
-        'apos-field',
-        `apos-field--${this.field.type}`,
-        `apos-field--${this.field.name}`
-      ];
-      if (this.field.classes) {
-        classes.push(this.field.classes);
-      }
-      if (this.errorClasses) {
-        classes.push(this.errorClasses);
-      }
-      if (this.modifiers) {
-        this.modifiers.forEach((m) => {
-          classes.push(`apos-field--${m}`);
-        });
-      }
-      return classes;
-    },
-    errorClasses: function () {
-      if (!this.error) {
-        return null;
-      }
-
-      let error = 'unknown';
-
-      if (typeof this.error === 'string') {
-        error = this.error;
-      } else if (this.error.name) {
-        error = this.error.name;
-      }
-
-      return `apos-field--error apos-field--error-${error}`;
-    },
-    errorMessage () {
-      if (this.error) {
-        if (typeof this.error === 'string') {
-          return this.error;
-        } else if (this.error.message) {
-          return this.error.message;
-        } else {
-          return 'Error';
-        }
-      } else {
-        return false;
-      }
-    }
-  },
-  mounted: function () {
-    if (this.field.type === 'radio' || this.field.type === 'checkbox') {
-      this.wrapEl = 'fieldset';
-      this.labelEl = 'legend';
-    }
-  }
+  mixins: [ AposInputWrapperLogic ]
 };
 </script>