quasar 2.1.0

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

@@ -0,0 +1,106 @@
+{
+  "props": {
+    "multiple": {
+      "type": "Boolean",
+      "desc": "Allow multiple file uploads",
+      "category": "behavior"
+    },
+
+    "accept": {
+      "type": "String",
+      "desc": "Comma separated list of unique file type specifiers. Maps to 'accept' attribute of native input type=file element",
+      "examples": [
+        ".jpg, .pdf, image/*", "image/jpeg, .pdf"
+      ],
+      "category": "behavior"
+    },
+
+    "capture": {
+      "type": "String",
+      "desc": "Optionally, specify that a new file should be captured, and which device should be used to capture that new media of a type defined by the 'accept' prop. Maps to 'capture' attribute of native input type=file element",
+      "values": [ "user", "environment" ],
+      "category": "behavior"
+    },
+
+    "max-file-size": {
+      "type": [ "Number", "String" ],
+      "desc": "Maximum size of individual file in bytes",
+      "examples": [ 1024, 1048576 ],
+      "category": "behavior"
+    },
+
+    "max-total-size": {
+      "type": [ "Number", "String" ],
+      "desc": "Maximum size of all files combined in bytes",
+      "examples": [ 1024, 1048576 ],
+      "category": "behavior"
+    },
+
+    "max-files": {
+      "type": [ "Number", "String" ],
+      "desc": "Maximum number of files to contain",
+      "examples": [
+        ":max-files=\"5\"",
+        "10"
+      ],
+      "category": "behavior"
+    },
+
+    "filter": {
+      "type": "Function",
+      "desc": "Custom filter for added files; Only files that pass this filter will be added to the queue and uploaded; For best performance, reference it from your scope and do not define it inline",
+      "params": {
+        "files": {
+          "type": [ "FileList", "Array" ],
+          "desc": "Candidate files to be added to queue",
+          "__exemption": [ "examples" ]
+        }
+      },
+      "returns": {
+        "type": "Array",
+        "desc": "Filtered files to be added to queue",
+        "__exemption": [ "examples" ]
+      },
+      "examples": [ ":filter=\"files => files.filter(file => file.size === 1024)\"" ],
+      "category": "behavior"
+    }
+  },
+
+  "events": {
+    "rejected": {
+      "desc": "Emitted after files are picked and some do not pass the validation props (accept, max-file-size, max-total-size, filter, etc)",
+      "params": {
+        "rejectedEntries": {
+          "type": "Array",
+          "desc": "Array of { failedPropValidation: string, file: File } Objects for files that do not pass the validation",
+          "__exemption": ["examples"]
+        }
+      }
+    }
+  },
+
+  "methods": {
+    "pickFiles": {
+      "desc": "Trigger file pick; Must be called as a direct consequence of user interaction (eg. in a click handler), due to browsers security policy",
+      "params": {
+        "evt": {
+          "type": "Object",
+          "desc": "JS event object",
+          "__exemption": [ "examples" ]
+        }
+      }
+    },
+
+    "addFiles": {
+      "desc": "Add files programmatically",
+      "params": {
+        "files": {
+          "type": [ "FileList", "Array" ],
+          "desc": "Array of files (instances of File)",
+          "required": true,
+          "__exemption": [ "examples" ]
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+import { h, computed } from 'vue'
+
+export const useFormProps = {
+  name: String
+}
+
+export function useFormAttrs (props) {
+  return computed(() => ({
+    type: 'hidden',
+    name: props.name,
+    value: props.modelValue
+  }))
+}
+
+export function useFormInject (formAttrs = {}, formDomProps = {}) {
+  return (child, action, className) => {
+    child[ action ](
+      h('input', {
+        class: 'hidden' + (className || ''),
+        ...formAttrs.value,
+        ...formDomProps.value
+      })
+    )
+  }
+}
+
+export function useFormInputNameAttr (props) {
+  return computed(() => props.name || props.for)
+}

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

@@ -0,0 +1,10 @@
+{
+  "props": {
+    "name": {
+      "type": "String",
+      "desc": "Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL",
+      "examples": [ "car_id" ],
+      "category": "behavior"
+    }
+  }
+}

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

@@ -0,0 +1,101 @@
+import { ref, watch, onBeforeMount, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
+
+import History from '../../history.js'
+import { vmHasRouter } from '../../utils/private/vm.js'
+
+export const useFullscreenProps = {
+  fullscreen: Boolean,
+  noRouteFullscreenExit: Boolean
+}
+
+export const useFullscreenEmits = [ 'update:fullscreen', 'fullscreen' ]
+
+export default function () {
+  const vm = getCurrentInstance()
+  const { props, emit, proxy } = vm
+
+  let historyEntry, fullscreenFillerNode, container
+  const inFullscreen = ref(false)
+
+  vmHasRouter(vm) === true && watch(() => proxy.$route, () => {
+    props.noRouteFullscreenExit !== true && exitFullscreen()
+  })
+
+  watch(() => props.fullscreen, v => {
+    if (inFullscreen.value !== v) {
+      toggleFullscreen()
+    }
+  })
+
+  watch(inFullscreen, v => {
+    emit('update:fullscreen', v)
+    emit('fullscreen', v)
+  })
+
+  function toggleFullscreen () {
+    if (inFullscreen.value === true) {
+      exitFullscreen()
+    }
+    else {
+      setFullscreen()
+    }
+  }
+
+  function setFullscreen () {
+    if (inFullscreen.value === true) {
+      return
+    }
+
+    inFullscreen.value = true
+    container = proxy.$el.parentNode
+    container.replaceChild(fullscreenFillerNode, proxy.$el)
+    document.body.appendChild(proxy.$el)
+    document.body.classList.add('q-body--fullscreen-mixin')
+
+    historyEntry = {
+      handler: exitFullscreen
+    }
+    History.add(historyEntry)
+  }
+
+  function exitFullscreen () {
+    if (inFullscreen.value !== true) {
+      return
+    }
+
+    if (historyEntry !== void 0) {
+      History.remove(historyEntry)
+      historyEntry = void 0
+    }
+
+    container.replaceChild(proxy.$el, fullscreenFillerNode)
+    document.body.classList.remove('q-body--fullscreen-mixin')
+    inFullscreen.value = false
+
+    if (proxy.$el.scrollIntoView !== void 0) {
+      setTimeout(() => { proxy.$el.scrollIntoView() })
+    }
+  }
+
+  onBeforeMount(() => {
+    fullscreenFillerNode = document.createElement('span')
+  })
+
+  onMounted(() => {
+    props.fullscreen === true && setFullscreen()
+  })
+
+  onBeforeUnmount(exitFullscreen)
+
+  // expose public methods
+  Object.assign(proxy, {
+    toggleFullscreen,
+    setFullscreen,
+    exitFullscreen
+  })
+
+  return {
+    inFullscreen,
+    toggleFullscreen
+  }
+}

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

@@ -0,0 +1,32 @@
+{
+  "props": {
+    "fullscreen": {
+      "type": "Boolean",
+      "sync": true,
+      "desc": "Fullscreen mode",
+      "examples": [
+        "v-model:fullscreen=\"isFullscreen\""
+      ],
+      "category": "behavior"
+    },
+
+    "no-route-fullscreen-exit": {
+      "type": "Boolean",
+      "desc": "Changing route app won't exit fullscreen",
+      "category": "behavior"
+    }
+  },
+
+  "methods": {
+    "toggleFullscreen": {
+      "desc": "Toggle the view to be fullscreen or not fullscreen"
+    },
+    "setFullscreen": {
+      "desc": "Enter the fullscreen view"
+    },
+
+    "exitFullscreen": {
+      "desc": "Leave the fullscreen view"
+    }
+  }
+}

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

@@ -0,0 +1,31 @@
+import { onBeforeUnmount } from 'vue'
+
+import History from '../../history.js'
+
+export default function (showing, hide, hideOnRouteChange) {
+  let historyEntry
+
+  function removeFromHistory () {
+    if (historyEntry !== void 0) {
+      History.remove(historyEntry)
+      historyEntry = void 0
+    }
+  }
+
+  onBeforeUnmount(() => {
+    showing.value === true && removeFromHistory()
+  })
+
+  return {
+    removeFromHistory,
+
+    addToHistory () {
+      historyEntry = {
+        condition: () => hideOnRouteChange.value === true,
+        handler: hide
+      }
+
+      History.add(historyEntry)
+    }
+  }
+}

package/src/composables/private/use-key-composition.js

@@ -0,0 +1,26 @@
+const isJapanese = /[\u3000-\u303f\u3040-\u309f\u30a0-\u30ff\uff00-\uff9f\u4e00-\u9faf\u3400-\u4dbf]/
+const isChinese = /[\u4e00-\u9fff\u3400-\u4dbf\u{20000}-\u{2a6df}\u{2a700}-\u{2b73f}\u{2b740}-\u{2b81f}\u{2b820}-\u{2ceaf}\uf900-\ufaff\u3300-\u33ff\ufe30-\ufe4f\uf900-\ufaff\u{2f800}-\u{2fa1f}]/u
+const isKorean = /[\u3131-\u314e\u314f-\u3163\uac00-\ud7a3]/
+
+export default function (onInput) {
+  return function onComposition (e) {
+    if (e.type === 'compositionend' || e.type === 'change') {
+      if (e.target.composing !== true) { return }
+      e.target.composing = false
+      onInput(e)
+    }
+    else if (e.type === 'compositionupdate') {
+      if (
+        typeof e.data === 'string'
+        && isJapanese.test(e.data) === false
+        && isChinese.test(e.data) === false
+        && isKorean.test(e.data) === false
+      ) {
+        e.target.composing = false
+      }
+    }
+    else {
+      e.target.composing = true
+    }
+  }
+}

package/src/composables/private/use-model-toggle.js

@@ -0,0 +1,151 @@
+import { watch, nextTick, onMounted, getCurrentInstance } from 'vue'
+
+import { vmHasRouter } from '../../utils/private/vm.js'
+
+export const useModelToggleProps = {
+  modelValue: {
+    type: Boolean,
+    default: null
+  },
+
+  'onUpdate:modelValue': Function
+}
+
+export const useModelToggleEmits = [
+  'before-show', 'show', 'before-hide', 'hide'
+]
+
+// handleShow/handleHide -> removeTick(), self (& emit show), prepareTick()
+
+export default function ({
+  showing,
+  canShow, // optional
+  hideOnRouteChange, // optional
+  handleShow, // optional
+  handleHide, // optional
+  processOnMount // optional
+}) {
+  const vm = getCurrentInstance()
+  const { props, emit, proxy } = vm
+
+  let payload
+
+  function toggle (evt) {
+    if (showing.value === true) {
+      hide(evt)
+    }
+    else {
+      show(evt)
+    }
+  }
+
+  function show (evt) {
+    if (props.disable === true || (canShow !== void 0 && canShow(evt) !== true)) {
+      return
+    }
+
+    const listener = props[ 'onUpdate:modelValue' ] !== void 0
+
+    if (listener === true && __QUASAR_SSR_SERVER__ !== true) {
+      emit('update:modelValue', true)
+      payload = evt
+      nextTick(() => {
+        if (payload === evt) {
+          payload = void 0
+        }
+      })
+    }
+
+    if (props.modelValue === null || listener === false || __QUASAR_SSR_SERVER__) {
+      processShow(evt)
+    }
+  }
+
+  function processShow (evt) {
+    if (showing.value === true) {
+      return
+    }
+
+    showing.value = true
+
+    emit('before-show', evt)
+
+    if (handleShow !== void 0) {
+      handleShow(evt)
+    }
+    else {
+      emit('show', evt)
+    }
+  }
+
+  function hide (evt) {
+    if (__QUASAR_SSR_SERVER__ || props.disable === true) {
+      return
+    }
+
+    const listener = props[ 'onUpdate:modelValue' ] !== void 0
+
+    if (listener === true && __QUASAR_SSR_SERVER__ !== true) {
+      emit('update:modelValue', false)
+      payload = evt
+      nextTick(() => {
+        if (payload === evt) {
+          payload = void 0
+        }
+      })
+    }
+
+    if (props.modelValue === null || listener === false || __QUASAR_SSR_SERVER__) {
+      processHide(evt)
+    }
+  }
+
+  function processHide (evt) {
+    if (showing.value === false) {
+      return
+    }
+
+    showing.value = false
+
+    emit('before-hide', evt)
+
+    if (handleHide !== void 0) {
+      handleHide(evt)
+    }
+    else {
+      emit('hide', evt)
+    }
+  }
+
+  function processModelChange (val) {
+    if (props.disable === true && val === true) {
+      if (props[ 'onUpdate:modelValue' ] !== void 0) {
+        emit('update:modelValue', false)
+      }
+    }
+    else if ((val === true) !== showing.value) {
+      const fn = val === true ? processShow : processHide
+      fn(payload)
+    }
+  }
+
+  watch(() => props.modelValue, processModelChange)
+
+  if (hideOnRouteChange !== void 0 && vmHasRouter(vm) === true) {
+    watch(() => proxy.$route, () => {
+      if (hideOnRouteChange.value === true && showing.value === true) {
+        hide()
+      }
+    })
+  }
+
+  processOnMount === true && onMounted(() => {
+    processModelChange(props.modelValue)
+  })
+
+  // expose public methods
+  const publicMethods = { show, hide, toggle }
+  Object.assign(proxy, publicMethods)
+
+  return publicMethods
+}