quasar 2.1.0

package/src/components/field/index.js

@@ -0,0 +1,5 @@
+import QField from './QField.js'
+
+export {
+  QField
+}

package/src/components/file/QFile.js

@@ -0,0 +1,273 @@
+import { h, defineComponent, ref, computed, getCurrentInstance } from 'vue'
+
+import QChip from '../chip/QChip.js'
+
+import useField, { useFieldState, useFieldProps, useFieldEmits, fieldValueIsFilled } from '../../composables/private/use-field.js'
+import { useFormProps, useFormInputNameAttr } from '../../composables/private/use-form.js'
+import useFile, { useFileProps, useFileEmits } from '../../composables/private/use-file.js'
+import useFileFormDomProps from '../../composables/private/use-file-dom-props.js'
+
+import { humanStorageSize } from '../../utils/format.js'
+
+export default defineComponent({
+  name: 'QFile',
+
+  props: {
+    ...useFieldProps,
+    ...useFormProps,
+    ...useFileProps,
+
+    /* SSR does not know about File & FileList */
+    modelValue: __QUASAR_SSR_SERVER__
+      ? {}
+      : [ File, FileList, Array ],
+
+    append: Boolean,
+    useChips: Boolean,
+    displayValue: [ String, Number ],
+
+    tabindex: {
+      type: [ String, Number ],
+      default: 0
+    },
+
+    counterLabel: Function,
+
+    inputClass: [ Array, String, Object ],
+    inputStyle: [ Array, String, Object ]
+  },
+
+  emits: [
+    ...useFieldEmits,
+    ...useFileEmits
+  ],
+
+  setup (props, { slots, emit, attrs }) {
+    const { proxy } = getCurrentInstance()
+
+    const state = useFieldState()
+
+    const inputRef = ref(null)
+    const dnd = ref(false)
+    const nameProp = useFormInputNameAttr(props)
+
+    const {
+      pickFiles,
+      onDragover,
+      processFiles,
+      getDndNode
+    } = useFile({ editable: state.editable, dnd, getFileInput, addFilesToQueue })
+
+    const formDomProps = useFileFormDomProps(props)
+
+    const innerValue = computed(() => (
+      Object(props.modelValue) === props.modelValue
+        ? ('length' in props.modelValue ? Array.from(props.modelValue) : [ props.modelValue ])
+        : []
+    ))
+
+    const hasValue = computed(() => fieldValueIsFilled(innerValue.value))
+
+    const selectedString = computed(() =>
+      innerValue.value
+        .map(file => file.name)
+        .join(', ')
+    )
+
+    const totalSize = computed(() =>
+      humanStorageSize(
+        innerValue.value.reduce((acc, file) => acc + file.size, 0)
+      )
+    )
+
+    const counterProps = computed(() => ({
+      totalSize: totalSize.value,
+      filesNumber: innerValue.value.length,
+      maxFiles: props.maxFiles
+    }))
+
+    const inputAttrs = computed(() => ({
+      tabindex: -1,
+      type: 'file',
+      title: '', // try to remove default tooltip,
+      accept: props.accept,
+      capture: props.capture,
+      name: nameProp.value,
+      ...attrs,
+      id: state.targetUid.value,
+      disabled: state.editable.value !== true
+    }))
+
+    const isAppending = computed(() =>
+      props.multiple === true && props.append === true
+    )
+
+    function removeAtIndex (index) {
+      const files = innerValue.value.slice()
+      files.splice(index, 1)
+      emitValue(files)
+    }
+
+    function removeFile (file) {
+      const index = innerValue.value.findIndex(file)
+      if (index > -1) {
+        removeAtIndex(index)
+      }
+    }
+
+    function emitValue (files) {
+      emit('update:modelValue', props.multiple === true ? files : files[ 0 ])
+    }
+
+    function onKeyup (e) {
+      // only on ENTER
+      e.keyCode === 13 && pickFiles(e)
+    }
+
+    function getFileInput () {
+      return inputRef.value
+    }
+
+    function addFilesToQueue (e, fileList) {
+      const files = processFiles(e, fileList, innerValue.value, isAppending.value)
+
+      // if nothing to do...
+      if (files === void 0) { return }
+
+      // protect against input @change being called in a loop
+      // like it happens on Safari, so don't emit same thing:
+      if (
+        props.multiple === true
+          ? props.modelValue && files.every(f => innerValue.value.includes(f))
+          : props.modelValue === files[ 0 ]
+      ) {
+        return
+      }
+
+      emitValue(
+        isAppending.value === true
+          ? innerValue.value.concat(files)
+          : files
+      )
+    }
+
+    function getFiller () {
+      return [
+        h('input', {
+          class: [ props.inputClass, 'q-file__filler' ],
+          style: props.inputStyle,
+          tabindex: -1
+        })
+      ]
+    }
+
+    function getSelection () {
+      if (slots.file !== void 0) {
+        return innerValue.value.length === 0
+          ? getFiller()
+          : innerValue.value.map(
+            (file, index) => slots.file({ index, file, ref: this })
+          )
+      }
+
+      if (slots.selected !== void 0) {
+        return innerValue.value.length === 0
+          ? getFiller()
+          : slots.selected({ files: innerValue.value, ref: this })
+      }
+
+      if (props.useChips === true) {
+        return innerValue.value.length === 0
+          ? getFiller()
+          : innerValue.value.map((file, i) => h(QChip, {
+            key: 'file-' + i,
+            removable: state.editable.value,
+            dense: true,
+            textColor: props.color,
+            tabindex: props.tabindex,
+            onRemove: () => { removeAtIndex(i) }
+          }, () => h('span', {
+            class: 'ellipsis',
+            textContent: file.name
+          })))
+      }
+
+      const textContent = props.displayValue !== void 0
+        ? props.displayValue
+        : selectedString.value
+
+      return textContent.length > 0
+        ? [
+            h('div', {
+              class: props.inputClass,
+              style: props.inputStyle,
+              textContent
+            })
+          ]
+        : getFiller()
+    }
+
+    function getInput () {
+      const data = {
+        ref: inputRef,
+        ...inputAttrs.value,
+        ...formDomProps.value,
+        class: 'q-field__input fit absolute-full cursor-pointer',
+        onChange: addFilesToQueue
+      }
+
+      if (props.multiple === true) {
+        data.multiple = true
+      }
+
+      return h('input', data)
+    }
+
+    Object.assign(state, {
+      inheritAttrs: true,
+      fieldClass: { value: 'q-file q-field--auto-height' },
+      emitValue,
+      hasValue,
+      inputRef,
+      innerValue,
+
+      floatingLabel: computed(() =>
+        hasValue.value === true
+        || fieldValueIsFilled(props.displayValue)
+      ),
+
+      computedCounter: computed(() => {
+        if (props.counterLabel !== void 0) {
+          return props.counterLabel(counterProps.value)
+        }
+
+        const max = props.maxFiles
+        return `${ innerValue.value.length }${ max !== void 0 ? ' / ' + max : '' } (${ totalSize.value })`
+      }),
+
+      getControlChild: () => getDndNode('file'),
+      getControl: () => {
+        const data = {
+          ref: state.targetRef,
+          class: 'q-field__native row items-center cursor-pointer',
+          tabindex: props.tabindex
+        }
+
+        if (state.editable.value === true) {
+          Object.assign(data, { onDragover, onKeyup })
+        }
+
+        return h('div', data, [ getInput() ].concat(getSelection()))
+      }
+    })
+
+    // expose public methods
+    Object.assign(proxy, {
+      removeAtIndex,
+      removeFile,
+      getNativeElement: () => inputRef.value
+    })
+
+    return useField(state)
+  }
+})

package/src/components/file/QFile.json

@@ -0,0 +1,179 @@
+{
+  "mixins": [ "composables/private/use-field", "composables/private/use-file", "composables/private/use-form" ],
+
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/file"
+  },
+
+  "props": {
+    "model-value": {
+      "extends": "model-value",
+      "type": [ "File", "FileList", "Array" ],
+      "desc": "Model of the component; Must be FileList or Array if using 'multiple' prop; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
+      "examples": [ "v-model=\"myModel\"" ]
+    },
+
+    "append": {
+      "type": "Boolean",
+      "desc": "Append file(s) to current model rather than replacing them; Has effect only when using 'multiple' mode",
+      "category": "behavior"
+    },
+
+    "display-value": {
+      "type": [ "Number", "String" ],
+      "desc": "Override default selection string, if not using 'file' or 'selected' scoped slots and if not using 'use-chips' prop",
+      "examples": [ "Options: x, y, z" ],
+      "category": "selection"
+    },
+
+    "use-chips": {
+      "type": "Boolean",
+      "desc": "Use QChip to show picked files",
+      "category": "selection"
+    },
+
+    "counter-label": {
+      "type": "Function",
+      "desc": "Label for the counter; The 'counter' prop is necessary to enable this one",
+      "params": {
+        "props": {
+          "type": "Object",
+          "desc": "Object containing counter label information",
+          "definition": {
+            "totalSize": {
+              "type": "String",
+              "desc": "The total size of files in human readable format",
+              "examples": [ "1.42MB" ]
+            },
+            "filesNumber": {
+              "type": "Number",
+              "desc": "Number of picked files",
+              "examples": [ 5 ]
+            },
+            "maxFiles": {
+              "type": [ "Number", "String" ],
+              "desc": "Maximum number of files (same as 'max-files' prop, if specified); When 'max-files' is not specified, this has 'void 0' as value",
+              "examples": [ 5 ]
+            }
+          }
+        }
+      },
+      "returns": {
+        "type": "String",
+        "desc": "String to display for the counter label",
+        "__exemption": [ "examples" ]
+      },
+      "examples": [
+        ":counter-label=\"counterLabelFn\""
+      ],
+      "category": "behavior"
+    },
+
+    "tabindex": {
+      "extends": "tabindex"
+    },
+
+    "input-class": {
+      "type": [ "Array", "String", "Object" ],
+      "desc": "Class definitions to be attributed to the underlying selection container",
+      "examples": [
+        "my-special-class",
+        ":input-class=\"{ 'my-special-class': <condition> }\""
+      ],
+      "category": "style"
+    },
+
+    "input-style": {
+      "type": [ "Array", "String", "Object" ],
+      "desc": "Style definitions to be attributed to the underlying selection container",
+      "examples": [
+        "background-color: #ff0000",
+        ":input-style=\"{ backgroundColor: '#ff0000' }\""
+      ],
+      "category": "style"
+    }
+  },
+
+  "slots": {
+    "file": {
+      "desc": "Override default node to render a file from the user picked list",
+      "scope": {
+        "index": {
+          "type": "Number",
+          "desc": "Selection index",
+          "examples": [ 0 ]
+        },
+
+        "file": {
+          "type": "File",
+          "desc": "File object",
+          "__exemption": [ "examples" ]
+        },
+
+        "ref": {
+          "type": "Object",
+          "desc": "Reference to the QFile component",
+          "__exemption": [ "examples" ]
+        }
+      }
+    },
+
+    "selected": {
+      "desc": "Override default selection slot; Suggestion: QChip",
+      "scope": {
+        "files": {
+          "type": [ "FileList", "Array" ],
+          "desc": "Array of File objects",
+          "__exemption": [ "examples" ]
+        },
+
+        "ref": {
+          "type": "Object",
+          "desc": "Reference to the QFile component",
+          "__exemption": [ "examples" ]
+        }
+      }
+    }
+  },
+
+  "events": {
+    "update:model-value": {
+      "extends": "update:model-value"
+    }
+  },
+
+  "methods": {
+    "removeAtIndex": {
+      "desc": "Remove file located at specific index in the model",
+      "params": {
+        "index": {
+          "type": "Number",
+          "desc": "Index at which to remove selection",
+          "required": true,
+          "examples": [ 0 ]
+        }
+      }
+    },
+
+    "removeFile": {
+      "desc": "Remove specified file from the model",
+      "params": {
+        "file": {
+          "type": "File",
+          "desc": "File to remove (instance of File)",
+          "required": true,
+          "__exemption": [ "examples" ]
+        }
+      }
+    },
+
+    "getNativeElement": {
+      "desc": "Get the native input DOM Element",
+      "returns": {
+        "type": "Object",
+        "desc": "The underlying native input DOM Element",
+        "__exemption": [ "examples" ]
+      }
+    }
+  }
+}