@kokoccc/vuetify 1.0.1

package/src/components/VFileInput/VFileInput.ts

@@ -0,0 +1,302 @@
+// Styles
+import './VFileInput.sass'
+
+// Extensions
+import VTextField from '../VTextField'
+
+// Components
+import { VChip } from '../VChip'
+
+// Types
+import { PropValidator } from 'vue/types/options'
+
+// Utilities
+import { deepEqual, humanReadableFileSize, wrapInArray } from '../../util/helpers'
+import { consoleError } from '../../util/console'
+import { mergeStyles } from '../../util/mergeData'
+import { defineComponent, h } from 'vue'
+
+export default defineComponent({
+  name: 'v-file-input',
+  extends: VTextField,
+
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+
+  props: {
+    chips: Boolean,
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
+    counterSizeString: {
+      type: String,
+      default: '$vuetify.fileInput.counterSize',
+    },
+    counterString: {
+      type: String,
+      default: '$vuetify.fileInput.counter',
+    },
+    hideInput: Boolean,
+    multiple: Boolean,
+    placeholder: String,
+    prependIcon: {
+      type: String,
+      default: '$file',
+    },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    showSize: {
+      type: [Boolean, Number],
+      default: false,
+      validator: (v: boolean | number) => {
+        return (
+          typeof v === 'boolean' ||
+          [1000, 1024].includes(v)
+        )
+      },
+    } as PropValidator<boolean | 1000 | 1024>,
+    smallChips: Boolean,
+    truncateLength: {
+      type: [Number, String],
+      default: 22,
+    },
+    type: {
+      type: String,
+      default: 'file',
+    },
+    value: {
+      default: undefined,
+      validator: val => {
+        return wrapInArray(val).every(v => v != null && typeof v === 'object')
+      },
+    } as PropValidator<File | File[]>,
+  },
+
+  emits: ['change', 'keydown', 'click:prepend'],
+
+  computed: {
+    classes (): object {
+      return {
+        ...VTextField.computed.classes.call(this),
+        'v-file-input': true,
+      }
+    },
+    computedCounterValue (): string {
+      const fileCount = (this.multiple && this.lazyValue)
+        ? this.lazyValue.length
+        : (this.lazyValue instanceof File) ? 1 : 0
+
+      if (!this.showSize) return this.$vuetify.lang.t(this.counterString, fileCount)
+
+      const bytes = this.internalArrayValue.reduce((bytes: number, { size = 0 }: File) => {
+        return bytes + size
+      }, 0)
+
+      return this.$vuetify.lang.t(
+        this.counterSizeString,
+        fileCount,
+        humanReadableFileSize(bytes, this.base === 1024)
+      )
+    },
+    internalArrayValue (): File[] {
+      return wrapInArray(this.internalValue).filter((v: any) => v instanceof File)
+    },
+    internalValue: {
+      get (): File[] {
+        return this.lazyValue
+      },
+      set (val: File | File[]) {
+        this.lazyValue = val
+        this.$emit('change', this.lazyValue)
+      },
+    },
+    isDirty (): boolean {
+      return this.internalArrayValue.length > 0
+    },
+    isLabelActive (): boolean {
+      return this.isDirty
+    },
+    text (): string[] {
+      if (!this.isDirty && (this.persistentPlaceholder || this.isFocused || !this.hasLabel)) return [this.placeholder]
+
+      return this.internalArrayValue.map((file: File) => {
+        const {
+          name = '',
+          size = 0,
+        } = file
+
+        const truncatedText = this.truncateText(name)
+
+        return !this.showSize
+          ? truncatedText
+          : `${truncatedText} (${humanReadableFileSize(size, this.base === 1024)})`
+      })
+    },
+    base (): 1000 | 1024 | undefined {
+      return typeof this.showSize !== 'boolean' ? this.showSize : undefined
+    },
+    hasChips (): boolean {
+      return this.chips || this.smallChips
+    },
+  },
+
+  watch: {
+    readonly: {
+      handler (v) {
+        if (v === true) consoleError('readonly is not supported on <v-file-input>', this)
+      },
+      immediate: true,
+    },
+    value (v) {
+      const value = this.multiple ? v : v ? [v] : []
+      if (!deepEqual(value, this.$refs.input.files)) {
+        // When the input value is changed programatically, clear the
+        // internal input's value so that the `onInput` handler
+        // can be triggered again if the user re-selects the exact
+        // same file(s). Ideally, `input.files` should be
+        // manipulated directly but that property is readonly.
+        this.$refs.input.value = ''
+      }
+    },
+  },
+
+  methods: {
+    clearableCallback () {
+      this.internalValue = this.multiple ? [] : null
+      this.$refs.input.value = ''
+    },
+    genChips () {
+      if (!this.isDirty) return []
+
+      return this.text.map((text, index) => h(VChip, {
+        small: this.smallChips,
+        'onClick:close': () => {
+          const internalValue = this.internalValue
+          internalValue.splice(index, 1)
+          this.internalValue = internalValue // Trigger the watcher
+        },
+      }, [text]))
+    },
+    genControl () {
+      const render = VTextField.methods.genControl.call(this)
+
+      if (this.hideInput) {
+        if (render.props) {
+          render.props.style = mergeStyles(render.props.style, {
+            display: 'none',
+          })
+        } else {
+          render.props = {
+            style: { display: 'none' },
+          }
+        }
+      }
+
+      return render
+    },
+    genInput () {
+      // Create input without calling VTextField.genInput to avoid value setting
+      const listeners = Object.assign({}, this.listeners$)
+      delete listeners.change // Change should not be bound externally
+      const { title, value, ...inputAttrs } = this.attrs$
+
+      const input = h('input', {
+        ...inputAttrs,
+        autofocus: this.autofocus,
+        disabled: this.isDisabled,
+        id: this.computedId,
+        placeholder: this.placeholder,
+        readonly: this.isReadonly,
+        type: this.type,
+        multiple: this.multiple,
+        ...listeners,
+        onChange: this.onInput,
+        onKeyDown: this.onKeyDown,
+        ref: 'input',
+      })
+
+      return [this.genSelections(), input]
+    },
+    genPrependSlot () {
+      if (!this.prependIcon) return null
+
+      const icon = this.genIcon('prepend', () => {
+        this.$refs.input.click()
+      })
+
+      return this.genSlot('prepend', 'outer', [icon])
+    },
+    genSelectionText (): string[] {
+      const length = this.text.length
+
+      if (length < 2) return this.text
+      if (this.showSize && !this.counter) return [this.computedCounterValue]
+      return [this.$vuetify.lang.t(this.counterString, length)]
+    },
+    genSelections () {
+      const children = []
+
+      if (this.isDirty && this.$slots.selection) {
+        this.internalArrayValue.forEach((file: File, index: number) => {
+          if (!this.$slots.selection) return
+
+          children.push(
+            this.$slots.selection({
+              text: this.text[index],
+              file,
+              index,
+            })
+          )
+        })
+      } else {
+        children.push(this.hasChips && this.isDirty ? this.genChips() : this.genSelectionText())
+      }
+
+      return h('div', {
+        class: ['v-file-input__text', {
+          'v-file-input__text--placeholder': this.placeholder && !this.isDirty,
+          'v-file-input__text--chips': this.hasChips && !this.$slots.selection,
+        }],
+      }, children)
+    },
+    genTextFieldSlot () {
+      return h('div', {
+        class: 'v-text-field__slot',
+        onClick: (e: MouseEvent) => {
+          // Clicking the label already delegates to input element, so we shouldn't click it twice
+          if (e.target && (e.target as HTMLElement).nodeName === 'LABEL') return
+
+          this.$refs.input.click()
+        },
+      }, [
+        this.genLabel(),
+        this.prefix ? this.genAffix('prefix') : null,
+        this.genInput(),
+        this.suffix ? this.genAffix('suffix') : null,
+      ])
+    },
+    onInput (e: Event) {
+      const files = [...(e.target as HTMLInputElement).files || []]
+
+      this.internalValue = this.multiple ? files : files[0]
+
+      // Set initialValue here otherwise isFocused
+      // watcher in VTextField will emit a change
+      // event whenever the component is blurred
+      this.initialValue = this.internalValue
+    },
+    onKeyDown (e: KeyboardEvent) {
+      this.$emit('keydown', e)
+    },
+    truncateText (str: string) {
+      if (str.length < Number(this.truncateLength)) return str
+      const charsKeepOneSide = Math.floor((Number(this.truncateLength) - 1) / 2)
+      return `${str.slice(0, charsKeepOneSide)}…${str.slice(str.length - charsKeepOneSide)}`
+    },
+  },
+})

package/src/components/VFileInput/__tests__/VFileInput.spec.ts

@@ -0,0 +1,333 @@
+// Components
+import VFileInput from '../VFileInput'
+
+// Preset
+import { preset } from '../../../presets/default'
+
+// Libraries
+import {
+  VueWrapper,
+  mount,
+  config,
+  MountingOptions,
+  enableAutoUnmount,
+} from '@vue/test-utils'
+
+const oneMBFile = new File([new ArrayBuffer(1048576)], 'test')
+const twoMBFile = new File([new ArrayBuffer(2097152)], 'test')
+
+describe('VFileInput.ts', () => {
+  type Instance = InstanceType<typeof VFileInput>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
+
+  beforeEach(() => {
+    mountFunction = (options?: MountingOptions<Instance>) => {
+      return mount(VFileInput, {
+        ...options,
+        props: {
+          label: 'File input',
+          ...options?.props,
+        },
+        global: {
+          mocks: {
+            ...config.global.mocks,
+          },
+        },
+      })
+    }
+  })
+
+  it('should render', () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render multiple', () => {
+    const wrapper = mountFunction({
+      props: { multiple: true },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render counter', () => {
+    const wrapper = mountFunction({
+      props: {
+        counter: true,
+        modelValue: [oneMBFile],
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should display file size', async () => {
+    const wrapper = mountFunction({
+      props: {
+        showSize: true,
+        modelValue: [twoMBFile],
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    await wrapper.setProps({
+      showSize: 1000,
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should display total size in counter', async () => {
+    const wrapper = mountFunction({
+      props: {
+        showSize: true,
+        counter: true,
+        modelValue: [oneMBFile, twoMBFile],
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    await wrapper.setProps({
+      showSize: 1000,
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should be unclearable', () => {
+    const wrapper = mountFunction({
+      props: {
+        clearable: false,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should work with accept', () => {
+    const wrapper = mountFunction({
+      props: {
+        accept: 'image/*',
+      },
+    })
+
+    expect(wrapper.find('input').element.getAttribute('accept')).toBe('image/*')
+  })
+
+  it('should disable file input', () => {
+    const wrapper = mountFunction({
+      props: {
+        disabled: true,
+      },
+    })
+
+    expect(wrapper.find('input').element.disabled).toBe(true)
+  })
+
+  it('should proxy icon and text click to input', () => {
+    const fn = jest.fn()
+    const wrapper = mountFunction()
+
+    const input = wrapper.find('input').element
+    input.click = fn
+
+    const icon = wrapper.find('.v-icon')
+    icon.trigger('click')
+    expect(fn).toHaveBeenCalledTimes(1)
+
+    const text = wrapper.find('.v-file-input__text')
+    text.trigger('click')
+    expect(fn).toHaveBeenCalledTimes(2)
+  })
+
+  it('should clear', () => {
+    const wrapper = mountFunction({
+      props: { modelValue: oneMBFile },
+    })
+
+    wrapper.vm.clearableCallback()
+    expect(wrapper.vm.internalValue).toBeNull()
+
+    const wrapper2 = mountFunction({
+      attrs: { multiple: '' },
+      props: { modelValue: oneMBFile },
+    })
+
+    wrapper2.vm.clearableCallback()
+    expect(wrapper2.vm.internalValue).toEqual([])
+  })
+
+  it('should react to setting fileValue', async () => {
+    const wrapper = mountFunction()
+
+    wrapper.setProps({
+      modelValue: [oneMBFile],
+    })
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.internalValue).toEqual([oneMBFile])
+  })
+
+  it('should render chips', () => {
+    const wrapper = mountFunction({
+      props: {
+        chips: true,
+        modelValue: [oneMBFile],
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render small chips', () => {
+    const wrapper = mountFunction({
+      props: {
+        smallChips: true,
+      },
+      data: () => ({
+        lazyValue: [oneMBFile],
+      }),
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/8049
+  it('should render without icon', () => {
+    const wrapper = mountFunction({
+      props: {
+        prependIcon: '',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/8167
+  it('should not emit change event when blurred', async () => {
+    const wrapper = mountFunction()
+
+    const input = wrapper.find('input')
+
+    input.trigger('focus')
+    await wrapper.vm.$nextTick()
+
+    // TODO: Is there a better way to fake the file change event?
+    wrapper.vm.onInput({ target: {} })
+
+    input.trigger('blur')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('change')).toHaveLength(1)
+  })
+
+  it('should not emit change event when pressing enter', async () => {
+    const wrapper = mountFunction()
+
+    const input = wrapper.find('input')
+
+    input.trigger('keydown.enter')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('change')).toBeFalsy()
+  })
+
+  it('should truncate correctly', async () => {
+    const fifteenCharFile = new File(['V'.repeat(15)], 'testFile15Chars')
+    const wrapper = mountFunction({
+      props: {
+        truncateLength: 1,
+        modelValue: fifteenCharFile,
+      },
+    })
+
+    expect(wrapper.find('.v-file-input__text').text()).toBe('…')
+
+    wrapper.setProps({
+      truncateLength: 2,
+    })
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.find('.v-file-input__text').text()).toBe('…')
+
+    wrapper.setProps({
+      truncateLength: 3,
+    })
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.find('.v-file-input__text').text()).toBe('t…s')
+
+    wrapper.setProps({
+      truncateLength: 10,
+    })
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.find('.v-file-input__text').text()).toBe('test…hars')
+  })
+
+  it('should filter internal array values for instanceof File', async () => {
+    const wrapper = mountFunction()
+
+    const values = [null, undefined, {}, [null], [undefined], [{}]]
+
+    for (const value of values) {
+      await wrapper.setProps({ modelValue: value })
+
+      expect(wrapper.vm.internalArrayValue).toEqual([])
+    }
+  })
+
+  it('should set display none if hide-input prop is set', () => {
+    const wrapper = mountFunction({
+      props: { hideInput: true },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should hide control element when hideInput is true', () => {
+    const wrapper = mountFunction({
+      props: { hideInput: true },
+    })
+
+    // Проверяем, что control элемент имеет display: none
+    const control = wrapper.find('.v-input__control')
+    expect(control.element.style.display).toBe('none')
+  })
+
+  it('should not hide control element when hideInput is false', () => {
+    const wrapper = mountFunction({
+      props: { hideInput: false },
+    })
+
+    // Проверяем, что control элемент не скрыт
+    const control = wrapper.find('.v-input__control')
+    expect(control.element.style.display).toBe('')
+  })
+
+  it('should render with hideInput prop like original Vuetify', () => {
+    const wrapper = mountFunction({
+      props: {
+        hideInput: true,
+        accept: 'image/*',
+        label: 'File input'
+      },
+    })
+
+    // Проверяем, что control элемент скрыт
+    const control = wrapper.find('.v-input__control')
+    expect(control.element.style.display).toBe('none')
+
+    // Проверяем снимок для полного соответствия оригинальному Vuetify
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})