quasar 2.7.6 → 2.8.0

package/src/components/uploader/QUploader.json

@@ -151,6 +151,113 @@
           "__exemption": ["examples"]
         }
       }
+    },
+
+    "updateFileStatus": {
+      "desc": "Update the status of a file",
+      "params": {
+        "file": {
+          "type": "Object",
+          "desc": "File to update (instance of File)",
+          "required": true,
+          "__exemption": ["examples"]
+        },
+        "status": {
+          "type": "String",
+          "desc": "Status of file",
+          "values": [ "idle", "failed", "uploading", "uploaded" ],
+          "required": true
+        },
+        "uploadedSize": {
+          "type": "Number",
+          "desc": "The number of uploaded bytes of the file; Is required explicitly only when status is NOT 'uploaded'",
+          "required": true,
+          "__exemption": ["examples"]
+        }
+      }
+    },
+
+    "isAlive": {
+      "desc": "Is the component alive (activated but not unmounted); Useful to determine if you still need to compute anything going further",
+      "returns": {
+        "type": "Boolean",
+        "desc": "If true, the current component is still activated and mounted"
+      }
+    },
+
+    "pickFiles": {
+      "desc": "Trigger the file picker dialog; The event must come from a user interaction event handler",
+      "params": {
+        "evt": {
+          "extends": "evt",
+          "required": true,
+          "desc": "JS event object of the original user interaction handler"
+        }
+      }
+    },
+
+    "addFiles": {
+      "desc": "Manually add files to the queue",
+      "params": {
+        "files": {
+          "type": "Array",
+          "required": true,
+          "desc": "Must be an array of instances of JS File type"
+        }
+      }
+    }
+  },
+
+  "computedProps": {
+    "files": {
+      "type": "Array",
+      "desc": "List of all files",
+      "__exemption": [ "examples" ]
+    },
+
+    "queuedFiles": {
+      "type": "Array",
+      "desc": "List of files that are waiting to be uploaded",
+      "__exemption": [ "examples" ]
+    },
+
+    "uploadedFiles": {
+      "type": "Array",
+      "desc": "List of files that have been uploaded",
+      "__exemption": [ "examples" ]
+    },
+
+    "uploadedSize": {
+      "type": "Number",
+      "desc": "Size of all uploaded files in bytes",
+      "examples": [ 1024 ]
+    },
+
+    "uploadSizeLabel": {
+      "type": "String",
+      "desc": "Label for the size total of all files",
+      "examples": [ "1.0MB" ]
+    },
+
+    "uploadProgressLabel": {
+      "type": "String",
+      "desc": "Label for the upload progress (in %)",
+      "examples": [ "52.76%" ]
+    },
+
+    "canAddFiles": {
+      "type": "Boolean",
+      "desc": "Whether new files can be added to the list"
+    },
+
+    "canUpload": {
+      "type": "Boolean",
+      "desc": "Whether the files can be uploaded"
+    },
+
+    "isBusy": {
+      "type": "Boolean",
+      "desc": "The component state is set as busy; User should not be able to interact with the component"
     }
   }
 }

package/src/components/uploader/__tests__/QUploader.spec.js

@@ -1,3 +1,6 @@
+import { mount } from '@cypress/vue'
+import QUploader from '../QUploader'
+
 describe('Uploader API', () => {
   describe('Props', () => {
     describe('Category: behavior', () => {
@@ -83,8 +86,36 @@ describe('Uploader API', () => {
 
   describe('Slots', () => {
     describe('(slot): header', () => {
-      it.skip(' ', () => {
-        //
+      it('renders correctly using the scope', () => {
+        // Taken from ui/dev/src/pages/form/uploader.vue
+        const headerSlot = `
+<template #header="scope">
+  <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
+    <q-btn v-if="scope.queuedFiles.length > 0" icon="clear_all" @click="scope.removeQueuedFiles" round dense flat />
+    <q-btn v-if="scope.uploadedFiles.length > 0" icon="done_all" @click="scope.removeUploadedFiles" round dense flat />
+    <q-spinner v-if="scope.isUploading" class="q-uploader__spinner" />
+    <div class="col">
+      <div class="q-uploader__title">
+        Upload your files
+      </div>
+      <div class="q-uploader__subtitle">
+        {{ scope.uploadSizeLabel }} / {{ scope.uploadProgressLabel }}
+      </div>
+    </div>
+    <q-btn v-if="scope.canAddFiles" type="a" icon="add_box" @click="scope.pickFiles" round dense flat>
+      <q-uploader-add-trigger />
+    </q-btn>
+    <q-btn v-if="scope.canUpload" icon="cloud_upload" @click="scope.upload" round dense flat />
+    <q-btn v-if="scope.isUploading" icon="clear" @click="scope.abort" round dense flat />
+  </div>
+</template>
+`
+
+        mount(QUploader, {
+          slots: {
+            header: headerSlot
+          }
+        })
       })
     })
 

package/src/components/uploader/uploader-core.js

@@ -11,6 +11,7 @@ import useFile, { useFileProps, useFileEmits } from '../../composables/private/u
 import { stop } from '../../utils/event.js'
 import { humanStorageSize } from '../../utils/format.js'
 import { uploaderKey } from '../../utils/private/symbols.js'
+import { injectProp, injectMultipleProps } from '../../utils/private/inject-obj-prop.js'
 
 function getProgressLabel (p) {
   return (p * 100).toFixed(2) + '%'
@@ -76,6 +77,12 @@ export function getRenderer (getPlugin) {
     proxy.$forceUpdate()
   }
 
+  const editable = computed(() => props.disable !== true && props.readonly !== true)
+  const dnd = ref(false)
+
+  const rootRef = ref(null)
+  const inputRef = ref(null)
+
   const state = {
     files: ref([]),
     queuedFiles: ref([]),
@@ -88,22 +95,6 @@ export function getRenderer (getPlugin) {
     }
   }
 
-  Object.assign(state, getPlugin({ props, slots, emit, helpers: state }))
-
-  const uploadSize = ref(0)
-  const editable = computed(() => props.disable !== true && props.readonly !== true)
-
-  if (state.isBusy === void 0) {
-    state.isBusy = ref(false)
-  }
-
-  const dnd = ref(false)
-
-  const rootRef = ref(null)
-  const inputRef = ref(null)
-
-  provide(uploaderKey, renderInput)
-
   const {
     pickFiles,
     addFiles,
@@ -115,6 +106,21 @@ export function getRenderer (getPlugin) {
     maxTotalSizeNumber
   } = useFile({ editable, dnd, getFileInput, addFilesToQueue })
 
+  Object.assign(state, getPlugin({ props, slots, emit, helpers: state }))
+
+  if (state.isBusy === void 0) {
+    state.isBusy = ref(false)
+  }
+
+  const uploadSize = ref(0)
+  const uploadProgress = computed(() => (
+    uploadSize.value === 0
+      ? 0
+      : state.uploadedSize.value / uploadSize.value
+  ))
+  const uploadProgressLabel = computed(() => getProgressLabel(uploadProgress.value))
+  const uploadSizeLabel = computed(() => humanStorageSize(uploadSize.value))
+
   const canAddFiles = computed(() =>
     editable.value === true
     && state.isUploading.value !== true
@@ -133,14 +139,7 @@ export function getRenderer (getPlugin) {
     && state.queuedFiles.value.length > 0
   )
 
-  const uploadProgress = computed(() => (
-    uploadSize.value === 0
-      ? 0
-      : state.uploadedSize.value / uploadSize.value
-  ))
-
-  const uploadProgressLabel = computed(() => getProgressLabel(uploadProgress.value))
-  const uploadSizeLabel = computed(() => humanStorageSize(uploadSize.value))
+  provide(uploaderKey, renderInput)
 
   const classes = computed(() =>
     'q-uploader column no-wrap'
@@ -335,7 +334,7 @@ export function getRenderer (getPlugin) {
 
   function getHeader () {
     if (slots.header !== void 0) {
-      return slots.header(slotScope.value)
+      return slots.header(publicApi)
     }
 
     return [
@@ -372,7 +371,7 @@ export function getRenderer (getPlugin) {
 
   function getList () {
     if (slots.list !== void 0) {
-      return slots.list(slotScope.value)
+      return slots.list(publicApi)
     }
 
     return state.files.value.map(file => h('div', {
@@ -431,41 +430,37 @@ export function getRenderer (getPlugin) {
     state.files.value.length > 0 && revokeImgURLs()
   })
 
-  const publicMethods = {
-    pickFiles,
-    addFiles,
+  const publicApi = {}
+
+  for (const key in state) {
+    if (isRef(state[ key ]) === true) {
+      injectProp(publicApi, key, () => state[ key ].value)
+    }
+    else { // method or non-computed prop
+      publicApi[ key ] = state[ key ]
+    }
+  }
+
+  Object.assign(publicApi, {
+    upload,
     reset,
     removeUploadedFiles,
     removeQueuedFiles,
     removeFile,
-    upload,
-    abort: state.abort
-  }
-
-  // TODO: the result of this computed, especially the dynamic part, isn't currently typed
-  // This result in an error with Volar when accessing the state (eg. files array)
-  const slotScope = computed(() => {
-    const acc = {
-      canAddFiles: canAddFiles.value,
-      canUpload: canUpload.value,
-      uploadSizeLabel: uploadSizeLabel.value,
-      uploadProgressLabel: uploadProgressLabel.value
-    }
 
-    for (const key in state) {
-      acc[ key ] = isRef(state[ key ]) === true
-        ? state[ key ].value
-        : state[ key ]
-    }
+    pickFiles,
+    addFiles
+  })
 
-    // TODO: (Qv3) Put the QUploader instance under `ref`
-    // property for consistency and flexibility
-    // return { ref: { ...acc, ...publicMethods } }
-    return { ...acc, ...publicMethods }
+  injectMultipleProps(publicApi, {
+    canAddFiles: () => canAddFiles.value,
+    canUpload: () => canUpload.value,
+    uploadSizeLabel: () => uploadSizeLabel.value,
+    uploadProgressLabel: () => uploadProgressLabel.value
   })
 
-  // expose public methods
-  Object.assign(proxy, publicMethods)
+  // expose public api (methods & computed props)
+  Object.assign(proxy, publicApi)
 
   return () => {
     const children = [

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

@@ -527,9 +527,6 @@ export default function (state) {
       }, content)
   }
 
-  // expose public methods
-  Object.assign(proxy, { focus, blur })
-
   let shouldActivate = false
 
   onDeactivated(() => {
@@ -552,6 +549,9 @@ export default function (state) {
     clearTimeout(focusoutTimer)
   })
 
+  // expose public methods
+  Object.assign(proxy, { focus, blur })
+
   return function renderField () {
     const labelAttrs = state.getControl === void 0 && slots.control === void 0
       ? {

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

@@ -221,6 +221,7 @@ export default function ({
     onDragover,
     processFiles,
     getDndNode,
+
     maxFilesNumber,
     maxTotalSizeNumber
   }

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

@@ -126,13 +126,6 @@ export default function () {
   function nextPanel () { goToPanelByOffset(1) }
   function previousPanel () { goToPanelByOffset(-1) }
 
-  // expose public methods
-  Object.assign(proxy, {
-    next: nextPanel,
-    previous: previousPanel,
-    goTo: goToPanel
-  })
-
   function goToPanel (name) {
     emit('update:modelValue', name)
   }
@@ -257,6 +250,13 @@ export default function () {
     return panels
   }
 
+  // expose public methods
+  Object.assign(proxy, {
+    next: nextPanel,
+    previous: previousPanel,
+    goTo: goToPanel
+  })
+
   return {
     panelIndex,
     panelDirectives,

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

@@ -3,7 +3,7 @@ import { h, ref, onUnmounted, Teleport } from 'vue'
 import { noop } from '../../utils/event.js'
 import { addFocusWaitFlag, removeFocusWaitFlag } from '../../utils/private/focus-manager.js'
 import { createGlobalNode, removeGlobalNode } from '../../utils/private/global-nodes.js'
-import { portalList } from '../../utils/private/portal.js'
+import { portalProxyList } from '../../utils/private/portal.js'
 
 function isOnGlobalDialog (vm) {
   vm = vm.parent
@@ -64,7 +64,7 @@ export default function (vm, innerRef, renderPortalContent, checkGlobalDialog) {
       portalIsActive.value = true
 
       // register portal
-      portalList.push(vm.proxy)
+      portalProxyList.push(vm.proxy)
 
       addFocusWaitFlag(focusObj)
     }
@@ -79,9 +79,9 @@ export default function (vm, innerRef, renderPortalContent, checkGlobalDialog) {
     portalIsActive.value = false
 
     // unregister portal
-    const index = portalList.indexOf(vm.proxy)
-    if (index > -1) {
-      portalList.splice(index, 1)
+    const index = portalProxyList.indexOf(vm.proxy)
+    if (index !== -1) {
+      portalProxyList.splice(index, 1)
     }
 
     if (portalEl !== null) {
@@ -92,8 +92,8 @@ export default function (vm, innerRef, renderPortalContent, checkGlobalDialog) {
 
   onUnmounted(() => { hidePortal(true) })
 
-  // expose publicly needed stuff for portal utils
-  Object.assign(vm.proxy, { __qPortalInnerRef: innerRef })
+  // needed for portal vm detection
+  vm.proxy.__qPortalInnerRef = innerRef
 
   return {
     showPortal,

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

@@ -74,5 +74,12 @@
         ]
       }
     }
+  },
+
+  "computedProps": {
+    "hasError": {
+      "type": "Boolean",
+      "desc": "Whether the component is in error state"
+    }
   }
 }

package/src/directives/ClosePopup.js

@@ -1,5 +1,5 @@
 import { createDirective } from '../utils/private/create.js'
-import { closePortals, getPortalVm } from '../utils/private/portal.js'
+import { closePortals, getPortalProxy } from '../utils/private/portal.js'
 import { isKeyCode } from '../utils/private/key-composition.js'
 import getSSRProps from '../utils/private/noop-ssr-directive-transform.js'
 
@@ -34,9 +34,9 @@ export default createDirective(__QUASAR_SSR_SERVER__
           handler (evt) {
             // allow @click to be emitted
             ctx.depth !== 0 && setTimeout(() => {
-              const vm = getPortalVm(el)
-              if (vm !== void 0) {
-                closePortals(vm, evt, ctx.depth)
+              const proxy = getPortalProxy(el)
+              if (proxy !== void 0) {
+                closePortals(proxy, evt, ctx.depth)
               }
             })
           },

package/src/directives/Intersection.js

@@ -1,5 +1,5 @@
 import { createDirective } from '../utils/private/create.js'
-import { isDeepEqual } from '../utils/private/is.js'
+import { isDeepEqual } from '../utils/is.js'
 import getSSRProps from '../utils/private/noop-ssr-directive-transform.js'
 
 const defaultCfg = {

package/src/index.dev.js

@@ -0,0 +1,16 @@
+import installQuasar from './install-quasar.js'
+import lang from './lang.js'
+import iconSet from './icon-set.js'
+
+export * from './components.js'
+export * from './directives.js'
+export * from './plugins.js'
+export * from './composables.js'
+export * from './utils.js'
+
+export const Quasar = {
+  version: __QUASAR_VERSION__,
+  install: installQuasar,
+  lang,
+  iconSet
+}

package/src/install-quasar.js

@@ -10,7 +10,7 @@ import IconSet from './icon-set.js'
 
 import { quasarKey } from './utils/private/symbols.js'
 import { globalConfig, globalConfigIsFrozen, freezeGlobalConfig } from './utils/private/global-config.js'
-import { isObject } from './utils/private/is.js'
+import { isObject } from './utils/is.js'
 
 const autoInstalledPlugins = [
   Platform,