framework7io/framework7 v8.0.0

on GitHub

Core

• All new Material Theme with Material You design
• All new color theming options and parameters
• Removed Aurora theme
• Removed Elevation, Lazy, Menu, Appbar, Request components and modules
• Removed browser lazy components from package

Photo Browser

• added new swipeable thumbs functionality

Swiper

• updated to all new Swiper v9 with Swiper Element which is now used in Swipeable Tabs
• removed Swiper components from Framework7 React, Vue, Svelte - use Swiper Element instead

Grid

• New simplified grid layout and sizes
• Resizable grid functionality has been removed

Inputs

• Removed inline labels styles
• Removed expandInput functionality in Autocomplete

List

• Removed list item cell & row components and elements
• List styling now has addition outline, strong, dividers classes / props

Router

• Removed stackPages functionality

Tabs

• Swipeable tabs now use <swiper-container>

Bug Fixes

• photo-browser: fix touch-action rules
  (5850615)
• vue: accept unloadTabContent param on View
  (24025a5),
  closes #4149
• svelte: fix swipeable tabs
  (9476c6a)
• vue: support for component props defined as array
  (d5c70e4)
• router: don't try to find route with empty path
  (4e4ccad)
• smart-select: fix smart select styles
  (a014cbb)
• fix iOS preloader color
  (6d3c557)
• smart-select: update lists styles
  (70bfcd9)
• core: fix issue with custom page transitions
  (933db6f)

Features

• remove link highlights in MD theme, use only touch ripple
  (e96f363)
• actions: fix actions position padding in md theme with safe areas
  (4d34afd)
• core: tweak touch ripple
  (4419887)
• searchbar: full height expandable with top safe areas
  (87bcf59)
• touch-ripple: tweak touch ripple appearance
  (a861e12)
• core: add new router component $useState method
  (677af59)
• photo-browser: add new swipeable Thumbs
  (d3313d6)
• remove colorTheme prop in React, Vue, Svelte components
  (90ecff6)
• app: remove id, version, language app params and properties
  (1b5ffd6)
• app: remove id, version, language app params and properties
  (da6e5ae)
• popover: rename angle to arrow
  (fb9867f)
• searchbar: rename hideDividers -> hideGroupTitles
  (24e76c1)
• tabs: use Swiper Element for swipeable tabs
  (d3bd0df)
• typography: remove no-hairline helper classes
  (8b10c00)
• timeline: new syntax for timeline cols
  (ce58827)
• checkbox: allow to set checkbox icon position - start or end
  (db9d799)
• core: remove Core JS lazy modules
  (25a9c8e)
• smart-select: allow to specify input icon position
  (68a9fbc)
• svelte: export style prop for modals
  (65ecc23),
  closes #4100
• swiper: remove support for auto init with "swiper-init" in favor of Swiper custom element
  (35367f8)
• swiper: remove Swiper components export in React, Svelte & Vue in favor of Swiper Custom Element
  (344c557)
• actions: Material You styles, rename bold -> strong button
  (d6a4718)
• autocomplete: Material You styles, remove expandInput functionality
  (7af373d)
• badge: Material You styles
  (5ca6a50)
• block: Material You styles, new outline style
  (7f7cbe2)
• block: support for -inset-[ios|md] classes + similar components props
  (908ca12)
• block: support theme-specific block-strong-[ios|md] states
  (75563ce)
• breadcrumbs: Material You styles
  (d854233)
• button: Material You styles
  (fd4e1f9)
• button: new tonal buttons
  (32daed7)
• calendar: Material You styles
  (2cc67b8)
• calendar: Material You styles
  (8abf7df)
• card: Material You styles, new outline and raised styles
  (21a051e)
• chip: Material You styles
  (651406e)
• color-picker: Material You styles
  (b8a9eee)
• contacts: Material You styles
  (ab3d5a9)
• contacts-list: Material You styles
  (6f35c10)
• core: remove Menu components (use Popovers instead)
  (cf2bb67)
• core: modal.open accepts second force argument
  (99f0267)
• core: move no-hairline classes to common typography, replace noHairline components prop with
  outline
  (ca7e2c9)
• core: move colors definitions to client side with new colors parameter and app.setColorTheme
  method
  (30c38b8)
• core: new Material You colors system. colorThemeCSSProperties util now return object with
  common, light and dark vars
  (9fb8b3a)
• core: new page transitions in MD theme
  (b050a88)
• core: remove stackedPages router functionality
  (6c2e624)
• core: remove Appbar module/component
  (98285ca)
• core: remove bars shadows in MD theme
  (f14b30f)
• core: remove Elevation module
  (780783b)
• core: remove Lazy component, use native loading="lazy" instead
  (515a170)
• core: remove Request module in favor of native fetch
  (0a9f0a7)
• core: rename autoDarkMode parameter to darkMode which accepts false, true or 'auto', add
  setDarkMode app method
  (8759957)
• data-table: Material You styles
  (ff86338)
• dialog: Material You styles + rename bold -> strong button
  (fa37aee)
• fab: Material You styles
  (6f91229)
• grid: rework Grid module to use actual CSS grid, remove resizable grid
  (8381a75)
• input: remove inline style inputs
  (1d06525)
• inputs: Material You styles
  (3eb25e7)
• list: introduce list-dividers classes and props to enable/disable dividers between items
  (07a9420)
• list: Material You colors, unify item-divider -> list-group-title
  (9ec6aae)
• list: Material You styles + new outline and strong states + support theme specific inset
  props and classes
  (fae5446)
• list: remove ListItemRow and ListItemCell components
  (c5ed84b)
• list: support label.item-content as activable element
  (e4cb150)
• login-screen: Material You styles
  (accc5e5)
• menu-list: Material You styles
  (67a7aa2)
• messages+messagebar: Material You styles
  (1757396)
• navbar: Material You style navbar
  (c9b7519)
• notification: Material You styles
  (d68621d)
• panel: Material You styles + remove panels shadows
  (a67c370)
• panel: new floating panel effect
  (45b6b89)
• photo-browser: Material You styles
  (f065f63)
• photo-browser: update to latest Swiper
  (b8dbe29)
• picker: Material You styles
  (2135524)
• popover: Material You styles, new angle (corner) parameter
  (b6ebbe3)
• popup: Material You styles
  (9ece196)
• popup: use push effect even if no safe areas detected
  (da356cb)
• range: Material You styles
  (6bb3df2)
• searchbar: Material You styles
  (f2d47c6)
• sheet: Material You styles
  (fd17aed)
• sheet: use push effect even if no safe areas detected
  (5fd5130)
• sortable: Material You styles
  (4012322)
• stepper: Material You styles
  (e1fe169)
• subnavbar: Material You styles
  (8b8e152)
• swipeout: Material You styles
  (d85d591)
• swiper: update to latest Swiper 9
  (03fa5d9)
• tabbar: Material You styles + rename tabbar-labels -> tabbar-icons
  (fbd07b0)
• tabs: update to latest Swiper
  (1e82bf4)
• text-editor: Material You styles
  (357b1d5)
• timeline: Material You styles
  (a09698d)
• toast: Material You styles
  (bb09829)
• toggle: Material You styles
  (82c91d8)
• tooltip: Material You styles
  (e80fbb2)
• remove Aurora theme
  (a9de963)