├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitattributes ├── .github ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── ISSUE_TEMPLATE │ ├── config.yml │ ├── feature_request.md │ ├── framewor7-core-issue.md │ ├── framewor7-react-issue.md │ ├── framewor7-svelte-issue.md │ └── framewor7-vue-issue.md ├── PULL_REQUEST_TEMPLATE.md ├── lock.yml ├── stale.yml └── workflows │ ├── issue-close-require.yml │ └── issue-labeled.yml ├── .gitignore ├── .nova ├── Configuration.json └── Tasks │ ├── Core.json │ ├── React.json │ ├── Svelte.json │ └── Vue.json ├── .prettierignore ├── .prettierrc ├── .travis.yml ├── .vscode └── settings.json ├── BACKERS.md ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── babel-react.config.js ├── babel-svelte.config.js ├── babel-vue.config.js ├── babel.config.js ├── build ├── core │ └── package.json ├── react │ └── package.json ├── svelte │ └── package.json └── vue │ └── package.json ├── gulpfile.js ├── kitchen-sink ├── core │ ├── css │ │ └── app.css │ ├── fonts │ │ ├── Framework7Icons-Regular.ttf │ │ ├── Framework7Icons-Regular.woff │ │ ├── Framework7Icons-Regular.woff2 │ │ ├── MaterialIcons-Regular.ttf │ │ ├── MaterialIcons-Regular.woff │ │ └── MaterialIcons-Regular.woff2 │ ├── img │ │ ├── beach.jpg │ │ ├── f7-icon-square.png │ │ ├── f7-icon.png │ │ ├── lock.jpg │ │ ├── monkey.jpg │ │ ├── mountains.jpg │ │ └── vi-icon.png │ ├── index.html │ ├── js │ │ ├── app.js │ │ ├── autocomplete-languages.json │ │ ├── routes.js │ │ └── store.js │ └── pages │ │ ├── 404.html │ │ ├── about.html │ │ ├── accordion.html │ │ ├── action-sheet.html │ │ ├── area-chart.html │ │ ├── autocomplete.html │ │ ├── badge.html │ │ ├── breadcrumbs.html │ │ ├── buttons.html │ │ ├── calendar-page.html │ │ ├── calendar.html │ │ ├── cards-expandable.html │ │ ├── cards.html │ │ ├── checkbox.html │ │ ├── chips.html │ │ ├── color-picker.html │ │ ├── color-themes.html │ │ ├── contacts-list.html │ │ ├── content-block.html │ │ ├── data-table.html │ │ ├── dialog.html │ │ ├── fab-morph.html │ │ ├── fab.html │ │ ├── form-storage.html │ │ ├── gauge.html │ │ ├── grid.html │ │ ├── home.html │ │ ├── icons.html │ │ ├── infinite-scroll.html │ │ ├── inputs.html │ │ ├── list-button.html │ │ ├── list-index.html │ │ ├── list.html │ │ ├── login-screen-page.html │ │ ├── login-screen.html │ │ ├── master-detail-detail.html │ │ ├── master-detail-master.html │ │ ├── menu-list.html │ │ ├── messages.html │ │ ├── navbar-hide-scroll.html │ │ ├── navbar.html │ │ ├── notifications.html │ │ ├── page-loader-component.html │ │ ├── page-transitions-effect.html │ │ ├── page-transitions.html │ │ ├── panel.html │ │ ├── photo-browser.html │ │ ├── picker.html │ │ ├── pie-chart.html │ │ ├── popover.html │ │ ├── popup.html │ │ ├── preloader.html │ │ ├── progressbar.html │ │ ├── pull-to-refresh.html │ │ ├── radio.html │ │ ├── range.html │ │ ├── searchbar-expandable.html │ │ ├── searchbar.html │ │ ├── segmented.html │ │ ├── sheet-modal.html │ │ ├── skeleton.html │ │ ├── smart-select.html │ │ ├── sortable.html │ │ ├── stepper.html │ │ ├── subnavbar-title.html │ │ ├── subnavbar.html │ │ ├── swipeout.html │ │ ├── swiper-3d-coverflow.html │ │ ├── swiper-3d-cube.html │ │ ├── swiper-3d-flip.html │ │ ├── swiper-fade.html │ │ ├── swiper-gallery.html │ │ ├── swiper-horizontal.html │ │ ├── swiper-lazy.html │ │ ├── swiper-loop.html │ │ ├── swiper-multiple.html │ │ ├── swiper-nested.html │ │ ├── swiper-pagination-fraction.html │ │ ├── swiper-pagination-progress.html │ │ ├── swiper-parallax.html │ │ ├── swiper-scrollbar.html │ │ ├── swiper-space-between.html │ │ ├── swiper-vertical.html │ │ ├── swiper-zoom.html │ │ ├── swiper.html │ │ ├── tabbar-icons.html │ │ ├── tabbar-scrollable.html │ │ ├── tabbar.html │ │ ├── tabs-animated.html │ │ ├── tabs-routable.html │ │ ├── tabs-static.html │ │ ├── tabs-swipeable.html │ │ ├── tabs.html │ │ ├── text-editor.html │ │ ├── timeline-horizontal-calendar.html │ │ ├── timeline-horizontal.html │ │ ├── timeline-vertical.html │ │ ├── timeline.html │ │ ├── toast.html │ │ ├── toggle.html │ │ ├── toolbar-hide-scroll.html │ │ ├── toolbar-tabbar.html │ │ ├── tooltip.html │ │ ├── treeview.html │ │ ├── virtual-list-vdom.html │ │ └── virtual-list.html ├── react │ ├── index.html │ ├── public │ │ ├── autocomplete-languages.json │ │ └── img │ │ │ ├── beach.jpg │ │ │ ├── f7-icon-square.png │ │ │ ├── f7-icon.png │ │ │ ├── lock.jpg │ │ │ ├── monkey.jpg │ │ │ └── mountains.jpg │ ├── src │ │ ├── app.js │ │ ├── app.jsx │ │ ├── pages │ │ │ ├── 404.jsx │ │ │ ├── about.jsx │ │ │ ├── accordion.jsx │ │ │ ├── action-sheet.jsx │ │ │ ├── area-chart.jsx │ │ │ ├── autocomplete.jsx │ │ │ ├── badge.jsx │ │ │ ├── breadcrumbs.jsx │ │ │ ├── buttons.jsx │ │ │ ├── calendar-page.jsx │ │ │ ├── calendar.jsx │ │ │ ├── cards-expandable.jsx │ │ │ ├── cards.jsx │ │ │ ├── checkbox.jsx │ │ │ ├── chips.jsx │ │ │ ├── color-picker.jsx │ │ │ ├── color-themes.jsx │ │ │ ├── contacts-list.jsx │ │ │ ├── content-block.jsx │ │ │ ├── data-table.jsx │ │ │ ├── dialog.jsx │ │ │ ├── fab-morph.jsx │ │ │ ├── fab.jsx │ │ │ ├── form-storage.jsx │ │ │ ├── gauge.jsx │ │ │ ├── grid.jsx │ │ │ ├── home.jsx │ │ │ ├── icons.jsx │ │ │ ├── infinite-scroll.jsx │ │ │ ├── inputs.jsx │ │ │ ├── list-button.jsx │ │ │ ├── list-index.jsx │ │ │ ├── list.jsx │ │ │ ├── login-screen-page.jsx │ │ │ ├── login-screen.jsx │ │ │ ├── master-detail-detail.jsx │ │ │ ├── master-detail-master.jsx │ │ │ ├── menu-list.jsx │ │ │ ├── messages.jsx │ │ │ ├── navbar-hide-scroll.jsx │ │ │ ├── navbar.jsx │ │ │ ├── notifications.jsx │ │ │ ├── page-transitions-effect.jsx │ │ │ ├── page-transitions.jsx │ │ │ ├── panel-left.jsx │ │ │ ├── panel-right.jsx │ │ │ ├── panel.jsx │ │ │ ├── photo-browser.jsx │ │ │ ├── picker.jsx │ │ │ ├── pie-chart.jsx │ │ │ ├── popover.jsx │ │ │ ├── popup.jsx │ │ │ ├── preloader.jsx │ │ │ ├── progressbar.jsx │ │ │ ├── pull-to-refresh.jsx │ │ │ ├── radio.jsx │ │ │ ├── range.jsx │ │ │ ├── routable-actions.jsx │ │ │ ├── routable-modals.jsx │ │ │ ├── routable-popup.jsx │ │ │ ├── searchbar-expandable.jsx │ │ │ ├── searchbar.jsx │ │ │ ├── segmented.jsx │ │ │ ├── sheet-modal.jsx │ │ │ ├── skeleton.jsx │ │ │ ├── smart-select.jsx │ │ │ ├── sortable.jsx │ │ │ ├── stepper.jsx │ │ │ ├── store.jsx │ │ │ ├── subnavbar-title.jsx │ │ │ ├── subnavbar.jsx │ │ │ ├── swipeout.jsx │ │ │ ├── swiper-3d-coverflow.jsx │ │ │ ├── swiper-3d-cube.jsx │ │ │ ├── swiper-3d-flip.jsx │ │ │ ├── swiper-fade.jsx │ │ │ ├── swiper-gallery.jsx │ │ │ ├── swiper-horizontal.jsx │ │ │ ├── swiper-lazy.jsx │ │ │ ├── swiper-loop.jsx │ │ │ ├── swiper-multiple.jsx │ │ │ ├── swiper-nested.jsx │ │ │ ├── swiper-pagination-fraction.jsx │ │ │ ├── swiper-pagination-progress.jsx │ │ │ ├── swiper-parallax.jsx │ │ │ ├── swiper-scrollbar.jsx │ │ │ ├── swiper-space-between.jsx │ │ │ ├── swiper-vertical.jsx │ │ │ ├── swiper-zoom.jsx │ │ │ ├── swiper.jsx │ │ │ ├── tabbar-icons.jsx │ │ │ ├── tabbar-scrollable.jsx │ │ │ ├── tabbar.jsx │ │ │ ├── tabs-animated.jsx │ │ │ ├── tabs-routable.jsx │ │ │ ├── tabs-static.jsx │ │ │ ├── tabs-swipeable.jsx │ │ │ ├── tabs.jsx │ │ │ ├── text-editor.jsx │ │ │ ├── timeline-horizontal-calendar.jsx │ │ │ ├── timeline-horizontal.jsx │ │ │ ├── timeline-vertical.jsx │ │ │ ├── timeline.jsx │ │ │ ├── toast.jsx │ │ │ ├── toggle.jsx │ │ │ ├── toolbar-hide-scroll.jsx │ │ │ ├── toolbar-tabbar.jsx │ │ │ ├── tooltip.jsx │ │ │ ├── treeview.jsx │ │ │ └── virtual-list.jsx │ │ ├── routes.js │ │ └── store.js │ └── vite.config.js ├── svelte │ ├── index.html │ ├── public │ │ ├── autocomplete-languages.json │ │ └── img │ │ │ ├── beach.jpg │ │ │ ├── f7-icon-square.png │ │ │ ├── f7-icon.png │ │ │ ├── lock.jpg │ │ │ ├── monkey.jpg │ │ │ └── mountains.jpg │ ├── src │ │ ├── app.js │ │ ├── app.svelte │ │ ├── pages │ │ │ ├── 404.svelte │ │ │ ├── about.svelte │ │ │ ├── accordion.svelte │ │ │ ├── action-sheet.svelte │ │ │ ├── area-chart.svelte │ │ │ ├── autocomplete.svelte │ │ │ ├── badge.svelte │ │ │ ├── breadcrumbs.svelte │ │ │ ├── buttons.svelte │ │ │ ├── calendar-page.svelte │ │ │ ├── calendar.svelte │ │ │ ├── cards-expandable.svelte │ │ │ ├── cards.svelte │ │ │ ├── checkbox.svelte │ │ │ ├── chips.svelte │ │ │ ├── color-picker.svelte │ │ │ ├── color-themes.svelte │ │ │ ├── contacts-list.svelte │ │ │ ├── content-block.svelte │ │ │ ├── data-table.svelte │ │ │ ├── dialog.svelte │ │ │ ├── fab-morph.svelte │ │ │ ├── fab.svelte │ │ │ ├── form-storage.svelte │ │ │ ├── gauge.svelte │ │ │ ├── grid.svelte │ │ │ ├── home.svelte │ │ │ ├── icons.svelte │ │ │ ├── infinite-scroll.svelte │ │ │ ├── inputs.svelte │ │ │ ├── list-button.svelte │ │ │ ├── list-index.svelte │ │ │ ├── list.svelte │ │ │ ├── login-screen-page.svelte │ │ │ ├── login-screen.svelte │ │ │ ├── master-detail-detail.svelte │ │ │ ├── master-detail-master.svelte │ │ │ ├── menu-list.svelte │ │ │ ├── messages.svelte │ │ │ ├── navbar-hide-scroll.svelte │ │ │ ├── navbar.svelte │ │ │ ├── notifications.svelte │ │ │ ├── page-transitions-effect.svelte │ │ │ ├── page-transitions.svelte │ │ │ ├── panel-left.svelte │ │ │ ├── panel-right.svelte │ │ │ ├── panel.svelte │ │ │ ├── photo-browser.svelte │ │ │ ├── picker.svelte │ │ │ ├── pie-chart.svelte │ │ │ ├── popover.svelte │ │ │ ├── popup.svelte │ │ │ ├── preloader.svelte │ │ │ ├── progressbar.svelte │ │ │ ├── pull-to-refresh.svelte │ │ │ ├── radio.svelte │ │ │ ├── range.svelte │ │ │ ├── routable-actions.svelte │ │ │ ├── routable-modals.svelte │ │ │ ├── routable-popup.svelte │ │ │ ├── searchbar-expandable.svelte │ │ │ ├── searchbar.svelte │ │ │ ├── segmented.svelte │ │ │ ├── sheet-modal.svelte │ │ │ ├── skeleton.svelte │ │ │ ├── smart-select.svelte │ │ │ ├── sortable.svelte │ │ │ ├── stepper.svelte │ │ │ ├── store.svelte │ │ │ ├── subnavbar-title.svelte │ │ │ ├── subnavbar.svelte │ │ │ ├── swipeout.svelte │ │ │ ├── swiper-3d-coverflow.svelte │ │ │ ├── swiper-3d-cube.svelte │ │ │ ├── swiper-3d-flip.svelte │ │ │ ├── swiper-fade.svelte │ │ │ ├── swiper-gallery.svelte │ │ │ ├── swiper-horizontal.svelte │ │ │ ├── swiper-lazy.svelte │ │ │ ├── swiper-loop.svelte │ │ │ ├── swiper-multiple.svelte │ │ │ ├── swiper-nested.svelte │ │ │ ├── swiper-pagination-fraction.svelte │ │ │ ├── swiper-pagination-progress.svelte │ │ │ ├── swiper-parallax.svelte │ │ │ ├── swiper-scrollbar.svelte │ │ │ ├── swiper-space-between.svelte │ │ │ ├── swiper-vertical.svelte │ │ │ ├── swiper-zoom.svelte │ │ │ ├── swiper.svelte │ │ │ ├── tabbar-icons.svelte │ │ │ ├── tabbar-scrollable.svelte │ │ │ ├── tabbar.svelte │ │ │ ├── tabs-animated.svelte │ │ │ ├── tabs-routable.svelte │ │ │ ├── tabs-static.svelte │ │ │ ├── tabs-swipeable.svelte │ │ │ ├── tabs.svelte │ │ │ ├── text-editor.svelte │ │ │ ├── timeline-horizontal-calendar.svelte │ │ │ ├── timeline-horizontal.svelte │ │ │ ├── timeline-vertical.svelte │ │ │ ├── timeline.svelte │ │ │ ├── toast.svelte │ │ │ ├── toggle.svelte │ │ │ ├── toolbar-hide-scroll.svelte │ │ │ ├── toolbar-tabbar.svelte │ │ │ ├── tooltip.svelte │ │ │ ├── treeview.svelte │ │ │ └── virtual-list.svelte │ │ ├── routes.js │ │ └── store.js │ └── vite.config.js └── vue │ ├── index.html │ ├── public │ ├── autocomplete-languages.json │ └── img │ │ ├── beach.jpg │ │ ├── f7-icon-square.png │ │ ├── f7-icon.png │ │ ├── lock.jpg │ │ ├── monkey.jpg │ │ └── mountains.jpg │ ├── src │ ├── app.js │ ├── app.vue │ ├── pages │ │ ├── 404.vue │ │ ├── about.vue │ │ ├── accordion.vue │ │ ├── action-sheet.vue │ │ ├── area-chart.vue │ │ ├── autocomplete.vue │ │ ├── badge.vue │ │ ├── breadcrumbs.vue │ │ ├── buttons.vue │ │ ├── calendar-page.vue │ │ ├── calendar.vue │ │ ├── cards-expandable.vue │ │ ├── cards.vue │ │ ├── checkbox.vue │ │ ├── chips.vue │ │ ├── color-picker.vue │ │ ├── color-themes.vue │ │ ├── contacts-list.vue │ │ ├── content-block.vue │ │ ├── data-table.vue │ │ ├── dialog.vue │ │ ├── fab-morph.vue │ │ ├── fab.vue │ │ ├── form-storage.vue │ │ ├── gauge.vue │ │ ├── grid.vue │ │ ├── home.vue │ │ ├── icons.vue │ │ ├── infinite-scroll.vue │ │ ├── inputs.vue │ │ ├── list-button.vue │ │ ├── list-index.vue │ │ ├── list.vue │ │ ├── login-screen-page.vue │ │ ├── login-screen.vue │ │ ├── master-detail-detail.vue │ │ ├── master-detail-master.vue │ │ ├── menu-list.vue │ │ ├── messages.vue │ │ ├── navbar-hide-scroll.vue │ │ ├── navbar.vue │ │ ├── notifications.vue │ │ ├── page-transitions-effect.vue │ │ ├── page-transitions.vue │ │ ├── panel-left.vue │ │ ├── panel-right.vue │ │ ├── panel.vue │ │ ├── photo-browser.vue │ │ ├── picker.vue │ │ ├── pie-chart.vue │ │ ├── popover.vue │ │ ├── popup.vue │ │ ├── preloader.vue │ │ ├── progressbar.vue │ │ ├── pull-to-refresh.vue │ │ ├── radio.vue │ │ ├── range.vue │ │ ├── routable-actions.vue │ │ ├── routable-modals.vue │ │ ├── routable-popup.vue │ │ ├── searchbar-expandable.vue │ │ ├── searchbar.vue │ │ ├── segmented.vue │ │ ├── sheet-modal.vue │ │ ├── skeleton.vue │ │ ├── smart-select.vue │ │ ├── sortable.vue │ │ ├── stepper.vue │ │ ├── store.vue │ │ ├── subnavbar-title.vue │ │ ├── subnavbar.vue │ │ ├── swipeout.vue │ │ ├── swiper-3d-coverflow.vue │ │ ├── swiper-3d-cube.vue │ │ ├── swiper-3d-flip.vue │ │ ├── swiper-fade.vue │ │ ├── swiper-gallery.vue │ │ ├── swiper-horizontal.vue │ │ ├── swiper-lazy.vue │ │ ├── swiper-loop.vue │ │ ├── swiper-multiple.vue │ │ ├── swiper-nested.vue │ │ ├── swiper-pagination-fraction.vue │ │ ├── swiper-pagination-progress.vue │ │ ├── swiper-parallax.vue │ │ ├── swiper-scrollbar.vue │ │ ├── swiper-space-between.vue │ │ ├── swiper-vertical.vue │ │ ├── swiper-zoom.vue │ │ ├── swiper.vue │ │ ├── tabbar-icons.vue │ │ ├── tabbar-scrollable.vue │ │ ├── tabbar.vue │ │ ├── tabs-animated.vue │ │ ├── tabs-routable.vue │ │ ├── tabs-static.vue │ │ ├── tabs-swipeable.vue │ │ ├── tabs.vue │ │ ├── text-editor.vue │ │ ├── timeline-horizontal-calendar.vue │ │ ├── timeline-horizontal.vue │ │ ├── timeline-vertical.vue │ │ ├── timeline.vue │ │ ├── toast.vue │ │ ├── toggle.vue │ │ ├── toolbar-hide-scroll.vue │ │ ├── toolbar-tabbar.vue │ │ ├── tooltip.vue │ │ ├── treeview.vue │ │ └── virtual-list.vue │ ├── routes.js │ └── store.js │ └── vite.config.js ├── package-lock.json ├── package.json ├── packages ├── core │ ├── LICENSE │ ├── README.md │ └── package.json ├── react │ ├── LICENSE │ ├── README.md │ └── package.json ├── svelte │ ├── LICENSE │ ├── README.md │ └── package.json └── vue │ ├── LICENSE │ ├── README.md │ ├── framework7-vue-web-types.json │ └── package.json ├── scripts ├── banners │ ├── core.js │ ├── react.js │ ├── svelte.js │ └── vue.js ├── build-clean.js ├── build-config.js ├── build-core-components.js ├── build-core-js.js ├── build-core-styles.js ├── build-core-typings.js ├── build-ks-core.js ├── build-material-color-utils.js ├── build-react-typings.js ├── build-react.js ├── build-sponsors.js ├── build-svelte-typings.js ├── build-svelte.js ├── build-vue-typings.js ├── build-vue.js ├── core-components-list.js ├── find-common-css-vars.js ├── get-core-config.js ├── get-output.js ├── gulpfile.js ├── icon-font │ ├── blank.svg │ ├── generate.py │ └── generate_font.py ├── release.js ├── transform-vue-component.js ├── ts-extend-props.js └── utils │ ├── autoprefixer.js │ ├── clean-css.js │ ├── fs-extra.js │ └── less.js └── src ├── core ├── components │ ├── accordion │ │ ├── accordion-ios.less │ │ ├── accordion-md.less │ │ ├── accordion-vars.less │ │ ├── accordion.d.ts │ │ ├── accordion.js │ │ └── accordion.less │ ├── actions │ │ ├── actions-class.js │ │ ├── actions-ios.less │ │ ├── actions-md.less │ │ ├── actions-vars.less │ │ ├── actions.d.ts │ │ ├── actions.js │ │ └── actions.less │ ├── app │ │ ├── app-class.d.ts │ │ ├── app-class.js │ │ ├── app-ios.less │ │ ├── app-md.less │ │ ├── app-vars.less │ │ ├── app.less │ │ └── load-module.js │ ├── area-chart │ │ ├── area-chart-class.js │ │ ├── area-chart-ios.less │ │ ├── area-chart-md.less │ │ ├── area-chart-vars.less │ │ ├── area-chart.d.ts │ │ ├── area-chart.js │ │ └── area-chart.less │ ├── autocomplete │ │ ├── autocomplete-class.js │ │ ├── autocomplete-ios.less │ │ ├── autocomplete-md.less │ │ ├── autocomplete-vars.less │ │ ├── autocomplete.d.ts │ │ ├── autocomplete.js │ │ └── autocomplete.less │ ├── badge │ │ ├── badge-ios.less │ │ ├── badge-md.less │ │ ├── badge-vars.less │ │ ├── badge.d.ts │ │ ├── badge.js │ │ └── badge.less │ ├── block │ │ ├── block-ios.less │ │ ├── block-md.less │ │ ├── block-vars.less │ │ ├── block.d.ts │ │ ├── block.js │ │ └── block.less │ ├── breadcrumbs │ │ ├── breadcrumbs-ios.less │ │ ├── breadcrumbs-md.less │ │ ├── breadcrumbs-vars.less │ │ ├── breadcrumbs.d.ts │ │ ├── breadcrumbs.js │ │ └── breadcrumbs.less │ ├── button │ │ ├── button-ios.less │ │ ├── button-md.less │ │ ├── button-vars.less │ │ ├── button.d.ts │ │ ├── button.js │ │ └── button.less │ ├── calendar │ │ ├── calendar-class.js │ │ ├── calendar-ios.less │ │ ├── calendar-md.less │ │ ├── calendar-vars.less │ │ ├── calendar.d.ts │ │ ├── calendar.js │ │ └── calendar.less │ ├── card │ │ ├── card-ios.less │ │ ├── card-md.less │ │ ├── card-vars.less │ │ ├── card.d.ts │ │ ├── card.js │ │ └── card.less │ ├── checkbox │ │ ├── checkbox-ios.less │ │ ├── checkbox-md.less │ │ ├── checkbox-vars.less │ │ ├── checkbox.d.ts │ │ ├── checkbox.js │ │ └── checkbox.less │ ├── chip │ │ ├── chip-ios.less │ │ ├── chip-md.less │ │ ├── chip-vars.less │ │ ├── chip.d.ts │ │ ├── chip.js │ │ └── chip.less │ ├── color-picker │ │ ├── color-picker-class.js │ │ ├── color-picker-ios.less │ │ ├── color-picker-md.less │ │ ├── color-picker-vars.less │ │ ├── color-picker.d.ts │ │ ├── color-picker.js │ │ ├── color-picker.less │ │ └── modules │ │ │ ├── alpha-slider.js │ │ │ ├── brightness-slider.js │ │ │ ├── current-color.js │ │ │ ├── hex.js │ │ │ ├── hs-spectrum.js │ │ │ ├── hsb-sliders.js │ │ │ ├── hue-slider.js │ │ │ ├── initial-current-colors.js │ │ │ ├── palette.js │ │ │ ├── rgb-bars.js │ │ │ ├── rgb-sliders.js │ │ │ ├── sb-spectrum.js │ │ │ └── wheel.js │ ├── contacts-list │ │ ├── contacts-list-ios.less │ │ ├── contacts-list-md.less │ │ ├── contacts-list-vars.less │ │ ├── contacts-list.d.ts │ │ ├── contacts-list.js │ │ └── contacts-list.less │ ├── data-table │ │ ├── data-table-class.js │ │ ├── data-table-ios.less │ │ ├── data-table-md.less │ │ ├── data-table-vars.less │ │ ├── data-table.d.ts │ │ ├── data-table.js │ │ └── data-table.less │ ├── dialog │ │ ├── dialog-class.js │ │ ├── dialog-ios.less │ │ ├── dialog-md.less │ │ ├── dialog-vars.less │ │ ├── dialog.d.ts │ │ ├── dialog.js │ │ └── dialog.less │ ├── fab │ │ ├── fab-ios.less │ │ ├── fab-md.less │ │ ├── fab-vars.less │ │ ├── fab.d.ts │ │ ├── fab.js │ │ └── fab.less │ ├── form │ │ ├── form-ios.less │ │ ├── form-md.less │ │ ├── form.d.ts │ │ ├── form.js │ │ └── form.less │ ├── gauge │ │ ├── gauge-class.js │ │ ├── gauge-ios.less │ │ ├── gauge-md.less │ │ ├── gauge.d.ts │ │ ├── gauge.js │ │ └── gauge.less │ ├── grid │ │ ├── grid-ios.less │ │ ├── grid-md.less │ │ ├── grid-vars.less │ │ ├── grid.d.ts │ │ ├── grid.js │ │ └── grid.less │ ├── icon │ │ ├── icon-ios.less │ │ ├── icon-md.less │ │ ├── icon.d.ts │ │ ├── icon.js │ │ └── icon.less │ ├── infinite-scroll │ │ ├── infinite-scroll-ios.less │ │ ├── infinite-scroll-md.less │ │ ├── infinite-scroll.d.ts │ │ ├── infinite-scroll.js │ │ └── infinite-scroll.less │ ├── input │ │ ├── input-ios.less │ │ ├── input-md.less │ │ ├── input-vars.less │ │ ├── input.d.ts │ │ ├── input.js │ │ └── input.less │ ├── link │ │ ├── link-ios.less │ │ ├── link-md.less │ │ ├── link-vars.less │ │ ├── link.d.ts │ │ ├── link.js │ │ └── link.less │ ├── list-index │ │ ├── list-index-class.js │ │ ├── list-index-ios.less │ │ ├── list-index-md.less │ │ ├── list-index-vars.less │ │ ├── list-index.d.ts │ │ ├── list-index.js │ │ └── list-index.less │ ├── list │ │ ├── list-ios.less │ │ ├── list-md.less │ │ ├── list-vars.less │ │ ├── list.d.ts │ │ ├── list.js │ │ └── list.less │ ├── login-screen │ │ ├── login-screen-class.js │ │ ├── login-screen-ios.less │ │ ├── login-screen-md.less │ │ ├── login-screen-vars.less │ │ ├── login-screen.d.ts │ │ ├── login-screen.js │ │ └── login-screen.less │ ├── messagebar │ │ ├── messagebar-class.js │ │ ├── messagebar-ios.less │ │ ├── messagebar-md.less │ │ ├── messagebar-vars.less │ │ ├── messagebar.d.ts │ │ ├── messagebar.js │ │ └── messagebar.less │ ├── messages │ │ ├── messages-class.js │ │ ├── messages-ios.less │ │ ├── messages-md.less │ │ ├── messages-vars.less │ │ ├── messages.d.ts │ │ ├── messages.js │ │ └── messages.less │ ├── modal │ │ ├── custom-modal-class.js │ │ ├── modal-class.js │ │ ├── modal.d.ts │ │ ├── modal.js │ │ └── modal.less │ ├── navbar │ │ ├── navbar-ios.less │ │ ├── navbar-md.less │ │ ├── navbar-vars.less │ │ ├── navbar.d.ts │ │ ├── navbar.js │ │ └── navbar.less │ ├── notification │ │ ├── notification-class.js │ │ ├── notification-ios.less │ │ ├── notification-md.less │ │ ├── notification-vars.less │ │ ├── notification.d.ts │ │ ├── notification.js │ │ └── notification.less │ ├── page │ │ ├── page-ios.less │ │ ├── page-md.less │ │ ├── page-transitions │ │ │ ├── circle.less │ │ │ ├── cover-v.less │ │ │ ├── cover.less │ │ │ ├── dive.less │ │ │ ├── fade.less │ │ │ ├── flip.less │ │ │ ├── parallax.less │ │ │ └── push.less │ │ ├── page-vars.less │ │ ├── page.d.ts │ │ ├── page.js │ │ └── page.less │ ├── panel │ │ ├── panel-class.js │ │ ├── panel-ios.less │ │ ├── panel-md.less │ │ ├── panel-vars.less │ │ ├── panel.d.ts │ │ ├── panel.js │ │ ├── panel.less │ │ ├── resizable-panel.js │ │ └── swipe-panel.js │ ├── photo-browser │ │ ├── photo-browser-class.js │ │ ├── photo-browser-ios.less │ │ ├── photo-browser-md.less │ │ ├── photo-browser-vars.less │ │ ├── photo-browser.d.ts │ │ ├── photo-browser.js │ │ └── photo-browser.less │ ├── picker │ │ ├── picker-class.js │ │ ├── picker-column.js │ │ ├── picker-ios.less │ │ ├── picker-md.less │ │ ├── picker-vars.less │ │ ├── picker.d.ts │ │ ├── picker.js │ │ └── picker.less │ ├── pie-chart │ │ ├── pie-chart-class.js │ │ ├── pie-chart-ios.less │ │ ├── pie-chart-md.less │ │ ├── pie-chart.d.ts │ │ ├── pie-chart.js │ │ └── pie-chart.less │ ├── popover │ │ ├── popover-class.js │ │ ├── popover-ios.less │ │ ├── popover-md.less │ │ ├── popover-vars.less │ │ ├── popover.d.ts │ │ ├── popover.js │ │ └── popover.less │ ├── popup │ │ ├── popup-class.js │ │ ├── popup-ios.less │ │ ├── popup-md.less │ │ ├── popup-vars.less │ │ ├── popup.d.ts │ │ ├── popup.js │ │ └── popup.less │ ├── preloader │ │ ├── preloader-ios.less │ │ ├── preloader-md.less │ │ ├── preloader-vars.less │ │ ├── preloader.d.ts │ │ ├── preloader.js │ │ └── preloader.less │ ├── progressbar │ │ ├── progressbar-ios.less │ │ ├── progressbar-md.less │ │ ├── progressbar-vars.less │ │ ├── progressbar.d.ts │ │ ├── progressbar.js │ │ └── progressbar.less │ ├── pull-to-refresh │ │ ├── pull-to-refresh-class.js │ │ ├── pull-to-refresh-ios.less │ │ ├── pull-to-refresh-md.less │ │ ├── pull-to-refresh-vars.less │ │ ├── pull-to-refresh.d.ts │ │ ├── pull-to-refresh.js │ │ └── pull-to-refresh.less │ ├── radio │ │ ├── radio-ios.less │ │ ├── radio-md.less │ │ ├── radio-vars.less │ │ ├── radio.d.ts │ │ ├── radio.js │ │ └── radio.less │ ├── range │ │ ├── range-class.js │ │ ├── range-ios.less │ │ ├── range-md.less │ │ ├── range-vars.less │ │ ├── range.d.ts │ │ ├── range.js │ │ └── range.less │ ├── searchbar │ │ ├── remove-diacritics.js │ │ ├── searchbar-class.js │ │ ├── searchbar-ios.less │ │ ├── searchbar-md.less │ │ ├── searchbar-vars.less │ │ ├── searchbar.d.ts │ │ ├── searchbar.js │ │ └── searchbar.less │ ├── sheet │ │ ├── sheet-class.js │ │ ├── sheet-ios.less │ │ ├── sheet-md.less │ │ ├── sheet-vars.less │ │ ├── sheet.d.ts │ │ ├── sheet.js │ │ └── sheet.less │ ├── skeleton │ │ ├── skeleton-ios.less │ │ ├── skeleton-md.less │ │ ├── skeleton-vars.less │ │ ├── skeleton.d.ts │ │ ├── skeleton.js │ │ └── skeleton.less │ ├── smart-select │ │ ├── smart-select-class.js │ │ ├── smart-select-ios.less │ │ ├── smart-select-md.less │ │ ├── smart-select-vars.less │ │ ├── smart-select.d.ts │ │ ├── smart-select.js │ │ └── smart-select.less │ ├── sortable │ │ ├── sortable-ios.less │ │ ├── sortable-md.less │ │ ├── sortable-vars.less │ │ ├── sortable.d.ts │ │ ├── sortable.js │ │ └── sortable.less │ ├── statusbar │ │ ├── statusbar-ios.less │ │ ├── statusbar-md.less │ │ ├── statusbar.d.ts │ │ ├── statusbar.js │ │ └── statusbar.less │ ├── stepper │ │ ├── stepper-class.js │ │ ├── stepper-ios.less │ │ ├── stepper-md.less │ │ ├── stepper-vars.less │ │ ├── stepper.d.ts │ │ ├── stepper.js │ │ └── stepper.less │ ├── subnavbar │ │ ├── subnavbar-ios.less │ │ ├── subnavbar-md.less │ │ ├── subnavbar-vars.less │ │ ├── subnavbar.d.ts │ │ ├── subnavbar.js │ │ └── subnavbar.less │ ├── swipeout │ │ ├── swipeout-ios.less │ │ ├── swipeout-md.less │ │ ├── swipeout-vars.less │ │ ├── swipeout.d.ts │ │ ├── swipeout.js │ │ └── swipeout.less │ ├── swiper │ │ ├── swiper-ios.less │ │ ├── swiper-md.less │ │ ├── swiper.d.ts │ │ ├── swiper.js │ │ └── swiper.less │ ├── tabs │ │ ├── tabs-ios.less │ │ ├── tabs-md.less │ │ ├── tabs.d.ts │ │ ├── tabs.js │ │ └── tabs.less │ ├── text-editor │ │ ├── text-editor-class.js │ │ ├── text-editor-ios.less │ │ ├── text-editor-md.less │ │ ├── text-editor-vars.less │ │ ├── text-editor.d.ts │ │ ├── text-editor.js │ │ └── text-editor.less │ ├── timeline │ │ ├── timeline-ios.less │ │ ├── timeline-md.less │ │ ├── timeline-vars.less │ │ ├── timeline.d.ts │ │ ├── timeline.js │ │ └── timeline.less │ ├── toast │ │ ├── toast-class.js │ │ ├── toast-ios.less │ │ ├── toast-md.less │ │ ├── toast-vars.less │ │ ├── toast.d.ts │ │ ├── toast.js │ │ └── toast.less │ ├── toggle │ │ ├── toggle-class.js │ │ ├── toggle-ios.less │ │ ├── toggle-md.less │ │ ├── toggle-vars.less │ │ ├── toggle.d.ts │ │ ├── toggle.js │ │ └── toggle.less │ ├── toolbar │ │ ├── toolbar-ios.less │ │ ├── toolbar-md.less │ │ ├── toolbar-vars.less │ │ ├── toolbar.d.ts │ │ ├── toolbar.js │ │ └── toolbar.less │ ├── tooltip │ │ ├── tooltip-class.js │ │ ├── tooltip-ios.less │ │ ├── tooltip-md.less │ │ ├── tooltip-vars.less │ │ ├── tooltip.d.ts │ │ ├── tooltip.js │ │ └── tooltip.less │ ├── touch-ripple │ │ ├── touch-ripple-class.js │ │ ├── touch-ripple-ios.less │ │ ├── touch-ripple-md.less │ │ ├── touch-ripple-vars.less │ │ ├── touch-ripple.d.ts │ │ ├── touch-ripple.js │ │ └── touch-ripple.less │ ├── treeview │ │ ├── treeview-ios.less │ │ ├── treeview-md.less │ │ ├── treeview-vars.less │ │ ├── treeview.d.ts │ │ ├── treeview.js │ │ └── treeview.less │ ├── typography │ │ ├── typography-ios.less │ │ ├── typography-md.less │ │ ├── typography-vars.less │ │ ├── typography.d.ts │ │ ├── typography.js │ │ └── typography.less │ ├── view │ │ ├── resizable-view.js │ │ ├── view-class.js │ │ ├── view-ios.less │ │ ├── view-md.less │ │ ├── view.d.ts │ │ ├── view.js │ │ └── view.less │ └── virtual-list │ │ ├── virtual-list-class.js │ │ ├── virtual-list-ios.less │ │ ├── virtual-list-md.less │ │ ├── virtual-list.d.ts │ │ ├── virtual-list.js │ │ └── virtual-list.less ├── framework7-lite.js ├── framework7-types.d.ts ├── framework7.d.ts ├── framework7.js ├── framework7.less ├── icons │ ├── font │ │ ├── framework7-core-icons.ttf │ │ ├── framework7-core-icons.woff │ │ └── framework7-core-icons.woff2 │ └── svg │ │ ├── arrow_bottom_md.svg │ │ ├── arrow_left_md.svg │ │ ├── arrow_right_md.svg │ │ ├── checkbox_aurora.svg │ │ ├── checkbox_ios.svg │ │ ├── checkbox_md.svg │ │ ├── chevron_down.svg │ │ ├── chevron_down_aurora.svg │ │ ├── chevron_left.svg │ │ ├── chevron_left_aurora.svg │ │ ├── chevron_left_ios.svg │ │ ├── chevron_left_md.svg │ │ ├── chevron_right.svg │ │ ├── chevron_right_aurora.svg │ │ ├── chevron_right_ios.svg │ │ ├── chevron_right_md.svg │ │ ├── chevron_up.svg │ │ ├── chevron_up_aurora.svg │ │ ├── delete_md.svg │ │ ├── delete_round_ios.svg │ │ ├── delete_round_md.svg │ │ ├── notification_close_ios.svg │ │ ├── ptr_arrow_ios.svg │ │ ├── radio_ios.svg │ │ ├── search_aurora.svg │ │ ├── search_ios.svg │ │ ├── search_md.svg │ │ ├── sort_ios.svg │ │ └── sort_md.svg ├── less │ ├── mixins.less │ ├── plugin.js │ └── vars.less ├── modules │ ├── clicks │ │ ├── clicks.d.ts │ │ └── clicks.js │ ├── component │ │ ├── $h.js │ │ ├── $jsx.js │ │ ├── component-class.js │ │ ├── component.d.ts │ │ ├── component.js │ │ ├── custom-components.js │ │ ├── eventslisteners.js │ │ ├── parse-component.js │ │ ├── patch.js │ │ ├── snabbdom │ │ │ ├── h.d.ts │ │ │ ├── h.js │ │ │ ├── h.js.map │ │ │ ├── helpers │ │ │ │ ├── attachto.d.ts │ │ │ │ ├── attachto.js │ │ │ │ └── attachto.js.map │ │ │ ├── hooks.d.ts │ │ │ ├── hooks.js │ │ │ ├── hooks.js.map │ │ │ ├── htmldomapi.d.ts │ │ │ ├── htmldomapi.js │ │ │ ├── htmldomapi.js.map │ │ │ ├── is.d.ts │ │ │ ├── is.js │ │ │ ├── is.js.map │ │ │ ├── modules │ │ │ │ ├── attributes.d.ts │ │ │ │ ├── attributes.js │ │ │ │ ├── attributes.js.map │ │ │ │ ├── class.d.ts │ │ │ │ ├── class.js │ │ │ │ ├── class.js.map │ │ │ │ ├── dataset.d.ts │ │ │ │ ├── dataset.js │ │ │ │ ├── dataset.js.map │ │ │ │ ├── eventlisteners.d.ts │ │ │ │ ├── eventlisteners.js │ │ │ │ ├── eventlisteners.js.map │ │ │ │ ├── hero.d.ts │ │ │ │ ├── hero.js │ │ │ │ ├── hero.js.map │ │ │ │ ├── module.d.ts │ │ │ │ ├── module.js │ │ │ │ ├── module.js.map │ │ │ │ ├── props.d.ts │ │ │ │ ├── props.js │ │ │ │ ├── props.js.map │ │ │ │ ├── style.d.ts │ │ │ │ ├── style.js │ │ │ │ └── style.js.map │ │ │ ├── snabbdom.bundle.d.ts │ │ │ ├── snabbdom.bundle.js │ │ │ ├── snabbdom.bundle.js.map │ │ │ ├── snabbdom.d.ts │ │ │ ├── snabbdom.js │ │ │ ├── snabbdom.js.map │ │ │ ├── thunk.d.ts │ │ │ ├── thunk.js │ │ │ ├── thunk.js.map │ │ │ ├── tovnode.d.ts │ │ │ ├── tovnode.js │ │ │ ├── tovnode.js.map │ │ │ ├── vnode.d.ts │ │ │ ├── vnode.js │ │ │ └── vnode.js.map │ │ └── vdom.js │ ├── demo-module.js │ ├── device │ │ ├── device.d.ts │ │ └── device.js │ ├── history │ │ └── history.js │ ├── resize │ │ ├── resize.d.ts │ │ └── resize.js │ ├── router │ │ ├── app-router-check.js │ │ ├── async-component.js │ │ ├── back.js │ │ ├── clear-previous-history.js │ │ ├── component-loader.js │ │ ├── modal.js │ │ ├── navigate.js │ │ ├── process-route-queue.js │ │ ├── redirect.js │ │ ├── router-class.js │ │ ├── router.d.ts │ │ ├── router.js │ │ ├── swipe-back.js │ │ └── tab.js │ ├── service-worker │ │ ├── service-worker.d.ts │ │ └── service-worker.js │ ├── store │ │ ├── create-store.js │ │ ├── store.d.ts │ │ └── store.js │ ├── support │ │ ├── support.d.ts │ │ └── support.js │ ├── touch │ │ ├── touch.d.ts │ │ └── touch.js │ └── utils │ │ ├── utils.d.ts │ │ └── utils.js └── shared │ ├── $jsx.js │ ├── class.js │ ├── constructor-methods.js │ ├── dom7.js │ ├── events-class.js │ ├── get-device.d.ts │ ├── get-device.js │ ├── get-support.d.ts │ ├── get-support.js │ ├── history.js │ ├── material-color-utils.js │ ├── material-colors.js │ ├── modal-methods.js │ ├── utils.d.ts │ └── utils.js ├── react ├── components │ ├── accordion-content.jsx │ ├── accordion-item.jsx │ ├── accordion-toggle.jsx │ ├── accordion.jsx │ ├── actions-button.jsx │ ├── actions-group.jsx │ ├── actions-label.jsx │ ├── actions.jsx │ ├── app.jsx │ ├── area-chart.jsx │ ├── badge.jsx │ ├── block-footer.jsx │ ├── block-header.jsx │ ├── block-title.jsx │ ├── block.jsx │ ├── breadcrumbs-collapsed.jsx │ ├── breadcrumbs-item.jsx │ ├── breadcrumbs-separator.jsx │ ├── breadcrumbs.jsx │ ├── button.jsx │ ├── card-content.jsx │ ├── card-footer.jsx │ ├── card-header.jsx │ ├── card.jsx │ ├── checkbox.jsx │ ├── chip.jsx │ ├── fab-backdrop.jsx │ ├── fab-button.jsx │ ├── fab-buttons.jsx │ ├── fab.jsx │ ├── gauge.jsx │ ├── icon.jsx │ ├── input.jsx │ ├── link.jsx │ ├── list-button.jsx │ ├── list-group.jsx │ ├── list-index.jsx │ ├── list-input.jsx │ ├── list-item-content.jsx │ ├── list-item.jsx │ ├── list.jsx │ ├── login-screen-title.jsx │ ├── login-screen.jsx │ ├── message.jsx │ ├── messagebar-attachment.jsx │ ├── messagebar-attachments.jsx │ ├── messagebar-sheet-image.jsx │ ├── messagebar-sheet-item.jsx │ ├── messagebar-sheet.jsx │ ├── messagebar.jsx │ ├── messages-title.jsx │ ├── messages.jsx │ ├── nav-left.jsx │ ├── nav-right.jsx │ ├── nav-title-large.jsx │ ├── nav-title.jsx │ ├── navbar.jsx │ ├── page-content.jsx │ ├── page.jsx │ ├── panel.jsx │ ├── photo-browser.jsx │ ├── pie-chart.jsx │ ├── popover.jsx │ ├── popup.jsx │ ├── preloader.jsx │ ├── progressbar.jsx │ ├── radio.jsx │ ├── range.jsx │ ├── routable-modals.jsx │ ├── searchbar.jsx │ ├── segmented.jsx │ ├── sheet.jsx │ ├── skeleton-avatar.jsx │ ├── skeleton-block.jsx │ ├── skeleton-image.jsx │ ├── skeleton-text.jsx │ ├── stepper.jsx │ ├── subnavbar.jsx │ ├── swipeout-actions.jsx │ ├── swipeout-button.jsx │ ├── tab.jsx │ ├── tabs.jsx │ ├── text-editor.jsx │ ├── toggle.jsx │ ├── toolbar.jsx │ ├── treeview-item.jsx │ ├── treeview.jsx │ ├── view.jsx │ └── views.jsx ├── framework7-react.d.ts ├── framework7-react.js └── shared │ ├── components-router.js │ ├── f7.js │ ├── get-router-initial-component.js │ ├── list-context.js │ ├── mixins.js │ ├── modal-state-classes.js │ ├── plugin.js │ ├── router-context.js │ ├── router-open-in.jsx │ ├── tabbar-context.js │ ├── tabs-swipeable-context.js │ ├── use-async-component.js │ ├── use-icon.js │ ├── use-isomorphic-layout-effect.js │ ├── use-route-props.js │ ├── use-smart-select.js │ ├── use-store.js │ ├── use-tab.js │ ├── use-theme.js │ ├── use-tooltip.js │ ├── utils.js │ └── watch-prop.js ├── svelte ├── components │ ├── accordion-content.svelte │ ├── accordion-item.svelte │ ├── accordion-toggle.svelte │ ├── accordion.svelte │ ├── actions-button.svelte │ ├── actions-group.svelte │ ├── actions-label.svelte │ ├── actions.svelte │ ├── app.svelte │ ├── area-chart.svelte │ ├── badge.svelte │ ├── block-footer.svelte │ ├── block-header.svelte │ ├── block-title.svelte │ ├── block.svelte │ ├── breadcrumbs-collapsed.svelte │ ├── breadcrumbs-item.svelte │ ├── breadcrumbs-separator.svelte │ ├── breadcrumbs.svelte │ ├── button.svelte │ ├── card-content.svelte │ ├── card-footer.svelte │ ├── card-header.svelte │ ├── card.svelte │ ├── checkbox.svelte │ ├── chip.svelte │ ├── fab-backdrop.svelte │ ├── fab-button.svelte │ ├── fab-buttons.svelte │ ├── fab.svelte │ ├── gauge.svelte │ ├── icon.svelte │ ├── input.svelte │ ├── link.svelte │ ├── list-button.svelte │ ├── list-group.svelte │ ├── list-index.svelte │ ├── list-input.svelte │ ├── list-item.svelte │ ├── list.svelte │ ├── login-screen-title.svelte │ ├── login-screen.svelte │ ├── message.svelte │ ├── messagebar-attachment.svelte │ ├── messagebar-attachments.svelte │ ├── messagebar-sheet-image.svelte │ ├── messagebar-sheet-item.svelte │ ├── messagebar-sheet.svelte │ ├── messagebar.svelte │ ├── messages-title.svelte │ ├── messages.svelte │ ├── nav-left.svelte │ ├── nav-right.svelte │ ├── nav-title-large.svelte │ ├── nav-title.svelte │ ├── navbar.svelte │ ├── page-content.svelte │ ├── page.svelte │ ├── panel.svelte │ ├── photo-browser.svelte │ ├── pie-chart.svelte │ ├── popover.svelte │ ├── popup.svelte │ ├── preloader.svelte │ ├── progressbar.svelte │ ├── radio.svelte │ ├── range.svelte │ ├── routable-modals.svelte │ ├── router-context-provider.svelte │ ├── searchbar.svelte │ ├── segmented.svelte │ ├── sheet.svelte │ ├── skeleton-avatar.js │ ├── skeleton-block.js │ ├── skeleton-image.js │ ├── skeleton-text.js │ ├── stepper.svelte │ ├── subnavbar.svelte │ ├── swipeout-actions.svelte │ ├── swipeout-button.svelte │ ├── tab.svelte │ ├── tabs.svelte │ ├── text-editor.svelte │ ├── toggle.svelte │ ├── toolbar.svelte │ ├── treeview-item.svelte │ ├── treeview.svelte │ ├── use-icon.svelte │ ├── view.svelte │ └── views.svelte ├── framework7-svelte.d.ts ├── framework7-svelte.js └── shared │ ├── components-router.js │ ├── f7.js │ ├── get-reactive-context.js │ ├── get-router-initial-component.js │ ├── list-context.js │ ├── mixins.js │ ├── modal-state-classes.js │ ├── plugin.js │ ├── rest-props.js │ ├── router-context.js │ ├── router-open-in-component.svelte │ ├── router-open-in.js │ ├── set-reactive-context.js │ ├── use-icon.js │ ├── use-route-props.js │ ├── use-smart-select.js │ ├── use-store.js │ ├── use-tab.js │ ├── use-theme.js │ ├── use-tooltip.js │ └── utils.js ├── vue-temp └── .gitkeep └── vue ├── components ├── accordion-content.vue ├── accordion-item.vue ├── accordion-toggle.vue ├── accordion.vue ├── actions-button.vue ├── actions-group.vue ├── actions-label.vue ├── actions.vue ├── app.vue ├── area-chart.vue ├── badge.vue ├── block-footer.vue ├── block-header.vue ├── block-title.vue ├── block.vue ├── breadcrumbs-collapsed.vue ├── breadcrumbs-item.vue ├── breadcrumbs-separator.vue ├── breadcrumbs.vue ├── button.vue ├── card-content.vue ├── card-footer.vue ├── card-header.vue ├── card.vue ├── checkbox.vue ├── chip.vue ├── fab-backdrop.vue ├── fab-button.vue ├── fab-buttons.vue ├── fab.vue ├── gauge.vue ├── icon.vue ├── input.vue ├── link.vue ├── list-button.vue ├── list-group.vue ├── list-index.vue ├── list-input.vue ├── list-item.vue ├── list.vue ├── login-screen-title.vue ├── login-screen.vue ├── message.vue ├── messagebar-attachment.vue ├── messagebar-attachments.vue ├── messagebar-sheet-image.vue ├── messagebar-sheet-item.vue ├── messagebar-sheet.vue ├── messagebar.vue ├── messages-title.vue ├── messages.vue ├── nav-left.vue ├── nav-right.vue ├── nav-title-large.vue ├── nav-title.vue ├── navbar.vue ├── page-content.vue ├── page.vue ├── panel.vue ├── photo-browser.vue ├── pie-chart.vue ├── popover.vue ├── popup.vue ├── preloader.vue ├── progressbar.vue ├── radio.vue ├── range.vue ├── routable-modals.vue ├── searchbar.vue ├── segmented.vue ├── sheet.vue ├── skeleton-avatar.vue ├── skeleton-block.vue ├── skeleton-image.vue ├── skeleton-text.vue ├── stepper.vue ├── subnavbar.vue ├── swipeout-actions.vue ├── swipeout-button.vue ├── tab.vue ├── tabs.vue ├── text-editor.vue ├── toggle.vue ├── toolbar.vue ├── treeview-item.vue ├── treeview.vue ├── use-icon.vue ├── view.vue └── views.vue ├── framework7-vue-bundle.d.ts ├── framework7-vue.d.ts ├── framework7-vue.js └── shared ├── components-router.js ├── f7.js ├── get-router-initial-component.js ├── mixins.js ├── modal-state-classes.js ├── plugin.js ├── router-open-in.js ├── use-icon.js ├── use-route-props.js ├── use-smart-select.js ├── use-store.js ├── use-tab.js ├── use-theme.js ├── use-tooltip.js └── utils.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style of different editors and IDEs. 2 | # editorconfig.org 3 | 4 | root = true 5 | 6 | [*] 7 | charset = utf-8 8 | end_of_line = lf 9 | indent_size = 2 10 | indent_style = space 11 | insert_final_newline = true 12 | trim_trailing_whitespace = true 13 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build 2 | .git 3 | .github 4 | custom 5 | packages 6 | node_modules 7 | *.ts 8 | kitchen-sink/core 9 | kitchen-sink/svelte/dist 10 | kitchen-sink/react/dist 11 | kitchen-sink/vue/dist 12 | src/core/framework7.js 13 | src/core/framework7-lite.js 14 | src/core/modules/demo-module.js 15 | src/core/modules/component/snabbdom 16 | src/core/shared/material-color-utils.js 17 | woff2 18 | 19 | src/vue-temp 20 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=LF 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | contact_links: 2 | - name: 📃 Documentation Issue 3 | url: https://github.com/framework7io/framework7-website/issues/new 4 | about: Issues with documentation or website 5 | - name: ⚙️ CLI Issue 6 | url: https://github.com/framework7io/framework7-cli/issues/new 7 | about: Issues with Framework7 CLI 8 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | 5 | --- 6 | 7 | **Is your feature request related to a problem? Please describe.** 8 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 9 | 10 | **Describe the solution you'd like** 11 | A clear and concise description of what you want to happen. 12 | 13 | **Describe alternatives you've considered** 14 | A clear and concise description of any alternative solutions or features you've considered. 15 | 16 | **Additional context** 17 | Add any other context or screenshots about the feature request here. 18 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request. If it fixes a bug or resolves a feature request, be sure to link to that issue. 2 | 3 | The best way to propose a feature is to open an issue first and discuss your ideas there before implementing them. 4 | 5 | Always follow the [contribution guidelines](https://github.com/framework7io/framework7/blob/master/.github/CONTRIBUTING.md) when submitting a pull request. 6 | -------------------------------------------------------------------------------- /.github/lock.yml: -------------------------------------------------------------------------------- 1 | daysUntilLock: 240 2 | exemptLabels: 3 | - Feature Request 4 | - Enhancement 5 | - In Progress 6 | - Bug confirmed 7 | lockLabel: outdated 8 | lockComment: false -------------------------------------------------------------------------------- /.github/stale.yml: -------------------------------------------------------------------------------- 1 | daysUntilStale: 90 2 | daysUntilClose: 14 3 | exemptLabels: 4 | - Feature Request 5 | - Enhancement 6 | - In Progress 7 | - Bug confirmed 8 | staleLabel: wontfix 9 | markComment: > 10 | This issue has been automatically marked as stale because it has not had 11 | recent activity. It will be closed if no further activity occurs. Thank you 12 | for your contributions. 13 | closeComment: > 14 | This issue has been automatically closed due to inactivity. 15 | If this issue is still actual, please, create the new one. -------------------------------------------------------------------------------- /.github/workflows/issue-close-require.yml: -------------------------------------------------------------------------------- 1 | name: Issue Close Require 2 | 3 | on: 4 | schedule: 5 | - cron: '0 0 * * *' 6 | 7 | jobs: 8 | close-issues: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - name: missing demo 12 | uses: actions-cool/issues-helper@v2.2.1 13 | with: 14 | actions: 'close-issues' 15 | token: ${{ secrets.GITHUB_TOKEN }} 16 | labels: 'missing demo' 17 | inactive-day: 3 18 | -------------------------------------------------------------------------------- /.nova/Configuration.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.default_syntax" : "javascript", 3 | "workspace.color" : 0 4 | } 5 | -------------------------------------------------------------------------------- /.nova/Tasks/Core.json: -------------------------------------------------------------------------------- 1 | { 2 | "actions" : { 3 | "run" : { 4 | "enabled" : true, 5 | "script" : "npm run core" 6 | } 7 | }, 8 | "identifier" : "9B164419-0236-4777-88BD-3F5CB47E019C", 9 | "openLogOnRun" : "start" 10 | } 11 | -------------------------------------------------------------------------------- /.nova/Tasks/React.json: -------------------------------------------------------------------------------- 1 | { 2 | "actions" : { 3 | "run" : { 4 | "enabled" : true, 5 | "script" : "npm run react" 6 | } 7 | }, 8 | "identifier" : "F52B677B-1F9C-445F-A858-F1623B107D5D", 9 | "openLogOnRun" : "start" 10 | } 11 | -------------------------------------------------------------------------------- /.nova/Tasks/Svelte.json: -------------------------------------------------------------------------------- 1 | { 2 | "actions" : { 3 | "run" : { 4 | "enabled" : true, 5 | "script" : "npm run svelte" 6 | } 7 | }, 8 | "identifier" : "758B0624-CC97-44ED-A6B6-774F7E325B39", 9 | "openLogOnRun" : "start" 10 | } 11 | -------------------------------------------------------------------------------- /.nova/Tasks/Vue.json: -------------------------------------------------------------------------------- 1 | { 2 | "actions" : { 3 | "run" : { 4 | "enabled" : true, 5 | "script" : "npm run vue" 6 | } 7 | }, 8 | "identifier" : "35485CB5-B3D0-4824-BF7D-ACF0A6160B91", 9 | "openLogOnRun" : "start" 10 | } 11 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | build 2 | node_modules 3 | packages 4 | 5 | src/core/less/vars.less 6 | src/core/modules/component/htm.js 7 | src/core/modules/component/snabbdom 8 | kitchen-sink/core/css/app.css 9 | kitchen-sink/react/dist 10 | kitchen-sink/vue/dist 11 | kitchen-sink/svelte/dist 12 | kitchen-sink/**/*.json 13 | src/vue-temp 14 | src/core/shared/material-color-utils.js 15 | .nova 16 | package.json 17 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "always", 3 | "bracketSpacing": true, 4 | "htmlWhitespaceSensitivity": "css", 5 | "insertPragma": false, 6 | "jsxSingleQuote": false, 7 | "printWidth": 100, 8 | "proseWrap": "preserve", 9 | "quoteProps": "as-needed", 10 | "requirePragma": false, 11 | "semi": true, 12 | "singleQuote": true, 13 | "tabWidth": 2, 14 | "trailingComma": "all", 15 | "useTabs": false, 16 | "vueIndentScriptAndStyle": false 17 | } -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '14.15.0' 4 | before_script: 5 | - npm install --global gulp 6 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "eslint.enable": true, 4 | "editor.defaultFormatter": "esbenp.prettier-vscode", 5 | "eslint.validate": ["javascript", "javascriptreact", "svelte", "typescript"] 6 | } 7 | -------------------------------------------------------------------------------- /babel-react.config.js: -------------------------------------------------------------------------------- 1 | let modules = process.env.MODULES || false; 2 | if (modules === 'esm' || modules === 'false') modules = false; 3 | 4 | module.exports = { 5 | presets: ['@babel/preset-react', ['@babel/preset-env', { modules, loose: true }]], 6 | }; 7 | -------------------------------------------------------------------------------- /babel-svelte.config.js: -------------------------------------------------------------------------------- 1 | let modules = process.env.MODULES || false; 2 | if (modules === 'esm' || modules === 'false') modules = false; 3 | 4 | module.exports = { 5 | presets: [['@babel/preset-env', { modules, loose: true }]], 6 | }; 7 | -------------------------------------------------------------------------------- /babel-vue.config.js: -------------------------------------------------------------------------------- 1 | let modules = process.env.MODULES || false; 2 | if (modules === 'esm' || modules === 'false') modules = false; 3 | 4 | module.exports = { 5 | presets: [['@babel/preset-env', { modules, loose: true }]], 6 | }; 7 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | let modules = process.env.MODULES || false; 2 | if (modules === 'esm' || modules === 'false') modules = false; 3 | 4 | module.exports = { 5 | presets: ['@babel/preset-react', ['@babel/preset-env', { modules, loose: true }]], 6 | }; 7 | -------------------------------------------------------------------------------- /build/core/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "framework7", 3 | "private": true, 4 | "main": "framework7.esm.js", 5 | "module": "framework7.esm.js", 6 | "jsnext:main": "framework7.esm.js", 7 | "typings": "framework7.d.ts", 8 | "sideEffects": [ 9 | "*.less", 10 | "*.css", 11 | "shared/dom7.js" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /build/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "framework7-react", 3 | "private": true, 4 | "module": "framework7-react.js", 5 | "typings": "framework7-react.d.ts" 6 | } 7 | -------------------------------------------------------------------------------- /build/svelte/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "framework7-svelte", 3 | "private": true, 4 | "module": "framework7-svelte.js", 5 | "svelte": "framework7-svelte-src.js", 6 | "typings": "framework7-svelte.d.ts" 7 | } 8 | -------------------------------------------------------------------------------- /build/vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "framework7-vue", 3 | "private": true, 4 | "module": "framework7-vue.js", 5 | "typings": "framework7-vue.d.ts" 6 | } 7 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | require('./scripts/gulpfile.js'); 2 | -------------------------------------------------------------------------------- /kitchen-sink/core/fonts/Framework7Icons-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/core/fonts/Framework7Icons-Regular.ttf -------------------------------------------------------------------------------- /kitchen-sink/core/fonts/Framework7Icons-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/core/fonts/Framework7Icons-Regular.woff -------------------------------------------------------------------------------- /kitchen-sink/core/fonts/Framework7Icons-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/core/fonts/Framework7Icons-Regular.woff2 -------------------------------------------------------------------------------- /kitchen-sink/core/fonts/MaterialIcons-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/core/fonts/MaterialIcons-Regular.ttf -------------------------------------------------------------------------------- /kitchen-sink/core/fonts/MaterialIcons-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/core/fonts/MaterialIcons-Regular.woff -------------------------------------------------------------------------------- /kitchen-sink/core/fonts/MaterialIcons-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/core/fonts/MaterialIcons-Regular.woff2 -------------------------------------------------------------------------------- /kitchen-sink/core/img/beach.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/core/img/beach.jpg -------------------------------------------------------------------------------- /kitchen-sink/core/img/f7-icon-square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/core/img/f7-icon-square.png -------------------------------------------------------------------------------- /kitchen-sink/core/img/f7-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/core/img/f7-icon.png -------------------------------------------------------------------------------- /kitchen-sink/core/img/lock.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/core/img/lock.jpg -------------------------------------------------------------------------------- /kitchen-sink/core/img/monkey.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/core/img/monkey.jpg -------------------------------------------------------------------------------- /kitchen-sink/core/img/mountains.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/core/img/mountains.jpg -------------------------------------------------------------------------------- /kitchen-sink/core/img/vi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/core/img/vi-icon.png -------------------------------------------------------------------------------- /kitchen-sink/core/js/store.js: -------------------------------------------------------------------------------- 1 | var store = Framework7.createStore({ 2 | state: { 3 | firstName: 'John', 4 | lastName: 'Doe', 5 | users: null, 6 | usersLoading: false, 7 | }, 8 | actions: { 9 | helloWorld(ctx) { 10 | app.dialog.alert('Hello world'); 11 | }, 12 | loadUsers({ state }) { 13 | state.usersLoading = true; 14 | setTimeout(() => { 15 | state.usersLoading = false; 16 | state.users = ['Aaron', 'Alexander', 'Candy', 'Chloe', 'Vladimir']; 17 | }, 3000); 18 | }, 19 | }, 20 | getters: { 21 | usersLoading: ({ state }) => state.usersLoading, 22 | users: ({ state }) => state.users, 23 | }, 24 | }); 25 | -------------------------------------------------------------------------------- /kitchen-sink/core/pages/404.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 | 7 | 8 | Back 9 | 10 |
11 |
Not found
12 |
13 |
14 |
15 |
16 |

Sorry

17 |

Requested content not found.

18 |
19 |
20 |
-------------------------------------------------------------------------------- /kitchen-sink/core/pages/page-transitions-effect.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /kitchen-sink/react/public/img/beach.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/react/public/img/beach.jpg -------------------------------------------------------------------------------- /kitchen-sink/react/public/img/f7-icon-square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/react/public/img/f7-icon-square.png -------------------------------------------------------------------------------- /kitchen-sink/react/public/img/f7-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/react/public/img/f7-icon.png -------------------------------------------------------------------------------- /kitchen-sink/react/public/img/lock.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/react/public/img/lock.jpg -------------------------------------------------------------------------------- /kitchen-sink/react/public/img/monkey.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/react/public/img/monkey.jpg -------------------------------------------------------------------------------- /kitchen-sink/react/public/img/mountains.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/react/public/img/mountains.jpg -------------------------------------------------------------------------------- /kitchen-sink/react/src/pages/404.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Page, Navbar, Block } from 'framework7-react'; 3 | 4 | export default () => ( 5 | 6 | 7 | 8 |

Sorry

9 |

Requested content not found.

10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /kitchen-sink/react/src/pages/list-button.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Navbar, Page, List, ListButton } from 'framework7-react'; 3 | 4 | export default () => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /kitchen-sink/react/src/pages/page-transitions-effect.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Page, Navbar, Block } from 'framework7-react'; 3 | 4 | export default (props) => ( 5 | 6 | 7 | 8 | 9 |

10 | This page was loaded with {props.effect} transition. 11 |

12 | 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /kitchen-sink/react/src/pages/panel-right.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Page, Navbar, BlockTitle, Block, List, ListItem, Link } from 'framework7-react'; 3 | 4 | export default () => ( 5 | 6 | 7 | 8 |

9 | This is a right side panel. You can close it by clicking outsite or on this link: 10 | close me. You can put here anything, even another isolated view. 11 |

12 | 13 | Panel Navigation 14 | 15 | 16 | 17 | 18 | 19 | ); 20 | -------------------------------------------------------------------------------- /kitchen-sink/react/src/pages/routable-actions.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Actions, ActionsLabel, ActionsGroup, ActionsButton } from 'framework7-react'; 3 | 4 | export default () => ( 5 | 6 | 7 | This Action Sheet was loaded as standalone component 8 | Action 1 9 | Action 2 10 | 11 | 12 | Cancel 13 | 14 | 15 | ); 16 | -------------------------------------------------------------------------------- /kitchen-sink/react/src/pages/routable-modals.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Navbar, Page, List, ListItem, Block } from 'framework7-react'; 3 | 4 | export default () => ( 5 | 6 | 7 | 8 |

In addition to pages, Framework7 router allows to load modal components:

9 | 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | -------------------------------------------------------------------------------- /kitchen-sink/react/src/pages/swiper-horizontal.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Navbar, Page } from 'framework7-react'; 3 | 4 | export default () => ( 5 | 6 | 7 | 8 | Slide 1 9 | Slide 2 10 | Slide 3 11 | Slide 4 12 | Slide 5 13 | Slide 6 14 | Slide 7 15 | Slide 8 16 | Slide 9 17 | Slide 10 18 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /kitchen-sink/react/src/pages/swiper-loop.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Navbar, Page } from 'framework7-react'; 3 | 4 | export default () => ( 5 | 6 | 7 | 8 | Slide 1 9 | Slide 2 10 | Slide 3 11 | Slide 4 12 | Slide 5 13 | Slide 6 14 | Slide 7 15 | Slide 8 16 | Slide 9 17 | Slide 10 18 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /kitchen-sink/react/src/pages/swiper-scrollbar.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Navbar, Page } from 'framework7-react'; 3 | 4 | export default () => ( 5 | 6 | 7 | 8 | Slide 1 9 | Slide 2 10 | Slide 3 11 | Slide 4 12 | Slide 5 13 | Slide 6 14 | Slide 7 15 | Slide 8 16 | Slide 9 17 | Slide 10 18 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /kitchen-sink/react/src/pages/tabs-routable.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Navbar, Page, Tabs, Tab, Link, Toolbar } from 'framework7-react'; 3 | 4 | export default () => ( 5 | 6 | 7 | 8 | 9 | Tab 1 10 | 11 | 12 | Tab 2 13 | 14 | 15 | Tab 3 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | ); 25 | -------------------------------------------------------------------------------- /kitchen-sink/react/src/pages/tabs.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Navbar, Page, List, ListItem } from 'framework7-react'; 3 | 4 | export default () => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /kitchen-sink/react/src/pages/timeline.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Navbar, Page, List, ListItem } from 'framework7-react'; 3 | 4 | export default () => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | ); 14 | -------------------------------------------------------------------------------- /kitchen-sink/react/src/store.js: -------------------------------------------------------------------------------- 1 | import { createStore } from 'framework7/lite'; 2 | 3 | const store = createStore({ 4 | state: { 5 | users: null, 6 | usersLoading: false, 7 | }, 8 | actions: { 9 | loadUsers({ state }) { 10 | state.usersLoading = true; 11 | setTimeout(() => { 12 | state.usersLoading = false; 13 | state.users = ['Aaron', 'Alexander', 'Candy', 'Chloe', 'Vladimir']; 14 | }, 3000); 15 | }, 16 | }, 17 | getters: { 18 | usersLoading: ({ state }) => state.usersLoading, 19 | users: ({ state }) => state.users, 20 | }, 21 | }); 22 | 23 | export default store; 24 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/public/img/beach.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/svelte/public/img/beach.jpg -------------------------------------------------------------------------------- /kitchen-sink/svelte/public/img/f7-icon-square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/svelte/public/img/f7-icon-square.png -------------------------------------------------------------------------------- /kitchen-sink/svelte/public/img/f7-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/svelte/public/img/f7-icon.png -------------------------------------------------------------------------------- /kitchen-sink/svelte/public/img/lock.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/svelte/public/img/lock.jpg -------------------------------------------------------------------------------- /kitchen-sink/svelte/public/img/monkey.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/svelte/public/img/monkey.jpg -------------------------------------------------------------------------------- /kitchen-sink/svelte/public/img/mountains.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/svelte/public/img/mountains.jpg -------------------------------------------------------------------------------- /kitchen-sink/svelte/src/pages/404.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 |

Sorry

10 |

Requested content not found.

11 | 12 | 13 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/src/pages/list-button.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/src/pages/navbar.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | Right 9 | 10 | 11 | 12 |

13 | Navbar is a fixed (with Fixed and Through layout types) area at the top of a screen that 14 | contains Page title and navigation elements. 15 |

16 |

Navbar has 3 main parts: Left, Title and Right. Each part may contain any HTML content.

17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/src/pages/page-transitions-effect.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 |

This page was loaded with {effect} transition.

12 | 13 | 14 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/src/pages/panel-right.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 |

9 | This is a right side panel. You can close it by clicking outsite or on this link: 10 | close me. You can put here anything, even another isolated view. 11 |

12 | 13 | Panel Navigation 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/src/pages/routable-actions.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | This Action Sheet was loaded as standalone component 8 | Action 1 9 | Action 2 10 | 11 | 12 | Cancel 13 | 14 | 15 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/src/pages/routable-modals.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 |

In addition to pages, Framework7 router allows to load modal components:

9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/src/pages/swiper-horizontal.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | Slide 1 9 | Slide 2 10 | Slide 3 11 | Slide 4 12 | Slide 5 13 | Slide 6 14 | Slide 7 15 | Slide 8 16 | Slide 9 17 | Slide 10 18 | 19 | 20 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/src/pages/swiper-loop.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | Slide 1 9 | Slide 2 10 | Slide 3 11 | Slide 4 12 | Slide 5 13 | Slide 6 14 | Slide 7 15 | Slide 8 16 | Slide 9 17 | Slide 10 18 | 19 | 20 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/src/pages/swiper-nested.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | Horizontal Slide 1 9 | 10 | 11 | Vertical Slide 1 12 | Vertical Slide 2 13 | Vertical Slide 3 14 | 15 | 16 | Horizontal Slide 3 17 | Horizontal Slide 4 18 | 19 | 20 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/src/pages/swiper-pagination-fraction.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | Slide 1 9 | Slide 2 10 | Slide 3 11 | Slide 4 12 | Slide 5 13 | Slide 6 14 | Slide 7 15 | Slide 8 16 | Slide 9 17 | Slide 10 18 | 19 | 20 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/src/pages/swiper-pagination-progress.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 | Slide 1 10 | Slide 2 11 | Slide 3 12 | Slide 4 13 | Slide 5 14 | Slide 6 15 | Slide 7 16 | Slide 8 17 | Slide 9 18 | Slide 10 19 | 20 | 21 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/src/pages/swiper-scrollbar.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | Slide 1 9 | Slide 2 10 | Slide 3 11 | Slide 4 12 | Slide 5 13 | Slide 6 14 | Slide 7 15 | Slide 8 16 | Slide 9 17 | Slide 10 18 | 19 | 20 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/src/pages/swiper-space-between.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | Slide 1 9 | Slide 2 10 | Slide 3 11 | Slide 4 12 | Slide 5 13 | Slide 6 14 | Slide 7 15 | Slide 8 16 | Slide 9 17 | Slide 10 18 | 19 | 20 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/src/pages/swiper-vertical.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | Slide 1 9 | Slide 2 10 | Slide 3 11 | Slide 4 12 | Slide 5 13 | Slide 6 14 | Slide 7 15 | Slide 8 16 | Slide 9 17 | Slide 10 18 | 19 | 20 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/src/pages/tabs-routable.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | Tab 1 9 | Tab 2 10 | Tab 3 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/src/pages/tabs.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/src/pages/timeline.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/src/store.js: -------------------------------------------------------------------------------- 1 | import { createStore } from 'framework7/lite'; 2 | 3 | const store = createStore({ 4 | state: { 5 | users: null, 6 | usersLoading: false, 7 | }, 8 | actions: { 9 | loadUsers({ state }) { 10 | state.usersLoading = true; 11 | setTimeout(() => { 12 | state.usersLoading = false; 13 | state.users = ['Aaron', 'Alexander', 'Candy', 'Chloe', 'Vladimir']; 14 | }, 3000); 15 | }, 16 | }, 17 | getters: { 18 | usersLoading: ({ state }) => state.usersLoading, 19 | users: ({ state }) => state.users, 20 | }, 21 | }); 22 | 23 | export default store; 24 | -------------------------------------------------------------------------------- /kitchen-sink/vue/public/img/beach.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/vue/public/img/beach.jpg -------------------------------------------------------------------------------- /kitchen-sink/vue/public/img/f7-icon-square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/vue/public/img/f7-icon-square.png -------------------------------------------------------------------------------- /kitchen-sink/vue/public/img/f7-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/vue/public/img/f7-icon.png -------------------------------------------------------------------------------- /kitchen-sink/vue/public/img/lock.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/vue/public/img/lock.jpg -------------------------------------------------------------------------------- /kitchen-sink/vue/public/img/monkey.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/vue/public/img/monkey.jpg -------------------------------------------------------------------------------- /kitchen-sink/vue/public/img/mountains.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/kitchen-sink/vue/public/img/mountains.jpg -------------------------------------------------------------------------------- /kitchen-sink/vue/src/pages/404.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 22 | -------------------------------------------------------------------------------- /kitchen-sink/vue/src/pages/list-button.vue: -------------------------------------------------------------------------------- 1 | 15 | 28 | -------------------------------------------------------------------------------- /kitchen-sink/vue/src/pages/page-transitions-effect.vue: -------------------------------------------------------------------------------- 1 | 12 | 26 | -------------------------------------------------------------------------------- /kitchen-sink/vue/src/pages/routable-actions.vue: -------------------------------------------------------------------------------- 1 | 13 | 25 | -------------------------------------------------------------------------------- /kitchen-sink/vue/src/pages/routable-modals.vue: -------------------------------------------------------------------------------- 1 | 13 | 26 | -------------------------------------------------------------------------------- /kitchen-sink/vue/src/pages/tabs.vue: -------------------------------------------------------------------------------- 1 | 12 | 24 | -------------------------------------------------------------------------------- /kitchen-sink/vue/src/pages/timeline.vue: -------------------------------------------------------------------------------- 1 | 11 | 23 | -------------------------------------------------------------------------------- /kitchen-sink/vue/src/store.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line 2 | import { createStore } from 'framework7/lite'; 3 | 4 | const store = createStore({ 5 | state: { 6 | users: null, 7 | usersLoading: false, 8 | }, 9 | actions: { 10 | loadUsers({ state }) { 11 | state.usersLoading = true; 12 | setTimeout(() => { 13 | state.usersLoading = false; 14 | state.users = ['Aaron', 'Alexander', 'Candy', 'Chloe', 'Vladimir']; 15 | }, 3000); 16 | }, 17 | }, 18 | getters: { 19 | usersLoading: ({ state }) => state.usersLoading, 20 | users: ({ state }) => state.users, 21 | }, 22 | }); 23 | 24 | export default store; 25 | -------------------------------------------------------------------------------- /scripts/banners/core.js: -------------------------------------------------------------------------------- 1 | const pkg = require('../../packages/core/package.json'); 2 | 3 | const version = process.env.VERSION || pkg.version; 4 | 5 | const date = { 6 | day: new Date().getDate(), 7 | month: 8 | 'January February March April May June July August September October November December'.split( 9 | ' ', 10 | )[new Date().getMonth()], 11 | year: new Date().getFullYear(), 12 | }; 13 | 14 | module.exports = `${` 15 | /** 16 | * Framework7 ${version} 17 | * ${pkg.description} 18 | * ${pkg.homepage} 19 | * 20 | * Copyright 2014-${date.year} ${pkg.author} 21 | * 22 | * Released under the ${pkg.license} License 23 | * 24 | * Released on: ${date.month} ${date.day}, ${date.year} 25 | */ 26 | `.trim()}\n`; 27 | -------------------------------------------------------------------------------- /scripts/banners/react.js: -------------------------------------------------------------------------------- 1 | const pkg = require('../../packages/react/package.json'); 2 | 3 | const version = process.env.VERSION || pkg.version; 4 | 5 | const date = { 6 | day: new Date().getDate(), 7 | month: 8 | 'January February March April May June July August September October November December'.split( 9 | ' ', 10 | )[new Date().getMonth()], 11 | year: new Date().getFullYear(), 12 | }; 13 | 14 | module.exports = `${` 15 | /** 16 | * Framework7 React ${version} 17 | * ${pkg.description} 18 | * ${pkg.homepage} 19 | * 20 | * Copyright 2014-${date.year} ${pkg.author} 21 | * 22 | * Released under the ${pkg.license} License 23 | * 24 | * Released on: ${date.month} ${date.day}, ${date.year} 25 | */ 26 | `.trim()}\n`; 27 | -------------------------------------------------------------------------------- /scripts/banners/svelte.js: -------------------------------------------------------------------------------- 1 | const pkg = require('../../packages/svelte/package.json'); 2 | 3 | const version = process.env.VERSION || pkg.version; 4 | 5 | const date = { 6 | day: new Date().getDate(), 7 | month: 8 | 'January February March April May June July August September October November December'.split( 9 | ' ', 10 | )[new Date().getMonth()], 11 | year: new Date().getFullYear(), 12 | }; 13 | 14 | module.exports = `${` 15 | /** 16 | * Framework7 Svelte ${version} 17 | * ${pkg.description} 18 | * ${pkg.homepage} 19 | * 20 | * Copyright 2014-${date.year} ${pkg.author} 21 | * 22 | * Released under the ${pkg.license} License 23 | * 24 | * Released on: ${date.month} ${date.day}, ${date.year} 25 | */ 26 | `.trim()}\n`; 27 | -------------------------------------------------------------------------------- /scripts/banners/vue.js: -------------------------------------------------------------------------------- 1 | const pkg = require('../../packages/vue/package.json'); 2 | 3 | const version = process.env.VERSION || pkg.version; 4 | 5 | const date = { 6 | day: new Date().getDate(), 7 | month: 8 | 'January February March April May June July August September October November December'.split( 9 | ' ', 10 | )[new Date().getMonth()], 11 | year: new Date().getFullYear(), 12 | }; 13 | 14 | module.exports = `${` 15 | /** 16 | * Framework7 Vue ${version} 17 | * ${pkg.description} 18 | * ${pkg.homepage} 19 | * 20 | * Copyright 2014-${date.year} ${pkg.author} 21 | * 22 | * Released under the ${pkg.license} License 23 | * 24 | * Released on: ${date.month} ${date.day}, ${date.year} 25 | */ 26 | `.trim()}\n`; 27 | -------------------------------------------------------------------------------- /scripts/core-components-list.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | 'app', 3 | 'statusbar', 4 | 'view', 5 | 'navbar', 6 | 'toolbar', 7 | 'subnavbar', 8 | 'touch-ripple', 9 | 'modal', 10 | 'page', 11 | 'link', 12 | 'block', 13 | 'list', 14 | 'badge', 15 | 'button', 16 | 'icon', 17 | ]; 18 | -------------------------------------------------------------------------------- /scripts/icon-font/blank.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /scripts/icon-font/generate.py: -------------------------------------------------------------------------------- 1 | # Font generation script from Ionicons 2 | # https://github.com/driftyco/ionicons/ 3 | # http://ionicons.com/ 4 | 5 | from subprocess import call 6 | import os 7 | 8 | BUILDER_PATH = os.path.dirname(os.path.abspath(__file__)) 9 | 10 | def main(): 11 | generate_font_files() 12 | 13 | def generate_font_files(): 14 | print("Generate Fonts") 15 | cmd = "fontforge -script %s/generate_font.py" % (BUILDER_PATH) 16 | call(cmd, shell=True) 17 | 18 | if __name__ == "__main__": 19 | main() 20 | -------------------------------------------------------------------------------- /scripts/utils/autoprefixer.js: -------------------------------------------------------------------------------- 1 | /* eslint import/no-extraneous-dependencies: ["error", {"devDependencies": true}] */ 2 | /* eslint no-console: "off" */ 3 | const postcss = require('postcss'); 4 | const autoprefixer = require('autoprefixer'); 5 | 6 | module.exports = async (content, { from = undefined, to = undefined } = {}) => 7 | new Promise((resolve, reject) => { 8 | postcss([autoprefixer]) 9 | .process(content, { from, to }) 10 | .then((result) => { 11 | result.warnings().forEach((warn) => { 12 | console.warn(warn.toString()); 13 | }); 14 | resolve(result.css); 15 | }) 16 | .catch((err) => { 17 | reject(err); 18 | throw err; 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /scripts/utils/less.js: -------------------------------------------------------------------------------- 1 | /* eslint import/no-extraneous-dependencies: ["error", {"devDependencies": true}] */ 2 | const path = require('path'); 3 | const less = require('less'); 4 | 5 | module.exports = (content, resolvePath = path.resolve(__dirname, '../../src/core')) => 6 | new Promise((resolve, reject) => { 7 | less 8 | .render(content, { paths: [resolvePath] }) 9 | .then((result) => { 10 | resolve(result.css); 11 | }) 12 | .catch((err) => { 13 | reject(err); 14 | throw err; 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /src/core/components/accordion/accordion-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/accordion/accordion-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/accordion/accordion-vars.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/src/core/components/accordion/accordion-vars.less -------------------------------------------------------------------------------- /src/core/components/actions/actions-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | .actions-modal { 3 | background-color: var(--f7-actions-bg-color); 4 | border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0; 5 | padding-bottom: var(--f7-safe-area-bottom); 6 | } 7 | .actions-button { 8 | transition-duration: 300ms; 9 | } 10 | .actions-button, 11 | .actions-label { 12 | b, 13 | &.actions-button-strong { 14 | font-weight: 500; 15 | } 16 | } 17 | 18 | .actions-button-media { 19 | min-width: 40px; 20 | + .actions-button-text { 21 | margin-left: 16px; 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/core/components/app/app-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | .md-only, 3 | .if-md, 4 | .if-not-ios, 5 | .not-ios { 6 | display: none !important; 7 | } 8 | // Fix for iPad in Safari in Lanscape mode 9 | @media (width: 1024px) and (height: 691px) and (orientation: landscape) { 10 | &, 11 | & body, 12 | & .framework7-root { 13 | height: 671px; 14 | } 15 | } 16 | @media (width: 1024px) and (height: 692px) and (orientation: landscape) { 17 | &, 18 | & body, 19 | & .framework7-root { 20 | height: 672px; 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/core/components/app/app-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | .ios-only, 3 | .if-ios, 4 | .if-not-md, 5 | .not-md { 6 | display: none !important; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/core/components/area-chart/area-chart-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/area-chart/area-chart-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/autocomplete/autocomplete-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | .autocomplete-dropdown { 3 | .autocomplete-preloader { 4 | .ltr({ right: 16px; }); 5 | .rtl({ left: 16px; }); 6 | margin-bottom: 12px; 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/core/components/autocomplete/autocomplete-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | .autocomplete-page { 3 | .navbar .autocomplete-preloader { 4 | .ltr({ margin-right: 8px; }); 5 | .rtl({ margin-left: 8px; }); 6 | } 7 | } 8 | .autocomplete-popup { 9 | .navbar .autocomplete-preloader { 10 | .ltr({ 11 | margin-left: 8px; 12 | margin-right: 16px; 13 | }); 14 | .rtl({ 15 | margin-right: 8px; 16 | margin-left: 16px; 17 | }); 18 | } 19 | } 20 | .autocomplete-dropdown { 21 | .autocomplete-preloader { 22 | .ltr({ right: 16px; }); 23 | .rtl({ left: 16px; }); 24 | margin-bottom: 8px; 25 | circle { 26 | stroke-width: 3; 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/core/components/badge/badge-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/badge/badge-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/badge/badge-vars.less: -------------------------------------------------------------------------------- 1 | :root { 2 | --f7-badge-text-color: #fff; 3 | --f7-badge-bg-color: #8e8e93; 4 | --f7-badge-in-icon-size: 16px; 5 | --f7-badge-in-icon-font-size: 10px; 6 | --f7-badge-font-weight: normal; 7 | --f7-badge-font-size: 12px; 8 | } 9 | .ios-vars({ 10 | --f7-badge-padding: 0 4px; 11 | --f7-badge-size: 20px; 12 | --f7-badge-font-weight: 600; 13 | }); 14 | .md-vars({ 15 | --f7-badge-padding: 2px 6px; 16 | --f7-badge-size: 20px; 17 | --f7-badge-font-weight: 500; 18 | }); 19 | -------------------------------------------------------------------------------- /src/core/components/badge/badge.d.ts: -------------------------------------------------------------------------------- 1 | import Framework7, { 2 | CSSSelector, 3 | Framework7EventsClass, 4 | Framework7Plugin, 5 | } from '../app/app-class.js'; 6 | 7 | export namespace Badge { 8 | interface AppMethods {} 9 | interface AppParams {} 10 | interface AppEvents {} 11 | } 12 | 13 | declare const BadgeComponent: Framework7Plugin; 14 | export default BadgeComponent; 15 | -------------------------------------------------------------------------------- /src/core/components/badge/badge.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'badge', 3 | }; 4 | -------------------------------------------------------------------------------- /src/core/components/block/block-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/block/block-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/block/block.d.ts: -------------------------------------------------------------------------------- 1 | import Framework7, { 2 | CSSSelector, 3 | Framework7EventsClass, 4 | Framework7Plugin, 5 | } from '../app/app-class.js'; 6 | 7 | export namespace Block { 8 | interface AppMethods {} 9 | interface AppParams {} 10 | interface AppEvents {} 11 | } 12 | 13 | declare const BlockComponent: Framework7Plugin; 14 | export default BlockComponent; 15 | -------------------------------------------------------------------------------- /src/core/components/block/block.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'block', 3 | }; 4 | -------------------------------------------------------------------------------- /src/core/components/breadcrumbs/breadcrumbs-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/breadcrumbs/breadcrumbs-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/breadcrumbs/breadcrumbs.d.ts: -------------------------------------------------------------------------------- 1 | import Framework7 from '../app/app-class.js'; 2 | import { CSSSelector, Framework7Plugin } from '../app/app-class.js'; 3 | 4 | export namespace Breadcrumbs { 5 | interface AppMethods { 6 | breadcrumbs: {}; 7 | } 8 | interface AppParams {} 9 | interface DomEvents {} 10 | interface AppEvents {} 11 | } 12 | 13 | declare const BreadcrumbsComponent: Framework7Plugin; 14 | 15 | export default BreadcrumbsComponent; 16 | -------------------------------------------------------------------------------- /src/core/components/breadcrumbs/breadcrumbs.js: -------------------------------------------------------------------------------- 1 | import { bindMethods } from '../../shared/utils.js'; 2 | 3 | const Breadcrumbs = {}; 4 | 5 | export default { 6 | name: 'breadrumbs', 7 | create() { 8 | const app = this; 9 | bindMethods(app, { 10 | breadrumbs: Breadcrumbs, 11 | }); 12 | }, 13 | }; 14 | -------------------------------------------------------------------------------- /src/core/components/button/button-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | // Buttons 3 | .button { 4 | transition-duration: 100ms; 5 | &.active-state { 6 | background-color: var(--f7-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15)); 7 | } 8 | } 9 | .button-fill, 10 | .button-fill-ios { 11 | --f7-button-pressed-bg-color: var( 12 | --f7-button-fill-pressed-bg-color, 13 | var(--f7-theme-color-tint) 14 | ); 15 | } 16 | 17 | .button-small, 18 | .button-small-ios { 19 | transition-duration: 200ms; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/core/components/button/button-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | // Buttons 3 | .button { 4 | transition-duration: 300ms; 5 | transform: translate3d(0, 0, 0); 6 | } 7 | .button-fill, 8 | .button-fill-md { 9 | --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, transparent); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/core/components/button/button.d.ts: -------------------------------------------------------------------------------- 1 | import Framework7, { 2 | CSSSelector, 3 | Framework7EventsClass, 4 | Framework7Plugin, 5 | } from '../app/app-class.js'; 6 | 7 | export namespace Button { 8 | interface AppMethods {} 9 | interface AppParams {} 10 | interface AppEvents {} 11 | } 12 | 13 | declare const ButtonComponent: Framework7Plugin; 14 | export default ButtonComponent; 15 | -------------------------------------------------------------------------------- /src/core/components/button/button.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'button', 3 | }; 4 | -------------------------------------------------------------------------------- /src/core/components/calendar/calendar-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/calendar/calendar-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/card/card-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/card/card-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/checkbox/checkbox-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | .icon-checkbox, 3 | .checkbox i { 4 | &:after { 5 | content: 'checkbox_ios'; 6 | font-size: 21px; 7 | } 8 | } 9 | 10 | label.item-checkbox { 11 | &.active-state { 12 | transition-duration: 0ms; 13 | } 14 | } 15 | label.item-checkbox input[type='checkbox']:indeterminate ~ .icon-checkbox, 16 | label.item-checkbox input[type='checkbox']:indeterminate ~ * .icon-checkbox, 17 | .checkbox input[type='checkbox']:indeterminate ~ i { 18 | &:after { 19 | height: 2px; 20 | margin-top: -1px; 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/core/components/checkbox/checkbox-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | .icon-checkbox, 3 | .checkbox i { 4 | transition-duration: 200ms; 5 | &:after { 6 | content: 'checkbox_md'; 7 | transition-duration: 200ms; 8 | font-size: 15px; 9 | } 10 | } 11 | 12 | label.item-checkbox { 13 | position: relative; 14 | overflow: hidden; 15 | z-index: 0; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/core/components/checkbox/checkbox-vars.less: -------------------------------------------------------------------------------- 1 | :root { 2 | /* --f7-checkbox-active-color: var(--f7-theme-color); */ 3 | --f7-checkbox-icon-color: #fff; 4 | --f7-checkbox-extra-margin: 0px; 5 | .dark-vars({ 6 | --f7-checkbox-inactive-color: rgba(255, 255, 255, 0.3); 7 | --f7-checkbox-icon-color: #000; 8 | }); 9 | } 10 | .ios-vars({ 11 | --f7-checkbox-size: 22px; 12 | --f7-checkbox-border-radius: 50%; 13 | --f7-checkbox-border-width: 1px; 14 | .light-vars({ 15 | --f7-checkbox-inactive-color: #c7c7cc; 16 | }); 17 | }); 18 | .md-vars({ 19 | --f7-checkbox-size: 18px; 20 | --f7-checkbox-border-radius: 2px; 21 | --f7-checkbox-border-width: 2px; 22 | .light-vars({ 23 | --f7-checkbox-inactive-color: #6d6d6d; 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/core/components/checkbox/checkbox.d.ts: -------------------------------------------------------------------------------- 1 | import Framework7, { 2 | CSSSelector, 3 | Framework7EventsClass, 4 | Framework7Plugin, 5 | } from '../app/app-class.js'; 6 | 7 | export namespace Checkbox { 8 | interface AppMethods {} 9 | interface AppParams {} 10 | interface AppEvents {} 11 | } 12 | 13 | declare const CheckboxComponent: Framework7Plugin; 14 | export default CheckboxComponent; 15 | -------------------------------------------------------------------------------- /src/core/components/checkbox/checkbox.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'checkbox', 3 | }; 4 | -------------------------------------------------------------------------------- /src/core/components/chip/chip-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | .chip-media { 3 | .ltr({ 4 | margin-left: calc(-1 * var(--f7-chip-padding-horizontal)); 5 | }); 6 | .rtl({ 7 | margin-right: calc(-1 * var(--f7-chip-padding-horizontal)); 8 | }); 9 | } 10 | .chip-delete { 11 | &::after { 12 | content: 'delete_round_ios'; 13 | } 14 | .ltr({ 15 | margin-right: calc(-1 * var(--f7-chip-padding-horizontal)); 16 | }); 17 | .rtl({ 18 | margin-left: calc(-1 * var(--f7-chip-padding-horizontal)); 19 | 20 | }); 21 | &:after { 22 | font-size: 10px; 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/core/components/chip/chip-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | .chip-media { 3 | .ltr({ 4 | margin-left: calc(-1 * var(--f7-chip-padding-horizontal) + 4px); 5 | }); 6 | .rtl({ 7 | margin-right: calc(-1 * var(--f7-chip-padding-horizontal) + 4px); 8 | }); 9 | } 10 | .chip-label + .chip-delete { 11 | .ltr({ 12 | margin-left: 4px; 13 | }); 14 | .rtl({ 15 | margin-right: 4px; 16 | }); 17 | } 18 | .chip-delete { 19 | &::after { 20 | content: 'delete_round_md'; 21 | font-size: 16px; 22 | } 23 | .ltr({ 24 | margin-right: calc(-1 * var(--f7-chip-padding-horizontal) + 4px); 25 | }); 26 | .rtl({ 27 | margin-left: calc(-1 * var(--f7-chip-padding-horizontal) + 4px); 28 | }); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/core/components/chip/chip.d.ts: -------------------------------------------------------------------------------- 1 | import Framework7, { 2 | CSSSelector, 3 | Framework7EventsClass, 4 | Framework7Plugin, 5 | } from '../app/app-class.js'; 6 | 7 | export namespace Chip { 8 | interface AppMethods {} 9 | interface AppParams {} 10 | interface AppEvents {} 11 | } 12 | 13 | declare const ChipComponent: Framework7Plugin; 14 | export default ChipComponent; 15 | -------------------------------------------------------------------------------- /src/core/components/chip/chip.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'chip', 3 | }; 4 | -------------------------------------------------------------------------------- /src/core/components/color-picker/color-picker-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/color-picker/color-picker-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/color-picker/modules/current-color.js: -------------------------------------------------------------------------------- 1 | /** @jsx $jsx */ 2 | import $jsx from '../../../shared/$jsx.js'; 3 | 4 | export default { 5 | render() { 6 | return ( 7 |
8 |
9 |
10 | ); 11 | }, 12 | update(self) { 13 | self.$el 14 | .find('.color-picker-module-current-color .color-picker-current-color') 15 | .css('background-color', self.value.hex); 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /src/core/components/contacts-list/contacts-list-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/contacts-list/contacts-list-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | .contacts-list { 3 | .list-group-title { 4 | pointer-events: none; 5 | overflow: visible; 6 | width: 40px; 7 | + li { 8 | margin-top: calc(var(--f7-contacts-list-title-height) * -1); 9 | } 10 | .hairline-remove(top); 11 | } 12 | li:not(.list-group-title) { 13 | .ltr({ 14 | padding-left: 40px; 15 | }); 16 | .rtl({ 17 | padding-right: 40px; 18 | }); 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/core/components/contacts-list/contacts-list-vars.less: -------------------------------------------------------------------------------- 1 | :root { 2 | } 3 | .ios-vars({ 4 | --f7-contacts-list-title-font-size: inherit; 5 | --f7-contacts-list-title-font-weight: 600; 6 | --f7-contacts-list-title-height: 22px; 7 | .light-vars({ 8 | --f7-contacts-list-title-text-color: #000; 9 | --f7-contacts-list-title-bg-color: #f7f7f7; 10 | }); 11 | .dark-vars({ 12 | --f7-contacts-list-title-text-color: #fff; 13 | --f7-contacts-list-title-bg-color: #323234; 14 | }); 15 | }); 16 | .md-vars({ 17 | --f7-contacts-list-title-font-size: 20px; 18 | --f7-contacts-list-title-font-weight: 500; 19 | --f7-contacts-list-title-height: 48px; 20 | --f7-contacts-list-title-bg-color: transparent; 21 | }); 22 | .md-color-vars({ 23 | --f7-contacts-list-title-text-color: var(--f7-theme-color); 24 | }); 25 | -------------------------------------------------------------------------------- /src/core/components/contacts-list/contacts-list.d.ts: -------------------------------------------------------------------------------- 1 | import Framework7, { 2 | CSSSelector, 3 | Framework7EventsClass, 4 | Framework7Plugin, 5 | } from '../app/app-class.js'; 6 | 7 | export namespace ContactsList { 8 | interface AppMethods {} 9 | interface AppParams {} 10 | interface AppEvents {} 11 | } 12 | 13 | declare const ContactsListComponent: Framework7Plugin; 14 | export default ContactsListComponent; 15 | -------------------------------------------------------------------------------- /src/core/components/contacts-list/contacts-list.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'contactsList', 3 | }; 4 | -------------------------------------------------------------------------------- /src/core/components/fab/fab-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | .fab > a, 3 | .fab-buttons a { 4 | &.active-state { 5 | transition-duration: 0ms; 6 | background-color: var(--f7-fab-pressed-bg-color, var(--f7-theme-color-shade)); 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/core/components/fab/fab-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | .fab > a, 3 | .fab-buttons a { 4 | &.active-state { 5 | background-color: var( 6 | --f7-fab-pressed-bg-color, 7 | var(--f7-fab-bg-color, var(--f7-theme-color)) 8 | ); 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/core/components/form/form-ios.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/src/core/components/form/form-ios.less -------------------------------------------------------------------------------- /src/core/components/form/form-md.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/src/core/components/form/form-md.less -------------------------------------------------------------------------------- /src/core/components/form/form.less: -------------------------------------------------------------------------------- 1 | /* === Form === */ 2 | .if-ios-theme({ 3 | @import './form-ios.less'; 4 | }); 5 | .if-md-theme({ 6 | @import './form-md.less'; 7 | }); 8 | -------------------------------------------------------------------------------- /src/core/components/gauge/gauge-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/gauge/gauge-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/gauge/gauge.less: -------------------------------------------------------------------------------- 1 | /* === Gauge === */ 2 | .gauge { 3 | position: relative; 4 | text-align: center; 5 | margin-left: auto; 6 | margin-right: auto; 7 | display: inline-block; 8 | } 9 | .gauge-svg, 10 | .gauge svg { 11 | max-width: 100%; 12 | height: auto; 13 | circle, 14 | path { 15 | transition-duration: 400ms; 16 | } 17 | } 18 | 19 | .if-ios-theme({ 20 | @import './gauge-ios.less'; 21 | }); 22 | .if-md-theme({ 23 | @import './gauge-md.less'; 24 | }); 25 | -------------------------------------------------------------------------------- /src/core/components/grid/grid-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/grid/grid-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/grid/grid-vars.less: -------------------------------------------------------------------------------- 1 | :root { 2 | --f7-grid-gap: 16px; 3 | } 4 | -------------------------------------------------------------------------------- /src/core/components/grid/grid.d.ts: -------------------------------------------------------------------------------- 1 | import Framework7, { 2 | CSSSelector, 3 | Framework7EventsClass, 4 | Framework7Plugin, 5 | } from '../app/app-class.js'; 6 | 7 | export namespace Grid { 8 | interface AppMethods {} 9 | interface AppParams {} 10 | interface DomEvents {} 11 | interface AppEvents {} 12 | } 13 | 14 | declare const GridComponent: Framework7Plugin; 15 | export default GridComponent; 16 | -------------------------------------------------------------------------------- /src/core/components/grid/grid.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'grid', 3 | }; 4 | -------------------------------------------------------------------------------- /src/core/components/icon/icon.d.ts: -------------------------------------------------------------------------------- 1 | import Framework7, { 2 | CSSSelector, 3 | Framework7EventsClass, 4 | Framework7Plugin, 5 | } from '../app/app-class.js'; 6 | 7 | export namespace Icon { 8 | interface AppMethods {} 9 | interface AppParams {} 10 | interface AppEvents {} 11 | } 12 | 13 | declare const IconComponent: Framework7Plugin; 14 | export default IconComponent; 15 | -------------------------------------------------------------------------------- /src/core/components/icon/icon.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'icon', 3 | }; 4 | -------------------------------------------------------------------------------- /src/core/components/icon/icon.less: -------------------------------------------------------------------------------- 1 | /* === Icon === */ 2 | .f7-icons, 3 | .material-icons { 4 | width: 1em; 5 | height: 1em; 6 | } 7 | i.icon { 8 | display: inline-block; 9 | vertical-align: middle; 10 | background-size: 100% auto; 11 | background-position: center; 12 | background-repeat: no-repeat; 13 | font-style: normal; 14 | position: relative; 15 | } 16 | .icon-back, 17 | .icon-prev, 18 | .icon-forward, 19 | .icon-next { 20 | &:after { 21 | .core-icons-font(); 22 | } 23 | } 24 | .icon[class*='color-'] { 25 | color: var(--f7-theme-color); 26 | } 27 | 28 | .if-ios-theme({ 29 | @import './icon-ios.less'; 30 | }); 31 | .if-md-theme({ 32 | @import './icon-md.less'; 33 | }); 34 | -------------------------------------------------------------------------------- /src/core/components/infinite-scroll/infinite-scroll-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | .infinite-scroll-preloader { 3 | margin-top: 35px; 4 | margin-bottom: 35px; 5 | .preloader, 6 | &.preloader { 7 | width: 27px; 8 | height: 27px; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/core/components/infinite-scroll/infinite-scroll-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | .infinite-scroll-preloader { 3 | margin-top: 32px; 4 | margin-bottom: 32px; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/core/components/infinite-scroll/infinite-scroll.less: -------------------------------------------------------------------------------- 1 | /* === Infinite === */ 2 | .infinite-scroll-preloader { 3 | margin-left: auto; 4 | margin-right: auto; 5 | text-align: center; 6 | &.preloader { 7 | display: block; 8 | } 9 | } 10 | .if-ios-theme({ 11 | @import './infinite-scroll-ios.less'; 12 | }); 13 | .if-md-theme({ 14 | @import './infinite-scroll-md.less'; 15 | }); 16 | -------------------------------------------------------------------------------- /src/core/components/link/link-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | .link { 3 | transition: opacity 300ms; 4 | &.active-state { 5 | opacity: var(--f7-link-pressed-opacity); 6 | transition-duration: 0ms; 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/core/components/link/link-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/link/link-vars.less: -------------------------------------------------------------------------------- 1 | :root { 2 | --f7-link-highlight-black: rgba(0, 0, 0, 0.1); 3 | --f7-link-highlight-white: rgba(255, 255, 255, 0.15); 4 | --f7-link-highlight-color: rgba(var(--f7-theme-color-rgb), 0.15); 5 | } 6 | 7 | .ios-vars({ 8 | --f7-link-pressed-opacity: 0.3; 9 | }); 10 | -------------------------------------------------------------------------------- /src/core/components/link/link.d.ts: -------------------------------------------------------------------------------- 1 | import Framework7, { 2 | CSSSelector, 3 | Framework7EventsClass, 4 | Framework7Plugin, 5 | } from '../app/app-class.js'; 6 | 7 | export namespace Link { 8 | interface AppMethods {} 9 | interface AppParams {} 10 | interface AppEvents {} 11 | } 12 | 13 | declare const LinkComponent: Framework7Plugin; 14 | export default LinkComponent; 15 | -------------------------------------------------------------------------------- /src/core/components/link/link.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'link', 3 | }; 4 | -------------------------------------------------------------------------------- /src/core/components/link/link.less: -------------------------------------------------------------------------------- 1 | /* === Link === */ 2 | @import './link-vars.less'; 3 | 4 | .link, 5 | .tab-link { 6 | display: inline-flex; 7 | align-items: center; 8 | align-content: center; 9 | justify-content: center; 10 | position: relative; 11 | box-sizing: border-box; 12 | z-index: 1; 13 | --f7-touch-ripple-color: var(--f7-link-touch-ripple-color, rgba(var(--f7-theme-color-rgb), 0.25)); 14 | } 15 | .link { 16 | i + span, 17 | i + i, 18 | span + i, 19 | span + span { 20 | .ltr({ 21 | margin-left: 4px; 22 | }); 23 | .rtl({ 24 | margin-right: 4px; 25 | }); 26 | } 27 | } 28 | .link[class*='color-'] { 29 | color: var(--f7-theme-color); 30 | } 31 | 32 | .if-ios-theme({ 33 | @import './link-ios.less'; 34 | }); 35 | .if-md-theme({ 36 | @import './link-md.less'; 37 | }); 38 | -------------------------------------------------------------------------------- /src/core/components/list-index/list-index-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | .list-index { 3 | .list-index-label { 4 | margin-bottom: calc(-1 * var(--f7-list-index-label-size) / 2); 5 | margin-right: calc(var(--f7-list-index-width) - 1px); 6 | border-radius: 50%; 7 | &:before { 8 | position: absolute; 9 | width: 100%; 10 | height: 100%; 11 | border-radius: 50% 0% 50% 50%; 12 | content: ''; 13 | background-color: inherit; 14 | left: 0; 15 | top: 0; 16 | transform: rotate(45deg); 17 | z-index: -1; 18 | } 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/core/components/list-index/list-index-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | .list-index { 3 | .list-index-label { 4 | border-radius: 50% 50% 0 50%; 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/core/components/list/list-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | .item-link.active-state .item-inner, 3 | .list-button.active-state, 4 | .links-list a.active-state { 5 | .hairline-color(bottom, transparent); 6 | } 7 | 8 | .links-list a, 9 | .list .item-link, 10 | .list .list-button { 11 | &.active-state { 12 | transition-duration: 0ms; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/core/components/list/list-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | .menu-list .item-link.active-state { 3 | background-color: var(--f7-menu-list-item-bg-color); 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/core/components/list/list.d.ts: -------------------------------------------------------------------------------- 1 | import Framework7, { 2 | CSSSelector, 3 | Framework7EventsClass, 4 | Framework7Plugin, 5 | } from '../app/app-class.js'; 6 | 7 | export namespace List { 8 | interface AppMethods {} 9 | interface AppParams {} 10 | interface AppEvents {} 11 | } 12 | 13 | declare const ListComponent: Framework7Plugin; 14 | export default ListComponent; 15 | -------------------------------------------------------------------------------- /src/core/components/list/list.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'list', 3 | }; 4 | -------------------------------------------------------------------------------- /src/core/components/login-screen/login-screen-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/login-screen/login-screen-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/modal/modal.js: -------------------------------------------------------------------------------- 1 | import Modal from './modal-class.js'; 2 | import CustomModal from './custom-modal-class.js'; 3 | 4 | export default { 5 | name: 'modal', 6 | static: { 7 | Modal, 8 | CustomModal, 9 | }, 10 | create() { 11 | const app = this; 12 | app.customModal = { 13 | create(params) { 14 | return new CustomModal(app, params); 15 | }, 16 | }; 17 | }, 18 | params: { 19 | modal: { 20 | queueDialogs: true, 21 | }, 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /src/core/components/modal/modal.less: -------------------------------------------------------------------------------- 1 | .custom-modal-backdrop { 2 | z-index: 10500; 3 | } 4 | 5 | .custom-modal-backdrop, 6 | .actions-backdrop, 7 | .dialog-backdrop, 8 | .popover-backdrop, 9 | .popup-backdrop, 10 | .preloader-backdrop, 11 | .sheet-backdrop, 12 | .fab-backdrop { 13 | .modal-backdrop(); 14 | } 15 | -------------------------------------------------------------------------------- /src/core/components/page/page.d.ts: -------------------------------------------------------------------------------- 1 | import Framework7, { 2 | CSSSelector, 3 | Framework7EventsClass, 4 | Framework7Plugin, 5 | } from '../app/app-class.js'; 6 | 7 | export namespace Page { 8 | interface AppMethods {} 9 | interface AppParams {} 10 | interface AppEvents {} 11 | } 12 | 13 | declare const PageComponent: Framework7Plugin; 14 | export default PageComponent; 15 | -------------------------------------------------------------------------------- /src/core/components/page/page.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'page', 3 | }; 4 | -------------------------------------------------------------------------------- /src/core/components/panel/panel-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/panel/panel-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | .panel-cover { 3 | overflow: hidden; 4 | &.panel-left { 5 | border-radius: 0 16px 16px 0; 6 | } 7 | &.panel-right { 8 | border-radius: 16px 0 0 16px; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/core/components/photo-browser/photo-browser-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/photo-browser/photo-browser-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/photo-browser/photo-browser-vars.less: -------------------------------------------------------------------------------- 1 | :root { 2 | --f7-photobrowser-bg-color: #fff; 3 | --f7-photobrowser-bars-bg-color: rgba(var(--f7-bars-bg-color-rgb), 0.95); 4 | --f7-photobrowser-bars-text-color: var(--f7-bars-text-color); 5 | --f7-photobrowser-bars-link-color: var(--f7-bars-link-color); 6 | --f7-photobrowser-caption-font-size: 13px; 7 | --f7-photobrowser-caption-font-weight: 500; 8 | --f7-photobrowser-caption-light-text-color: #000; 9 | --f7-photobrowser-caption-dark-text-color: #fff; 10 | --f7-photobrowser-exposed-bg-color: #000; 11 | 12 | --f7-photobrowser-dark-bg-color: #000; 13 | --f7-photobrowser-dark-bars-bg-color: rgba(27, 27, 27, 0.8); 14 | --f7-photobrowser-dark-bars-text-color: #fff; 15 | --f7-photobrowser-dark-bars-link-color: #fff; 16 | } 17 | -------------------------------------------------------------------------------- /src/core/components/picker/picker-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | .picker-center-highlight { 3 | left: 16px; 4 | right: 16px; 5 | background-color: var(--f7-picker-item-selected-bg-color); 6 | border-radius: 8px; 7 | .popover & { 8 | left: 8px; 9 | right: 8px; 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/core/components/picker/picker-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | .picker-center-highlight { 3 | left: 0; 4 | right: 0; 5 | border-top: 1px solid var(--f7-md-outline); 6 | border-bottom: 1px solid var(--f7-md-outline); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/core/components/pie-chart/pie-chart-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/pie-chart/pie-chart-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/popover/popover-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | .popover { 3 | transform: none; 4 | transition-property: opacity; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/core/components/popup/popup-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/popup/popup-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/popup/popup-vars.less: -------------------------------------------------------------------------------- 1 | :root { 2 | --f7-popup-border-radius: 0px; 3 | --f7-popup-tablet-width: 630px; 4 | --f7-popup-tablet-height: 630px; 5 | --f7-popup-push-offset: var(--f7-safe-area-top); 6 | /* 7 | --f7-popup-tablet-border-radius: var(--f7-popup-border-radius); 8 | */ 9 | } 10 | .ios-vars({ 11 | --f7-popup-tablet-border-radius: 5px; 12 | --f7-popup-transition-duration: 400ms; 13 | --f7-popup-transition-timing-function: initial; 14 | --f7-popup-push-border-radius: 10px; 15 | }); 16 | .md-vars({ 17 | --f7-popup-tablet-border-radius: 28px; 18 | --f7-popup-transition-duration: 600ms; 19 | --f7-popup-transition-timing-function: cubic-bezier(0, 1, 0.2, 1); 20 | --f7-popup-push-border-radius: 28px; 21 | }); 22 | -------------------------------------------------------------------------------- /src/core/components/preloader/preloader-vars.less: -------------------------------------------------------------------------------- 1 | :root { 2 | --f7-preloader-modal-padding: 8px; 3 | --f7-preloader-modal-bg-color: rgba(0, 0, 0, 0.8); 4 | } 5 | .ios-vars({ 6 | --f7-preloader-color: #6c6c6c; 7 | --f7-preloader-size: 20px; 8 | --f7-preloader-modal-preloader-size: 34px; 9 | --f7-preloader-modal-border-radius: 5px; 10 | }); 11 | .md-vars({ 12 | --f7-preloader-color: #757575; 13 | --f7-preloader-size: 32px; 14 | --f7-preloader-modal-preloader-size: 32px; 15 | --f7-preloader-modal-border-radius: 4px; 16 | }); 17 | -------------------------------------------------------------------------------- /src/core/components/progressbar/progressbar-vars.less: -------------------------------------------------------------------------------- 1 | :root { 2 | /* 3 | --f7-progressbar-progress-color: var(--f7-theme-color); 4 | */ 5 | } 6 | .ios-vars({ 7 | --f7-progressbar-height: 4px; 8 | --f7-progressbar-border-radius: 4px; 9 | .light-vars({ 10 | --f7-progressbar-bg-color: rgba(0,0,0,0.3); 11 | }); 12 | .dark-vars({ 13 | --f7-progressbar-bg-color: rgba(255,255,255,0.3); 14 | }); 15 | }); 16 | .md-vars({ 17 | --f7-progressbar-height: 4px; 18 | --f7-progressbar-border-radius: 0px; 19 | }); 20 | .md-color-vars({ 21 | --f7-progressbar-bg-color: rgba(var(--f7-theme-color-rgb), 0.5); 22 | }); 23 | -------------------------------------------------------------------------------- /src/core/components/pull-to-refresh/pull-to-refresh-vars.less: -------------------------------------------------------------------------------- 1 | :root { 2 | } 3 | .ios-vars({ 4 | --f7-ptr-preloader-size: 28px; 5 | --f7-ptr-size: 44px; 6 | }); 7 | .md-vars({ 8 | --f7-ptr-preloader-size: 22px; 9 | --f7-ptr-size: 40px; 10 | }); 11 | .md-color-vars({ 12 | --f7-ptr-preloader-bg-color: var(--f7-md-surface-1); 13 | --f7-ptr-preloader-color: var(--f7-md-primary); 14 | }); 15 | -------------------------------------------------------------------------------- /src/core/components/radio/radio-vars.less: -------------------------------------------------------------------------------- 1 | :root { 2 | /* 3 | --f7-radio-active-color: var(--f7-theme-color); 4 | */ 5 | --f7-radio-border-radius: 50%; 6 | --f7-radio-extra-margin: 0px; 7 | .dark-vars({ 8 | --f7-radio-inactive-color: rgba(255, 255, 255, 0.3); 9 | }); 10 | } 11 | .ios-vars({ 12 | --f7-radio-size: 22px; 13 | --f7-radio-border-width: 1px; 14 | .light-vars({ 15 | --f7-radio-inactive-color: #c7c7cc; 16 | }) 17 | }); 18 | .md-vars({ 19 | --f7-radio-size: 20px; 20 | --f7-radio-border-width: 2px; 21 | .light-vars({ 22 | --f7-radio-inactive-color: #6d6d6d; 23 | }) 24 | }); 25 | -------------------------------------------------------------------------------- /src/core/components/radio/radio.d.ts: -------------------------------------------------------------------------------- 1 | import Framework7, { 2 | CSSSelector, 3 | Framework7EventsClass, 4 | Framework7Plugin, 5 | } from '../app/app-class.js'; 6 | 7 | export namespace Radio { 8 | interface AppMethods {} 9 | interface AppParams {} 10 | interface AppEvents {} 11 | } 12 | 13 | declare const RadioComponent: Framework7Plugin; 14 | export default RadioComponent; 15 | -------------------------------------------------------------------------------- /src/core/components/radio/radio.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'radio', 3 | }; 4 | -------------------------------------------------------------------------------- /src/core/components/range/range-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | .range-knob-label { 3 | margin-bottom: 6px; 4 | transform: translateX(-50%) translateY(100%) scale(0); 5 | } 6 | .range-knob-active-state .range-knob-label { 7 | transform: translateX(-50%) translateY(0%) scale(1); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/core/components/sheet/sheet-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/sheet/sheet-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | .sheet-modal { 3 | .toolbar { 4 | a.link:not(.tab-link) { 5 | flex-shrink: 0; 6 | } 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/core/components/skeleton/skeleton-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/skeleton/skeleton-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/skeleton/skeleton-vars.less: -------------------------------------------------------------------------------- 1 | :root { 2 | --skeleton-color: #ccc; 3 | --skeleton-icon-color: rgba(0, 0, 0, 0.25); 4 | } 5 | .dark { 6 | --skeleton-color: #515151; 7 | --skeleton-icon-color: rgba(255, 255, 255, 0.25); 8 | } 9 | -------------------------------------------------------------------------------- /src/core/components/skeleton/skeleton.d.ts: -------------------------------------------------------------------------------- 1 | import Framework7, { 2 | CSSSelector, 3 | Framework7EventsClass, 4 | Framework7Plugin, 5 | } from '../app/app-class.js'; 6 | 7 | export namespace Skeleton { 8 | interface AppMethods {} 9 | interface AppParams {} 10 | interface AppEvents {} 11 | } 12 | 13 | declare const SkeletonComponent: Framework7Plugin; 14 | export default SkeletonComponent; 15 | -------------------------------------------------------------------------------- /src/core/components/skeleton/skeleton.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'skeleton', 3 | }; 4 | -------------------------------------------------------------------------------- /src/core/components/skeleton/skeleton.less: -------------------------------------------------------------------------------- 1 | /* === Skeleton === */ 2 | @import (inline) 'skeleton-elements/css/skeleton-elements.css'; 3 | 4 | @import './skeleton-vars.less'; 5 | 6 | .if-ios-theme({ 7 | @import './skeleton-ios.less'; 8 | }); 9 | .if-md-theme({ 10 | @import './skeleton-md.less'; 11 | }); 12 | -------------------------------------------------------------------------------- /src/core/components/smart-select/smart-select-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/smart-select/smart-select-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/smart-select/smart-select-vars.less: -------------------------------------------------------------------------------- 1 | :root { 2 | /* 3 | --f7-smart-select-sheet-bg: var(--f7-list-bg-color); 4 | --f7-smart-select-sheet-toolbar-border-color: var(--f7-bars-border-color); 5 | */ 6 | } 7 | -------------------------------------------------------------------------------- /src/core/components/sortable/sortable-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | .sortable-handler { 3 | &:after { 4 | content: 'sort_ios'; 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/core/components/sortable/sortable-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | .sortable-handler { 3 | &:after { 4 | content: 'sort_md'; 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/core/components/sortable/sortable-vars.less: -------------------------------------------------------------------------------- 1 | :root { 2 | } 3 | .ios-vars({ 4 | --f7-sortable-handler-width: 36px; 5 | --f7-sortable-sorting-item-box-shadow: 0px 2px 8px rgba(0,0,0,0.6); 6 | .light-vars({ 7 | --f7-sortable-handler-color: rgba(0,0,0,0.22); 8 | --f7-sortable-sorting-item-bg-color: rgba(255,255,255,0.8); 9 | }); 10 | .dark-vars({ 11 | --f7-sortable-sorting-item-bg-color: rgba(50, 50, 50, 0.8); 12 | --f7-sortable-handler-color: rgba(255,255,255,0.55); 13 | }); 14 | }); 15 | .md-vars({ 16 | --f7-sortable-handler-width: 42px; 17 | --f7-sortable-sorting-item-box-shadow: none; 18 | }); 19 | .md-color-vars({ 20 | --f7-sortable-handler-color: var(--f7-md-on-surface-variant); 21 | --f7-sortable-sorting-item-bg-color: var(--f7-md-surface-3); 22 | }); 23 | -------------------------------------------------------------------------------- /src/core/components/statusbar/statusbar-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/statusbar/statusbar-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/statusbar/statusbar.less: -------------------------------------------------------------------------------- 1 | /* === Statusbar === */ 2 | .if-ios-theme({ 3 | @import './statusbar-ios.less'; 4 | }); 5 | .if-md-theme({ 6 | @import './statusbar-md.less'; 7 | }); 8 | -------------------------------------------------------------------------------- /src/core/components/stepper/stepper-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | .stepper-button, 3 | .stepper-button-minus, 4 | .stepper-button-plus { 5 | transition-duration: 300ms; 6 | transform: translate3d(0, 0, 0); 7 | overflow: hidden; 8 | } 9 | .stepper-fill, 10 | .stepper-fill-md { 11 | --f7-stepper-button-pressed-bg-color: var( 12 | --f7-stepper-fill-button-bg-color, 13 | var(--f7-theme-color) 14 | ); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/core/components/subnavbar/subnavbar.d.ts: -------------------------------------------------------------------------------- 1 | import { Framework7Plugin } from '../app/app-class.js'; 2 | 3 | export namespace Subnavbar { 4 | interface AppMethods {} 5 | interface AppParams {} 6 | interface AppEvents {} 7 | } 8 | 9 | declare const SubnavbarComponent: Framework7Plugin; 10 | 11 | export default SubnavbarComponent; 12 | -------------------------------------------------------------------------------- /src/core/components/subnavbar/subnavbar.js: -------------------------------------------------------------------------------- 1 | import $ from '../../shared/dom7.js'; 2 | 3 | export default { 4 | name: 'subnavbar', 5 | on: { 6 | pageInit(page) { 7 | if (page.$navbarEl && page.$navbarEl.length && page.$navbarEl.find('.subnavbar').length) { 8 | page.$el.addClass('page-with-subnavbar'); 9 | } 10 | const $innerSubnavbars = page.$el.find('.subnavbar').filter((subnavbarEl) => { 11 | return $(subnavbarEl).parents('.page')[0] === page.$el[0]; 12 | }); 13 | if ($innerSubnavbars.length) { 14 | page.$el.addClass('page-with-subnavbar'); 15 | } 16 | }, 17 | }, 18 | }; 19 | -------------------------------------------------------------------------------- /src/core/components/swipeout/swipeout-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/swipeout/swipeout-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/swipeout/swipeout-vars.less: -------------------------------------------------------------------------------- 1 | :root { 2 | --f7-swipeout-delete-button-bg-color: #ff3b30; 3 | --f7-swipeout-button-text-color: #fff; 4 | --f7-swipeout-button-padding-vertical: 0px; 5 | .light-vars({ 6 | --f7-swipeout-button-bg-color: rgba(0,0,0,0.22); 7 | }); 8 | .dark-vars({ 9 | --f7-swipeout-button-bg-color: rgba(255,255,255,0.55); 10 | }); 11 | } 12 | .ios-vars({ 13 | --f7-swipeout-button-padding-horizontal: 30px; 14 | --f7-swipeout-button-font-size: inherit; 15 | --f7-swipeout-button-font-weight: inherit; 16 | }); 17 | .md-vars({ 18 | --f7-swipeout-button-padding-horizontal: 24px; 19 | --f7-swipeout-button-font-size: 14px; 20 | --f7-swipeout-button-font-weight: 500; 21 | .dark-vars({ 22 | --f7-swipeout-button-text-color: #000; 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /src/core/components/swiper/swiper-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/swiper/swiper-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/swiper/swiper.less: -------------------------------------------------------------------------------- 1 | /* === Swiper === */ 2 | @import (inline) 'swiper/swiper-bundle.css'; 3 | 4 | .if-ios-theme({@import './swiper-ios.less' ;}); 5 | .if-md-theme({@import './swiper-md.less' ;}); 6 | -------------------------------------------------------------------------------- /src/core/components/tabs/tabs-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/tabs/tabs-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/text-editor/text-editor-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | button.text-editor-button { 3 | transition: opacity 300ms; 4 | &.active-state { 5 | opacity: 0.3; 6 | transition-duration: 0ms; 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/core/components/text-editor/text-editor-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | button.text-editor-button { 3 | --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.25); 4 | } 5 | .text-editor-keyboard-toolbar { 6 | .toolbar-inner { 7 | padding-left: 8px; 8 | padding-right: 8px; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/core/components/timeline/timeline-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | .block-strong .timeline-item-inner { 3 | border-radius: 3px; 4 | border: 1px solid rgba(0, 0, 0, 0.1); 5 | } 6 | .timeline-year-title { 7 | span { 8 | margin-top: 3px; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/core/components/timeline/timeline-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | .timeline-year-title { 3 | span { 4 | margin-top: 2px; 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/core/components/timeline/timeline.d.ts: -------------------------------------------------------------------------------- 1 | import Framework7, { 2 | CSSSelector, 3 | Framework7EventsClass, 4 | Framework7Plugin, 5 | } from '../app/app-class.js'; 6 | 7 | export namespace Timeline { 8 | interface AppMethods {} 9 | interface AppParams {} 10 | interface AppEvents {} 11 | } 12 | 13 | declare const TimelineComponent: Framework7Plugin; 14 | export default TimelineComponent; 15 | -------------------------------------------------------------------------------- /src/core/components/timeline/timeline.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'timeline', 3 | }; 4 | -------------------------------------------------------------------------------- /src/core/components/toast/toast-vars.less: -------------------------------------------------------------------------------- 1 | :root { 2 | --f7-toast-font-size: 14px; 3 | --f7-toast-icon-size: 48px; 4 | --f7-toast-max-width: 568px; 5 | } 6 | .ios-vars({ 7 | --f7-toast-text-color: #fff; 8 | --f7-toast-bg-color: rgba(0,0,0,0.75); 9 | --f7-toast-bg-color-rgb: 0, 0, 0; 10 | --f7-toast-padding-horizontal: 16px; 11 | --f7-toast-padding-vertical: 12px; 12 | --f7-toast-border-radius: 8px; 13 | --f7-toast-button-min-width: 64px; 14 | }); 15 | .md-vars({ 16 | --f7-toast-padding-horizontal: 24px; 17 | --f7-toast-padding-vertical: 14px; 18 | --f7-toast-border-radius: 16px; 19 | --f7-toast-button-min-width: 64px; 20 | }); 21 | .md-color-vars({ 22 | --f7-toast-text-color: var(--f7-md-on-surface); 23 | --f7-toast-bg-color: var(--f7-md-surface-5); 24 | }); 25 | -------------------------------------------------------------------------------- /src/core/components/tooltip/tooltip-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/tooltip/tooltip-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/tooltip/tooltip-vars.less: -------------------------------------------------------------------------------- 1 | :root { 2 | --f7-tooltip-padding: 8px 16px; 3 | --f7-tooltip-font-size: 14px; 4 | --f7-tooltip-font-weight: 500; 5 | --f7-tooltip-desktop-padding: 6px 8px; 6 | --f7-tooltip-desktop-font-size: 12px; 7 | } 8 | .ios-vars({ 9 | --f7-tooltip-border-radius: 4px; 10 | --f7-tooltip-bg-color: rgba(0, 0, 0, 0.87); 11 | --f7-tooltip-text-color: #fff; 12 | }); 13 | .md-vars({ 14 | --f7-tooltip-border-radius: 8px; 15 | }); 16 | .md-color-vars({ 17 | --f7-tooltip-bg-color: var(--f7-md-secondary); 18 | --f7-tooltip-text-color: var(--f7-md-on-secondary); 19 | }); 20 | -------------------------------------------------------------------------------- /src/core/components/touch-ripple/touch-ripple-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/touch-ripple/touch-ripple-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/touch-ripple/touch-ripple-vars.less: -------------------------------------------------------------------------------- 1 | :root { 2 | --f7-touch-ripple-black: rgba(0, 0, 0, 0.1); 3 | --f7-touch-ripple-white: rgba(255, 255, 255, 0.15); 4 | --f7-touch-ripple-color: var(--f7-touch-ripple-black); 5 | } 6 | .dark { 7 | --f7-touch-ripple-color: var(--f7-touch-ripple-white); 8 | } 9 | -------------------------------------------------------------------------------- /src/core/components/touch-ripple/touch-ripple.d.ts: -------------------------------------------------------------------------------- 1 | import { Dom7Array } from 'dom7'; 2 | import Framework7, { 3 | CSSSelector, 4 | Framework7EventsClass, 5 | Framework7Plugin, 6 | } from '../app/app-class.js'; 7 | 8 | export namespace TouchRipple { 9 | interface TouchRipple { 10 | $rippleWaveEl: Dom7Array; 11 | rippleTransform: string; 12 | removing: boolean; 13 | remove(): void; 14 | } 15 | interface AppMethods { 16 | touchRipple: { 17 | create($el: Dom7Array, x: number, y: number): TouchRipple; 18 | }; 19 | } 20 | interface AppParams {} 21 | interface AppEvents {} 22 | } 23 | 24 | declare const TouchRippleComponent: Framework7Plugin; 25 | export default TouchRippleComponent; 26 | -------------------------------------------------------------------------------- /src/core/components/touch-ripple/touch-ripple.js: -------------------------------------------------------------------------------- 1 | import TouchRipple from './touch-ripple-class.js'; 2 | 3 | export default { 4 | name: 'touch-ripple', 5 | static: { 6 | TouchRipple, 7 | }, 8 | create() { 9 | const app = this; 10 | app.touchRipple = { 11 | create(...args) { 12 | return new TouchRipple(...args); 13 | }, 14 | }; 15 | }, 16 | }; 17 | -------------------------------------------------------------------------------- /src/core/components/treeview/treeview-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/treeview/treeview-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/typography/typography-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/typography/typography-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/typography/typography-vars.less: -------------------------------------------------------------------------------- 1 | :root { 2 | --f7-typography-padding: 16px; 3 | --f7-typography-margin: 16px; 4 | } 5 | -------------------------------------------------------------------------------- /src/core/components/typography/typography.d.ts: -------------------------------------------------------------------------------- 1 | import Framework7, { 2 | CSSSelector, 3 | Framework7EventsClass, 4 | Framework7Plugin, 5 | } from '../app/app-class.js'; 6 | 7 | export namespace Typography { 8 | interface AppMethods {} 9 | interface AppParams {} 10 | interface AppEvents {} 11 | } 12 | 13 | declare const TypographyComponent: Framework7Plugin; 14 | export default TypographyComponent; 15 | -------------------------------------------------------------------------------- /src/core/components/typography/typography.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'typography', 3 | }; 4 | -------------------------------------------------------------------------------- /src/core/components/view/view-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/view/view-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/view/view.less: -------------------------------------------------------------------------------- 1 | /* === Views === */ 2 | .views, 3 | .view { 4 | position: relative; 5 | height: 100%; 6 | z-index: 5000; 7 | overflow: hidden; 8 | box-sizing: border-box; 9 | } 10 | .framework7-root { 11 | > .view, 12 | > .views { 13 | height: 100%; 14 | } 15 | } 16 | .view-resize-handler { 17 | width: 6px; 18 | height: 100%; 19 | position: absolute; 20 | left: var(--f7-page-master-width); 21 | margin-left: -3px; 22 | top: 0; 23 | cursor: col-resize; 24 | z-index: 1000; 25 | display: none; 26 | .view-master-detail & { 27 | display: block; 28 | } 29 | } 30 | .if-ios-theme({ 31 | @import './view-ios.less'; 32 | }); 33 | .if-md-theme({ 34 | @import './view-md.less'; 35 | }); 36 | -------------------------------------------------------------------------------- /src/core/components/virtual-list/virtual-list-ios.less: -------------------------------------------------------------------------------- 1 | .ios { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/virtual-list/virtual-list-md.less: -------------------------------------------------------------------------------- 1 | .md { 2 | } 3 | -------------------------------------------------------------------------------- /src/core/components/virtual-list/virtual-list.js: -------------------------------------------------------------------------------- 1 | import VirtualList from './virtual-list-class.js'; 2 | import ConstructorMethods from '../../shared/constructor-methods.js'; 3 | 4 | export default { 5 | name: 'virtualList', 6 | static: { 7 | VirtualList, 8 | }, 9 | create() { 10 | const app = this; 11 | app.virtualList = ConstructorMethods({ 12 | defaultSelector: '.virtual-list', 13 | constructor: VirtualList, 14 | app, 15 | domProp: 'f7VirtualList', 16 | }); 17 | }, 18 | }; 19 | -------------------------------------------------------------------------------- /src/core/components/virtual-list/virtual-list.less: -------------------------------------------------------------------------------- 1 | /* === Virtual List === */ 2 | .if-ios-theme({ 3 | @import './virtual-list-ios.less'; 4 | }); 5 | .if-md-theme({ 6 | @import './virtual-list-md.less'; 7 | }); 8 | -------------------------------------------------------------------------------- /src/core/framework7.d.ts: -------------------------------------------------------------------------------- 1 | import Dom7 from 'dom7'; 2 | // IMPORT_BASE 3 | 4 | import { getSupport } from './shared/get-support.js'; 5 | import { getDevice } from './shared/get-device.js'; 6 | import { Utils } from './shared/utils.js'; 7 | 8 | // IMPORT_MODULES 9 | import { ComponentFunction as Component } from './modules/component/component.js'; 10 | import { StoreObject as Store, StoreParameters, createStore } from './modules/store/store.js'; 11 | 12 | // IMPORT_COMPONENTS 13 | 14 | declare module './components/app/app-class.js' { 15 | // INSTALL 16 | } 17 | 18 | declare const utils: Utils; 19 | 20 | export { getSupport, getDevice, utils, Dom7, Component, Store, StoreParameters, createStore }; 21 | export default Framework7; 22 | -------------------------------------------------------------------------------- /src/core/icons/font/framework7-core-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/src/core/icons/font/framework7-core-icons.ttf -------------------------------------------------------------------------------- /src/core/icons/font/framework7-core-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/src/core/icons/font/framework7-core-icons.woff -------------------------------------------------------------------------------- /src/core/icons/font/framework7-core-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/src/core/icons/font/framework7-core-icons.woff2 -------------------------------------------------------------------------------- /src/core/icons/svg/arrow_bottom_md.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | arrow_bottom_md 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/core/icons/svg/arrow_left_md.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | arrow_left_md 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/core/icons/svg/arrow_right_md.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | arrow_right_md 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/core/icons/svg/checkbox_aurora.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/core/icons/svg/checkbox_ios.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/core/icons/svg/checkbox_md.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | checkbox_md 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/core/icons/svg/chevron_down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | chevron_down 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/core/icons/svg/chevron_down_aurora.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/core/icons/svg/chevron_left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | chevron_left 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/core/icons/svg/chevron_left_aurora.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/core/icons/svg/chevron_left_md.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | chevron_left_md 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/core/icons/svg/chevron_right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | chevron_right 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/core/icons/svg/chevron_right_aurora.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/core/icons/svg/chevron_right_md.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | chevron_right_md 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/core/icons/svg/chevron_up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | chevron_up 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/core/icons/svg/chevron_up_aurora.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/core/icons/svg/delete_md.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | delete_md 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/core/icons/svg/delete_round_md.svg: -------------------------------------------------------------------------------- 1 | 8 | 14 | 15 | -------------------------------------------------------------------------------- /src/core/icons/svg/ptr_arrow_ios.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/core/icons/svg/radio_ios.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/core/icons/svg/search_aurora.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/core/icons/svg/sort_md.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | sort_md 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/core/less/plugin.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | 3 | function base64Encode(file) { 4 | // read binary data 5 | const bitmap = fs.readFileSync(file); 6 | // convert binary data to base64 encoded string 7 | return Buffer.from(bitmap).toString('base64'); 8 | } 9 | 10 | module.exports = { 11 | install(less, pluginManager, functions) { 12 | functions.add('framework7_coreIconsFont', () => { 13 | const iconsFontBase64 = base64Encode('./src/core/icons/font/framework7-core-icons.woff'); 14 | return iconsFontBase64; 15 | }); 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /src/core/less/vars.less: -------------------------------------------------------------------------------- 1 | @breakpoints: { 2 | xsmall: 480px; 3 | small: 568px; 4 | medium: 768px; 5 | large: 1024px; 6 | xlarge: 1200px; 7 | }; 8 | -------------------------------------------------------------------------------- /src/core/modules/clicks/clicks.d.ts: -------------------------------------------------------------------------------- 1 | import Framework7, { Framework7Plugin } from '../../components/app/app-class'; 2 | 3 | export namespace Clicks { 4 | interface AppMethods {} 5 | interface AppParams { 6 | /** Object with clicks-module related parameters */ 7 | clicks?: 8 | | { 9 | /** CSS selector for links that should be treated as external and shouldn't be handled by Framework7. For example such '.external' value will match to links like (with class "external") (default '.external') */ 10 | externalLinks?: string; 11 | } 12 | | undefined; 13 | } 14 | interface AppEvents {} 15 | } 16 | 17 | declare const ClicksModule: Framework7Plugin; 18 | 19 | export default ClicksModule; 20 | -------------------------------------------------------------------------------- /src/core/modules/component/$h.js: -------------------------------------------------------------------------------- 1 | import htm from 'htm'; 2 | import { flattenArray } from '../../shared/utils.js'; 3 | 4 | const ignoreChildren = [false, null, '', undefined]; 5 | 6 | const h = (type, props, ...children) => { 7 | return { 8 | type, 9 | props: props || {}, 10 | children: flattenArray(children.filter((child) => ignoreChildren.indexOf(child) < 0)), 11 | }; 12 | }; 13 | 14 | const $h = htm.bind(h); 15 | 16 | export default $h; 17 | -------------------------------------------------------------------------------- /src/core/modules/component/$jsx.js: -------------------------------------------------------------------------------- 1 | import { flattenArray } from '../../shared/utils.js'; 2 | 3 | const ignoreChildren = [false, null, '', undefined]; 4 | 5 | const $jsx = (type, props, ...children) => { 6 | const flatChildren = flattenArray( 7 | (children || []).filter((child) => ignoreChildren.indexOf(child) < 0), 8 | ); 9 | if (type === 'Fragment') { 10 | return flatChildren; 11 | } 12 | return { 13 | type, 14 | props: props || {}, 15 | children: flatChildren, 16 | }; 17 | }; 18 | 19 | export default $jsx; 20 | -------------------------------------------------------------------------------- /src/core/modules/component/custom-components.js: -------------------------------------------------------------------------------- 1 | export default {}; 2 | -------------------------------------------------------------------------------- /src/core/modules/component/patch.js: -------------------------------------------------------------------------------- 1 | /* eslint import/no-named-as-default: off */ 2 | import { init } from './snabbdom/snabbdom.js'; 3 | import attributesModule from './snabbdom/modules/attributes.js'; 4 | import propsModule from './snabbdom/modules/props.js'; 5 | import styleModule from './snabbdom/modules/style.js'; 6 | import eventListenersModule from './eventslisteners.js'; 7 | 8 | const patch = init([attributesModule, propsModule, styleModule, eventListenersModule]); 9 | 10 | export default patch; 11 | -------------------------------------------------------------------------------- /src/core/modules/component/snabbdom/h.d.ts: -------------------------------------------------------------------------------- 1 | import { VNode, VNodeData } from './vnode.js'; 2 | export declare type VNodes = Array; 3 | export declare type VNodesSparse = VNode | Array; 4 | export declare function h (sel: string): VNode; 5 | export declare function h (sel: string, data: VNodeData): VNode; 6 | export declare function h (sel: string, text: string): VNode; 7 | export declare function h (sel: string, children: VNodesSparse): VNode; 8 | export declare function h (sel: string, data: VNodeData, text: string): VNode; 9 | export declare function h (sel: string, data: VNodeData, children: VNodesSparse): VNode; 10 | export default h; 11 | -------------------------------------------------------------------------------- /src/core/modules/component/snabbdom/helpers/attachto.d.ts: -------------------------------------------------------------------------------- 1 | import { VNode } from '../vnode.js'; 2 | export interface AttachData { 3 | [key: string]: any; 4 | [i: number]: any; 5 | placeholder?: any; 6 | real?: Node; 7 | } 8 | export declare function attachTo (target: Element, vnode: VNode): VNode; 9 | export default attachTo; 10 | -------------------------------------------------------------------------------- /src/core/modules/component/snabbdom/hooks.js: -------------------------------------------------------------------------------- 1 | //# sourceMappingURL=hooks.js.map -------------------------------------------------------------------------------- /src/core/modules/component/snabbdom/hooks.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"hooks.js","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /src/core/modules/component/snabbdom/is.d.ts: -------------------------------------------------------------------------------- 1 | export declare const array: (arg: any) => arg is any[]; 2 | export declare function primitive(s: any): s is (string | number); 3 | -------------------------------------------------------------------------------- /src/core/modules/component/snabbdom/is.js: -------------------------------------------------------------------------------- 1 | export var array = Array.isArray; 2 | export function primitive(s) { 3 | return typeof s === 'string' || typeof s === 'number'; 4 | } 5 | //# sourceMappingURL=is.js.map -------------------------------------------------------------------------------- /src/core/modules/component/snabbdom/is.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"is.js","sourceRoot":"","sources":["../src/is.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC;AACnC,MAAM,oBAAoB,CAAM;IAC9B,MAAM,CAAC,OAAO,CAAC,KAAK,QAAQ,IAAI,OAAO,CAAC,KAAK,QAAQ,CAAC;AACxD,CAAC"} -------------------------------------------------------------------------------- /src/core/modules/component/snabbdom/modules/attributes.d.ts: -------------------------------------------------------------------------------- 1 | import { Module } from './module.js'; 2 | export declare type Attrs = Record; 3 | export declare const attributesModule: Module; 4 | export default attributesModule; 5 | -------------------------------------------------------------------------------- /src/core/modules/component/snabbdom/modules/class.d.ts: -------------------------------------------------------------------------------- 1 | import { Module } from './module.js'; 2 | export declare type Classes = Record; 3 | export declare const classModule: Module; 4 | export default classModule; 5 | -------------------------------------------------------------------------------- /src/core/modules/component/snabbdom/modules/class.js: -------------------------------------------------------------------------------- 1 | function updateClass(oldVnode, vnode) { 2 | var cur, name, elm = vnode.elm, oldClass = oldVnode.data.class, klass = vnode.data.class; 3 | if (!oldClass && !klass) 4 | return; 5 | if (oldClass === klass) 6 | return; 7 | oldClass = oldClass || {}; 8 | klass = klass || {}; 9 | for (name in oldClass) { 10 | if (!klass[name]) { 11 | elm.classList.remove(name); 12 | } 13 | } 14 | for (name in klass) { 15 | cur = klass[name]; 16 | if (cur !== oldClass[name]) { 17 | elm.classList[cur ? 'add' : 'remove'](name); 18 | } 19 | } 20 | } 21 | export var classModule = { create: updateClass, update: updateClass }; 22 | export default classModule; 23 | //# sourceMappingURL=class.js.map -------------------------------------------------------------------------------- /src/core/modules/component/snabbdom/modules/dataset.d.ts: -------------------------------------------------------------------------------- 1 | import { Module } from './module.js'; 2 | export declare type Dataset = Record; 3 | export declare const datasetModule: Module; 4 | export default datasetModule; 5 | -------------------------------------------------------------------------------- /src/core/modules/component/snabbdom/modules/eventlisteners.d.ts: -------------------------------------------------------------------------------- 1 | import { Module } from './module.js'; 2 | export declare type On = { 3 | [N in keyof HTMLElementEventMap]?: (ev: HTMLElementEventMap[N]) => void; 4 | } & { 5 | [event: string]: EventListener; 6 | }; 7 | export declare const eventListenersModule: Module; 8 | export default eventListenersModule; 9 | -------------------------------------------------------------------------------- /src/core/modules/component/snabbdom/modules/hero.d.ts: -------------------------------------------------------------------------------- 1 | import { Module } from './module.js'; 2 | export declare type Hero = { 3 | id: string; 4 | }; 5 | export declare const heroModule: Module; 6 | export default heroModule; 7 | -------------------------------------------------------------------------------- /src/core/modules/component/snabbdom/modules/module.d.ts: -------------------------------------------------------------------------------- 1 | import { PreHook, CreateHook, UpdateHook, DestroyHook, RemoveHook, PostHook } from '../hooks.js'; 2 | export interface Module { 3 | pre: PreHook; 4 | create: CreateHook; 5 | update: UpdateHook; 6 | destroy: DestroyHook; 7 | remove: RemoveHook; 8 | post: PostHook; 9 | } 10 | -------------------------------------------------------------------------------- /src/core/modules/component/snabbdom/modules/module.js: -------------------------------------------------------------------------------- 1 | //# sourceMappingURL=module.js.map -------------------------------------------------------------------------------- /src/core/modules/component/snabbdom/modules/module.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"module.js","sourceRoot":"","sources":["../../src/modules/module.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /src/core/modules/component/snabbdom/modules/props.d.ts: -------------------------------------------------------------------------------- 1 | import { Module } from './module.js'; 2 | export declare type Props = Record; 3 | export declare const propsModule: Module; 4 | export default propsModule; 5 | -------------------------------------------------------------------------------- /src/core/modules/component/snabbdom/modules/style.d.ts: -------------------------------------------------------------------------------- 1 | import { Module } from './module.js'; 2 | export declare type VNodeStyle = Record & { 3 | delayed?: Record; 4 | remove?: Record; 5 | }; 6 | export declare const styleModule: Module; 7 | export default styleModule; 8 | -------------------------------------------------------------------------------- /src/core/modules/component/snabbdom/snabbdom.bundle.d.ts: -------------------------------------------------------------------------------- 1 | export declare const snabbdomBundle: { 2 | patch: (oldVNode: any, vnode: any) => any; 3 | h: any; 4 | }; 5 | export default snabbdomBundle; 6 | -------------------------------------------------------------------------------- /src/core/modules/component/snabbdom/snabbdom.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"snabbdom.bundle.js","sourceRoot":"","sources":["../src/snabbdom.bundle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,YAAY,CAAC;AAChC,OAAO,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC,CAAC,yCAAyC;AAChG,OAAO,EAAC,WAAW,EAAC,MAAM,iBAAiB,CAAC,CAAC,kCAAkC;AAC/E,OAAO,EAAC,WAAW,EAAC,MAAM,iBAAiB,CAAC,CAAC,yCAAyC;AACtF,OAAO,EAAC,WAAW,EAAC,MAAM,iBAAiB,CAAC,CAAC,0DAA0D;AACvG,OAAO,EAAC,oBAAoB,EAAC,MAAM,0BAA0B,CAAC,CAAC,2BAA2B;AAC1F,OAAO,EAAC,CAAC,EAAC,MAAM,KAAK,CAAC,CAAC,sCAAsC;AAC7D,IAAI,KAAK,GAAG,IAAI,CAAC;IACf,gBAAgB;IAChB,WAAW;IACX,WAAW;IACX,WAAW;IACX,oBAAoB;CACrB,CAAuC,CAAC;AACzC,MAAM,CAAC,IAAM,cAAc,GAAG,EAAE,KAAK,OAAA,EAAE,CAAC,EAAE,CAAQ,EAAE,CAAC;AACrD,eAAe,cAAc,CAAC"} -------------------------------------------------------------------------------- /src/core/modules/component/snabbdom/snabbdom.d.ts: -------------------------------------------------------------------------------- 1 | import { Module } from './modules/module.js'; 2 | import { VNode } from './vnode.js'; 3 | import { DOMAPI } from './htmldomapi.js'; 4 | export { h } from './h.js'; 5 | export { thunk } from './thunk.js'; 6 | export declare function init (modules: Array>, domApi?: DOMAPI): (oldVnode: Element | VNode, vnode: VNode) => VNode; 7 | -------------------------------------------------------------------------------- /src/core/modules/component/snabbdom/thunk.d.ts: -------------------------------------------------------------------------------- 1 | import { VNode, VNodeData } from './vnode.js'; 2 | export interface ThunkData extends VNodeData { 3 | fn: () => VNode; 4 | args: Array; 5 | } 6 | export interface Thunk extends VNode { 7 | data: ThunkData; 8 | } 9 | export interface ThunkFn { 10 | (sel: string, fn: Function, args: Array): Thunk; 11 | (sel: string, key: any, fn: Function, args: Array): Thunk; 12 | } 13 | export declare const thunk: ThunkFn; 14 | export default thunk; 15 | -------------------------------------------------------------------------------- /src/core/modules/component/snabbdom/tovnode.d.ts: -------------------------------------------------------------------------------- 1 | import { VNode } from './vnode.js'; 2 | import { DOMAPI } from './htmldomapi.js'; 3 | export declare function toVNode (node: Node, domApi?: DOMAPI): VNode; 4 | export default toVNode; 5 | -------------------------------------------------------------------------------- /src/core/modules/component/snabbdom/vnode.js: -------------------------------------------------------------------------------- 1 | export function vnode(sel, data, children, text, elm) { 2 | var key = data === undefined ? undefined : data.key; 3 | return { sel: sel, data: data, children: children, 4 | text: text, elm: elm, key: key }; 5 | } 6 | export default vnode; 7 | //# sourceMappingURL=vnode.js.map -------------------------------------------------------------------------------- /src/core/modules/component/snabbdom/vnode.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"vnode.js","sourceRoot":"","sources":["../src/vnode.ts"],"names":[],"mappings":"AAsCA,MAAM,gBAAgB,GAAuB,EACvB,IAAqB,EACrB,QAA2C,EAC3C,IAAwB,EACxB,GAA+B;IACnD,IAAI,GAAG,GAAG,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;IACpD,MAAM,CAAC,EAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ;QACxC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAC,CAAC;AAC1C,CAAC;AAED,eAAe,KAAK,CAAC"} -------------------------------------------------------------------------------- /src/core/modules/device/device.d.ts: -------------------------------------------------------------------------------- 1 | import { Device } from '../../shared/get-device.js'; 2 | import Framework7, { Framework7Plugin } from '../../components/app/app-class.js'; 3 | 4 | export namespace Device { 5 | interface AppMethods { 6 | /** Object with properties about device */ 7 | device: Device; 8 | } 9 | interface AppParams {} 10 | interface AppEvents {} 11 | } 12 | declare const DeviceModule: Framework7Plugin; 13 | 14 | export default DeviceModule; 15 | -------------------------------------------------------------------------------- /src/core/modules/history/history.js: -------------------------------------------------------------------------------- 1 | import History from '../../shared/history.js'; 2 | 3 | export default { 4 | name: 'history', 5 | static: { 6 | history: History, 7 | }, 8 | on: { 9 | init() { 10 | History.init(this); 11 | }, 12 | }, 13 | }; 14 | -------------------------------------------------------------------------------- /src/core/modules/resize/resize.d.ts: -------------------------------------------------------------------------------- 1 | import Framework7, { Framework7Plugin } from '../../components/app/app-class.js'; 2 | 3 | export namespace Resize { 4 | interface AppMethods { 5 | /** App width in px */ 6 | width: number; 7 | /** App height in px */ 8 | height: number; 9 | /** App left offset in px */ 10 | left: number; 11 | /** App top offset in px */ 12 | top: number; 13 | } 14 | interface AppParams {} 15 | interface AppEvents { 16 | /** Event will be fired on app resize (window resize). */ 17 | resize: () => void; 18 | /** Event will be fired on app orientation change (window orientantion change). */ 19 | orientationchange: () => void; 20 | } 21 | } 22 | 23 | declare const ResizeModule: Framework7Plugin; 24 | 25 | export default ResizeModule; 26 | -------------------------------------------------------------------------------- /src/core/modules/router/app-router-check.js: -------------------------------------------------------------------------------- 1 | export default function appRouterCheck(router, method) { 2 | if (!router.view) { 3 | throw new Error( 4 | `Framework7: it is not allowed to use router methods on global app router. Use router methods only on related View, e.g. app.views.main.router.${method}(...)`, 5 | ); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/core/modules/router/async-component.js: -------------------------------------------------------------------------------- 1 | export default function asyncComponent(router, component, resolve, reject) { 2 | function resolvePromise(componentPromise) { 3 | componentPromise 4 | .then((c) => { 5 | // eslint-disable-next-line 6 | resolve({ component: c.default || c._default || c }); 7 | }) 8 | .catch((err) => { 9 | reject(); 10 | throw new Error(err, { cause: err }); 11 | }); 12 | } 13 | if (component instanceof Promise) { 14 | resolvePromise(component); 15 | return; 16 | } 17 | const asyncComponentResult = component.call(router); 18 | if (asyncComponentResult instanceof Promise) { 19 | resolvePromise(asyncComponentResult); 20 | } else { 21 | resolve({ component: asyncComponentResult }); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/core/modules/router/router.js: -------------------------------------------------------------------------------- 1 | import Router from './router-class.js'; 2 | 3 | export default { 4 | name: 'router', 5 | static: { 6 | Router, 7 | }, 8 | instance: { 9 | cache: { 10 | xhr: [], 11 | templates: [], 12 | components: [], 13 | }, 14 | }, 15 | create() { 16 | const instance = this; 17 | if (instance.app) { 18 | // View Router 19 | if (instance.params.router) { 20 | instance.router = new Router(instance.app, instance); 21 | } 22 | } else { 23 | // App Router 24 | instance.router = new Router(instance); 25 | } 26 | }, 27 | }; 28 | -------------------------------------------------------------------------------- /src/core/modules/store/store.js: -------------------------------------------------------------------------------- 1 | import createStore from './create-store.js'; 2 | 3 | export { createStore }; 4 | export default { 5 | name: 'store', 6 | static: { createStore }, 7 | proto: { createStore }, 8 | }; 9 | -------------------------------------------------------------------------------- /src/core/modules/support/support.d.ts: -------------------------------------------------------------------------------- 1 | import { Support } from '../../shared/get-support.js'; 2 | import Framework7, { Framework7Plugin } from '../../components/app/app-class.js'; 3 | 4 | export namespace Support { 5 | interface AppMethods { 6 | /** Object with properties about supported features */ 7 | support: Support; 8 | } 9 | interface AppParams {} 10 | interface AppEvents {} 11 | } 12 | 13 | declare const SupportModule: Framework7Plugin; 14 | 15 | export default SupportModule; 16 | -------------------------------------------------------------------------------- /src/core/modules/support/support.js: -------------------------------------------------------------------------------- 1 | import { getSupport } from '../../shared/get-support.js'; 2 | 3 | export default { 4 | name: 'support', 5 | static: { 6 | getSupport, 7 | }, 8 | }; 9 | -------------------------------------------------------------------------------- /src/core/modules/utils/utils.d.ts: -------------------------------------------------------------------------------- 1 | import { Utils } from '../../shared/utils.js'; 2 | import Framework7, { Framework7Plugin } from '../../components/app/app-class.js'; 3 | 4 | export namespace Utils { 5 | interface AppMethods { 6 | /** Object with set of helper methods */ 7 | utils: Utils; 8 | } 9 | interface AppParams {} 10 | interface AppEvents {} 11 | } 12 | 13 | declare const UtilsModule: Framework7Plugin; 14 | 15 | export default UtilsModule; 16 | -------------------------------------------------------------------------------- /src/core/modules/utils/utils.js: -------------------------------------------------------------------------------- 1 | import * as utils from '../../shared/utils.js'; 2 | 3 | export default { 4 | name: 'utils', 5 | proto: { 6 | utils, 7 | }, 8 | static: { 9 | utils, 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /src/core/shared/dom7.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line 2 | import * as methods from 'dom7'; 3 | 4 | Object.keys(methods).forEach((methodName) => { 5 | if (methodName === '$') return; 6 | methods.$.fn[methodName] = methods[methodName]; 7 | }); 8 | 9 | export default methods.$; 10 | -------------------------------------------------------------------------------- /src/core/shared/get-support.d.ts: -------------------------------------------------------------------------------- 1 | export interface Support { 2 | /** Touch events support (touchstart, touchmove, touchend) */ 3 | touch: boolean; 4 | /** Pointer events support */ 5 | pointerEvents: boolean; 6 | /** Passive event listener support */ 7 | passiveListener: boolean; 8 | /** Intersection Observer support */ 9 | intersectionObserver: boolean; 10 | } 11 | 12 | export const getSupport: () => Support; 13 | -------------------------------------------------------------------------------- /src/react/components/skeleton-avatar.jsx: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line 2 | import { SkeletonAvatar } from 'skeleton-elements/react'; 3 | 4 | export default SkeletonAvatar; 5 | -------------------------------------------------------------------------------- /src/react/components/skeleton-block.jsx: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line 2 | import { SkeletonBlock } from 'skeleton-elements/react'; 3 | 4 | export default SkeletonBlock; 5 | -------------------------------------------------------------------------------- /src/react/components/skeleton-image.jsx: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line 2 | import { SkeletonImage } from 'skeleton-elements/react'; 3 | 4 | export default SkeletonImage; 5 | -------------------------------------------------------------------------------- /src/react/components/skeleton-text.jsx: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line 2 | import { SkeletonText } from 'skeleton-elements/react'; 3 | 4 | export default SkeletonText; 5 | -------------------------------------------------------------------------------- /src/react/framework7-react.js: -------------------------------------------------------------------------------- 1 | import Framework7React from './shared/plugin.js'; 2 | import { f7, f7ready, theme } from './shared/f7.js'; 3 | import { useStore } from './shared/use-store.js'; 4 | 5 | // IMPORT_COMPONENTS 6 | 7 | // EXPORT_COMPONENTS 8 | export { f7, f7ready, theme, useStore }; 9 | export default Framework7React; 10 | -------------------------------------------------------------------------------- /src/react/shared/list-context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const ListContext = React.createContext({ 4 | listIsMedia: false, 5 | listIsSimple: false, 6 | listIsSortable: false, 7 | listIsSortableOpposite: false, 8 | }); 9 | 10 | export { ListContext }; 11 | -------------------------------------------------------------------------------- /src/react/shared/modal-state-classes.js: -------------------------------------------------------------------------------- 1 | export const modalStateClasses = ({ isOpened, isClosing } = {}) => { 2 | return { 3 | 'modal-in': isOpened.current && !isClosing.current, 4 | 'modal-out': isClosing.current, 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /src/react/shared/router-context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const RouterContext = React.createContext({ 4 | route: null, 5 | router: null, 6 | }); 7 | 8 | export { RouterContext }; 9 | -------------------------------------------------------------------------------- /src/react/shared/tabbar-context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const TabbarContext = React.createContext({ 4 | tabbarHasIcons: false, 5 | }); 6 | 7 | export { TabbarContext }; 8 | -------------------------------------------------------------------------------- /src/react/shared/tabs-swipeable-context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const TabsSwipeableContext = React.createContext(false); 4 | 5 | export { TabsSwipeableContext }; 6 | -------------------------------------------------------------------------------- /src/react/shared/use-async-component.js: -------------------------------------------------------------------------------- 1 | import React, { lazy, Suspense } from 'react'; 2 | 3 | export const useAsyncComponent = (component, props, key) => { 4 | const Component = lazy(component); 5 | return ( 6 | 7 | 8 | 9 | ); 10 | }; 11 | -------------------------------------------------------------------------------- /src/react/shared/use-isomorphic-layout-effect.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useLayoutEffect } from 'react'; 2 | 3 | function useIsomorphicLayoutEffect(callback, deps) { 4 | // eslint-disable-next-line 5 | if (typeof window === 'undefined') return useEffect(callback, deps); 6 | return useLayoutEffect(callback, deps); 7 | } 8 | 9 | export { useIsomorphicLayoutEffect }; 10 | -------------------------------------------------------------------------------- /src/react/shared/use-route-props.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | 3 | export const useRouteProps = (elRef, { routeProps } = {}) => { 4 | useEffect(() => { 5 | if (elRef.current) { 6 | elRef.current.f7RouteProps = routeProps; 7 | } 8 | return () => { 9 | if (elRef.current && elRef.current.f7RouteProps) { 10 | delete elRef.current.f7RouteProps; 11 | } 12 | }; 13 | }, [routeProps]); 14 | }; 15 | -------------------------------------------------------------------------------- /src/react/shared/use-smart-select.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | import { f7ready, f7 } from './f7.js'; 3 | import { extend } from './utils.js'; 4 | 5 | export const useSmartSelect = (smartSelect, smartSelectParams, f7SmartSelect, getEl) => { 6 | const onMount = () => { 7 | f7ready(() => { 8 | if (smartSelect) { 9 | const ssParams = extend({ el: getEl() }, smartSelectParams || {}); 10 | f7SmartSelect.current = f7.smartSelect.create(ssParams); 11 | } 12 | }); 13 | }; 14 | const onDestroy = () => { 15 | if (f7SmartSelect.current && f7SmartSelect.current.destroy) { 16 | f7SmartSelect.current.destroy(); 17 | } 18 | f7SmartSelect.current = null; 19 | }; 20 | useEffect(() => { 21 | onMount(); 22 | return onDestroy; 23 | }, []); 24 | }; 25 | -------------------------------------------------------------------------------- /src/react/shared/use-theme.js: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { f7, f7ready, theme } from './f7.js'; 3 | 4 | export const useTheme = () => { 5 | const [t, setTheme] = useState(f7 ? theme : null); 6 | if (!f7) { 7 | f7ready(() => { 8 | setTheme(theme); 9 | }); 10 | } 11 | return t; 12 | }; 13 | -------------------------------------------------------------------------------- /src/react/shared/watch-prop.js: -------------------------------------------------------------------------------- 1 | import { useRef } from 'react'; 2 | import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.js'; 3 | 4 | export const watchProp = (value, callback) => { 5 | const valueRef = useRef(value); 6 | 7 | useIsomorphicLayoutEffect(() => { 8 | if (value !== valueRef.current && callback) { 9 | callback(value, valueRef.current); 10 | } 11 | valueRef.current = value; 12 | }, [value]); 13 | }; 14 | -------------------------------------------------------------------------------- /src/svelte/components/accordion-content.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | 14 |
15 | -------------------------------------------------------------------------------- /src/svelte/components/accordion-toggle.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | 14 |
15 | -------------------------------------------------------------------------------- /src/svelte/components/accordion.svelte: -------------------------------------------------------------------------------- 1 | 18 | 19 |
20 | 21 |
22 | -------------------------------------------------------------------------------- /src/svelte/components/actions-group.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | 14 |
15 | -------------------------------------------------------------------------------- /src/svelte/components/badge.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/svelte/components/block-footer.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | 14 |
15 | -------------------------------------------------------------------------------- /src/svelte/components/block-header.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | 14 |
15 | -------------------------------------------------------------------------------- /src/svelte/components/block-title.svelte: -------------------------------------------------------------------------------- 1 | 22 | 23 |
24 | 25 |
26 | -------------------------------------------------------------------------------- /src/svelte/components/breadcrumbs-collapsed.svelte: -------------------------------------------------------------------------------- 1 | 17 | 18 |
19 | 20 | 21 |
22 | -------------------------------------------------------------------------------- /src/svelte/components/breadcrumbs-item.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 |
14 | 15 |
16 | -------------------------------------------------------------------------------- /src/svelte/components/breadcrumbs-separator.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 | -------------------------------------------------------------------------------- /src/svelte/components/breadcrumbs.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 | 13 |
14 | -------------------------------------------------------------------------------- /src/svelte/components/card-content.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 |
22 | 23 |
24 | -------------------------------------------------------------------------------- /src/svelte/components/card-footer.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | 14 |
15 | -------------------------------------------------------------------------------- /src/svelte/components/card-header.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | 14 |
15 | -------------------------------------------------------------------------------- /src/svelte/components/fab-backdrop.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 |
14 | -------------------------------------------------------------------------------- /src/svelte/components/fab-buttons.svelte: -------------------------------------------------------------------------------- 1 | 18 | 19 |
20 | 21 |
22 | -------------------------------------------------------------------------------- /src/svelte/components/login-screen-title.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | 14 |
15 | -------------------------------------------------------------------------------- /src/svelte/components/messagebar-attachments.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | 14 |
15 | -------------------------------------------------------------------------------- /src/svelte/components/messagebar-sheet-item.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | 14 |
15 | -------------------------------------------------------------------------------- /src/svelte/components/messagebar-sheet.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | 14 |
15 | -------------------------------------------------------------------------------- /src/svelte/components/messages-title.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | 14 |
15 | -------------------------------------------------------------------------------- /src/svelte/components/nav-right.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 |
22 | 23 |
24 | -------------------------------------------------------------------------------- /src/svelte/components/nav-title-large.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 |
14 | 15 |
16 |
17 | -------------------------------------------------------------------------------- /src/svelte/components/router-context-provider.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/svelte/components/skeleton-avatar.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line 2 | import { SkeletonAvatar } from 'skeleton-elements/svelte'; 3 | 4 | export default SkeletonAvatar; 5 | -------------------------------------------------------------------------------- /src/svelte/components/skeleton-block.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line 2 | import { SkeletonBlock } from 'skeleton-elements/svelte'; 3 | 4 | export default SkeletonBlock; 5 | -------------------------------------------------------------------------------- /src/svelte/components/skeleton-image.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line 2 | import { SkeletonImage } from 'skeleton-elements/svelte'; 3 | 4 | export default SkeletonImage; 5 | -------------------------------------------------------------------------------- /src/svelte/components/skeleton-text.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line 2 | import { SkeletonText } from 'skeleton-elements/svelte'; 3 | 4 | export default SkeletonText; 5 | -------------------------------------------------------------------------------- /src/svelte/components/swipeout-actions.svelte: -------------------------------------------------------------------------------- 1 | 18 | 19 |
20 | 21 |
22 | -------------------------------------------------------------------------------- /src/svelte/components/treeview.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | 14 |
15 | -------------------------------------------------------------------------------- /src/svelte/components/use-icon.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | {#if icon.badge} 10 | {icon.badge.content} 11 | {/if} 12 | 13 | -------------------------------------------------------------------------------- /src/svelte/components/views.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 |
22 | 23 |
24 | -------------------------------------------------------------------------------- /src/svelte/framework7-svelte.js: -------------------------------------------------------------------------------- 1 | import Framework7Svelte from './shared/plugin.js'; 2 | import { f7, f7ready, theme, app } from './shared/f7.js'; 3 | import { useStore } from './shared/use-store.js'; 4 | 5 | // IMPORT_COMPONENTS 6 | 7 | // EXPORT_COMPONENTS 8 | export { f7, f7ready, theme, useStore, app }; 9 | export default Framework7Svelte; 10 | -------------------------------------------------------------------------------- /src/svelte/shared/get-reactive-context.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line 2 | import { getContext, onDestroy } from 'svelte'; 3 | 4 | export const getReactiveContext = (name, setValue) => { 5 | const ctx = getContext(name); 6 | if (!ctx) return undefined; 7 | const { value, subscribe, unsubscribe } = ctx; 8 | subscribe(setValue); 9 | onDestroy(() => { 10 | unsubscribe(setValue); 11 | }); 12 | return value; 13 | }; 14 | -------------------------------------------------------------------------------- /src/svelte/shared/list-context.js: -------------------------------------------------------------------------------- 1 | // import React from 'react'; 2 | 3 | // const ListContext = React.createContext({ 4 | // listIsMedia: false, 5 | // listIsSimple: false, 6 | // listIsSortable: false, 7 | // listIsSortableOpposite: false, 8 | // }); 9 | 10 | // export { ListContext }; 11 | -------------------------------------------------------------------------------- /src/svelte/shared/modal-state-classes.js: -------------------------------------------------------------------------------- 1 | export const modalStateClasses = ({ isOpened, isClosing } = {}) => { 2 | return { 3 | 'modal-in': isOpened && !isClosing, 4 | 'modal-out': isClosing, 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /src/svelte/shared/router-context.js: -------------------------------------------------------------------------------- 1 | // import React from 'react'; 2 | 3 | // const RouterContext = React.createContext({ 4 | // route: null, 5 | // router: null, 6 | // }); 7 | 8 | // export { RouterContext }; 9 | -------------------------------------------------------------------------------- /src/svelte/shared/use-icon.js: -------------------------------------------------------------------------------- 1 | export const useIcon = (props = {}) => { 2 | const { 3 | icon, 4 | iconMaterial, 5 | iconF7, 6 | iconMd, 7 | iconIos, 8 | iconColor, 9 | iconSize, 10 | iconBadge, 11 | badgeColor, 12 | iconBadgeColor, 13 | } = props; 14 | if (icon || iconMaterial || iconF7 || iconMd || iconIos) { 15 | return { 16 | props: { 17 | material: iconMaterial, 18 | f7: iconF7, 19 | icon, 20 | md: iconMd, 21 | ios: iconIos, 22 | color: iconColor, 23 | size: iconSize, 24 | }, 25 | badge: 26 | iconBadge || iconBadge === 0 27 | ? { props: { color: badgeColor || iconBadgeColor }, content: iconBadge } 28 | : null, 29 | }; 30 | } 31 | return null; 32 | }; 33 | -------------------------------------------------------------------------------- /src/svelte/shared/use-route-props.js: -------------------------------------------------------------------------------- 1 | export const useRouteProps = (el, routeProps) => { 2 | if (el && routeProps) { 3 | el.f7RouteProps = routeProps; 4 | } 5 | 6 | return { 7 | update(newValue) { 8 | if (el && el.f7RouteProps && !newValue) delete el.f7RouteProps; 9 | else if (el && newValue) el.f7RouteProps = newValue; 10 | }, 11 | destroy() { 12 | if (el && routeProps) { 13 | delete el.f7RouteProps; 14 | } 15 | }, 16 | }; 17 | }; 18 | -------------------------------------------------------------------------------- /src/svelte/shared/use-smart-select.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line 2 | import { onMount, onDestroy } from 'svelte'; 3 | import { f7ready, app } from './f7.js'; 4 | import { extend } from './utils.js'; 5 | 6 | export const useSmartSelect = (props, setInstance, getEl) => { 7 | let f7SmartSelect; 8 | onMount(() => { 9 | f7ready(() => { 10 | if (props.smartSelect) { 11 | const ssParams = extend({ el: getEl() }, props.smartSelectParams || {}); 12 | f7SmartSelect = app.f7.smartSelect.create(ssParams); 13 | setInstance(f7SmartSelect); 14 | } 15 | }); 16 | }); 17 | onDestroy(() => { 18 | if (f7SmartSelect && f7SmartSelect.destroy) { 19 | f7SmartSelect.destroy(); 20 | } 21 | f7SmartSelect = null; 22 | setInstance(f7SmartSelect); 23 | }); 24 | }; 25 | -------------------------------------------------------------------------------- /src/svelte/shared/use-theme.js: -------------------------------------------------------------------------------- 1 | import { f7ready, app } from './f7.js'; 2 | 3 | export const useTheme = (set) => { 4 | const t = app.f7 ? app.theme : null; 5 | if (!app.f7) { 6 | f7ready(() => { 7 | set(app.theme); 8 | }); 9 | } 10 | return t; 11 | }; 12 | -------------------------------------------------------------------------------- /src/vue-temp/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/framework7io/framework7/8484d587d937e0b1f5146ac58f44a57afb5d5598/src/vue-temp/.gitkeep -------------------------------------------------------------------------------- /src/vue/components/accordion-content.vue: -------------------------------------------------------------------------------- 1 | 6 | 22 | -------------------------------------------------------------------------------- /src/vue/components/accordion-toggle.vue: -------------------------------------------------------------------------------- 1 | 6 | 22 | -------------------------------------------------------------------------------- /src/vue/components/accordion.vue: -------------------------------------------------------------------------------- 1 | 6 | 29 | -------------------------------------------------------------------------------- /src/vue/components/actions-group.vue: -------------------------------------------------------------------------------- 1 | 6 | 22 | -------------------------------------------------------------------------------- /src/vue/components/badge.vue: -------------------------------------------------------------------------------- 1 | 6 | 33 | -------------------------------------------------------------------------------- /src/vue/components/block-footer.vue: -------------------------------------------------------------------------------- 1 | 6 | 22 | -------------------------------------------------------------------------------- /src/vue/components/block-header.vue: -------------------------------------------------------------------------------- 1 | 6 | 22 | -------------------------------------------------------------------------------- /src/vue/components/breadcrumbs-collapsed.vue: -------------------------------------------------------------------------------- 1 | 7 | 22 | -------------------------------------------------------------------------------- /src/vue/components/breadcrumbs-item.vue: -------------------------------------------------------------------------------- 1 | 6 | 23 | -------------------------------------------------------------------------------- /src/vue/components/breadcrumbs-separator.vue: -------------------------------------------------------------------------------- 1 | 4 | 19 | -------------------------------------------------------------------------------- /src/vue/components/breadcrumbs.vue: -------------------------------------------------------------------------------- 1 | 6 | 21 | -------------------------------------------------------------------------------- /src/vue/components/card-content.vue: -------------------------------------------------------------------------------- 1 | 6 | 34 | -------------------------------------------------------------------------------- /src/vue/components/card-footer.vue: -------------------------------------------------------------------------------- 1 | 6 | 22 | -------------------------------------------------------------------------------- /src/vue/components/card-header.vue: -------------------------------------------------------------------------------- 1 | 6 | 22 | -------------------------------------------------------------------------------- /src/vue/components/fab-backdrop.vue: -------------------------------------------------------------------------------- 1 | 6 | 22 | -------------------------------------------------------------------------------- /src/vue/components/fab-buttons.vue: -------------------------------------------------------------------------------- 1 | 6 | 28 | -------------------------------------------------------------------------------- /src/vue/components/login-screen-title.vue: -------------------------------------------------------------------------------- 1 | 6 | 22 | -------------------------------------------------------------------------------- /src/vue/components/messagebar-attachments.vue: -------------------------------------------------------------------------------- 1 | 6 | 22 | -------------------------------------------------------------------------------- /src/vue/components/messagebar-sheet-item.vue: -------------------------------------------------------------------------------- 1 | 6 | 22 | -------------------------------------------------------------------------------- /src/vue/components/messagebar-sheet.vue: -------------------------------------------------------------------------------- 1 | 6 | 22 | -------------------------------------------------------------------------------- /src/vue/components/messages-title.vue: -------------------------------------------------------------------------------- 1 | 6 | 22 | -------------------------------------------------------------------------------- /src/vue/components/nav-right.vue: -------------------------------------------------------------------------------- 1 | 6 | 31 | -------------------------------------------------------------------------------- /src/vue/components/nav-title-large.vue: -------------------------------------------------------------------------------- 1 | 6 | 22 | -------------------------------------------------------------------------------- /src/vue/components/skeleton-avatar.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /src/vue/components/skeleton-block.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /src/vue/components/skeleton-image.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /src/vue/components/skeleton-text.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /src/vue/components/treeview.vue: -------------------------------------------------------------------------------- 1 | 6 | 22 | -------------------------------------------------------------------------------- /src/vue/components/use-icon.vue: -------------------------------------------------------------------------------- 1 | 6 | 21 | -------------------------------------------------------------------------------- /src/vue/components/views.vue: -------------------------------------------------------------------------------- 1 | 6 | 31 | -------------------------------------------------------------------------------- /src/vue/framework7-vue-bundle.d.ts: -------------------------------------------------------------------------------- 1 | export * from '.'; 2 | 3 | declare const registerComponents: (app: any) => void; 4 | 5 | export { registerComponents }; 6 | -------------------------------------------------------------------------------- /src/vue/framework7-vue.js: -------------------------------------------------------------------------------- 1 | import Framework7Vue from './shared/plugin.js'; 2 | import { f7, f7ready, theme } from './shared/f7.js'; 3 | import { useStore } from './shared/use-store.js'; 4 | 5 | // IMPORT_COMPONENTS 6 | 7 | // EXPORT_COMPONENTS 8 | export { f7, f7ready, theme, useStore }; 9 | export default Framework7Vue; 10 | -------------------------------------------------------------------------------- /src/vue/shared/modal-state-classes.js: -------------------------------------------------------------------------------- 1 | export const modalStateClasses = ({ isOpened, isClosing } = {}) => { 2 | return { 3 | 'modal-in': isOpened && !isClosing, 4 | 'modal-out': isClosing, 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /src/vue/shared/use-icon.js: -------------------------------------------------------------------------------- 1 | export const useIcon = (props = {}) => { 2 | const { 3 | icon, 4 | iconMaterial, 5 | iconF7, 6 | iconMd, 7 | iconIos, 8 | iconColor, 9 | iconSize, 10 | iconBadge, 11 | badgeColor, 12 | iconBadgeColor, 13 | } = props; 14 | if (icon || iconMaterial || iconF7 || iconMd || iconIos) { 15 | return { 16 | props: { 17 | material: iconMaterial, 18 | f7: iconF7, 19 | icon, 20 | md: iconMd, 21 | ios: iconIos, 22 | color: iconColor, 23 | size: iconSize, 24 | }, 25 | badge: 26 | iconBadge || iconBadge === 0 27 | ? { props: { color: badgeColor || iconBadgeColor }, content: iconBadge } 28 | : null, 29 | }; 30 | } 31 | return null; 32 | }; 33 | -------------------------------------------------------------------------------- /src/vue/shared/use-route-props.js: -------------------------------------------------------------------------------- 1 | import { onMounted, onUpdated } from 'vue'; 2 | 3 | export const useRouteProps = (elRef, { routeProps } = {}) => { 4 | onMounted(() => { 5 | if (elRef.value && routeProps) { 6 | elRef.value.f7RouteProps = routeProps; 7 | } 8 | }); 9 | onUpdated(() => { 10 | if (elRef.value && routeProps) { 11 | elRef.value.f7RouteProps = routeProps; 12 | } else if (elRef.value && elRef.value.f7RouteProps) { 13 | delete elRef.value.f7RouteProps; 14 | } 15 | }); 16 | }; 17 | -------------------------------------------------------------------------------- /src/vue/shared/use-smart-select.js: -------------------------------------------------------------------------------- 1 | import { onMounted, onBeforeUnmount } from 'vue'; 2 | import { f7ready, f7 } from './f7.js'; 3 | import { extend } from './utils.js'; 4 | 5 | export const useSmartSelect = (props, setInstance, getEl) => { 6 | let f7SmartSelect; 7 | onMounted(() => { 8 | f7ready(() => { 9 | if (props.smartSelect) { 10 | const ssParams = extend({ el: getEl() }, props.smartSelectParams || {}); 11 | f7SmartSelect = f7.smartSelect.create(ssParams); 12 | setInstance(f7SmartSelect); 13 | } 14 | }); 15 | }); 16 | onBeforeUnmount(() => { 17 | if (f7SmartSelect && f7SmartSelect.destroy) { 18 | f7SmartSelect.destroy(); 19 | } 20 | f7SmartSelect = null; 21 | setInstance(f7SmartSelect); 22 | }); 23 | }; 24 | -------------------------------------------------------------------------------- /src/vue/shared/use-store.js: -------------------------------------------------------------------------------- 1 | import { onBeforeUnmount, ref } from 'vue'; 2 | import { f7 } from './f7.js'; 3 | 4 | export const useStore = (...args) => { 5 | // (store, getter) 6 | let store = args[0]; 7 | let getter = args[1]; 8 | if (args.length === 1) { 9 | // (getter) 10 | store = f7.store; 11 | getter = args[0]; 12 | } 13 | // eslint-disable-next-line 14 | const obj = store._gettersPlain[getter]; 15 | const valueRef = ref(obj.value); 16 | const callback = (v) => { 17 | valueRef.value = v; 18 | }; 19 | obj.onUpdated(callback); 20 | onBeforeUnmount(() => { 21 | // eslint-disable-next-line 22 | store.__removeCallback(callback); 23 | }); 24 | return valueRef; 25 | }; 26 | -------------------------------------------------------------------------------- /src/vue/shared/use-tab.js: -------------------------------------------------------------------------------- 1 | import { onMounted, onBeforeUnmount } from 'vue'; 2 | import { f7, f7ready } from './f7.js'; 3 | 4 | export const useTab = (elRef, emit) => { 5 | const onTabShow = (el) => { 6 | if (elRef.value !== el) return; 7 | emit('tab:show', el); 8 | }; 9 | const onTabHide = (el) => { 10 | if (elRef.value !== el) return; 11 | emit('tab:hide', el); 12 | }; 13 | onMounted(() => { 14 | if (!elRef.value) return; 15 | f7ready(() => { 16 | f7.on('tabShow', onTabShow); 17 | f7.on('tabHide', onTabHide); 18 | }); 19 | }); 20 | onBeforeUnmount(() => { 21 | if (!f7) return; 22 | f7.off('tabShow', onTabShow); 23 | f7.off('tabHide', onTabHide); 24 | }); 25 | }; 26 | -------------------------------------------------------------------------------- /src/vue/shared/use-theme.js: -------------------------------------------------------------------------------- 1 | import { ref } from 'vue'; 2 | import { f7, f7ready, theme } from './f7.js'; 3 | 4 | export const useTheme = () => { 5 | const t = ref(f7 ? theme : null); 6 | if (!f7) { 7 | f7ready(() => { 8 | t.value = theme; 9 | }); 10 | } 11 | return t; 12 | }; 13 | --------------------------------------------------------------------------------