npm vuetify 1.1.0-alpha.0
v1.1.0-alpha.0

latest releases: 3.7.3, 3.7.2, 3.7.1...
6 years ago

TLDR

The documentation is still a WIP and will be missing information and examples for a lot of the new functionality. If you have questions about this, please come to the community.

v1.1 Forms Update

All form components have been rebuilt to adhere to a new structure that makes it easier to maintain and extend functionality. With this change, we have abstracted core functionality from various components and moved them to new, more specialized versions. The 3 new base components, v-input, v-label and v-messages will allow you to easily create your own custom input implementations all while still maintaining a fluid design and interface.

We have also started to move configuration options into the global $vuetify object. You can now specify individual icon types for your entire application or select from 1 of 4 presets — Material Design (default), MDI, Font Awesome 4, Font Awesome 5 (you can also add your own presets!).

This release also includes our first round of RTL updates with all form components RTL compatible out of the box. This is an ongoing effort and you will see more components added with each minor release until we have 100% support. Thank you to everyone for your patience on this particular functionality.

Beyond the above mentioned components, we also have created quite a few new additions and added a very large chunk of community feedback to existing ones. Due to the flexibility of Vue, we are able to softly deprecate component properties that have been moved to a new component, such as v-textarea which removes the multi-line and textarea props from v-text-field. The prepend/append slots now support custom html such as v-btns or v-tooltips.

  • v-input — new
    • The baseline for all form components
  • v-text-field — updated
    • Now supports outline styles.
    • The box and solo props have been given some QOL tweaks such as removing excessive margin, or implementing proper styles, such as the ripple effect when clicking on a box.
    • Has a new append-outer-icon and append-outer scopedSlot. The previous append slot actually consumes a new inner slot specific to v-text-field.
  • v-textarea — new
    • deprecates the multi-line and textarea props from v-text-field
  • v-select — updated
    • now extends v-text-field directly
    • inherits all available props from v-text-field and v-menu
  • v-autocomplete — new
    • deprecates the autocomplete, combobox, and tags props from v-select
  • v-overflow-btn — new
    • deprecates the overflow, segmented, and editable props from v-select
  • v-range-slider — new
    • Same functionality as v-slider, but with more sliders!

Upgrade guide

Click to expand

Things that might break

v1.1 brings style scoping to the framework with ~90% of classes gaining a prepended v-. If you have styles that are specifically modifying Vuetify classes you will need to update the selectors. The exception to this are grid and helper classes. Many internal methods have been moved/been renamed. If your implementations depend on these and you are looking for an updated way to handle your use-case, please stop by the community.

The id prop on form inputs has been properly moved to the input. If you have classes that rely on this for specification, you will need to update them.

Labels used in v-switch, v-checkbox and v-radio are now relatively positioned (previously absolute).

If you are using a v-select with chips and scopedSlots, it is recommended that you update your @input hook to the parent onChipInput method.

<template>
  <v-select :items="items" chips multiple>
    <template slot="selections" slot-scope="props">
      <v-chip @input="props.parent.onChipInput">{{ props.item.text }}</v-chip>
    </template>
  </v-select>
</template>

The v-tabs component with the centered prop has been updated to use the proper width (previously had a min of 164px). If you liked this previous look, use fixed instead.

Deprecations

Your application should still continue to work exactly as it did on v1.0. Below is a list of functionality that is being deprecated and will be removed in future releases. Don't want to read? Don't worry, if you are using this functionality, you will receive deprecation warnings inside of your app.

  • v-select with the tags, combobox or autocomplete props has been moved to v-autocomplete
  • v-select with the segmented, overflow or editable props has been moved to v-overflow-btn
  • v-text-field with the multi-line or textarea props has been moved to v-textarea
  • The textarea prop has been renamed to outline
  • The prepend-icon and append-icon slots are now prepend and append respectively
  • v-expansion-panel-content v-model has been moved to the parent v-expansion-panel
    • Can be controlled by an array of indexes that correspond to the content index

Known bugs

Click to expand
  • v-autocomplete with an array of objects injects the value instead of text into the input field when selecting an item

Changelog

Click to expand

Things we changed

  • 725cb26 The attach prop on v-menu is now dynamic
  • #1322, #2739, #3305 Added better support for custom append and prepend slots. Can now accept components such as v-btn or v-tooltip
  • #1561 Added v- to most vuetify classes to prevent conflicts with other libraries. Note that this will break custom styles and simple use of component classes (eg. <div class="card"> instead of <v-card>). Huge thanks to @peluprvi and @juanpa669
  • #2264 Removed the variable padding from v-container when using grid-list-{size} props
  • #2457 The behavior of v-checkbox and v-radio should now mimic HTML 5 inputs
  • #2661 Improved click areas of selection controls
  • #3191 v-data-table now resets to the first page when sorting changes
  • #3353 Focused v-data-table headers now have a different background color instead of an outline (#3331)
  • #3324 Added v-model support for v-expansion-panel (#3271, #3313)
  • #3915 target can now be specified on any routable component, not just those with href (thanks @SeregPie)
  • #3962 v-btn now has padding on its root element instead of .btn__content, fixed #3452 (thanks @peluprvi)
  • #3750 required no longer adds an asterix to the input's label, this must be done manually
  • #3616 v-select now passes the attach prop through correctly to its menu
  • #3576 Reduced the width of v-radio, v-switch, and v-checkbox click targets to not extend past the label
  • #3057 v-switch hints should now be always visible

Things we added

  • bc32335 Added new prop to v-select, small-chips
  • 168defa A persistent v-dialog will now pulse when clicked outside
  • 60a4bc6 Added support for the color prop to v-stepper-step (#3276)
  • 1822153 Fixed regression of toolbar scrolling functionality (#3484)
  • b71b4f8 Added new vertical prop to v-divider
  • 27e4e85 Added new tick-size prop to v-slider
  • #3920 Added new headers-length prop to v-data-table, fixed #3419 and #3338
  • #1307 #1837 v-select's activation area has been reduced to match field location
  • #1686 Added new props to v-slider, thumb-label-size, always-dirty and tick-labels
  • #1782 Added new reverse prop to v-text-field. Will invert the component's slot items and right align the label
  • #1973 Added support for box, solo and outline to v-select
  • #2050 Added readonly support for all form inputs
  • #2385 New v-messages component allows the user to create v-form level errors
  • #2399 Added support for loaders on all v-text-field variations (propagates to v-select, v-autocomplete, v-textarea and v-overflow-btn) style props, box, outline and solo
  • #2414 You can now place elements other than v-radio inside of v-radio-group
  • #2591 #3116 Added start, end and change events to v-slider (event names still pending)
  • #2613 Improved the functionality of v-autocomplete with no data present. Added new hide-no-data prop to remove the no-data text/slot
  • #2641 Fixed a bug that allowed a v-text-field with the clearable prop that was disabled to be cleared
  • #2656 Improved v-menu width on Edge and IE11
  • #2708 thumb-label and ticks props are now strings and can take values hover and always added thumb-label scoped slot to style thumb-label
  • #2767 Added new no-filter prop to v-autocomplete. Useful when data is being provided already filtered
  • #2784 Can now specify v-checkbox and v-radio on and off icons at the config level (Vue.use(Vuetify, { .. })) and at the component level
  • #2748 Added a new header slot to v-data-iterator (#3922)
  • #2788 v-select now supports the allow-overflow prop
  • #2871 #3591 Added a global icon config. This allows you to use a single icon font without also needing the standard material icons (thanks @appurist)
  • #3287 Added a new prop delimiters for v-autocomplete with tags. Accepts an array of strings that should create a new tag
  • #3320 Added stylus variables $heading-font-family and $headings.x.font-family (thanks @jaxn)
  • #3352, #3540 Added new props readonly and disabled to v-expansion-panel and v-expansion-panel-content
  • #3379 The theme stylesheet can now be disabled. This is useful if you want to generate it statically instead of on the client
  • #3785 Added the Vuetify plugin to the type definition. You should now get type hints in Vue.use
  • #3748 this.$vuetify.goTo() now returns a promise (#3832)
  • #3915 The target prop will now work on all router-link components (thanks @SeregPie)
  • #3950 Can now specify a nonce for the app stylesheet

Things we fixed

  • fef9a0a Fixed a bug in v-menu where the auto prop styles were being applied always
  • #838 (yea I know right) All form elements now have a input element
  • #1829 #3135 #3821 Improved style support for all v-text-field and extending components
  • #1969 Fixed v-slider error state styles
  • #2119 #2777 Using the id prop in all input controls will now apply to the actual input element
  • #2128 Fixed a bug where v-checkbox was not respecting dark and light themes properly
  • #2171 Fixed a bug that prevented v-radio from being wrapped in a v-tooltip
  • #2228 Fixed outline styles for v-textarea in Firefox
  • #2542 All selection controls should now properly lineup with other input types when using prepend and append icon props
  • #2686 Selection control labels are now relatively positioned and should break as you would expect
  • #2807 #3793 Fixed a bug where v-autocomplete would automatically highlight the first item when filtering
  • #2933 Improved scoped slots with chips in v-select. New method provided by parent, onChipInput is available on the parent instance passed to the slot
  • #2948 Fixed a bug where using the reset method on v-form was not properly resetting v-select
  • #2982 v-text-field will now match the default input behavior of emitting a change event when pressing enter
  • #3082 Fixed a bug where v-textarea would reset the scroll position in very long fields
  • #3097 Fixed a bug where a disabled value could be removed by using the keyboard in v-autocomplete
  • #3137 v-slider has been refactored to use the new v-input and now supports custom icons and the single-line prop
  • #3425 Fixed a bug where v-autocomplete with the combobox could not be cleared with keydown.backspace
  • #3452 Fixed a bug where v-btn had the incorrect ripple styles when used in v-bottom-nav
  • #3487 Fixed disabled styles for selection-controls when using the readonly prop
  • #3499 Prevent layout thrashing on menu mount (#3497), thanks @Toilal
  • #3532 Fixed a bug where v-select with the hide-selected prop was not working properly
  • #3567 Fixed a bug where v-slider would activate from a drag not started by the slider
  • #3593 Applied lazy behaviour to detachable components (#3570)
  • #3704 Added more padding to v-snackbar buttons (thanks @Bingbazaar)
  • #3722 Improved v-bottom-nav styles to better mach material spec (thanks @peluprvi)
  • #3837 Fixed the text color for solo-inverted components
  • #3934 Fixed a bug where the centered prop on v-tabs would apply an incorrect min-width to the tabs
  • #3937 Fixed a bug where v-chip inside a v-card wouldn't have the correct border-radius (thanks @peluprvi)
  • #3946 Fixed a bug where grid components would recieve a slot class when used at the root of a slot
  • #3959 Added missing lazy behavior from v-tooltip
  • #3962 Fixed a bug where v-btn had the incorrect click styles when used in v-bottom-nav
  • #3958 Fixed a bug where the lazy prop would not work correctly on v-tooltip (#3959), thanks @FFxSquall
  • #3965, 02f3ad8 Fixed various stylus variable conflicts, in particular v-progress-linear (thanks @detroitenglish)
  • #3071 Fixed the v-text-field solo append-icon position in IE11
  • #3186 Fixed the spacing in textareas with box
  • #3487 Fixed a bug where a readonly v-switch would still have the ripple effect
  • #3532 Fixed a bug where hide-selected would not work correctly with tags
  • #3567 Fixed a bug where v-slider would change its value when the mouse button was released over it
  • #3793 Fixed a bug where v-autocomplete would always highlight the first list item when opened
  • #3821 Fixed the bottom border margin on box inputs with a prepended icon
  • #3878 Fixed the text color in <v-select solo-inverted>
  • #3954 Fixed a bug where v-form would not watch sub-components, only slotted children

Don't miss a new vuetify release

NewReleases is sending notifications on new releases.