quasar 2.1.0

package/src/composables/private/use-field.json

@@ -0,0 +1,246 @@
+{
+  "mixins": [ "composables/private/use-validate" ],
+
+  "props": {
+    "label": {
+      "type": "String",
+      "desc": "A text label that will “float” up above the input field, once the field gets focus",
+      "examples": [ "Username" ],
+      "category": "content"
+    },
+
+    "stack-label": {
+      "type": "Boolean",
+      "desc": "Label will be always shown above the field regardless of field content (if any)",
+      "category": "content"
+    },
+
+    "hint": {
+      "type": "String",
+      "desc": "Helper (hint) text which gets placed below your wrapped form component",
+      "examples": [ "Fill in between 3 and 12 characters" ],
+      "category": "content"
+    },
+
+    "hide-hint": {
+      "type": "Boolean",
+      "desc": "Hide the helper (hint) text when field doesn't have focus",
+      "category": "content"
+    },
+
+    "prefix": {
+      "type": "String",
+      "desc": "Prefix",
+      "examples": [ "$" ],
+      "category": "content"
+    },
+
+    "suffix": {
+      "type": "String",
+      "desc": "Suffix",
+      "examples": [ "@gmail.com" ],
+      "category": "content"
+    },
+
+    "label-color" : {
+      "extends": "color",
+      "desc": "Color name for the label from the Quasar Color Palette; Overrides the 'color' prop; The difference from 'color' prop is that the label will always have this color, even when field is not focused"
+    },
+
+    "color": {
+      "extends": "color"
+    },
+
+    "bg-color": {
+      "extends": "color"
+    },
+
+    "dark": {
+      "extends": "dark"
+    },
+
+    "loading": {
+      "type": "Boolean",
+      "desc": "Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the 'loading' slot.",
+      "category": "behavior|content"
+    },
+
+    "clearable": {
+      "type": "Boolean",
+      "desc": "Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null",
+      "category": "behavior|content"
+    },
+
+    "clear-icon": {
+      "type": "String",
+      "desc": "Custom icon to use for the clear button when using along with 'clearable' prop",
+      "examples": [ "close" ],
+      "category": "content"
+    },
+
+    "filled": {
+      "type": "Boolean",
+      "desc": "Use 'filled' design for the field",
+      "category": "style"
+    },
+
+    "outlined": {
+      "type": "Boolean",
+      "desc": "Use 'outlined' design for the field",
+      "category": "style"
+    },
+
+    "borderless": {
+      "type": "Boolean",
+      "desc": "Use 'borderless' design for the field",
+      "category": "style"
+    },
+
+    "standout": {
+      "type": [ "Boolean", "String" ],
+      "desc": "Use 'standout' design for the field; Specifies classes to be applied when focused (overriding default ones)",
+      "examples": [
+        "standout",
+        "standout=\"bg-primary text-white\""
+      ],
+      "category": "style"
+    },
+
+    "label-slot": {
+      "type": "Boolean",
+      "desc": "Enables label slot; You need to set it to force use of the 'label' slot if the 'label' prop is not set",
+      "category": "content"
+    },
+
+    "bottom-slots": {
+      "type": "Boolean",
+      "desc": "Enables bottom slots ('error', 'hint', 'counter')",
+      "category": "content"
+    },
+
+    "hide-bottom-space": {
+      "type": "Boolean",
+      "desc": "Do not reserve space for hint/error/counter anymore when these are not used; As a result, it also disables the animation for those; It also allows the hint/error area to stretch vertically based on its content",
+      "category": "style"
+    },
+
+    "counter": {
+      "type": "Boolean",
+      "desc": "Show an automatic counter on bottom right",
+      "category": "content"
+    },
+
+    "rounded": {
+      "extends": "rounded"
+    },
+
+    "square": {
+      "type": "Boolean",
+      "desc": "Remove border-radius so borders are squared; Overrides 'rounded' prop",
+      "category": "style"
+    },
+
+    "dense": {
+      "extends": "dense"
+    },
+
+    "item-aligned": {
+      "type": "Boolean",
+      "desc": "Match inner content alignment to that of QItem",
+      "category": "style"
+    },
+
+    "disable": {
+      "extends": "disable"
+    },
+
+    "readonly": {
+      "extends": "readonly"
+    },
+
+    "autofocus": {
+      "type": "Boolean",
+      "desc": "Focus field on initial component render",
+      "category": "behavior"
+    },
+
+    "for": {
+      "type": "String",
+      "desc": "Used to specify the 'id' of the control and also the 'for' attribute of the label that wraps it; If no 'name' prop is specified, then it is used for this attribute as well",
+      "examples": [ "myFieldsId" ],
+      "category": "behavior"
+    },
+
+    "name": {
+      "type": "String",
+      "desc": "Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of 'for' prop, if it exists",
+      "examples": [ "car_id" ],
+      "category": "behavior"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "desc": "Field main content"
+    },
+
+    "prepend": {
+      "desc": "Prepend inner field; Suggestions: QIcon, QBtn"
+    },
+
+    "append": {
+      "desc": "Append to inner field; Suggestions: QIcon, QBtn"
+    },
+
+    "before": {
+      "desc": "Prepend outer field; Suggestions: QIcon, QBtn"
+    },
+
+    "after": {
+      "desc": "Append outer field; Suggestions: QIcon, QBtn"
+    },
+
+    "label": {
+      "desc": "Slot for label; Used only if 'label-slot' prop is set or the 'label' prop is set; When it is used the text in the 'label' prop is ignored"
+    },
+
+    "error": {
+      "desc": "Slot for errors; Enabled only if 'bottom-slots' prop is used; Suggestion: <div>"
+    },
+
+    "hint": {
+      "desc": "Slot for hint text; Enabled only if 'bottom-slots' prop is used; Suggestion: <div>"
+    },
+
+    "counter": {
+      "desc": "Slot for counter text; Enabled only if 'bottom-slots' prop is used; Suggestion: <div>"
+    },
+
+    "loading": {
+      "desc": "Override default spinner when component is in loading mode; Use in conjunction with 'loading' prop"
+    }
+  },
+
+  "events": {
+    "clear": {
+      "desc": "When using the 'clearable' property, this event is emitted when the clear icon is clicked",
+      "params": {
+        "value": {
+          "type": [ "Any" ],
+          "desc": "The previous value before clearing it",
+          "__exemption": [ "examples" ]
+        }
+      }
+    }
+  },
+
+  "methods": {
+    "focus": {
+      "desc": "Focus component"
+    },
+
+    "blur": {
+      "desc": "Blur component (lose focus)"
+    }
+  }
+}

package/src/composables/private/use-file-dom-props.js

@@ -0,0 +1,44 @@
+import { computed } from 'vue'
+
+export default function (props, typeGuard) {
+  function getFormDomProps () {
+    const model = props.modelValue
+
+    try {
+      const dt = 'DataTransfer' in window
+        ? new DataTransfer()
+        : ('ClipboardEvent' in window
+            ? new ClipboardEvent('').clipboardData
+            : void 0
+          )
+
+      if (Object(model) === model) {
+        ('length' in model
+          ? Array.from(model)
+          : [ model ]
+        ).forEach(file => {
+          dt.items.add(file)
+        })
+      }
+
+      return {
+        files: dt.files
+      }
+    }
+    catch (e) {
+      return {
+        files: void 0
+      }
+    }
+  }
+
+  return typeGuard === true
+    ? computed(() => {
+        if (props.type !== 'file') {
+          return
+        }
+
+        return getFormDomProps()
+      })
+    : computed(getFormDomProps)
+}

package/src/composables/private/use-file.js

@@ -0,0 +1,201 @@
+import { h, computed, getCurrentInstance } from 'vue'
+
+import { stopAndPrevent } from '../../utils/event.js'
+
+function filterFiles (files, rejectedFiles, failedPropValidation, filterFn) {
+  const acceptedFiles = []
+
+  files.forEach(file => {
+    if (filterFn(file) === true) {
+      acceptedFiles.push(file)
+    }
+    else {
+      rejectedFiles.push({ failedPropValidation, file })
+    }
+  })
+
+  return acceptedFiles
+}
+
+function stopAndPreventDrag (e) {
+  e && e.dataTransfer && (e.dataTransfer.dropEffect = 'copy')
+  stopAndPrevent(e)
+}
+
+export const useFileProps = {
+  multiple: Boolean,
+  accept: String,
+  capture: String,
+  maxFileSize: [ Number, String ],
+  maxTotalSize: [ Number, String ],
+  maxFiles: [ Number, String ],
+  filter: Function
+}
+
+export const useFileEmits = [ 'rejected' ]
+
+export default function ({
+  editable,
+  dnd,
+  getFileInput,
+  addFilesToQueue
+}) {
+  const { props, emit, proxy } = getCurrentInstance()
+
+  const extensions = computed(() => (
+    props.accept !== void 0
+      ? props.accept.split(',').map(ext => {
+          ext = ext.trim()
+          if (ext === '*') { // support "*"
+            return '*/'
+          }
+          else if (ext.endsWith('/*')) { // support "image/*" or "*/*"
+            ext = ext.slice(0, ext.length - 1)
+          }
+          return ext.toUpperCase()
+        })
+      : null
+  ))
+
+  const maxFilesNumber = computed(() => parseInt(props.maxFiles, 10))
+  const maxTotalSizeNumber = computed(() => parseInt(props.maxTotalSize, 10))
+
+  function pickFiles (e) {
+    if (editable.value) {
+      const input = getFileInput()
+      input && input.click(e)
+    }
+  }
+
+  function addFiles (files) {
+    if (editable.value && files) {
+      addFilesToQueue(null, files)
+    }
+  }
+
+  function processFiles (e, filesToProcess, currentFileList, append) {
+    let files = Array.from(filesToProcess || e.target.files)
+    const rejectedFiles = []
+
+    const done = () => {
+      if (rejectedFiles.length > 0) {
+        emit('rejected', rejectedFiles)
+      }
+    }
+
+    // filter file types
+    if (props.accept !== void 0 && extensions.value.indexOf('*/') === -1) {
+      files = filterFiles(files, rejectedFiles, 'accept', file => {
+        return extensions.value.some(ext => (
+          file.type.toUpperCase().startsWith(ext)
+          || file.name.toUpperCase().endsWith(ext)
+        ))
+      })
+
+      if (files.length === 0) { return done() }
+    }
+
+    // filter max file size
+    if (props.maxFileSize !== void 0) {
+      const maxFileSize = parseInt(props.maxFileSize, 10)
+      files = filterFiles(files, rejectedFiles, 'max-file-size', file => {
+        return file.size <= maxFileSize
+      })
+
+      if (files.length === 0) { return done() }
+    }
+
+    // Cordova/iOS allows selecting multiple files even when the
+    // multiple attribute is not specified. We also normalize drag'n'dropped
+    // files here:
+    if (props.multiple !== true) {
+      files = [ files[ 0 ] ]
+    }
+
+    if (props.maxTotalSize !== void 0) {
+      let size = append === true
+        ? currentFileList.reduce((total, file) => total + file.size, 0)
+        : 0
+
+      files = filterFiles(files, rejectedFiles, 'max-total-size', file => {
+        size += file.size
+        return size <= maxTotalSizeNumber.value
+      })
+
+      if (files.length === 0) { return done() }
+    }
+
+    // do we have custom filter function?
+    if (typeof props.filter === 'function') {
+      const filteredFiles = props.filter(files)
+      files = filterFiles(files, rejectedFiles, 'filter', file => {
+        return filteredFiles.includes(file)
+      })
+    }
+
+    if (props.maxFiles !== void 0) {
+      let filesNumber = append === true
+        ? currentFileList.length
+        : 0
+
+      files = filterFiles(files, rejectedFiles, 'max-files', () => {
+        filesNumber++
+        return filesNumber <= maxFilesNumber.value
+      })
+
+      if (files.length === 0) { return done() }
+    }
+
+    done()
+
+    if (files.length > 0) {
+      return files
+    }
+  }
+
+  function onDragover (e) {
+    stopAndPreventDrag(e)
+    dnd.value !== true && (dnd.value = true)
+  }
+
+  function onDragleave (e) {
+    stopAndPrevent(e)
+    dnd.value = false
+  }
+
+  function onDrop (e) {
+    stopAndPreventDrag(e)
+    const files = e.dataTransfer.files
+
+    if (files.length > 0) {
+      addFilesToQueue(null, files)
+    }
+
+    dnd.value = false
+  }
+
+  function getDndNode (type) {
+    if (dnd.value === true) {
+      return h('div', {
+        class: `q-${ type }__dnd absolute-full`,
+        onDragenter: stopAndPreventDrag,
+        onDragover: stopAndPreventDrag,
+        onDragleave,
+        onDrop
+      })
+    }
+  }
+
+  // expose public methods
+  Object.assign(proxy, { pickFiles, addFiles })
+
+  return {
+    pickFiles,
+    addFiles,
+    onDragover,
+    processFiles,
+    getDndNode,
+    maxFilesNumber,
+    maxTotalSizeNumber
+  }
+}