@gitlab/ui 92.2.0 → 92.3.0

package/dist/vendor/bootstrap-vue/src/components/form-file/form-file.js

@@ -1,561 +0,0 @@
-import { extend } from '../../vue';
-import { NAME_FORM_FILE } from '../../constants/components';
-import { HAS_PROMISE_SUPPORT } from '../../constants/env';
-import { EVENT_OPTIONS_PASSIVE, EVENT_NAME_CHANGE } from '../../constants/events';
-import { PROP_TYPE_ARRAY, PROP_TYPE_STRING, PROP_TYPE_BOOLEAN, PROP_TYPE_FUNCTION } from '../../constants/props';
-import { SLOT_NAME_DROP_PLACEHOLDER, SLOT_NAME_PLACEHOLDER, SLOT_NAME_FILE_NAME } from '../../constants/slots';
-import { RX_EXTENSION, RX_STAR } from '../../constants/regex';
-import { File } from '../../constants/safe-types';
-import { flattenDeep, from, flatten } from '../../utils/array';
-import { cloneDeep } from '../../utils/clone-deep';
-import { closest } from '../../utils/dom';
-import { eventOn, eventOff, stopEvent } from '../../utils/events';
-import { identity } from '../../utils/identity';
-import { isUndefinedOrNull, isFile, isArray, isNull, isFunction } from '../../utils/inspect';
-import { looseEqual } from '../../utils/loose-equal';
-import { makeModelMixin } from '../../utils/model';
-import { sortKeys } from '../../utils/object';
-import { makePropsConfigurable, makeProp, hasPropFunction } from '../../utils/props';
-import { escapeRegExp } from '../../utils/string';
-import { warn } from '../../utils/warn';
-import { attrsMixin } from '../../mixins/attrs';
-import { props as props$2, formControlMixin } from '../../mixins/form-control';
-import { props as props$3, formCustomMixin } from '../../mixins/form-custom';
-import { props as props$4, formStateMixin } from '../../mixins/form-state';
-import { props as props$1, idMixin } from '../../mixins/id';
-import { normalizeSlotMixin } from '../../mixins/normalize-slot';
-import { props as props$5 } from '../../mixins/form-size';
-
-// --- Constants ---
-
-const {
-  mixin: modelMixin,
-  props: modelProps,
-  prop: MODEL_PROP_NAME,
-  event: MODEL_EVENT_NAME
-} = makeModelMixin('value', {
-  type: [PROP_TYPE_ARRAY, File],
-  defaultValue: null,
-  validator: value => {
-    /* istanbul ignore next */
-    if (value === '') {
-      warn(VALUE_EMPTY_DEPRECATED_MSG, NAME_FORM_FILE);
-      return true;
-    }
-    return isUndefinedOrNull(value) || isValidValue(value);
-  }
-});
-const VALUE_EMPTY_DEPRECATED_MSG = 'Setting "value"/"v-model" to an empty string for reset is deprecated. Set to "null" instead.';
-
-// --- Helper methods ---
-
-const isValidValue = value => isFile(value) || isArray(value) && value.every(v => isValidValue(v));
-
-// Helper method to "safely" get the entry from a data-transfer item
-/* istanbul ignore next: not supported in JSDOM */
-const getDataTransferItemEntry = item => isFunction(item.getAsEntry) ? item.getAsEntry() : isFunction(item.webkitGetAsEntry) ? item.webkitGetAsEntry() : null;
-
-// Drop handler function to get all files
-/* istanbul ignore next: not supported in JSDOM */
-const getAllFileEntries = function (dataTransferItemList) {
-  let traverseDirectories = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  return Promise.all(from(dataTransferItemList).filter(item => item.kind === 'file').map(item => {
-    const entry = getDataTransferItemEntry(item);
-    if (entry) {
-      if (entry.isDirectory && traverseDirectories) {
-        return getAllFileEntriesInDirectory(entry.createReader(), `${entry.name}/`);
-      } else if (entry.isFile) {
-        return new Promise(resolve => {
-          entry.file(file => {
-            file.$path = '';
-            resolve(file);
-          });
-        });
-      }
-    }
-    return null;
-  }).filter(identity));
-};
-
-// Get all the file entries (recursive) in a directory
-/* istanbul ignore next: not supported in JSDOM */
-const getAllFileEntriesInDirectory = function (directoryReader) {
-  let path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  return new Promise(resolve => {
-    const entryPromises = [];
-    const readDirectoryEntries = () => {
-      directoryReader.readEntries(entries => {
-        if (entries.length === 0) {
-          resolve(Promise.all(entryPromises).then(entries => flatten(entries)));
-        } else {
-          entryPromises.push(Promise.all(entries.map(entry => {
-            if (entry) {
-              if (entry.isDirectory) {
-                return getAllFileEntriesInDirectory(entry.createReader(), `${path}${entry.name}/`);
-              } else if (entry.isFile) {
-                return new Promise(resolve => {
-                  entry.file(file => {
-                    file.$path = `${path}${file.name}`;
-                    resolve(file);
-                  });
-                });
-              }
-            }
-            return null;
-          }).filter(identity)));
-          readDirectoryEntries();
-        }
-      });
-    };
-    readDirectoryEntries();
-  });
-};
-
-// --- Props ---
-
-const props = makePropsConfigurable(sortKeys({
-  ...props$1,
-  ...modelProps,
-  ...props$2,
-  ...props$3,
-  ...props$4,
-  ...props$5,
-  accept: makeProp(PROP_TYPE_STRING, ''),
-  browseText: makeProp(PROP_TYPE_STRING, 'Browse'),
-  // Instruct input to capture from camera
-  capture: makeProp(PROP_TYPE_BOOLEAN, false),
-  directory: makeProp(PROP_TYPE_BOOLEAN, false),
-  dropPlaceholder: makeProp(PROP_TYPE_STRING, 'Drop files here'),
-  fileNameFormatter: makeProp(PROP_TYPE_FUNCTION),
-  multiple: makeProp(PROP_TYPE_BOOLEAN, false),
-  noDrop: makeProp(PROP_TYPE_BOOLEAN, false),
-  noDropPlaceholder: makeProp(PROP_TYPE_STRING, 'Not allowed'),
-  // TODO:
-  //   Should we deprecate this and only support flat file structures?
-  //   Nested file structures are only supported when files are dropped
-  //   A Chromium "bug" prevents `webkitEntries` from being populated
-  //   on the file input's `change` event and is marked as "WontFix"
-  //   Mozilla implemented the behavior the same way as Chromium
-  //   See: https://bugs.chromium.org/p/chromium/issues/detail?id=138987
-  //   See: https://bugzilla.mozilla.org/show_bug.cgi?id=1326031
-  noTraverse: makeProp(PROP_TYPE_BOOLEAN, false),
-  placeholder: makeProp(PROP_TYPE_STRING, 'No file chosen')
-}), NAME_FORM_FILE);
-
-// --- Main component ---
-
-// @vue/component
-const BFormFile = /*#__PURE__*/extend({
-  name: NAME_FORM_FILE,
-  mixins: [attrsMixin, idMixin, modelMixin, normalizeSlotMixin, formControlMixin, formStateMixin, formCustomMixin, normalizeSlotMixin],
-  inheritAttrs: false,
-  props,
-  data() {
-    return {
-      files: [],
-      dragging: false,
-      // IE 11 doesn't respect setting `event.dataTransfer.dropEffect`,
-      // so we handle it ourselves as well
-      // https://stackoverflow.com/a/46915971/2744776
-      dropAllowed: !this.noDrop,
-      hasFocus: false
-    };
-  },
-  computed: {
-    // Convert `accept` to an array of `[{ RegExpr, isMime }, ...]`
-    computedAccept() {
-      let {
-        accept
-      } = this;
-      accept = (accept || '').trim().split(/[,\s]+/).filter(identity);
-
-      // Allow any file type/extension
-      if (accept.length === 0) {
-        return null;
-      }
-      return accept.map(extOrType => {
-        let prop = 'name';
-        let startMatch = '^';
-        let endMatch = '$';
-        if (RX_EXTENSION.test(extOrType)) {
-          // File extension /\.ext$/
-          startMatch = '';
-        } else {
-          // MIME type /^mime\/.+$/ or /^mime\/type$/
-          prop = 'type';
-          if (RX_STAR.test(extOrType)) {
-            endMatch = '.+$';
-            // Remove trailing `*`
-            extOrType = extOrType.slice(0, -1);
-          }
-        }
-        // Escape all RegExp special chars
-        extOrType = escapeRegExp(extOrType);
-        const rx = new RegExp(`${startMatch}${extOrType}${endMatch}`);
-        return {
-          rx,
-          prop
-        };
-      });
-    },
-    computedCapture() {
-      const {
-        capture
-      } = this;
-      return capture === true || capture === '' ? true : capture || null;
-    },
-    computedAttrs() {
-      const {
-        name,
-        disabled,
-        required,
-        form,
-        computedCapture,
-        accept,
-        multiple,
-        directory
-      } = this;
-      return {
-        ...this.bvAttrs,
-        type: 'file',
-        id: this.safeId(),
-        name,
-        disabled,
-        required,
-        form: form || null,
-        capture: computedCapture,
-        accept: accept || null,
-        multiple,
-        directory,
-        webkitdirectory: directory,
-        'aria-required': required ? 'true' : null
-      };
-    },
-    computedFileNameFormatter() {
-      const {
-        fileNameFormatter
-      } = this;
-      return hasPropFunction(fileNameFormatter) ? fileNameFormatter : this.defaultFileNameFormatter;
-    },
-    clonedFiles() {
-      return cloneDeep(this.files);
-    },
-    flattenedFiles() {
-      return flattenDeep(this.files);
-    },
-    fileNames() {
-      return this.flattenedFiles.map(file => file.name);
-    },
-    labelContent() {
-      // Draging active
-      /* istanbul ignore next: used by drag/drop which can't be tested easily */
-      if (this.dragging && !this.noDrop) {
-        return (
-          // TODO: Add additional scope with file count, and other not-allowed reasons
-          this.normalizeSlot(SLOT_NAME_DROP_PLACEHOLDER, {
-            allowed: this.dropAllowed
-          }) || (this.dropAllowed ? this.dropPlaceholder : this.$createElement('span', {
-            staticClass: 'text-danger'
-          }, this.noDropPlaceholder))
-        );
-      }
-
-      // No file chosen
-      if (this.files.length === 0) {
-        return this.normalizeSlot(SLOT_NAME_PLACEHOLDER) || this.placeholder;
-      }
-      const {
-        flattenedFiles,
-        clonedFiles,
-        fileNames,
-        computedFileNameFormatter
-      } = this;
-
-      // There is a slot for formatting the files/names
-      if (this.hasNormalizedSlot(SLOT_NAME_FILE_NAME)) {
-        return this.normalizeSlot(SLOT_NAME_FILE_NAME, {
-          files: flattenedFiles,
-          filesTraversed: clonedFiles,
-          names: fileNames
-        });
-      }
-      return computedFileNameFormatter(flattenedFiles, clonedFiles, fileNames);
-    }
-  },
-  watch: {
-    [MODEL_PROP_NAME](newValue) {
-      if (!newValue || isArray(newValue) && newValue.length === 0) {
-        this.reset();
-      }
-    },
-    files(newValue, oldValue) {
-      if (!looseEqual(newValue, oldValue)) {
-        const {
-          multiple,
-          noTraverse
-        } = this;
-        const files = !multiple || noTraverse ? flattenDeep(newValue) : newValue;
-        this.$emit(MODEL_EVENT_NAME, multiple ? files : files[0] || null);
-      }
-    }
-  },
-  created() {
-    // Create private non-reactive props
-    this.$_form = null;
-  },
-  mounted() {
-    // Listen for form reset events, to reset the file input
-    const $form = closest('form', this.$el);
-    if ($form) {
-      eventOn($form, 'reset', this.reset, EVENT_OPTIONS_PASSIVE);
-      this.$_form = $form;
-    }
-  },
-  beforeDestroy() {
-    const $form = this.$_form;
-    if ($form) {
-      eventOff($form, 'reset', this.reset, EVENT_OPTIONS_PASSIVE);
-    }
-  },
-  methods: {
-    isFileValid(file) {
-      if (!file) {
-        return false;
-      }
-      const accept = this.computedAccept;
-      return accept ? accept.some(a => a.rx.test(file[a.prop])) : true;
-    },
-    isFilesArrayValid(files) {
-      return isArray(files) ? files.every(file => this.isFileValid(file)) : this.isFileValid(files);
-    },
-    defaultFileNameFormatter(flattenedFiles, clonedFiles, fileNames) {
-      return fileNames.join(', ');
-    },
-    setFiles(files) {
-      // Reset the dragging flags
-      this.dropAllowed = !this.noDrop;
-      this.dragging = false;
-      // Set the selected files
-      this.files = this.multiple ? this.directory ? files : flattenDeep(files) : flattenDeep(files).slice(0, 1);
-    },
-    /* istanbul ignore next: used by Drag/Drop */
-    setInputFiles(files) {
-      // Try an set the file input files array so that `required`
-      // constraint works for dropped files (will fail in IE11 though)
-      // To be used only when dropping files
-      try {
-        // Firefox < 62 workaround exploiting https://bugzilla.mozilla.org/show_bug.cgi?id=1422655
-        const dataTransfer = new ClipboardEvent('').clipboardData || new DataTransfer();
-        // Add flattened files to temp `dataTransfer` object to get a true `FileList` array
-        flattenDeep(cloneDeep(files)).forEach(file => {
-          // Make sure to remove the custom `$path` attribute
-          delete file.$path;
-          dataTransfer.items.add(file);
-        });
-        this.$refs.input.files = dataTransfer.files;
-      } catch {}
-    },
-    reset() {
-      // IE 11 doesn't support setting `$input.value` to `''` or `null`
-      // So we use this little extra hack to reset the value, just in case
-      // This also appears to work on modern browsers as well
-      // Wrapped in try in case IE 11 or mobile Safari crap out
-      try {
-        const $input = this.$refs.input;
-        $input.value = '';
-        $input.type = '';
-        $input.type = 'file';
-      } catch {}
-      this.files = [];
-    },
-    handleFiles(files) {
-      let isDrop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-      if (isDrop) {
-        // When dropped, make sure to filter files with the internal `accept` logic
-        const filteredFiles = files.filter(this.isFilesArrayValid);
-        // Only update files when we have any after filtering
-        if (filteredFiles.length > 0) {
-          this.setFiles(filteredFiles);
-          // Try an set the file input's files array so that `required`
-          // constraint works for dropped files (will fail in IE 11 though)
-          this.setInputFiles(filteredFiles);
-        }
-      } else {
-        // We always update the files from the `change` event
-        this.setFiles(files);
-      }
-    },
-    focusHandler(event) {
-      // Bootstrap v4 doesn't have focus styling for custom file input
-      // Firefox has a `[type=file]:focus ~ sibling` selector issue,
-      // so we add a `focus` class to get around these bugs
-      if (this.plain || event.type === 'focusout') {
-        this.hasFocus = false;
-      } else {
-        // Add focus styling for custom file input
-        this.hasFocus = true;
-      }
-    },
-    onChange(event) {
-      const {
-        type,
-        target,
-        dataTransfer = {}
-      } = event;
-      const isDrop = type === 'drop';
-
-      // Always emit original event
-      this.$emit(EVENT_NAME_CHANGE, event);
-      const items = from(dataTransfer.items || []);
-      if (HAS_PROMISE_SUPPORT && items.length > 0 && !isNull(getDataTransferItemEntry(items[0]))) {
-        // Drop handling for modern browsers
-        // Supports nested directory structures in `directory` mode
-        /* istanbul ignore next: not supported in JSDOM */
-        getAllFileEntries(items, this.directory).then(files => this.handleFiles(files, isDrop));
-      } else {
-        // Standard file input handling (native file input change event),
-        // or fallback drop mode (IE 11 / Opera) which don't support `directory` mode
-        const files = from(target.files || dataTransfer.files || []).map(file => {
-          // Add custom `$path` property to each file (to be consistent with drop mode)
-          file.$path = file.webkitRelativePath || '';
-          return file;
-        });
-        this.handleFiles(files, isDrop);
-      }
-    },
-    onDragenter(event) {
-      stopEvent(event);
-      this.dragging = true;
-      const {
-        dataTransfer = {}
-      } = event;
-      // Early exit when the input or dropping is disabled
-      if (this.noDrop || this.disabled || !this.dropAllowed) {
-        // Show deny feedback
-        /* istanbul ignore next: not supported in JSDOM */
-        dataTransfer.dropEffect = 'none';
-        this.dropAllowed = false;
-        return;
-      }
-      /* istanbul ignore next: not supported in JSDOM */
-      dataTransfer.dropEffect = 'copy';
-    },
-    // Note this event fires repeatedly while the mouse is over the dropzone at
-    // intervals in the milliseconds, so avoid doing much processing in here
-    onDragover(event) {
-      stopEvent(event);
-      this.dragging = true;
-      const {
-        dataTransfer = {}
-      } = event;
-      // Early exit when the input or dropping is disabled
-      if (this.noDrop || this.disabled || !this.dropAllowed) {
-        // Show deny feedback
-        /* istanbul ignore next: not supported in JSDOM */
-        dataTransfer.dropEffect = 'none';
-        this.dropAllowed = false;
-        return;
-      }
-      /* istanbul ignore next: not supported in JSDOM */
-      dataTransfer.dropEffect = 'copy';
-    },
-    onDragleave(event) {
-      stopEvent(event);
-      this.$nextTick(() => {
-        this.dragging = false;
-        // Reset `dropAllowed` to default
-        this.dropAllowed = !this.noDrop;
-      });
-    },
-    // Triggered by a file drop onto drop target
-    onDrop(event) {
-      stopEvent(event);
-      this.dragging = false;
-      // Early exit when the input or dropping is disabled
-      if (this.noDrop || this.disabled || !this.dropAllowed) {
-        this.$nextTick(() => {
-          // Reset `dropAllowed` to default
-          this.dropAllowed = !this.noDrop;
-        });
-        return;
-      }
-      this.onChange(event);
-    }
-  },
-  render(h) {
-    const {
-      custom,
-      plain,
-      size,
-      dragging,
-      stateClass,
-      bvAttrs
-    } = this;
-
-    // Form Input
-    const $input = h('input', {
-      class: [{
-        'form-control-file': plain,
-        'custom-file-input': custom,
-        focus: custom && this.hasFocus
-      }, stateClass],
-      // With IE 11, the input gets in the "way" of the drop events,
-      // so we move it out of the way by putting it behind the label
-      // Bootstrap v4 has it in front
-      style: custom ? {
-        zIndex: -5
-      } : {},
-      attrs: this.computedAttrs,
-      on: {
-        change: this.onChange,
-        focusin: this.focusHandler,
-        focusout: this.focusHandler,
-        reset: this.reset
-      },
-      ref: 'input'
-    });
-    if (plain) {
-      return $input;
-    }
-
-    // Overlay label
-    const $label = h('label', {
-      staticClass: 'custom-file-label',
-      class: {
-        dragging
-      },
-      attrs: {
-        for: this.safeId(),
-        // This goes away in Bootstrap v5
-        'data-browse': this.browseText || null
-      }
-    }, [h('span', {
-      staticClass: 'd-block form-file-text',
-      // `pointer-events: none` is used to make sure
-      // the drag events fire only on the label
-      style: {
-        pointerEvents: 'none'
-      }
-    }, [this.labelContent])]);
-
-    // Return rendered custom file input
-    return h('div', {
-      staticClass: 'custom-file b-form-file',
-      class: [{
-        [`b-custom-control-${size}`]: size
-      }, stateClass, bvAttrs.class],
-      style: bvAttrs.style,
-      attrs: {
-        id: this.safeId('_BV_file_outer_')
-      },
-      on: {
-        dragenter: this.onDragenter,
-        dragover: this.onDragover,
-        dragleave: this.onDragleave,
-        drop: this.onDrop
-      }
-    }, [$input, $label]);
-  }
-});
-
-export { BFormFile };

package/dist/vendor/bootstrap-vue/src/components/form-file/index.js

@@ -1,12 +0,0 @@
-import { BFormFile } from './form-file';
-export { BFormFile } from './form-file';
-import { pluginFactory } from '../../utils/plugins';
-
-const FormFilePlugin = /*#__PURE__*/pluginFactory({
-  components: {
-    BFormFile,
-    BFile: BFormFile
-  }
-});
-
-export { FormFilePlugin };