@rstoenescu rstoenescu released this Aug 18, 2018 · 7 commits to dev since this release

Assets 2

New

  • QParallax: Add support for videos
  • (Experimental) Containerized QLayout; includes ability to use QLayout inside QModal; IE11 not supported (check Layout components page).
  • Shake Modal/Dialog if not dismissable
  • [Request] QCollapsible support for routes #937
  • QSearch | Add type="search"? #2426
  • QLayoutDrawer new event: 'on-layout(boolean)' -- triggered when Drawer toggles occupying space on Layout
  • Updated src/css/core.variables.styl - making variables overridable (#1912)
  • Remove Tooltip shadow for Material theme (to match Material guidelines)
  • Feature Request: Ability to disable Hover on timeline component #2205
  • QUpload "filter" property #1458
  • [Feature Request] Object as filter in DataTable #1896
  • [Request] QItem/QItemMain / Add stylus variable that controls the size of the offset the property 'inset' produces #2183
  • [Enhancement] QTree: add an iconColor property on the Nodes model structure #2203
  • [Request] Truncate text in QInput #2307
  • [REQUEST] Adjustable Column Widths for QTables #2248

Fixes

  • Problems with Min Max DateTime Picker #2362
  • Wrong icon in fontawesome Quasar icon set #2431
  • QAutocomplete bad popover positioning unless static data #2427
  • Safe Area for iOS when QModal in 'maximized' #2421
  • QTable - rows per page select font
  • QFab closing animation
  • Modal maximized leaves class q-maximized-modal on body element even after hidden #2417

@rstoenescu rstoenescu released this Aug 9, 2018 · 31 commits to dev since this release

Assets 2

VSCode code autocompletion is coming! Will publish an article on our Medium.com Quasar blog.

New

  • Finalized Vetur support -- VSCode code autocompletion support through Vetur extension (will get enabled once Vetur makes a new release)
  • $tooltip-fontsize Stylus variable

Fixes

  • QSlideTransition not working correctly after fast toggling when using with v-if #2401
  • Unable to use QScreen in computed properties due to it being an Object #2399

@rstoenescu rstoenescu released this Aug 8, 2018 · 39 commits to dev since this release

Assets 2

When upgrading, please add responsive Boolean prop to QTimeline to maintain previous behaviour. We apologise for this change in a minor release but it is really needed.

New

  • [Request] QTimeline always one-sided #2324
  • [Request] QCarousel/QEditor/QTable emit event on fullscreen change #2338
  • [Request] QCollapsible add style for open item #2375
  • QTooltip - font-size should be 12px according to Material specs
  • Do not add left/right padding to Tabs container when not on header/footer.

Fixes

  • QSlideTransition sometimes doesn't play in Chrome/Firefox on desktop #2384
  • Fontawesome icons don't fit timeline icons #2386
  • QItem label letters being cut off
  • Don't pad hideUnderlined controls (#2388)
  • Clearable not working in ChipsInput (#2383)
  • Some arabic i18n typos (#2380)
  • Unable to override color of QRouteTab #2394

@rstoenescu rstoenescu released this Aug 4, 2018 · 59 commits to dev since this release

Assets 2
  • Various CSS fixes for IE11
  • Greatly improve QSlideTransition performance (also affecting QCollapsible, QTree, QStepper)

@rstoenescu rstoenescu released this Aug 1, 2018 · 66 commits to dev since this release

Assets 2

Features

  • [Request] Allow shadow color and elevation to be overridable #2357

Fixes

  • QAutocomplete: fix error with timing when typing immediately after focus (#2361)
  • QChat: fix shrinked avatar with long text (#2360)
  • QBtn: set type 'button' on buttons by default (else it's going to be 'submit') (#2354)
  • Greek translation letter updated (#2355)
  • Brazilian portuguese localization updates. (#2351)
  • QInput textarea rows - fix css height (#2343)
  • IE11 various CSS fixes

@rstoenescu rstoenescu released this Jul 28, 2018 · 79 commits to dev since this release

Assets 2

Fix: [Bug] - QScrollObservable - debounce not working with QSrollArea? #2341

@rstoenescu rstoenescu released this Jul 28, 2018 · 81 commits to dev since this release

Assets 2

Fixes

  • QScrollArea unable to select text inside #2197
  • Pinch zoom event not available and q-context-menu identifies it as long press
  • QAutocomplete: Small adjustments of timing for trigger on focus (#2332)
  • Better handling of iPhoneX statusbar padding

@rstoenescu rstoenescu released this Jul 26, 2018 · 88 commits to dev since this release

Assets 2

One fix only:

  • outline and textarea height (#2328)

@rstoenescu rstoenescu released this Jul 26, 2018 · 90 commits to dev since this release

Assets 2

One fix:

  • [Bug] .17 - Notify defaults #2322

@rstoenescu rstoenescu released this Jul 25, 2018 · 93 commits to dev since this release

Assets 2

This is big release, introducing SSR support & many new features. Enjoy!

Breaking Changes

Only one, regarding QLayoutDrawer mini-width prop. It is now a Number (instead of String!) defining width in pixels (default: 60).

SSR (Server-Side Rendering) Support

The long awaited SSR support is here! Quasar code is now isomorphic. It might be a one-liner, but this is where 90% of the development time was spent for this release.

Some things worth mentioning, in order to best benefit from Quasar SSR:

  • Make sure you read the SSR docs in Guide

  • Use Platform and Cookies Quasar plugins only in their $q.platform and $q.cookies form. Do not use this outside of Vue components when building with SSR mode. This restriction is required because of the singleton problem when dealing with SSR.

  • The LocalStorage and SessionStorage Quasar plugins cannot be used on server-side. The reasons are obvious since this is a client-side only browser API. DO NOT rely on web storage for your SSR website. You can use Cookies Quasar plugin instead, which does work on server-side too.

  • Make your QBtns SEO-friendly. Quasar offers this functionality out of the box, but you need to know how to enable it:

    Quasar buttons are usually rendered with a <button> HTML tag. But now they can be rendered with <a> tags too. When you want the user to navigate to another route by clicking a QBtn, you were used to add a @click Vue event handler. Now you can use <router-link>-like props on QBtn too. By doing this, Quasar can make your buttons SEO friendly.

    <!-- old way, still works, but not SEO friendly -->
    <q-btn @click="$router.push('/some/route')" ... />
    <!-- new, equivalent way -->
    <q-btn to="/some/route" ... />
    
    <!-- old way, still works, but not SEO friendly -->
    <q-btn @click="$router.replace('/some/route')" ... />
    <!-- new, equivalent way -->
    <q-btn to="/some/route" replace ... />
    
    <!-- old way, still works, but not SEO friendly -->
    <q-btn @click="$router.push({ name: 'special' })" ... />
    <!-- new, equivalent way -->
    <q-btn :to="{ name: 'special' }" ... />

Quasar Meta plugin

The Meta plugin can change page title, manage meta tags, manage <html> & <body> DOM element attributes, add/remove/change <style> tags in head (useful for CDN stylesheets, for example), or manage <noscript> tags. Note that this is not a full description of what the Meta plugin can do (that will be available in the final release notes).

Installation:

// quasar.conf.js
framework: {
  // ...
  plugins: ['Meta']
}

What this does is that it enables the use of a special property in your Vue components called meta. Example below, with almost all of its features:

// some .vue file

export default {
  // ...
  meta: {
    title: 'Index Page', // sets document title
    titleTemplate: title => `${title} - My Website`, // optional; sets final title as "Index Page - My Website", useful for multiple level meta
    meta: {
      description: { name: 'description', content: 'Page 1' },
      keywords: { name: 'keywords', content: 'Quasar website' },
      equiv: { 'http-equiv': 'Content-Type' content: 'text/html; charset=UTF-8' }
    },
    link: {
      material: { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
    },
    script: {
      ldJson: {
        type: 'application/ld+json',
        innerHTML: `{ "@context": "http://schema.org" }`
      }
    },
    htmlAttr: {
      'xmlns:cc': 'http://creativecommons.org/ns#' // generates <html xmlns:cc="http://creativecommons.org/ns#">
    },
    bodyAttr: {
      'action-scope': 'xyz', // generates <body action-scope="xyz">
      empty: undefined // generates <body empty>
    },
    noscript: {
      default: 'This is content for browsers with no JS (or disabled JS)'
    }
  }
}

Metas are computed from .vue files in the order they are activated by Vue Router (let's call this a chain for further explanations). Example: App.vue > SomeLayout.vue > IndexPage.vue > ...?

Notice that all properties (except for title and titleTemplate) are Objects; you can override meta props defined in previous Vue components in the chain by using these keys again. Example:

// first loaded Vue component
meta: {
  meta: {
    myKey: { name: 'description', content: 'My Website' }
  }
}

// a subsequent Vue component in the chain;
// this will override the first definition on "myKey"
meta: {
  meta: {
    myKey: { name: 'description', content: 'Page 1' }
  }
}

The "meta" properties can be dynamic. For example, this is how you can bind to the Vue scope with them. Think of them as a Vue computed property.

export default {
  data () {
    return {
      title: 'Some title' // we define the "title" prop
    }
  },
  meta () {
    return {
      // this accesses the "title" property in your Vue "data";
      // whenever "title" prop changes, your meta will automatically update
      title: this.title
    }
  },
  methods: {
    setAnotherTitle () {
      this.title = 'Another title' // will automatically trigger a Meta update due to the binding
    }
  }
  // ...
}

New

  • QNoSsr component; highly optimized - takes into consideration client takeover so subsequent renders are as fast as possible.

  • QJumbotron component

  • QTable as grid

qtable-grid

<q-table
  grid
  hide-header
  :data="data"
  :columns="columns"
  :filter="filter"
  :selection="selection"
  :selected.sync="selected"
  :visible-columns="visibleColumns"
  row-key="name"
>
  <template slot="top-right" slot-scope="props">
    <q-search hide-underline v-model="filter" />
  </template>

  <div
    slot="item"
    slot-scope="props"
    class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 transition-generic"
    :style="props.selected ? 'transform: scale(0.95);' : ''"
  >
    <q-card class="transition-generic" :class="props.selected ? 'bg-grey-2' : ''">
      <q-card-title class="relative-position">
        <q-checkbox v-model="props.selected" :label="props.row.name" />
      </q-card-title>
      <q-card-separator />
      <q-card-main class="q-pa-none">
        <q-list no-border>
          <q-item v-for="col in props.cols.filter(col => col.name !== 'desc')" :key="col.name">
            <q-item-main>
              <q-item-tile label>{{ col.label }}</q-item-tile>
            </q-item-main>
            <q-item-side right>
              <q-item-tile>{{ col.value }}</q-item-tile>
            </q-item-side>
          </q-item>
        </q-list>
      </q-card-main>
    </q-card>
  </div>
</q-table>
  • New quasar.conf > framework > config Object

    framework: {
      // ...
      config: {
        brand: { // this will NOT work on IE 11
          primary: '#e46262',
          // ... or all other brand colors
        },
        notify: {...}, // default set of options for Notify Quasar plugin
        loading: {...}, // default set of options for Loading Quasar plugin
        loadingBar: { ... }, // settings for LoadingBar Quasar plugin
        cordova: {
          iosStatusBarPadding: true/false, // add the dynamic top padding on iOS mobile devices
          backButtonExit: true/false // Quasar handles app exit on mobile phone back button
        }
      }
    }

    The Quasar UMD version will define the following before including the Quasar script tag:

    <script>
      // optional
      window.quasarConfig = { .... }
    </script>
  • Loading & Notify Quasar plugins now support a new method: setDefaults({...}) -- use this or through quasar.conf > framework > config: { loading: {...}, notify: {...} }

  • (NEW) LoadingBar Quasar plugin -- adds a loading bar a-la Youtube; no need to do anything else in your app code

    It will catch all Ajax calls and even hook into asyncData() automatically, but if you have some custom actions, you can programmatically start/stop it by calling this.$q.loadingBar.start() and this.$q.loadingBar.stop() in your Vue components. Outside of Vue components, you can import { LoadingBar } from 'quasar' then call LoadingBar.start()/stop()/increment(val)

    LoadingBar is using QAjaxBar component under the covers, so you can configure it using QAjaxBar props like this:

    // quasar.conf
    framework: {
      // ...
      plugins: [
        // ...
        'LoadingBar'
      ],
    
      config: {
        // optional:
        loadingBar: { ... } // QAjaxBar props
      }
    }
  • Hook AddressbarColor into cordova-plugin-statusbar when available

  • QLayoutDrawer

    • "mini-width" prop is now a Number (instead of String!) defining width in pixels (default: 60)
    • new prop: width defining width in pixels for non-mini mode (default: 300)
    • backdrop animation when in mobile mode
  • Many performance enhancements

    • layout header/footer animation
    • tweaks to make Vue render Quasar components faster by avoiding some children array normalization
  • Ability to cancel frameDebounce() from utils (call .cancel() on the debounced function)

  • QUploader: added upload-factory prop (#2093)

  • QInput: added prop lower-case (#2117)

  • New Quasar language packs: Traditional Chinese, Guarani

  • [Request] Q-Chips-Input: Pass upper-case parameter to underlying q-input #2031

  • [Request] QUploader - new prop: no-content-type #1974

  • Q-Page: ability to disable minHeight prop. (#2120)

  • Allow Dialog and ActionSheet Quasar plugins to receive a resolver token (#1869)

  • Improve out of the box SEO for QItem, QBreadcrumbs, QRouteTab -- allow bots to follow links

  • Improve keyboard navigation (#1936)

    • QModal
      • fix not emmiting dismiss on ESC
      • focus after show
      • add back noRefocus
    • QPopover
      • focus after show
      • refocus after hide (noRefocus prop)
      • allow toggle by keyboard ENTER
    • QDialog
      • fix button focus
      • find button by class name (q-btn)
      • add back noRefocus
    • QFab - refocus after hide
    • QTab / QRouteTab
      • focus with keyboard
      • allow select with keyboard ENTER
    • QColor and QDatetime
      • fix tabindex lost on close
      • fix popup not closing on blur
    • QColorPicker
      • fix incorrect tabindex on disable
      • allow to select saturation on click on mobile (was working only on drag)
    • QDatetimePicker.mat - allow keyboard adjustment of all values
    • QActionsheet
      • select option with ENTER/SPACE, navigation with TAB
      • trigger selection on keyup to avoid click on original button
    • QAutocomplete - use QPopup with noFocus
    • QKnob, QSlider, QRange - keyboard updating (UP|RIGHT +, DOWN|LEFT -, CTRL+... 10*)
    • QSelect
      • remove autofocusFilter - always select filter if present
      • move keyboard navigation on QPopover
      • delay popover.reposition on filter to allow resize
    • v-back-to-top, v-close-overlay, v-go-back, v-ripple - trigger by keyboard ENTER
    • QInput - set model on ENTER
  • Flex addons -- provide breakpoint aware versions for all flex (and display) related classes -- needs to be enabled from quasar.conf > framework > cssAddon: true

      .flex-<bp>-(block|inline)
      .(row|column|flex)-<bp>(|-inline)
      .reverse-<bp>
      .(wrap|no-wrap|reverse-wrap)-<bp>
      .order-<bp>-(first|last|none)
      .justify-<bp>-(start|end|center|between|around)
      .items-<bp>-(start|end|center|baseline|stretch)
      .content-<bp>-(start|end|center|between|around)
      .self-<bp>-(start|end|center|baseline|stretch)
      .flex-<bp>-center
      .gutter-<bp>(|-x|-y)-(xs|sm|md|lg|xl)
      .(col|offset)-<bp>(|0..12)
  • QModal: Auto size based on content, can be customized through CSS with (min|max)(Width|Height) passed in :content-css. It's also applied when using QModalLayout.

  • Flex: .col has higher grow priority than .col-auto and .col-grow, add .(col|offset)-0

  • Material ripple - centered on round buttons (as per Material guidelines)

  • [Request] debounce property in QScrollObservable component #2169

  • QTabs - desktop state hover

  • QScrollArea - added hover effect (#2189)

  • Lots of enhancements to QAjaxBar to best accommodate SSR mode

  • Use round/rounded focus helper for radio/checkbox (#2200)

  • QBtnDropdown - popover-anchor & popover-self props (to align its popover) #1665

  • Enhancements for clearable and clearValue (#2216) #1994

  • Loading plugin default delay was set to 0

  • feat: add v-scroll horizontal position #2296

  • Finalized helper-json files

  • Set xhr's withCredentials flag in request for QUploader #2305

  • QTabs new prop: "panes-container-class"

Fixes

  • QTab's count and alert attributes look bad when QTabs's align is set to justify #2032
  • [Bug] QSelect throws an error when container block disappears #2071
  • QInput shouldn't have expanding underline animation on focus in iOS theme #2085
  • v-scroll-fire get fired when reload the page #2081
  • Q-Pagination Direction-Links Broken on Cordova #2088
  • v-model on QLayoutDrawer bug #2094 -- example: having an input component breaks the model of QLayoutDrawer
  • iPhoneX - avoid toolbar/header top-padding when not in fullscreen #2118
  • [Regression] Dialog is not blurring input element in v0.15.15/v0.16 #2137
  • QBtnDropdown Popover does not scroll #2136
  • QTable: [MS-Edge] Loading indicator not displayed correctly #2122
  • QSearch: propagate upper-case and lower-case #2124
  • Force QChip pointing zIndex (when in an already positioned context) #1982
  • QPullToRefresh causing scroll issues with large tables inside QScrollArea #1884
  • QColorPicker - process unset value #1887
  • Error when navigating to other page while select component is opened #1980
  • Return dismiss function from Notify.create #1913
  • Fix material ripples on IE 11
  • QAutocomplete: Fix focus after tab, fix loop in normalizeInterval, fix reposition, select options on keyboard navigation #2149 #2155 close #2157
  • Override Material Icons CDN default size
  • Colors utils: Fix guard for color type in luminosity (#2180)
  • Japanese Quasar language pack: 2 words changed for more natural Japanese (#2182)
  • Mini layout drawer animates like normal mode when it hides automatically #2080
  • Infinite scroll delay after resume #2187
  • animScrollTo util - bug if duration < 16 after recursion (#2192)
  • Fix dom.ready() util when readyState = "interactive" (#2199)
  • QSelect: fix blur when selecting clear (#2202)
  • QBreadcrumbs and align mixin - fix align prop value check (#2217)
  • className for QSelect, QSearch before|after, QInput focus on marginalia (#2215)
  • Screen plugin doesn't updates values after setting new sizes #2221
  • QRouterTab: fix double tabindex and hide outline (#2226)
  • QPopover: only refocus on anchorEl when anchorClick (solves refocusing on split dropdown) (#2225)
  • Fix QAutocomplete when not editable and pass readonly to QInputFrame (#2227)
  • Fix internal popups.getPosition corner-case (#2235)
  • QDatetime: use a +-50 years interval from current, use precomputed mins (#2234)
  • QDatetime: format when type is date and formatModel is string (#2231)
  • Fix not caught rejected promises when showing/hiding modals, dialogs, popovers
  • fix: QTable - sort by non visible column #1886
  • fix: QInfiniteScroll concurrency issue #2241
  • fix(QSelect): does not show placeholder text when using chips (fix #2003) #2287
  • fix: Corner case in model-toggle where component gets destroyed & not cleans up history on Cordova