quasar 2.1.0

package/src/components/file/QFile.sass

@@ -0,0 +1,19 @@
+.q-file
+
+  .q-field__native
+    word-break: break-all
+    overflow: hidden
+
+  .q-field__input
+    opacity: 0 !important
+
+    &::-webkit-file-upload-button
+      cursor: pointer
+
+  &__filler
+    opacity: 0
+    pointer-events: none
+
+  &__dnd
+    outline: 1px dashed currentColor
+    outline-offset: -4px

package/src/components/file/index.js

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

package/src/components/footer/QFooter.js

@@ -0,0 +1,200 @@
+import { h, defineComponent, ref, computed, watch, onBeforeUnmount, inject, getCurrentInstance } from 'vue'
+
+import { isRuntimeSsrPreHydration } from '../../plugins/Platform.js'
+
+import QResizeObserver from '../resize-observer/QResizeObserver.js'
+
+import { hMergeSlot } from '../../utils/private/render.js'
+import { layoutKey } from '../../utils/private/symbols.js'
+
+export default defineComponent({
+  name: 'QFooter',
+
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: true
+    },
+    reveal: Boolean,
+    bordered: Boolean,
+    elevated: Boolean,
+
+    heightHint: {
+      type: [ String, Number ],
+      default: 50
+    }
+  },
+
+  emits: [ 'reveal', 'focusin' ],
+
+  setup (props, { slots, emit }) {
+    const { proxy: { $q } } = getCurrentInstance()
+
+    const $layout = inject(layoutKey, () => {
+      console.error('QFooter needs to be child of QLayout')
+    })
+
+    const size = ref(parseInt(props.heightHint, 10))
+    const revealed = ref(true)
+    const windowHeight = ref(
+      isRuntimeSsrPreHydration.value === true || $layout.isContainer.value === true
+        ? 0
+        : window.innerHeight
+    )
+
+    const fixed = computed(() =>
+      props.reveal === true
+      || $layout.view.value.indexOf('F') > -1
+      || $layout.isContainer.value === true
+    )
+
+    const containerHeight = computed(() => (
+      $layout.isContainer.value === true
+        ? $layout.containerHeight.value
+        : windowHeight.value
+    ))
+
+    const offset = computed(() => {
+      if (props.modelValue !== true) {
+        return 0
+      }
+      if (fixed.value === true) {
+        return revealed.value === true ? size.value : 0
+      }
+      const offset = $layout.scroll.value.position + containerHeight.value + size.value - $layout.height.value
+      return offset > 0 ? offset : 0
+    })
+
+    const hidden = computed(() =>
+      props.modelValue !== true || (fixed.value === true && revealed.value !== true)
+    )
+
+    const revealOnFocus = computed(() =>
+      props.modelValue === true && hidden.value === true && props.reveal === true
+    )
+
+    const classes = computed(() =>
+      'q-footer q-layout__section--marginal '
+      + (fixed.value === true ? 'fixed' : 'absolute') + '-bottom'
+      + (props.bordered === true ? ' q-footer--bordered' : '')
+      + (hidden.value === true ? ' q-footer--hidden' : '')
+      + (
+        props.modelValue !== true
+          ? ' q-layout--prevent-focus' + (fixed.value !== true ? ' hidden' : '')
+          : ''
+      )
+    )
+
+    const style = computed(() => {
+      const
+        view = $layout.rows.value.bottom,
+        css = {}
+
+      if (view[ 0 ] === 'l' && $layout.left.space === true) {
+        css[ $q.lang.rtl === true ? 'right' : 'left' ] = `${ $layout.left.size }px`
+      }
+      if (view[ 2 ] === 'r' && $layout.right.space === true) {
+        css[ $q.lang.rtl === true ? 'left' : 'right' ] = `${ $layout.right.size }px`
+      }
+
+      return css
+    })
+
+    function updateLayout (prop, val) {
+      $layout.update('footer', prop, val)
+    }
+
+    function updateLocal (prop, val) {
+      if (prop.value !== val) {
+        prop.value = val
+      }
+    }
+
+    function onResize ({ height }) {
+      updateLocal(size, height)
+      updateLayout('size', height)
+    }
+
+    function updateRevealed () {
+      if (props.reveal !== true) { return }
+
+      const { direction, position, inflectionPoint } = $layout.scroll.value
+
+      updateLocal(revealed, (
+        direction === 'up'
+        || position - inflectionPoint < 100
+        || $layout.height.value - containerHeight.value - position - size.value < 300
+      ))
+    }
+
+    function onFocusin (evt) {
+      if (revealOnFocus.value === true) {
+        updateLocal(revealed, true)
+      }
+
+      emit('focusin', evt)
+    }
+
+    watch(() => props.modelValue, val => {
+      updateLayout('space', val)
+      updateLocal(revealed, true)
+      $layout.animate()
+    })
+
+    watch(offset, val => {
+      updateLayout('offset', val)
+    })
+
+    watch(() => props.reveal, val => {
+      val === false && updateLocal(revealed, props.modelValue)
+    })
+
+    watch(revealed, val => {
+      $layout.animate()
+      emit('reveal', val)
+    })
+
+    watch([ size, $layout.scroll, $layout.height ], updateRevealed)
+
+    watch(() => $q.screen.height, val => {
+      $layout.isContainer.value !== true && updateLocal(windowHeight, val)
+    })
+
+    const instance = {}
+
+    $layout.instances.footer = instance
+    props.modelValue === true && updateLayout('size', size.value)
+    updateLayout('space', props.modelValue)
+    updateLayout('offset', offset.value)
+
+    onBeforeUnmount(() => {
+      if ($layout.instances.footer === instance) {
+        $layout.instances.footer = void 0
+        updateLayout('size', 0)
+        updateLayout('offset', 0)
+        updateLayout('space', false)
+      }
+    })
+
+    return () => {
+      const child = hMergeSlot(slots.default, [
+        h(QResizeObserver, {
+          debounce: 0,
+          onResize
+        })
+      ])
+
+      props.elevated === true && child.push(
+        h('div', {
+          class: 'q-layout__shadow absolute-full overflow-hidden no-pointer-events'
+        })
+      )
+
+      return h('footer', {
+        class: classes.value,
+        style: style.value,
+        onFocusin
+      }, child)
+    }
+  }
+})

package/src/components/footer/QFooter.json

@@ -0,0 +1,60 @@
+{
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/layout/header-and-footer"
+  },
+
+  "props": {
+    "model-value": {
+      "extends": "model-value",
+      "type": "Boolean",
+      "desc": "Model of the component defining if it is shown or hidden to the user; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
+      "default": true,
+      "required": false,
+      "examples": [
+        "v-model=\"footerState\""
+      ]
+    },
+
+    "reveal": {
+      "type": "Boolean",
+      "desc": "Enable 'reveal' mode; Takes into account user scroll to temporarily show/hide footer",
+      "category": "behavior"
+    },
+
+    "bordered": {
+      "extends": "bordered"
+    },
+
+    "elevated": {
+      "type": "Boolean",
+      "desc": "Adds a default shadow to the footer",
+      "category": "style"
+    },
+
+    "height-hint": {
+      "type": [ "Number", "String " ],
+      "desc": "When using SSR, you can optionally hint of the height (in pixels) of the QFooter",
+      "default": 50,
+      "examples": [ "150" ],
+      "category": "behavior"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "desc": "Default slot in the devland unslotted content of the component; Suggestion: QToolbar"
+    }
+  },
+
+  "events": {
+    "reveal": {
+      "desc": "Emitted when 'reveal' state gets changed",
+      "params": {
+        "value": {
+          "type": "Boolean",
+          "desc": "New 'reveal' state"
+        }
+      }
+    }
+  }
+}

package/src/components/footer/index.js

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

package/src/components/form/QForm.js

@@ -0,0 +1,184 @@
+import { h, defineComponent, ref, onMounted, getCurrentInstance, nextTick, provide } from 'vue'
+
+import { stopAndPrevent } from '../../utils/event.js'
+import { addFocusFn } from '../../utils/private/focus-manager.js'
+import { hSlot } from '../../utils/private/render.js'
+import { formKey } from '../../utils/private/symbols.js'
+
+export default defineComponent({
+  name: 'QForm',
+
+  props: {
+    autofocus: Boolean,
+    noErrorFocus: Boolean,
+    noResetFocus: Boolean,
+    greedy: Boolean,
+
+    onSubmit: Function
+  },
+
+  emits: [ 'reset', 'validation-success', 'validation-error' ],
+
+  setup (props, { slots, emit }) {
+    const vm = getCurrentInstance()
+    const rootRef = ref(null)
+
+    let validateIndex = 0
+    const registeredComponents = []
+
+    function validate (shouldFocus) {
+      const promises = []
+      const focus = typeof shouldFocus === 'boolean'
+        ? shouldFocus
+        : props.noErrorFocus !== true
+
+      validateIndex++
+
+      const emitEvent = (res, ref) => {
+        emit('validation-' + (res === true ? 'success' : 'error'), ref)
+      }
+
+      for (let i = 0; i < registeredComponents.length; i++) {
+        const comp = registeredComponents[ i ]
+        const valid = comp.validate()
+
+        if (typeof valid.then === 'function') {
+          promises.push(
+            valid.then(
+              valid => ({ valid, comp }),
+              error => ({ valid: false, comp, error })
+            )
+          )
+        }
+        else if (valid !== true) {
+          if (props.greedy === false) {
+            emitEvent(false, comp)
+
+            if (focus === true && typeof comp.focus === 'function') {
+              comp.focus()
+            }
+
+            return Promise.resolve(false)
+          }
+
+          promises.push({ valid: false, comp })
+        }
+      }
+
+      if (promises.length === 0) {
+        emitEvent(true)
+        return Promise.resolve(true)
+      }
+
+      const index = validateIndex
+
+      return Promise.all(promises).then(
+        res => {
+          if (index === validateIndex) {
+            const errors = res.filter(r => r.valid !== true)
+
+            if (errors.length === 0) {
+              emitEvent(true)
+              return true
+            }
+
+            const { valid, comp } = errors[ 0 ]
+
+            emitEvent(false, comp)
+
+            if (
+              focus === true
+              && valid !== true
+              && typeof comp.focus === 'function'
+            ) {
+              comp.focus()
+            }
+
+            return false
+          }
+        }
+      )
+    }
+
+    function resetValidation () {
+      validateIndex++
+
+      registeredComponents.forEach(comp => {
+        typeof comp.resetValidation === 'function' && comp.resetValidation()
+      })
+    }
+
+    function submit (evt) {
+      evt !== void 0 && stopAndPrevent(evt)
+
+      validate().then(val => {
+        if (val === true) {
+          if (props.onSubmit !== void 0) {
+            emit('submit', evt)
+          }
+          else if (evt !== void 0 && evt.target !== void 0 && typeof evt.target.submit === 'function') {
+            evt.target.submit()
+          }
+        }
+      })
+    }
+
+    function reset (evt) {
+      evt !== void 0 && stopAndPrevent(evt)
+
+      emit('reset')
+
+      nextTick(() => { // allow userland to reset values before
+        resetValidation()
+        if (props.autofocus === true && props.noResetFocus !== true) {
+          focus()
+        }
+      })
+    }
+
+    function focus () {
+      addFocusFn(() => {
+        if (rootRef.value === null) { return }
+
+        const target = rootRef.value.querySelector('[autofocus], [data-autofocus]')
+          || Array.prototype.find.call(rootRef.value.querySelectorAll('[tabindex]'), el => el.tabIndex > -1)
+
+        target !== null && target !== void 0 && target.focus()
+      })
+    }
+
+    provide(formKey, {
+      bindComponent (vmProxy) {
+        registeredComponents.push(vmProxy)
+      },
+
+      unbindComponent (vmProxy) {
+        const index = registeredComponents.indexOf(vmProxy)
+        if (index > -1) {
+          registeredComponents.splice(index, 1)
+        }
+      }
+    })
+
+    onMounted(() => {
+      props.autofocus === true && focus()
+    })
+
+    // expose public methods
+    Object.assign(vm.proxy, {
+      validate,
+      resetValidation,
+      submit,
+      reset,
+      focus,
+      getValidationComponents: () => registeredComponents
+    })
+
+    return () => h('form', {
+      class: 'q-form',
+      ref: rootRef,
+      onSubmit: submit,
+      onReset: reset
+    }, hSlot(slots.default))
+  }
+})