quasar 2.1.0

package/src/components/layout/QLayout.sass

@@ -0,0 +1,181 @@
+.q-layout
+  width: 100%
+
+.q-layout-container
+  position: relative
+  width: 100%
+  height: 100%
+
+  .q-layout
+    min-height: 100%
+  > div
+    transform: translate3d(0, 0, 0)
+    > div
+      min-height: 0
+      max-height: 100%
+
+.q-layout__shadow
+  width: 100%
+  &:after
+    content: ''
+    position: absolute
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+    box-shadow: $layout-shadow
+
+.q-layout__section--marginal
+  background-color: var(--q-primary)
+  color: #fff
+
+.q-header
+
+  &--hidden
+    transform: translateY(-110%)
+  &--bordered
+    border-bottom: $layout-border
+  .q-layout__shadow
+    bottom: -10px
+    &:after
+      bottom: 10px
+
+.q-footer
+
+  &--hidden
+    transform: translateY(110%)
+  &--bordered
+    border-top: $layout-border
+  .q-layout__shadow
+    top: -10px
+    &:after
+      top: 10px
+
+.q-header, .q-footer
+  z-index: $z-marginals
+
+.q-drawer
+  position: absolute
+  top: 0
+  bottom: 0
+  background: #fff
+  z-index: $z-side
+
+  &--on-top
+    z-index: $z-fixed-drawer
+
+  &--left
+    left: 0
+    transform: translateX(-100%)
+    &.q-drawer--bordered
+      border-right: $layout-border
+    .q-layout__shadow
+      left: 10px
+      right: -10px
+      &:after
+        right: 10px
+
+  &--right
+    right: 0
+    transform: translateX(100%)
+    &.q-drawer--bordered
+      border-left: $layout-border
+
+    .q-layout__shadow
+      left: -10px
+      &:after
+        left: 10px
+
+  &-container:not(&--mini-animate) &--mini
+    padding: 0 !important
+    .q-item, .q-item__section
+      text-align: center
+      justify-content: center
+      padding-left: 0
+      padding-right: 0
+      min-width: 0
+    .q-item__label, .q-item__section--main, .q-item__section--side ~ .q-item__section--side
+      display: none
+  &--mini
+    .q-mini-drawer-hide, .q-expansion-item__content
+      display: none
+  &--mini-animate &__content
+    overflow-x: hidden !important
+    white-space: nowrap
+  &--standard
+    .q-mini-drawer-only
+      display: none
+  &--mobile
+    .q-mini-drawer-only, .q-mini-drawer-hide
+      display: none
+
+  &__backdrop
+    z-index: ($z-fixed-drawer - 1) !important
+    will-change: background-color
+
+  &__opener
+    z-index: ($z-marginals + 1)
+    height: 100%
+    width: 15px
+    user-select: none
+
+.q-layout, .q-header, .q-footer, .q-page
+  position: relative
+
+.q-page-sticky--shrink
+  pointer-events: none
+  > div
+    display: inline-block
+    pointer-events: auto
+
+body.q-ios-padding
+  .q-layout--standard .q-header > .q-toolbar:nth-child(1),
+  .q-layout--standard .q-header > .q-tabs:nth-child(1) .q-tabs-head,
+  .q-layout--standard .q-drawer--top-padding .q-drawer__content
+    padding-top: $ios-statusbar-height
+    min-height: ($toolbar-min-height + $ios-statusbar-height)
+    padding-top: env(safe-area-inset-top)
+    min-height: calc(env(safe-area-inset-top) + #{$toolbar-min-height})
+  .q-layout--standard .q-footer > .q-toolbar:last-child,
+  .q-layout--standard .q-footer > .q-tabs:last-child .q-tabs-head,
+  .q-layout--standard .q-drawer--top-padding .q-drawer__content
+    padding-bottom: env(safe-area-inset-bottom)
+    min-height: calc(env(safe-area-inset-bottom) + #{$toolbar-min-height})
+
+.q-body--layout-animate
+  .q-drawer__backdrop
+    transition: background-color .12s !important
+  .q-drawer
+    transition: transform .12s, width .12s, top .12s, bottom .12s !important
+  .q-layout__section--marginal
+    transition: transform .12s, left .12s, right .12s !important
+  .q-page-container
+    transition: padding-top .12s, padding-right .12s, padding-bottom .12s, padding-left .12s !important
+  .q-page-sticky
+    transition: transform .12s, left .12s, right .12s, top .12s, bottom .12s !important
+
+body:not(.q-body--layout-animate)
+  .q-layout--prevent-focus
+    visibility: hidden
+
+.q-body--drawer-toggle
+  overflow-x: hidden !important
+
+.q-layout-padding
+  @media (max-width: $breakpoint-xs-max)
+    padding: 8px
+  @media (min-width: $breakpoint-sm-min) and (max-width: $breakpoint-md-max)
+    padding: 16px
+  @media (min-width: $breakpoint-lg-min)
+    padding: 24px
+
+body.body--dark
+  .q-header, .q-footer, .q-drawer
+    border-color: $separator-dark-color
+
+body.platform-ios
+  .q-layout--containerized
+    // https://github.com/quasarframework/quasar/issues/4127
+    // Fixes scroll issues with containerized Layout inside Dialog on iOS;
+    // QDrawer needs to be forced into fixed position
+    position: unset !important

package/src/components/layout/index.js

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

package/src/components/linear-progress/QLinearProgress.js

@@ -0,0 +1,115 @@
+import { h, defineComponent, computed, getCurrentInstance } from 'vue'
+
+import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
+import useSize, { useSizeProps } from '../../composables/private/use-size.js'
+
+import { hMergeSlot } from '../../utils/private/render.js'
+
+const defaultSizes = {
+  xs: 2,
+  sm: 4,
+  md: 6,
+  lg: 10,
+  xl: 14
+}
+
+function width (val, reverse, $q) {
+  return {
+    transform: reverse === true
+      ? `translateX(${ $q.lang.rtl === true ? '-' : '' }100%) scale3d(${ -val },1,1)`
+      : `scale3d(${ val },1,1)`
+  }
+}
+
+export default defineComponent({
+  name: 'QLinearProgress',
+
+  props: {
+    ...useDarkProps,
+    ...useSizeProps,
+
+    value: {
+      type: Number,
+      default: 0
+    },
+    buffer: Number,
+
+    color: String,
+    trackColor: String,
+
+    reverse: Boolean,
+    stripe: Boolean,
+    indeterminate: Boolean,
+    query: Boolean,
+    rounded: Boolean,
+
+    instantFeedback: Boolean
+  },
+
+  setup (props, { slots }) {
+    const { proxy } = getCurrentInstance()
+    const isDark = useDark(props, proxy.$q)
+    const sizeStyle = useSize(props, defaultSizes)
+
+    const motion = computed(() => props.indeterminate === true || props.query === true)
+
+    const classes = computed(() =>
+      'q-linear-progress'
+      + (props.color !== void 0 ? ` text-${ props.color }` : '')
+      + (props.reverse === true || props.query === true ? ' q-linear-progress--reverse' : '')
+      + (props.rounded === true ? ' rounded-borders' : '')
+    )
+
+    const trackStyle = computed(() => width(props.buffer !== void 0 ? props.buffer : 1, props.reverse, proxy.$q))
+    const trackClass = computed(() =>
+      'q-linear-progress__track absolute-full'
+      + ` q-linear-progress__track--with${ props.instantFeedback === true ? 'out' : '' }-transition`
+      + ` q-linear-progress__track--${ isDark.value === true ? 'dark' : 'light' }`
+      + (props.trackColor !== void 0 ? ` bg-${ props.trackColor }` : '')
+    )
+
+    const modelStyle = computed(() => width(motion.value === true ? 1 : props.value, props.reverse, proxy.$q))
+    const modelClass = computed(() =>
+      'q-linear-progress__model absolute-full'
+      + ` q-linear-progress__model--with${ props.instantFeedback === true ? 'out' : '' }-transition`
+      + ` q-linear-progress__model--${ motion.value === true ? 'in' : '' }determinate`
+    )
+
+    const stripeStyle = computed(() => ({ width: `${ props.value * 100 }%` }))
+    const stripeClass = computed(() =>
+      `q-linear-progress__stripe absolute-${ props.reverse === true ? 'right' : 'left' }`
+    )
+
+    return () => {
+      const child = [
+        h('div', {
+          class: trackClass.value,
+          style: trackStyle.value
+        }),
+
+        h('div', {
+          class: modelClass.value,
+          style: modelStyle.value
+        })
+      ]
+
+      props.stripe === true && motion.value === false && child.push(
+        h('div', {
+          class: stripeClass.value,
+          style: stripeStyle.value
+        })
+      )
+
+      return h('div', {
+        class: classes.value,
+        style: sizeStyle.value,
+        role: 'progressbar',
+        'aria-valuemin': 0,
+        'aria-valuemax': 1,
+        'aria-valuenow': props.indeterminate === true
+          ? void 0
+          : props.value
+      }, hMergeSlot(slots.default, child))
+    }
+  }
+})

package/src/components/linear-progress/QLinearProgress.json

@@ -0,0 +1,77 @@
+{
+  "mixins": [ "composables/private/use-size" ],
+
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/linear-progress"
+  },
+
+  "props": {
+    "value": {
+      "type": "Number",
+      "desc": "Progress value (0.0 < x < 1.0)",
+      "default": 0,
+      "examples": [ ":value=\"0.28\"" ],
+      "category": "model"
+    },
+
+    "buffer": {
+      "type": "Number",
+      "desc": "Optional buffer value (0.0 < x < 1.0)",
+      "examples": [ ":buffer=\"0.78\"" ],
+      "category": "behavior"
+    },
+
+    "color": {
+      "extends": "color"
+    },
+
+    "track-color": {
+      "extends": "color",
+      "desc": "Color name for component's track from the Quasar Color Palette"
+    },
+
+    "dark": {
+      "extends": "dark"
+    },
+
+    "reverse":  {
+      "type": "Boolean",
+      "desc": "Reverse direction of progress",
+      "category": "behavior"
+    },
+
+    "stripe": {
+      "type": "Boolean",
+      "desc":  "Draw stripes; For determinate state only (for performance reasons)",
+      "category": "content"
+    },
+
+    "indeterminate": {
+      "type": "Boolean",
+      "desc": "Put component into indeterminate mode",
+      "category": "behavior"
+    },
+
+    "query": {
+      "type": "Boolean",
+      "desc": "Put component into query mode",
+      "category": "behavior"
+    },
+
+    "rounded": {
+      "extends": "rounded"
+    },
+
+    "instant-feedback": {
+      "type": "Boolean",
+      "desc": "No transition when model changes",
+      "category": "behavior"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "desc": "Suggestion: QTooltip"
+    }
+  }
+}

package/src/components/linear-progress/QLinearProgress.sass

@@ -0,0 +1,71 @@
+.q-linear-progress
+  position: relative
+  width: 100%
+  overflow: hidden
+  font-size: 4px
+  height: 1em
+  color: var(--q-primary)
+
+  &__model, &__track
+    transform-origin: 0 0
+
+    &--with-transition
+      transition: transform .3s
+
+  &--reverse
+    .q-linear-progress
+      &__model, &__track
+        transform-origin: 0 100%
+
+  &__model
+
+    &--determinate
+      background: currentColor
+
+    &--indeterminate, &--query
+      transition: none
+
+      &:before, &:after
+        background: currentColor
+        content: ''
+        position: absolute
+        top: 0
+        right: 0
+        bottom: 0
+        left: 0
+        transform-origin: 0 0
+
+      &:before
+        animation: q-linear-progress--indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite
+      &:after
+        transform: translate3d(-101%, 0, 0) scale3d(1, 1, 1)
+        animation: q-linear-progress--indeterminate-short 2.1s cubic-bezier(.165,.84,.44,1) infinite
+        animation-delay: 1.15s
+
+  &__track
+    opacity: .4
+    &--light
+      background: rgba(0,0,0,.26)
+    &--dark
+      background: rgba(255,255,255,.6)
+
+  &__stripe
+    transition: width .3s
+    background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0)) !important
+    background-size: 40px 40px !important
+
+@keyframes q-linear-progress--indeterminate
+  0%
+    transform: translate3d(-35%, 0, 0) scale3d(.35, 1, 1)
+  60%
+    transform: translate3d(100%, 0, 0) scale3d(.9, 1, 1)
+  100%
+    transform: translate3d(100%, 0, 0) scale3d(.9, 1, 1)
+
+@keyframes q-linear-progress--indeterminate-short
+  0%
+    transform: translate3d(-101%, 0, 0) scale3d(1, 1, 1)
+  60%
+    transform: translate3d(107%, 0, 0) scale3d(.01, 1, 1)
+  100%
+    transform: translate3d(107%, 0, 0) scale3d(.01, 1, 1)