quasar 2.1.0

package/src/components/ajax-bar/QAjaxBar.json

@@ -0,0 +1,76 @@
+{
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/ajax-bar"
+  },
+
+  "props": {
+    "position": {
+      "type": "String",
+      "desc": "Position within window of where QAjaxBar should be displayed",
+      "default": "top",
+      "values": [ "top", "right", "bottom", "left" ],
+      "examples": [ "bottom" ],
+      "category": "style"
+    },
+
+    "size": {
+      "extends": "size",
+      "default": "2px"
+    },
+
+    "color": {
+      "extends": "color"
+    },
+
+    "skip-hijack": {
+      "type": "Boolean",
+      "desc": "Skip Ajax hijacking (not a reactive prop)",
+      "category": "behavior"
+    },
+
+    "reverse": {
+      "type": "Boolean",
+      "desc": "Reverse direction of progress",
+      "category": "behavior"
+    }
+  },
+
+  "events": {
+    "start": {
+      "desc": "Emitted when bar is triggered to appear"
+    },
+
+    "stop": {
+      "desc": "Emitted when bar has finished its job"
+    }
+  },
+
+  "methods": {
+    "start": {
+      "desc": "Notify bar you are waiting for a new process to finish",
+      "params": {
+        "speed": {
+          "type": "Number",
+          "default": 300,
+          "desc": "Delay (in milliseconds) between progress auto-increments; If delay is 0 then it disables auto-incrementing",
+          "examples": [ 400, 0 ]
+        }
+      }
+    },
+
+    "increment": {
+      "desc": "Manually trigger a bar progress increment",
+      "params": {
+        "amount": {
+          "type": "Number",
+          "desc": "Amount (0 < x <= 100) to increment with",
+          "examples": [ 1 ]
+        }
+      }
+    },
+
+    "stop": {
+      "desc": "Notify bar that one process you were waiting has finished"
+    }
+  }
+}

package/src/components/ajax-bar/QAjaxBar.sass

@@ -0,0 +1,27 @@
+.q-loading-bar
+  position: fixed
+  z-index: $z-max
+  transition: transform .5s cubic-bezier(0,0,.2,1), opacity .5s
+  background: $red
+
+  &--top
+    left: 0 #{"/* rtl:ignore */"}
+    right: 0 #{"/* rtl:ignore */"}
+    top: 0
+    width: 100%
+  &--bottom
+    left: 0 #{"/* rtl:ignore */"}
+    right: 0 #{"/* rtl:ignore */"}
+    bottom: 0
+    width: 100%
+
+  &--right
+    top: 0
+    bottom: 0
+    right: 0
+    height: 100%
+  &--left
+    top: 0
+    bottom: 0
+    left: 0
+    height: 100%

package/src/components/ajax-bar/index.js

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

package/src/components/avatar/QAvatar.js

@@ -0,0 +1,61 @@
+import { h, defineComponent, computed } from 'vue'
+
+import QIcon from '../icon/QIcon.js'
+
+import useSize, { useSizeProps } from '../../composables/private/use-size.js'
+
+import { hMergeSlotSafely } from '../../utils/private/render.js'
+
+export default defineComponent({
+  name: 'QAvatar',
+
+  props: {
+    ...useSizeProps,
+
+    fontSize: String,
+
+    color: String,
+    textColor: String,
+
+    icon: String,
+    square: Boolean,
+    rounded: Boolean
+  },
+
+  setup (props, { slots }) {
+    const sizeStyle = useSize(props)
+
+    const classes = computed(() =>
+      'q-avatar'
+      + (props.color ? ` bg-${ props.color }` : '')
+      + (props.textColor ? ` text-${ props.textColor } q-chip--colored` : '')
+      + (
+        props.square === true
+          ? ' q-avatar--square'
+          : (props.rounded === true ? ' rounded-borders' : '')
+      )
+    )
+
+    const contentStyle = computed(() => (
+      props.fontSize
+        ? { fontSize: props.fontSize }
+        : null
+    ))
+
+    return () => {
+      const icon = props.icon !== void 0
+        ? [ h(QIcon, { name: props.icon }) ]
+        : void 0
+
+      return h('div', {
+        class: classes.value,
+        style: sizeStyle.value
+      }, [
+        h('div', {
+          class: 'q-avatar__content row flex-center overflow-hidden',
+          style: contentStyle.value
+        }, hMergeSlotSafely(slots.default, icon))
+      ])
+    }
+  }
+})

package/src/components/avatar/QAvatar.json

@@ -0,0 +1,42 @@
+{
+  "mixins": [ "composables/private/use-size" ],
+
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/avatar"
+  },
+
+  "props": {
+    "font-size": {
+      "type": "String",
+      "desc": "The size in CSS units, including unit name, of the content (icon, text)",
+      "examples": [ "18px", "2rem" ],
+      "category": "style"
+    },
+
+    "color": {
+      "extends": "color"
+    },
+
+    "text-color": {
+      "extends": "text-color"
+    },
+
+    "icon": {
+      "extends": "icon"
+    },
+
+    "square": {
+      "extends": "square"
+    },
+
+    "rounded": {
+      "extends": "rounded"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "desc": "Optional; Suggestions: one character string, <img> tag"
+    }
+  }
+}

package/src/components/avatar/QAvatar.sass

@@ -0,0 +1,22 @@
+.q-avatar
+  position: relative
+  vertical-align: middle
+  display: inline-block
+
+  border-radius: 50%
+
+  font-size: 48px
+  height: 1em
+  width: 1em
+
+  &__content
+    font-size: .5em
+    line-height: .5em
+
+  &__content, img:not(.q-icon):not(.q-img__image)
+    border-radius: inherit
+    height: inherit
+    width: inherit
+
+  &--square
+    border-radius: 0

package/src/components/avatar/index.js

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

package/src/components/badge/QBadge.js

@@ -0,0 +1,59 @@
+import { h, defineComponent, computed } from 'vue'
+
+import { hSlot } from '../../utils/private/render.js'
+
+const alignValues = [ 'top', 'middle', 'bottom' ]
+
+export default defineComponent({
+  name: 'QBadge',
+
+  props: {
+    color: String,
+    textColor: String,
+
+    floating: Boolean,
+    transparent: Boolean,
+    multiLine: Boolean,
+    outline: Boolean,
+    rounded: Boolean,
+
+    label: [ Number, String ],
+
+    align: {
+      type: String,
+      validator: v => alignValues.includes(v)
+    }
+  },
+
+  setup (props, { slots }) {
+    const style = computed(() => {
+      return props.align !== void 0
+        ? { verticalAlign: props.align }
+        : null
+    })
+
+    const classes = computed(() => {
+      const text = props.outline === true
+        ? props.color || props.textColor
+        : props.textColor
+
+      return 'q-badge flex inline items-center no-wrap'
+        + ` q-badge--${ props.multiLine === true ? 'multi' : 'single' }-line`
+        + (props.outline === true
+          ? ' q-badge--outline'
+          : (props.color !== void 0 ? ` bg-${ props.color }` : '')
+        )
+        + (text !== void 0 ? ` text-${ text }` : '')
+        + (props.floating === true ? ' q-badge--floating' : '')
+        + (props.rounded === true ? ' q-badge--rounded' : '')
+        + (props.transparent === true ? ' q-badge--transparent' : '')
+    })
+
+    return () => h('div', {
+      class: classes.value,
+      style: style.value,
+      role: 'alert',
+      'aria-label': props.label
+    }, props.label !== void 0 ? props.label : hSlot(slots.default))
+  }
+})

package/src/components/badge/QBadge.json

@@ -0,0 +1,65 @@
+{
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/badge"
+  },
+
+  "props": {
+    "color": {
+      "extends": "color"
+    },
+
+    "text-color": {
+      "extends": "text-color"
+    },
+
+    "floating": {
+      "type": "Boolean",
+      "desc": "Tell QBadge if it should float to the top right side of the relative positioned parent element or not",
+      "category": "content"
+    },
+
+    "transparent": {
+      "type": "Boolean",
+      "desc": "Applies a 0.8 opacity; Useful especially for floating QBadge",
+      "category": "style"
+    },
+
+    "multi-line": {
+      "type": "Boolean",
+      "desc": "Content can wrap to multiple lines",
+      "category": "content"
+    },
+
+    "label": {
+      "type": [ "String", "Number" ],
+      "desc": "Badge's content as string; overrides default slot if specified",
+      "examples": [ "John Doe", 22 ],
+      "category": "content"
+    },
+
+    "align": {
+      "type": "String",
+      "desc": "Sets vertical-align CSS prop",
+      "values": [ "top", "middle", "bottom" ],
+      "category": "content"
+    },
+
+    "outline": {
+      "type": "Boolean",
+      "desc": "Use 'outline' design (colored text and borders only)",
+      "category": "style"
+    },
+
+    "rounded": {
+      "type": "Boolean",
+      "desc": "Makes a rounded shaped badge",
+      "category": "style"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "desc": "This is where QBadge content goes, if not using 'label' property"
+    }
+  }
+}

package/src/components/badge/QBadge.sass

@@ -0,0 +1,32 @@
+.q-badge
+  background-color: var(--q-primary)
+  color: #fff
+  padding: 2px 6px
+  border-radius: $generic-border-radius
+  font-size: 12px
+  line-height: 12px
+  min-height: 12px
+  font-weight: normal
+  vertical-align: baseline
+
+  &--single-line
+    white-space: nowrap
+  &--multi-line
+    word-break: break-all
+    word-wrap: break-word
+
+  &--floating
+    position: absolute
+    top: -4px
+    right: -3px
+    cursor: inherit
+
+  &--transparent
+    opacity: .8
+
+  &--outline
+    background-color: transparent
+    border: 1px solid currentColor
+
+  &--rounded
+    border-radius: 1em

package/src/components/badge/index.js

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

package/src/components/banner/QBanner.js

@@ -0,0 +1,57 @@
+import { h, defineComponent, computed, getCurrentInstance } from 'vue'
+
+import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
+
+import { hSlot } from '../../utils/private/render.js'
+
+export default defineComponent({
+  name: 'QBanner',
+
+  props: {
+    ...useDarkProps,
+
+    inlineActions: Boolean,
+    dense: Boolean,
+    rounded: Boolean
+  },
+
+  setup (props, { slots }) {
+    const vm = getCurrentInstance()
+    const isDark = useDark(props, vm.proxy.$q)
+
+    const classes = computed(() =>
+      'q-banner row items-center'
+      + (props.dense === true ? ' q-banner--dense' : '')
+      + (isDark.value === true ? ' q-banner--dark q-dark' : '')
+      + (props.rounded === true ? ' rounded-borders' : '')
+    )
+
+    const actionClass = computed(() =>
+      'q-banner__actions row items-center justify-end'
+      + ` col-${ props.inlineActions === true ? 'auto' : 'all' }`
+    )
+
+    return () => {
+      const child = [
+        h('div', {
+          class: 'q-banner__avatar col-auto row items-center self-start'
+        }, hSlot(slots.avatar)),
+
+        h('div', {
+          class: 'q-banner__content col text-body2'
+        }, hSlot(slots.default))
+      ]
+
+      const actions = hSlot(slots.action)
+      actions !== void 0 && child.push(
+        h('div', { class: actionClass.value }, actions)
+      )
+
+      return h('div', {
+        class: classes.value
+          + (props.inlineActions === false && actions !== void 0 ? ' q-banner--top-padding' : ''),
+        role: 'alert'
+      }, child)
+    }
+  }
+})