quasar 2.1.0

package/src/components/header/index.js

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

package/src/components/icon/QIcon.js

@@ -0,0 +1,202 @@
+import { h, defineComponent, computed, getCurrentInstance } from 'vue'
+
+import useSize, { useSizeProps } from '../../composables/private/use-size.js'
+import { hSlot, hMergeSlot } from '../../utils/private/render.js'
+
+const sameFn = i => i
+const ionFn = i => `ionicons ${ i }`
+
+const libMap = {
+  'icon-': sameFn, // fontawesome equiv
+  'bt-': i => `bt ${ i }`,
+  'eva-': i => `eva ${ i }`,
+  'ion-md': ionFn,
+  'ion-ios': ionFn,
+  'ion-logo': ionFn,
+  'mdi-': i => `mdi ${ i }`,
+  'iconfont ': sameFn,
+  'ti-': i => `themify-icon ${ i }`,
+  'bi-': i => `bootstrap-icons ${ i }`
+}
+
+const matMap = {
+  o_: '-outlined',
+  r_: '-round',
+  s_: '-sharp'
+}
+
+const libRE = new RegExp('^(' + Object.keys(libMap).join('|') + ')')
+const matRE = new RegExp('^(' + Object.keys(matMap).join('|') + ')')
+const mRE = /^M/
+const imgRE = /^img:/
+const svgUseRE = /^svguse:/
+const ionRE = /^ion-/
+const faLaRE = /^[l|f]a[s|r|l|b|d]? /
+
+export default defineComponent({
+  name: 'QIcon',
+
+  props: {
+    ...useSizeProps,
+
+    tag: {
+      type: String,
+      default: 'i'
+    },
+
+    name: String,
+    color: String,
+    left: Boolean,
+    right: Boolean
+  },
+
+  setup (props, { slots }) {
+    const { proxy: { $q } } = getCurrentInstance()
+    const sizeStyle = useSize(props)
+
+    const classes = computed(() =>
+      'q-icon'
+      + (props.left === true ? ' on-left' : '')
+      + (props.right === true ? ' on-right' : '')
+      + (props.color !== void 0 ? ` text-${ props.color }` : '')
+    )
+
+    const type = computed(() => {
+      let cls
+      let icon = props.name
+
+      if (!icon) {
+        return {
+          none: true,
+          cls: classes.value
+        }
+      }
+
+      if ($q.iconMapFn !== null) {
+        const res = $q.iconMapFn(icon)
+        if (res !== void 0) {
+          if (res.icon !== void 0) {
+            icon = res.icon
+          }
+          else {
+            return {
+              cls: res.cls + ' ' + classes.value,
+              content: res.content !== void 0
+                ? res.content
+                : ' '
+            }
+          }
+        }
+      }
+
+      if (mRE.test(icon) === true) {
+        const [ def, viewBox ] = icon.split('|')
+
+        return {
+          svg: true,
+          cls: classes.value,
+          nodes: def.split('&&').map(path => {
+            const [ d, style, transform ] = path.split('@@')
+            return h('path', {
+              style,
+              d,
+              transform
+            })
+          }),
+          viewBox: viewBox !== void 0 ? viewBox : '0 0 24 24'
+        }
+      }
+
+      if (imgRE.test(icon) === true) {
+        return {
+          img: true,
+          cls: classes.value,
+          src: icon.substring(4)
+        }
+      }
+
+      if (svgUseRE.test(icon) === true) {
+        const [ def, viewBox ] = icon.split('|')
+
+        return {
+          svguse: true,
+          cls: classes.value,
+          src: def.substring(7),
+          viewBox: viewBox !== void 0 ? viewBox : '0 0 24 24'
+        }
+      }
+
+      let content = ' '
+      const matches = icon.match(libRE)
+
+      if (matches !== null) {
+        cls = libMap[ matches[ 1 ] ](icon)
+      }
+      else if (faLaRE.test(icon) === true) {
+        cls = icon
+      }
+      else if (ionRE.test(icon) === true) {
+        cls = `ionicons ion-${ $q.platform.is.ios === true ? 'ios' : 'md' }${ icon.substr(3) }`
+      }
+      else {
+        // "notranslate" class is for Google Translate
+        // to avoid tampering with Material Icons ligature font
+        //
+        // Caution: To be able to add suffix to the class name,
+        // keep the 'material-icons' at the end of the string.
+        cls = 'notranslate material-icons'
+
+        const matches = icon.match(matRE)
+        if (matches !== null) {
+          icon = icon.substring(2)
+          cls += matMap[ matches[ 1 ] ]
+        }
+
+        content = icon
+      }
+
+      return {
+        cls: cls + ' ' + classes.value,
+        content
+      }
+    })
+
+    return () => {
+      const data = {
+        class: type.value.cls,
+        style: sizeStyle.value,
+        'aria-hidden': 'true',
+        role: 'presentation'
+      }
+
+      if (type.value.none === true) {
+        return h(props.tag, data, hSlot(slots.default))
+      }
+
+      if (type.value.img === true) {
+        data.src = type.value.src
+        return h('img', data)
+      }
+
+      if (type.value.svg === true) {
+        data.viewBox = type.value.viewBox
+
+        return h('svg', data, hMergeSlot(slots.default, type.value.nodes))
+      }
+
+      if (type.value.svguse === true) {
+        data.viewBox = type.value.viewBox
+
+        return h(
+          'svg',
+          data,
+          hMergeSlot(slots.default, [ h('use', { 'xlink:href': type.value.src }) ])
+        )
+      }
+
+      return h(props.tag, data, hMergeSlot(slots.default, [
+        type.value.content
+      ]))
+    }
+  }
+})

package/src/components/icon/QIcon.json

@@ -0,0 +1,45 @@
+{
+  "mixins": [ "composables/private/use-size" ],
+
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/icon"
+  },
+
+  "props": {
+    "tag": {
+      "extends": "tag",
+      "desc": "HTML tag to render, unless no icon is supplied or it's an svg icon",
+      "default": "i",
+      "examples": [ "div", "i" ]
+    },
+
+    "name": {
+      "type": "String",
+      "desc": "Name of the icon, following Quasar convention",
+      "examples": [ "map", "ion-add" ],
+      "category": "model"
+    },
+
+    "color": {
+      "extends": "color"
+    },
+
+    "left": {
+      "type": "Boolean",
+      "desc": "Useful if icon is on the left side of something: applies a standard margin on the right side of Icon",
+      "category": "content"
+    },
+
+    "right": {
+      "type": "Boolean",
+      "desc": "Useful if icon is on the right side of something: applies a standard margin on the left side of Icon",
+      "category": "content"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "desc": "Suggestions: QTooltip or QMenu"
+    }
+  }
+}

package/src/components/icon/QIcon.sass

@@ -0,0 +1,38 @@
+.q-icon
+  line-height: 1
+  width: 1em
+  height: 1em
+  letter-spacing: normal
+  text-transform: none
+  white-space: nowrap
+  word-wrap: normal
+  direction: ltr
+  text-align: center
+  position: relative
+  box-sizing: content-box
+
+  fill: currentColor // for svg paths
+
+  &:before, &:after
+    width: 100%
+    height: 100%
+    display: flex !important
+    align-items: center
+    justify-content: center
+
+  > svg
+    width: 100%
+    height: 100%
+
+.q-icon,
+.material-icons,
+.material-icons-outlined,
+.material-icons-round,
+.material-icons-sharp
+  user-select: none
+  cursor: inherit
+  font-size: inherit
+  display: inline-flex
+  align-items: center
+  justify-content: center
+  vertical-align: middle

package/src/components/icon/index.js

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

package/src/components/img/QImg.js

@@ -0,0 +1,287 @@
+import { h, defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, Transition } from 'vue'
+
+import QSpinner from '../spinner/QSpinner.js'
+import useRatio, { useRatioProps } from '../../composables/private/use-ratio.js'
+import { hSlot } from '../../utils/private/render.js'
+import { isRuntimeSsrPreHydration } from '../../plugins/Platform.js'
+
+const crossoriginValues = [ 'anonymous', 'use-credentials' ]
+const loadingValues = [ 'eager', 'lazy' ]
+const fitValues = [ 'cover', 'fill', 'contain', 'none', 'scale-down' ]
+const defaultRatio = 16 / 9
+
+export default defineComponent({
+  name: 'QImg',
+
+  props: {
+    ...useRatioProps,
+
+    src: String,
+    srcset: String,
+    sizes: String,
+
+    alt: String,
+    crossorigin: {
+      type: String,
+      validator: val => crossoriginValues.includes(val)
+    },
+    draggable: Boolean,
+
+    loading: {
+      type: String,
+      default: 'lazy',
+      validator: val => loadingValues.includes(val)
+    },
+    width: String,
+    height: String,
+    initialRatio: {
+      type: [ Number, String ],
+      default: defaultRatio
+    },
+
+    placeholderSrc: String,
+
+    fit: {
+      type: String,
+      default: 'cover',
+      validator: val => fitValues.includes(val)
+    },
+    position: {
+      type: String,
+      default: '50% 50%'
+    },
+
+    imgClass: String,
+    imgStyle: Object,
+
+    noSpinner: Boolean,
+    noNativeMenu: Boolean,
+    noTransition: Boolean,
+
+    spinnerColor: String,
+    spinnerSize: String
+  },
+
+  emits: [ 'load', 'error' ],
+
+  setup (props, { slots, attrs, emit }) {
+    const naturalRatio = ref(props.initialRatio)
+    const ratioStyle = useRatio(props, naturalRatio)
+
+    let loadTimer
+
+    const images = [
+      ref(null),
+      ref(props.placeholderSrc !== void 0 ? { src: props.placeholderSrc } : null)
+    ]
+
+    const position = ref(0)
+
+    const isLoading = ref(false)
+    const hasError = ref(false)
+
+    const classes = computed(() =>
+      `q-img q-img--${ props.noNativeMenu === true ? 'no-' : '' }menu`
+    )
+
+    const style = computed(() => ({
+      width: props.width,
+      height: props.height
+    }))
+
+    const imgClass = computed(() =>
+      `q-img__image ${ props.imgClass !== void 0 ? props.imgClass + ' ' : '' }`
+      + `q-img__image--with${ props.noTransition === true ? 'out' : '' }-transition`
+    )
+
+    const imgStyle = computed(() => ({
+      ...props.imgStyle,
+      objectFit: props.fit,
+      objectPosition: props.position
+    }))
+
+    watch(() => getCurrentSrc(), addImage)
+
+    function getCurrentSrc () {
+      return props.src || props.srcset || props.sizes
+        ? {
+            src: props.src,
+            srcset: props.srcset,
+            sizes: props.sizes
+          }
+        : null
+    }
+
+    function addImage (imgProps) {
+      clearTimeout(loadTimer)
+      hasError.value = false
+
+      if (imgProps === null) {
+        isLoading.value = false
+        images[ 0 ].value = null
+        images[ 1 ].value = null
+        return
+      }
+
+      isLoading.value = true
+      images[ position.value ].value = imgProps
+    }
+
+    function onLoad ({ target }) {
+      // if component has been already destroyed
+      if (loadTimer === null) { return }
+
+      clearTimeout(loadTimer)
+
+      naturalRatio.value = target.naturalHeight === 0
+        ? 0.5
+        : target.naturalWidth / target.naturalHeight
+
+      waitForCompleteness(target, 1)
+    }
+
+    function waitForCompleteness (target, count) {
+      // protect against running forever
+      if (loadTimer === null || count === 1000) { return }
+
+      if (target.complete === true) {
+        onReady(target)
+      }
+      else {
+        loadTimer = setTimeout(() => {
+          waitForCompleteness(target, count + 1)
+        }, 50)
+      }
+    }
+
+    function onReady (img) {
+      // if component has been already destroyed
+      if (loadTimer === null) { return }
+
+      position.value = position.value === 1 ? 0 : 1
+      images[ position.value ].value = null
+      isLoading.value = false
+      hasError.value = false
+      emit('load', img.currentSrc || img.src)
+    }
+
+    function onError (err) {
+      clearTimeout(loadTimer)
+      isLoading.value = false
+      hasError.value = true
+      images[ 0 ].value = null
+      images[ 1 ].value = null
+      emit('error', err)
+    }
+
+    function getContainer (key, child) {
+      return h(
+        'div',
+        { class: 'q-img__container absolute-full', key },
+        child
+      )
+    }
+
+    function getImage (index) {
+      const img = images[ index ].value
+
+      const data = {
+        key: 'img_' + index,
+        ...attrs,
+        class: imgClass.value,
+        style: imgStyle.value,
+        crossorigin: props.crossorigin,
+        height: props.height,
+        width: props.width,
+        loading: props.loading,
+        'aria-hidden': 'true',
+        draggable: props.draggable,
+        ...img
+      }
+
+      if (position.value === index) {
+        data.class += ' q-img__image--waiting'
+        Object.assign(data, { onLoad, onError })
+      }
+      else {
+        data.class += ' q-img__image--loaded'
+      }
+
+      return getContainer('img' + index, h('img', data))
+    }
+
+    function getContent () {
+      if (isLoading.value !== true) {
+        return h('div', {
+          key: 'content',
+          class: 'q-img__content absolute-full q-anchor--skip'
+        }, hSlot(slots[ hasError.value === true ? 'error' : 'default' ]))
+      }
+
+      return h('div', {
+        key: 'loading',
+        class: 'q-img__loading absolute-full flex flex-center'
+      }, (
+        slots.loading !== void 0
+          ? slots.loading()
+          : (
+              props.noSpinner === true
+                ? void 0
+                : [
+                    h(QSpinner, {
+                      color: props.spinnerColor,
+                      size: props.spinnerSize
+                    })
+                  ]
+            )
+      ))
+    }
+
+    if (__QUASAR_SSR_SERVER__ !== true) {
+      if (__QUASAR_SSR_CLIENT__ && isRuntimeSsrPreHydration.value === true) {
+        onMounted(() => {
+          addImage(getCurrentSrc())
+        })
+      }
+      else {
+        addImage(getCurrentSrc())
+      }
+
+      onBeforeUnmount(() => {
+        clearTimeout(loadTimer)
+        loadTimer = null
+      })
+    }
+
+    return () => {
+      const content = []
+
+      if (ratioStyle.value !== null) {
+        content.push(
+          h('div', { key: 'filler', style: ratioStyle.value })
+        )
+      }
+
+      if (hasError.value !== true) {
+        if (images[ 0 ].value !== null) {
+          content.push(getImage(0))
+        }
+
+        if (images[ 1 ].value !== null) {
+          content.push(getImage(1))
+        }
+      }
+
+      content.push(
+        h(Transition, { name: 'q-transition--fade' }, getContent)
+      )
+
+      return h('div', {
+        class: classes.value,
+        style: style.value,
+        role: 'img',
+        'aria-label': props.alt
+      }, content)
+    }
+  }
+})