From 5f81272aa1ca9d0fe283ed320d8c063ae8b7fdc1 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Wed, 31 Aug 2022 10:47:27 -0500 Subject: [PATCH 01/10] refactor(): remove ion-slide, ion-slides, and IonicSwiper --- angular/src/directives/proxies-list.ts | 5 +- angular/src/directives/proxies.ts | 108 ---- angular/src/index.ts | 1 - angular/test/base/e2e/src/slides.spec.ts | 44 -- .../test/base/src/app/app-routing.module.ts | 2 - angular/test/base/src/app/app.module.ts | 2 - .../app/home-page/home-page.component.html | 5 - .../base/src/app/slides/slides.component.html | 31 -- .../base/src/app/slides/slides.component.ts | 40 -- .../app/view-child/view-child.component.html | 14 +- .../app/view-child/view-child.component.ts | 6 +- core/api.txt | 46 -- core/src/components.d.ts | 201 ------- core/src/components/slide/slide.scss | 46 -- core/src/components/slide/slide.tsx | 23 - core/src/components/slides/IonicSwiper.ts | 131 ----- core/src/components/slides/slides.ios.scss | 14 - .../components/slides/slides.ios.vars.scss | 28 - core/src/components/slides/slides.md.scss | 14 - .../src/components/slides/slides.md.vars.scss | 28 - core/src/components/slides/slides.scss | 56 -- core/src/components/slides/slides.tsx | 522 ------------------ core/src/components/slides/slides.vars.scss | 6 - .../slides/test/app-intro/index.html | 119 ---- core/src/components/slides/test/basic/e2e.ts | 10 - .../components/slides/test/basic/index.html | 179 ------ .../src/components/slides/test/image/cat.jpeg | Bin 11237 -> 0 bytes core/src/components/slides/test/image/e2e.ts | 10 - .../components/slides/test/image/index.html | 158 ------ .../slides/test/pagination/index.html | 140 ----- .../slides/test/prevent-default/e2e.ts | 33 -- .../slides/test/prevent-default/index.html | 53 -- .../slides/test/scrollbar/index.html | 100 ---- .../components/slides/test/standalone/e2e.ts | 10 - .../slides/test/standalone/index.html | 38 -- .../components/slides/test/vertical/e2e.ts | 10 - .../slides/test/vertical/index.html | 50 -- core/src/css/ionic-swiper.scss | 102 ---- core/src/index.ts | 1 - core/src/utils/test/modes/e2e.ts | 3 - core/src/utils/test/modes/index.html | 2 - core/stencil.config.ts | 1 - packages/react/src/components/index.ts | 1 - packages/react/src/components/proxies.ts | 4 - packages/vue/src/index.ts | 1 - packages/vue/src/proxies.ts | 28 - packages/vue/src/vue-component-lib/utils.ts | 10 +- packages/vue/test-app/src/router/index.ts | 4 - packages/vue/test-app/src/views/Home.vue | 3 - packages/vue/test-app/src/views/Slides.vue | 118 ---- packages/vue/types/proxies.d.ts | 2 - 51 files changed, 12 insertions(+), 2551 deletions(-) delete mode 100644 angular/test/base/e2e/src/slides.spec.ts delete mode 100644 angular/test/base/src/app/slides/slides.component.html delete mode 100644 angular/test/base/src/app/slides/slides.component.ts delete mode 100644 core/src/components/slide/slide.scss delete mode 100644 core/src/components/slide/slide.tsx delete mode 100644 core/src/components/slides/IonicSwiper.ts delete mode 100644 core/src/components/slides/slides.ios.scss delete mode 100644 core/src/components/slides/slides.ios.vars.scss delete mode 100644 core/src/components/slides/slides.md.scss delete mode 100644 core/src/components/slides/slides.md.vars.scss delete mode 100644 core/src/components/slides/slides.scss delete mode 100644 core/src/components/slides/slides.tsx delete mode 100644 core/src/components/slides/slides.vars.scss delete mode 100644 core/src/components/slides/test/app-intro/index.html delete mode 100644 core/src/components/slides/test/basic/e2e.ts delete mode 100644 core/src/components/slides/test/basic/index.html delete mode 100644 core/src/components/slides/test/image/cat.jpeg delete mode 100644 core/src/components/slides/test/image/e2e.ts delete mode 100644 core/src/components/slides/test/image/index.html delete mode 100644 core/src/components/slides/test/pagination/index.html delete mode 100644 core/src/components/slides/test/prevent-default/e2e.ts delete mode 100644 core/src/components/slides/test/prevent-default/index.html delete mode 100644 core/src/components/slides/test/scrollbar/index.html delete mode 100644 core/src/components/slides/test/standalone/e2e.ts delete mode 100644 core/src/components/slides/test/standalone/index.html delete mode 100644 core/src/components/slides/test/vertical/e2e.ts delete mode 100644 core/src/components/slides/test/vertical/index.html delete mode 100644 core/src/css/ionic-swiper.scss delete mode 100644 packages/vue/test-app/src/views/Slides.vue diff --git a/angular/src/directives/proxies-list.ts b/angular/src/directives/proxies-list.ts index ec6f2b4b645..77ae2f4ab74 100644 --- a/angular/src/directives/proxies-list.ts +++ b/angular/src/directives/proxies-list.ts @@ -1,3 +1,4 @@ + import * as d from './proxies'; export const DIRECTIVES = [ @@ -65,8 +66,6 @@ export const DIRECTIVES = [ d.IonSelect, d.IonSelectOption, d.IonSkeletonText, - d.IonSlide, - d.IonSlides, d.IonSpinner, d.IonSplitPane, d.IonTabBar, @@ -76,5 +75,5 @@ export const DIRECTIVES = [ d.IonThumbnail, d.IonTitle, d.IonToggle, - d.IonToolbar, + d.IonToolbar ]; diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index f600ad7fdeb..bac38702bf8 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -1681,114 +1681,6 @@ export class IonSkeletonText { } -export declare interface IonSlide extends Components.IonSlide {} - -@ProxyCmp({ - defineCustomElementFn: undefined -}) -@Component({ - selector: 'ion-slide', - changeDetection: ChangeDetectionStrategy.OnPush, - template: '' -}) -export class IonSlide { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - - -export declare interface IonSlides extends Components.IonSlides { - /** - * Emitted after Swiper initialization - */ - ionSlidesDidLoad: EventEmitter>; - /** - * Emitted when the user taps/clicks on the slide's container. - */ - ionSlideTap: EventEmitter>; - /** - * Emitted when the user double taps on the slide's container. - */ - ionSlideDoubleTap: EventEmitter>; - /** - * Emitted before the active slide has changed. - */ - ionSlideWillChange: EventEmitter>; - /** - * Emitted after the active slide has changed. - */ - ionSlideDidChange: EventEmitter>; - /** - * Emitted when the next slide has started. - */ - ionSlideNextStart: EventEmitter>; - /** - * Emitted when the previous slide has started. - */ - ionSlidePrevStart: EventEmitter>; - /** - * Emitted when the next slide has ended. - */ - ionSlideNextEnd: EventEmitter>; - /** - * Emitted when the previous slide has ended. - */ - ionSlidePrevEnd: EventEmitter>; - /** - * Emitted when the slide transition has started. - */ - ionSlideTransitionStart: EventEmitter>; - /** - * Emitted when the slide transition has ended. - */ - ionSlideTransitionEnd: EventEmitter>; - /** - * Emitted when the slider is actively being moved. - */ - ionSlideDrag: EventEmitter>; - /** - * Emitted when the slider is at its initial position. - */ - ionSlideReachStart: EventEmitter>; - /** - * Emitted when the slider is at the last slide. - */ - ionSlideReachEnd: EventEmitter>; - /** - * Emitted when the user first touches the slider. - */ - ionSlideTouchStart: EventEmitter>; - /** - * Emitted when the user releases the touch. - */ - ionSlideTouchEnd: EventEmitter>; - -} - -@ProxyCmp({ - defineCustomElementFn: undefined, - inputs: ['mode', 'options', 'pager', 'scrollbar'], - methods: ['update', 'updateAutoHeight', 'slideTo', 'slideNext', 'slidePrev', 'getActiveIndex', 'getPreviousIndex', 'length', 'isEnd', 'isBeginning', 'startAutoplay', 'stopAutoplay', 'lockSwipeToNext', 'lockSwipeToPrev', 'lockSwipes', 'getSwiper'] -}) -@Component({ - selector: 'ion-slides', - changeDetection: ChangeDetectionStrategy.OnPush, - template: '', - inputs: ['mode', 'options', 'pager', 'scrollbar'] -}) -export class IonSlides { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - proxyOutputs(this, this.el, ['ionSlidesDidLoad', 'ionSlideTap', 'ionSlideDoubleTap', 'ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd']); - } -} - - export declare interface IonSpinner extends Components.IonSpinner {} @ProxyCmp({ diff --git a/angular/src/index.ts b/angular/src/index.ts index 11f09c79cb6..38ba6c1c726 100644 --- a/angular/src/index.ts +++ b/angular/src/index.ts @@ -50,7 +50,6 @@ export { createGesture, iosTransitionAnimation, mdTransitionAnimation, - IonicSwiper, IonicSlides, getPlatforms, isPlatform, diff --git a/angular/test/base/e2e/src/slides.spec.ts b/angular/test/base/e2e/src/slides.spec.ts deleted file mode 100644 index eca4b59e978..00000000000 --- a/angular/test/base/e2e/src/slides.spec.ts +++ /dev/null @@ -1,44 +0,0 @@ -describe('Slides', () => { - beforeEach(() => { - cy.visit('/slides'); - cy.wait(30); - }) - - it('should change index on slide change', () => { - cy.get('ion-slide').should('have.length', 0); - - cy.get('#add-slides').click(); - - cy.get('ion-slide').should('have.length', 3); - - // Should be on the first slide - checkIndex('0'); - - // Swipe to the second slide - nextSlide(); - checkIndex('1'); - - // Swipe to the third slide - nextSlide(); - checkIndex('2'); - - // Go back to the second slide - prevSlide(); - checkIndex('1'); - }); -}); - -function checkIndex(index) { - cy.get('#slide-index').should('have.text', index); - cy.get('#slide-index-2').should('have.text', index); -} - -function nextSlide() { - cy.get('#btn-next').click(); - cy.wait(800); -} - -function prevSlide() { - cy.get('#btn-prev').click(); - cy.wait(800); -} diff --git a/angular/test/base/src/app/app-routing.module.ts b/angular/test/base/src/app/app-routing.module.ts index 195bbdbf472..cef9059c703 100644 --- a/angular/test/base/src/app/app-routing.module.ts +++ b/angular/test/base/src/app/app-routing.module.ts @@ -12,7 +12,6 @@ import { NestedOutletPageComponent } from './nested-outlet-page/nested-outlet-pa import { NestedOutletPage2Component } from './nested-outlet-page2/nested-outlet-page2.component'; import { ViewChildComponent } from './view-child/view-child.component'; import { ProvidersComponent } from './providers/providers.component'; -import { SlidesComponent } from './slides/slides.component'; import { FormComponent } from './form/form.component'; import { NavigationPage1Component } from './navigation-page1/navigation-page1.component'; import { NavigationPage2Component } from './navigation-page2/navigation-page2.component'; @@ -37,7 +36,6 @@ const routes: Routes = [ { path: 'router-link-page', component: RouterLinkPageComponent }, { path: 'router-link-page2/:id', component: RouterLinkPage2Component }, { path: 'router-link-page3', component: RouterLinkPage3Component }, - { path: 'slides', component: SlidesComponent }, { path: 'tabs', redirectTo: '/tabs/account', pathMatch: 'full' }, { path: 'navigation', diff --git a/angular/test/base/src/app/app.module.ts b/angular/test/base/src/app/app.module.ts index acd14de9aa9..908acfa0d0a 100644 --- a/angular/test/base/src/app/app.module.ts +++ b/angular/test/base/src/app/app.module.ts @@ -21,7 +21,6 @@ import { NestedOutletPage2Component } from './nested-outlet-page2/nested-outlet- import { NavComponent } from './nav/nav.component'; import { ViewChildComponent } from './view-child/view-child.component'; import { ProvidersComponent } from './providers/providers.component'; -import { SlidesComponent } from './slides/slides.component'; import { FormComponent } from './form/form.component'; import { NavigationPage1Component } from './navigation-page1/navigation-page1.component'; import { NavigationPage2Component } from './navigation-page2/navigation-page2.component'; @@ -47,7 +46,6 @@ import { AccordionModalComponent } from './accordion/accordion-modal/accordion-m NavComponent, ViewChildComponent, ProvidersComponent, - SlidesComponent, FormComponent, NavigationPage1Component, NavigationPage2Component, diff --git a/angular/test/base/src/app/home-page/home-page.component.html b/angular/test/base/src/app/home-page/home-page.component.html index 9fa61f4b7ba..bb3221ed6ad 100644 --- a/angular/test/base/src/app/home-page/home-page.component.html +++ b/angular/test/base/src/app/home-page/home-page.component.html @@ -37,11 +37,6 @@ Tabs test - - - Slides test - - Nested ion-router-outlet diff --git a/angular/test/base/src/app/slides/slides.component.html b/angular/test/base/src/app/slides/slides.component.html deleted file mode 100644 index a14964085a5..00000000000 --- a/angular/test/base/src/app/slides/slides.component.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - Slides Test - - - - - - - -

{{text}}

- - - - -

- index: {{slideIndex}} - index2: {{slideIndex2}} -

- - - Add Slides - - - Prev Slide - - - Next Slide - - \ No newline at end of file diff --git a/angular/test/base/src/app/slides/slides.component.ts b/angular/test/base/src/app/slides/slides.component.ts deleted file mode 100644 index 90af28f0421..00000000000 --- a/angular/test/base/src/app/slides/slides.component.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { AfterViewInit, Component, ViewChild } from '@angular/core'; -import { IonSlides } from '@ionic/angular'; - -@Component({ - selector: 'app-slides', - templateUrl: './slides.component.html', -}) -export class SlidesComponent implements AfterViewInit { - @ViewChild(IonSlides, { static: true }) slides: IonSlides; - - slideIndex = 0; - slideIndex2 = 0; - slidesData = []; - - constructor() { } - - ngAfterViewInit() { - this.slides.ionSlideDidChange.subscribe(async () => { - this.slideIndex2 = await this.slides.getActiveIndex(); - }); - } - - addSlides() { - const start = this.slidesData.length + 1; - this.slidesData.push(`Slide ${start}`, `Slide ${start + 1}`, `Slide ${start + 2}`); - } - - prevSlide() { - this.slides.slidePrev(); - } - - nextSlide() { - this.slides.slideNext(); - } - - async checkIndex() { - this.slideIndex = await this.slides.getActiveIndex(); - } - -} diff --git a/angular/test/base/src/app/view-child/view-child.component.html b/angular/test/base/src/app/view-child/view-child.component.html index 1293c69e75b..601855048c9 100644 --- a/angular/test/base/src/app/view-child/view-child.component.html +++ b/angular/test/base/src/app/view-child/view-child.component.html @@ -6,15 +6,7 @@ - - - Hello! it's a button -
- - - - -

Second slide

- - + Hello! it's a button +
+ diff --git a/angular/test/base/src/app/view-child/view-child.component.ts b/angular/test/base/src/app/view-child/view-child.component.ts index 2454d36807f..01cb21df551 100644 --- a/angular/test/base/src/app/view-child/view-child.component.ts +++ b/angular/test/base/src/app/view-child/view-child.component.ts @@ -1,5 +1,5 @@ import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core'; -import { IonTabs, IonButton, IonSlides, IonSlide } from '@ionic/angular'; +import { IonTabs, IonButton } from '@ionic/angular'; @Component({ selector: 'app-view-child', @@ -7,14 +7,12 @@ import { IonTabs, IonButton, IonSlides, IonSlide } from '@ionic/angular'; }) export class ViewChildComponent implements AfterViewInit { - @ViewChild(IonSlides, { static: true }) slides: IonSlides; @ViewChild(IonButton, { static: true }) button: IonButton; @ViewChild(IonTabs, { static: true }) tabs: IonTabs; @ViewChild('div', { static: true }) div: ElementRef; - @ViewChild('slide', { static: true }) slide: IonSlide; ngAfterViewInit() { - const loaded = !!(this.slides && this.button && this.tabs && this.div && this.slide); + const loaded = !!(this.button && this.tabs && this.div); this.button.color = 'danger'; if (loaded) { this.div.nativeElement.textContent = 'all found'; diff --git a/core/api.txt b/core/api.txt index bfa38850c4e..853dd159f1f 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1215,52 +1215,6 @@ ion-skeleton-text,css-prop,--background ion-skeleton-text,css-prop,--background-rgb ion-skeleton-text,css-prop,--border-radius -ion-slide,none - -ion-slides,none -ion-slides,prop,mode,"ios" | "md",undefined,false,false -ion-slides,prop,options,any,{},false,false -ion-slides,prop,pager,boolean,false,false,false -ion-slides,prop,scrollbar,boolean,false,false,false -ion-slides,method,getActiveIndex,getActiveIndex() => Promise -ion-slides,method,getPreviousIndex,getPreviousIndex() => Promise -ion-slides,method,getSwiper,getSwiper() => Promise -ion-slides,method,isBeginning,isBeginning() => Promise -ion-slides,method,isEnd,isEnd() => Promise -ion-slides,method,length,length() => Promise -ion-slides,method,lockSwipeToNext,lockSwipeToNext(lock: boolean) => Promise -ion-slides,method,lockSwipeToPrev,lockSwipeToPrev(lock: boolean) => Promise -ion-slides,method,lockSwipes,lockSwipes(lock: boolean) => Promise -ion-slides,method,slideNext,slideNext(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise -ion-slides,method,slidePrev,slidePrev(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise -ion-slides,method,slideTo,slideTo(index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise -ion-slides,method,startAutoplay,startAutoplay() => Promise -ion-slides,method,stopAutoplay,stopAutoplay() => Promise -ion-slides,method,update,update() => Promise -ion-slides,method,updateAutoHeight,updateAutoHeight(speed?: number | undefined) => Promise -ion-slides,event,ionSlideDidChange,void,true -ion-slides,event,ionSlideDoubleTap,void,true -ion-slides,event,ionSlideDrag,void,true -ion-slides,event,ionSlideNextEnd,void,true -ion-slides,event,ionSlideNextStart,void,true -ion-slides,event,ionSlidePrevEnd,void,true -ion-slides,event,ionSlidePrevStart,void,true -ion-slides,event,ionSlideReachEnd,void,true -ion-slides,event,ionSlideReachStart,void,true -ion-slides,event,ionSlidesDidLoad,void,true -ion-slides,event,ionSlideTap,void,true -ion-slides,event,ionSlideTouchEnd,void,true -ion-slides,event,ionSlideTouchStart,void,true -ion-slides,event,ionSlideTransitionEnd,void,true -ion-slides,event,ionSlideTransitionStart,void,true -ion-slides,event,ionSlideWillChange,void,true -ion-slides,css-prop,--bullet-background -ion-slides,css-prop,--bullet-background-active -ion-slides,css-prop,--progress-bar-background -ion-slides,css-prop,--progress-bar-background-active -ion-slides,css-prop,--scroll-bar-background -ion-slides,css-prop,--scroll-bar-background-active - ion-spinner,shadow ion-spinner,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true ion-spinner,prop,duration,number | undefined,undefined,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index a76da2bcccd..ace6c430373 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2569,101 +2569,6 @@ export namespace Components { */ "animated": boolean; } - interface IonSlide { - } - interface IonSlides { - /** - * Get the index of the active slide. - */ - "getActiveIndex": () => Promise; - /** - * Get the index of the previous slide. - */ - "getPreviousIndex": () => Promise; - /** - * Get the Swiper instance. Use this to access the full Swiper API. See https://swiperjs.com/swiper-api for all API options. - */ - "getSwiper": () => Promise; - /** - * Get whether or not the current slide is the first slide. - */ - "isBeginning": () => Promise; - /** - * Get whether or not the current slide is the last slide. - */ - "isEnd": () => Promise; - /** - * Get the total number of slides. - */ - "length": () => Promise; - /** - * Lock or unlock the ability to slide to the next slide. - * @param lock If `true`, disable swiping to the next slide. - */ - "lockSwipeToNext": (lock: boolean) => Promise; - /** - * Lock or unlock the ability to slide to the previous slide. - * @param lock If `true`, disable swiping to the previous slide. - */ - "lockSwipeToPrev": (lock: boolean) => Promise; - /** - * Lock or unlock the ability to slide to the next or previous slide. - * @param lock If `true`, disable swiping to the next and previous slide. - */ - "lockSwipes": (lock: boolean) => Promise; - /** - * The mode determines which platform styles to use. - */ - "mode"?: "ios" | "md"; - /** - * Options to pass to the swiper instance. See https://swiperjs.com/swiper-api for valid options - */ - "options": any; - /** - * If `true`, show the pagination. - */ - "pager": boolean; - /** - * If `true`, show the scrollbar. - */ - "scrollbar": boolean; - /** - * Transition to the next slide. - * @param speed The transition duration (in ms). - * @param runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events. - */ - "slideNext": (speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise; - /** - * Transition to the previous slide. - * @param speed The transition duration (in ms). - * @param runCallbacks If true, the transition will produce the [Transition/SlideChange][Start/End] transition events. - */ - "slidePrev": (speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise; - /** - * Transition to the specified slide. - * @param index The index of the slide to transition to. - * @param speed The transition duration (in ms). - * @param runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events. - */ - "slideTo": (index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise; - /** - * Start auto play. - */ - "startAutoplay": () => Promise; - /** - * Stop auto play. - */ - "stopAutoplay": () => Promise; - /** - * Update the underlying slider implementation. Call this if you've added or removed child slides. - */ - "update": () => Promise; - /** - * Force swiper to update its height (when autoHeight is enabled) for the duration equal to 'speed' parameter. - * @param speed The transition duration (in ms). - */ - "updateAutoHeight": (speed?: number | undefined) => Promise; - } interface IonSpinner { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -3177,10 +3082,6 @@ export interface IonSelectCustomEvent extends CustomEvent { detail: T; target: HTMLIonSelectElement; } -export interface IonSlidesCustomEvent extends CustomEvent { - detail: T; - target: HTMLIonSlidesElement; -} export interface IonSplitPaneCustomEvent extends CustomEvent { detail: T; target: HTMLIonSplitPaneElement; @@ -3682,18 +3583,6 @@ declare global { prototype: HTMLIonSkeletonTextElement; new (): HTMLIonSkeletonTextElement; }; - interface HTMLIonSlideElement extends Components.IonSlide, HTMLStencilElement { - } - var HTMLIonSlideElement: { - prototype: HTMLIonSlideElement; - new (): HTMLIonSlideElement; - }; - interface HTMLIonSlidesElement extends Components.IonSlides, HTMLStencilElement { - } - var HTMLIonSlidesElement: { - prototype: HTMLIonSlidesElement; - new (): HTMLIonSlidesElement; - }; interface HTMLIonSpinnerElement extends Components.IonSpinner, HTMLStencilElement { } var HTMLIonSpinnerElement: { @@ -3851,8 +3740,6 @@ declare global { "ion-select-option": HTMLIonSelectOptionElement; "ion-select-popover": HTMLIonSelectPopoverElement; "ion-skeleton-text": HTMLIonSkeletonTextElement; - "ion-slide": HTMLIonSlideElement; - "ion-slides": HTMLIonSlidesElement; "ion-spinner": HTMLIonSpinnerElement; "ion-split-pane": HTMLIonSplitPaneElement; "ion-tab": HTMLIonTabElement; @@ -6476,90 +6363,6 @@ declare namespace LocalJSX { */ "animated"?: boolean; } - interface IonSlide { - } - interface IonSlides { - /** - * The mode determines which platform styles to use. - */ - "mode"?: "ios" | "md"; - /** - * Emitted after the active slide has changed. - */ - "onIonSlideDidChange"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted when the user double taps on the slide's container. - */ - "onIonSlideDoubleTap"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted when the slider is actively being moved. - */ - "onIonSlideDrag"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted when the next slide has ended. - */ - "onIonSlideNextEnd"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted when the next slide has started. - */ - "onIonSlideNextStart"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted when the previous slide has ended. - */ - "onIonSlidePrevEnd"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted when the previous slide has started. - */ - "onIonSlidePrevStart"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted when the slider is at the last slide. - */ - "onIonSlideReachEnd"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted when the slider is at its initial position. - */ - "onIonSlideReachStart"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted when the user taps/clicks on the slide's container. - */ - "onIonSlideTap"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted when the user releases the touch. - */ - "onIonSlideTouchEnd"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted when the user first touches the slider. - */ - "onIonSlideTouchStart"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted when the slide transition has ended. - */ - "onIonSlideTransitionEnd"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted when the slide transition has started. - */ - "onIonSlideTransitionStart"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted before the active slide has changed. - */ - "onIonSlideWillChange"?: (event: IonSlidesCustomEvent) => void; - /** - * Emitted after Swiper initialization - */ - "onIonSlidesDidLoad"?: (event: IonSlidesCustomEvent) => void; - /** - * Options to pass to the swiper instance. See https://swiperjs.com/swiper-api for valid options - */ - "options"?: any; - /** - * If `true`, show the pagination. - */ - "pager"?: boolean; - /** - * If `true`, show the scrollbar. - */ - "scrollbar"?: boolean; - } interface IonSpinner { /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). @@ -7030,8 +6833,6 @@ declare namespace LocalJSX { "ion-select-option": IonSelectOption; "ion-select-popover": IonSelectPopover; "ion-skeleton-text": IonSkeletonText; - "ion-slide": IonSlide; - "ion-slides": IonSlides; "ion-spinner": IonSpinner; "ion-split-pane": IonSplitPane; "ion-tab": IonTab; @@ -7129,8 +6930,6 @@ declare module "@stencil/core" { "ion-select-option": LocalJSX.IonSelectOption & JSXBase.HTMLAttributes; "ion-select-popover": LocalJSX.IonSelectPopover & JSXBase.HTMLAttributes; "ion-skeleton-text": LocalJSX.IonSkeletonText & JSXBase.HTMLAttributes; - "ion-slide": LocalJSX.IonSlide & JSXBase.HTMLAttributes; - "ion-slides": LocalJSX.IonSlides & JSXBase.HTMLAttributes; "ion-spinner": LocalJSX.IonSpinner & JSXBase.HTMLAttributes; "ion-split-pane": LocalJSX.IonSplitPane & JSXBase.HTMLAttributes; "ion-tab": LocalJSX.IonTab & JSXBase.HTMLAttributes; diff --git a/core/src/components/slide/slide.scss b/core/src/components/slide/slide.scss deleted file mode 100644 index 7777ce4df5f..00000000000 --- a/core/src/components/slide/slide.scss +++ /dev/null @@ -1,46 +0,0 @@ -@import "../../themes/ionic.globals"; - - -// Slide -// -------------------------------------------------- - -ion-slide { - display: block; - - width: 100%; - height: 100%; -} - -.slide-zoom { - display: block; - - width: 100%; - - text-align: center; -} - -.swiper-slide { - - // Center slide text vertically - display: flex; - position: relative; - - flex-shrink: 0; - align-items: center; - justify-content: center; - - width: 100%; - height: 100%; - - font-size: 18px; - - text-align: center; - box-sizing: border-box; -} - -.swiper-slide img { - width: auto; - max-width: 100%; - height: auto; - max-height: 100%; -} diff --git a/core/src/components/slide/slide.tsx b/core/src/components/slide/slide.tsx deleted file mode 100644 index 57c9f14ca14..00000000000 --- a/core/src/components/slide/slide.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import type { ComponentInterface } from '@stencil/core'; -import { Component, Host, h } from '@stencil/core'; - -import { getIonMode } from '../../global/ionic-global'; - -@Component({ - tag: 'ion-slide', - styleUrl: 'slide.scss', -}) -export class Slide implements ComponentInterface { - render() { - const mode = getIonMode(this); - return ( - - ); - } -} diff --git a/core/src/components/slides/IonicSwiper.ts b/core/src/components/slides/IonicSwiper.ts deleted file mode 100644 index 39cc1aefc2d..00000000000 --- a/core/src/components/slides/IonicSwiper.ts +++ /dev/null @@ -1,131 +0,0 @@ -import { addEventListener, raf, removeEventListener } from '../../utils/helpers'; - -/** - * This is a plugin for Swiper that allows it to work - * with Ionic Framework and the routing integrations. - * Without this plugin, Swiper would be incapable of correctly - * determining the dimensions of the slides component as - * each view is initially hidden before transitioning in. - */ -const setupSwiperInIonic = (swiper: any, watchForIonPageChanges = true) => { - if (typeof (window as any) === 'undefined') { - return; - } - - const swiperEl = swiper.el; - const ionPage = swiperEl.closest('.ion-page'); - - if (!ionPage) { - if (watchForIonPageChanges) { - /** - * If no ion page found, it is possible - * that we are in the overlay setup step - * where the inner component has been - * created but not attached to the DOM yet. - * If so, wait for the .ion-page class to - * appear on the root div and re-run setup. - */ - const rootNode = swiperEl.getRootNode(); - if (rootNode.tagName === 'DIV') { - const mo = new MutationObserver((m: MutationRecord[]) => { - const mutation = m[0]; - const wasEmpty = mutation.oldValue === null; - const hasIonPage = rootNode.classList.contains('ion-page'); - - /** - * Now that we have an .ion-page class - * we can safely attempt setup again. - */ - if (wasEmpty && hasIonPage) { - mo.disconnect(); - - /** - * Set false here so we do not - * get infinite loops - */ - setupSwiperInIonic(swiper, false); - } - }); - - mo.observe(rootNode, { - attributeFilter: ['class'], - attributeOldValue: true, - }); - } - } - return; - } - - /** - * If using slides in a modal or - * popover we need to wait for the - * overlay to be shown as these components - * are hidden when they are initially created. - */ - const modalOrPopover = swiperEl.closest('ion-modal, ion-popover'); - if (modalOrPopover) { - const eventName = modalOrPopover.tagName === 'ION-MODAL' ? 'ionModalWillPresent' : 'ionPopoverWillPresent'; - const overlayCallback = () => { - /** - * We need an raf here so the update - * is fired one tick after the overlay is shown. - */ - raf(() => { - swiperEl.swiper.update(); - removeEventListener(modalOrPopover, eventName, overlayCallback); - }); - }; - addEventListener(modalOrPopover, eventName, overlayCallback); - } else { - /** - * If using slides in a page - * we need to wait for the ion-page-invisible - * class to be removed so Swiper can correctly - * compute the dimensions of the slides. - */ - const mo = new MutationObserver((m: MutationRecord[]) => { - const mutation = m[0]; - const wasPageHidden = mutation.oldValue?.includes('ion-page-invisible'); - const isPageHidden = ionPage.classList.contains('ion-page-invisible'); - - /** - * Only update Swiper if the page was - * hidden but is no longer hidden. - */ - if (!isPageHidden && isPageHidden !== wasPageHidden) { - swiperEl.swiper.update(); - } - }); - - mo.observe(ionPage, { - attributeFilter: ['class'], - attributeOldValue: true, - }); - } - - /** - * We also need to listen for the appload event - * which is emitted by Stencil in the - * event that Swiper is being used on the - * view that is rendered initially. - */ - const onAppLoad = () => { - swiperEl.swiper.update(); - removeEventListener(window, 'appload', onAppLoad); - }; - - addEventListener(window, 'appload', onAppLoad); -}; - -export const IonicSwiper = { - name: 'ionic', - on: { - afterInit(swiper: any) { - console.warn( - '[Deprecation Warning]: The IonicSwiper module has been deprecated in favor of the IonSlides module. This change was made to better support the Swiper 7 release. The IonicSwiper module will be removed in Ionic 7.0. See https://ionicframework.com/docs/api/slides#migration for revised migration steps.' - ); - - setupSwiperInIonic(swiper); - }, - }, -}; diff --git a/core/src/components/slides/slides.ios.scss b/core/src/components/slides/slides.ios.scss deleted file mode 100644 index b820358bf6e..00000000000 --- a/core/src/components/slides/slides.ios.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import "./slides"; -@import "./slides.ios.vars"; - -// iOS Slides -// -------------------------------------------------- - -.slides-ios { - --bullet-background: #{$slides-ios-bullet-background}; - --bullet-background-active: #{$slides-ios-bullet-background-active}; - --progress-bar-background: #{$slides-ios-progress-bar-background}; - --progress-bar-background-active: #{$slides-ios-progress-bar-background-active}; - --scroll-bar-background: #{$slides-ios-scroll-bar-background}; - --scroll-bar-background-active: #{$slides-ios-scroll-bar-drag-background}; -} diff --git a/core/src/components/slides/slides.ios.vars.scss b/core/src/components/slides/slides.ios.vars.scss deleted file mode 100644 index 73aec90e3e3..00000000000 --- a/core/src/components/slides/slides.ios.vars.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import "../../themes/ionic.globals.ios"; - -/// @prop - Background color of the bullet -$slides-ios-bullet-background: $text-color-step-800 !default; - -/// @prop - Background color of the active bullet -$slides-ios-bullet-background-active: ion-color(primary, base) !default; - -/// @prop - Alpha to use for the background color of the progress bar -$slides-ios-progress-bar-background-alpha: .25 !default; - -/// @prop - Background color of the progress bar -$slides-ios-progress-bar-background: rgba($text-color-rgb, $slides-ios-progress-bar-background-alpha) !default; - -/// @prop - Background color of the active progress bar -$slides-ios-progress-bar-background-active: ion-color(primary, shade) !default; - -/// @prop - Alpha to use for the background color of the scroll bar -$slides-ios-scroll-bar-background-alpha: .1 !default; - -/// @prop - Background color of the scroll bar -$slides-ios-scroll-bar-background: rgba($text-color-rgb, $slides-ios-scroll-bar-background-alpha) !default; - -/// @prop - Alpha to use for the background color of the scroll bar while dragging -$slides-ios-scroll-bar-drag-background-alpha: .5 !default; - -/// @prop - Background color of the scroll bar drag handle -$slides-ios-scroll-bar-drag-background: rgba($text-color-rgb, $slides-ios-scroll-bar-drag-background-alpha) !default; diff --git a/core/src/components/slides/slides.md.scss b/core/src/components/slides/slides.md.scss deleted file mode 100644 index ebdb6e84738..00000000000 --- a/core/src/components/slides/slides.md.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import "./slides"; -@import "./slides.md.vars"; - -// Material Design Slides -// -------------------------------------------------- - -.slides-md { - --bullet-background: #{$slides-md-bullet-background}; - --bullet-background-active: #{$slides-md-bullet-background-active}; - --progress-bar-background: #{$slides-md-progress-bar-background}; - --progress-bar-background-active: #{$slides-md-progress-bar-background-active}; - --scroll-bar-background: #{$slides-md-scroll-bar-background}; - --scroll-bar-background-active: #{$slides-md-scroll-bar-drag-background}; -} diff --git a/core/src/components/slides/slides.md.vars.scss b/core/src/components/slides/slides.md.vars.scss deleted file mode 100644 index 906f31ddeba..00000000000 --- a/core/src/components/slides/slides.md.vars.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import "../../themes/ionic.globals.md"; - -/// @prop - Background color of the bullet -$slides-md-bullet-background: $text-color-step-800 !default; - -/// @prop - Background color of the active bullet -$slides-md-bullet-background-active: ion-color(primary, base) !default; - -/// @prop - Alpha to use for the background color of the progress bar -$slides-md-progress-bar-background-alpha: .25 !default; - -/// @prop - Background color of the progress -$slides-md-progress-bar-background: rgba($text-color-rgb, $slides-md-progress-bar-background-alpha) !default; - -/// @prop - Background color of the progress bar -$slides-md-progress-bar-background-active: ion-color(primary, shade) !default; - -/// @prop - Alpha to use for the background color of the scroll bar -$slides-md-scroll-bar-background-alpha: .1 !default; - -/// @prop - Background color of the scroll bar -$slides-md-scroll-bar-background: rgba($text-color-rgb, $slides-md-scroll-bar-background-alpha) !default; - -/// @prop - Alpha to use for the background color of the scroll bar while dragging -$slides-md-scroll-bar-drag-background-alpha: .5 !default; - -/// @prop - Background color of the scroll bar drag handle -$slides-md-scroll-bar-drag-background: rgba($text-color-rgb, $slides-md-scroll-bar-drag-background-alpha) !default; diff --git a/core/src/components/slides/slides.scss b/core/src/components/slides/slides.scss deleted file mode 100644 index 25fc008332c..00000000000 --- a/core/src/components/slides/slides.scss +++ /dev/null @@ -1,56 +0,0 @@ -@import "./slides.vars"; -@import "./slides-vendor"; - -// Slides -// -------------------------------------------------- - -ion-slides { - /** - * @prop --bullet-background: Background of the pagination bullets - * @prop --bullet-background-active: Background of the active pagination bullet - * - * @prop --progress-bar-background: Background of the pagination progress-bar - * @prop --progress-bar-background-active: Background of the active pagination progress-bar - * - * @prop --scroll-bar-background: Background of the pagination scroll-bar - * @prop --scroll-bar-background-active: Background of the active pagination scroll-bar - */ - display: block; - - user-select: none; -} - - -// Pagination Bullets -// -------------------------------------------------- - -.swiper-pagination-bullet { - background: var(--bullet-background); -} - -.swiper-pagination-bullet-active { - background: var(--bullet-background-active); -} - - -// Pagination Progress Bar -// -------------------------------------------------- - -.swiper-pagination-progressbar { - background: var(--progress-bar-background); -} - -.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { - background: var(--progress-bar-background-active); -} - -// Scrollbar -// -------------------------------------------------- - -.swiper-scrollbar { - background: var(--scroll-bar-background); -} - -.swiper-scrollbar-drag { - background: var(--scroll-bar-background-active); -} diff --git a/core/src/components/slides/slides.tsx b/core/src/components/slides/slides.tsx deleted file mode 100644 index 37a2789e53a..00000000000 --- a/core/src/components/slides/slides.tsx +++ /dev/null @@ -1,522 +0,0 @@ -import type { ComponentInterface, EventEmitter } from '@stencil/core'; -import { Build, Component, Element, Event, Host, Method, Prop, Watch, h } from '@stencil/core'; - -import { getIonMode } from '../../global/ionic-global'; -import { componentOnReady } from '../../utils/helpers'; - -import type { SwiperInterface, SwiperOptions } from './swiper/swiper-interface'; - -/** - * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use. - */ -@Component({ - tag: 'ion-slides', - styleUrls: { - ios: 'slides.ios.scss', - md: 'slides.md.scss', - }, - assetsDirs: ['swiper'], -}) -export class Slides implements ComponentInterface { - private scrollbarEl?: HTMLElement; - private paginationEl?: HTMLElement; - private swiperReady = false; - private mutationO?: MutationObserver; - private readySwiper!: (swiper: SwiperInterface) => void; - private swiper: Promise = new Promise((resolve) => { - this.readySwiper = resolve; - }); - - @Element() el!: HTMLIonSlidesElement; - - /** - * Options to pass to the swiper instance. - * See https://swiperjs.com/swiper-api for valid options - */ - @Prop() options: any = {}; // SwiperOptions; // TODO - - @Watch('options') - async optionsChanged() { - if (this.swiperReady) { - const swiper = await this.getSwiper(); - if (swiper?.params) { - Object.assign(swiper.params, this.options); - await this.update(); - } - } - } - - /** - * If `true`, show the pagination. - */ - @Prop() pager = false; - - /** - * If `true`, show the scrollbar. - */ - @Prop() scrollbar = false; - - /** - * Emitted after Swiper initialization - */ - @Event() ionSlidesDidLoad!: EventEmitter; - - /** - * Emitted when the user taps/clicks on the slide's container. - */ - @Event() ionSlideTap!: EventEmitter; - - /** - * Emitted when the user double taps on the slide's container. - */ - @Event() ionSlideDoubleTap!: EventEmitter; - - /** - * Emitted before the active slide has changed. - */ - @Event() ionSlideWillChange!: EventEmitter; - - /** - * Emitted after the active slide has changed. - */ - @Event() ionSlideDidChange!: EventEmitter; - - /** - * Emitted when the next slide has started. - */ - @Event() ionSlideNextStart!: EventEmitter; - - /** - * Emitted when the previous slide has started. - */ - @Event() ionSlidePrevStart!: EventEmitter; - - /** - * Emitted when the next slide has ended. - */ - @Event() ionSlideNextEnd!: EventEmitter; - - /** - * Emitted when the previous slide has ended. - */ - @Event() ionSlidePrevEnd!: EventEmitter; - - /** - * Emitted when the slide transition has started. - */ - @Event() ionSlideTransitionStart!: EventEmitter; - - /** - * Emitted when the slide transition has ended. - */ - @Event() ionSlideTransitionEnd!: EventEmitter; - - /** - * Emitted when the slider is actively being moved. - */ - @Event() ionSlideDrag!: EventEmitter; - - /** - * Emitted when the slider is at its initial position. - */ - @Event() ionSlideReachStart!: EventEmitter; - - /** - * Emitted when the slider is at the last slide. - */ - @Event() ionSlideReachEnd!: EventEmitter; - - /** - * Emitted when the user first touches the slider. - */ - @Event() ionSlideTouchStart!: EventEmitter; - - /** - * Emitted when the user releases the touch. - */ - @Event() ionSlideTouchEnd!: EventEmitter; - - componentWillLoad() { - console.warn( - `[Deprecation Warning]: ion-slides has been deprecated and will be removed in Ionic Framework v7.0. We recommend using the framework-specific integrations that Swiper.js provides, allowing for faster bug fixes and an improved developer experience. See https://ionicframework.com/docs/api/slides for more information including migration steps.` - ); - } - - connectedCallback() { - if (Build.isBrowser) { - const mut = (this.mutationO = new MutationObserver(() => { - if (this.swiperReady) { - this.update(); - } - })); - mut.observe(this.el, { - childList: true, - subtree: true, - }); - - componentOnReady(this.el, () => { - this.initSwiper(); - }); - } - } - - disconnectedCallback() { - if (this.mutationO) { - this.mutationO.disconnect(); - this.mutationO = undefined; - } - } - - /** - * Update the underlying slider implementation. Call this if you've added or removed - * child slides. - */ - @Method() - async update() { - const [swiper] = await Promise.all([this.getSwiper(), waitForSlides(this.el)]); - swiper.update(); - } - - /** - * Force swiper to update its height (when autoHeight is enabled) for the duration - * equal to 'speed' parameter. - * - * @param speed The transition duration (in ms). - */ - @Method() - async updateAutoHeight(speed?: number) { - const swiper = await this.getSwiper(); - swiper.updateAutoHeight(speed); - } - - /** - * Transition to the specified slide. - * - * @param index The index of the slide to transition to. - * @param speed The transition duration (in ms). - * @param runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events. - */ - @Method() - async slideTo(index: number, speed?: number, runCallbacks?: boolean) { - const swiper = await this.getSwiper(); - swiper.slideTo(index, speed, runCallbacks); - } - - /** - * Transition to the next slide. - * - * @param speed The transition duration (in ms). - * @param runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events. - */ - @Method() - async slideNext(speed?: number, runCallbacks?: boolean) { - const swiper = await this.getSwiper(); - swiper.slideNext(speed!, runCallbacks!); - } - - /** - * Transition to the previous slide. - * - * @param speed The transition duration (in ms). - * @param runCallbacks If true, the transition will produce the [Transition/SlideChange][Start/End] transition events. - */ - @Method() - async slidePrev(speed?: number, runCallbacks?: boolean) { - const swiper = await this.getSwiper(); - swiper.slidePrev(speed, runCallbacks); - } - - /** - * Get the index of the active slide. - */ - @Method() - async getActiveIndex(): Promise { - const swiper = await this.getSwiper(); - return swiper.activeIndex; - } - - /** - * Get the index of the previous slide. - */ - @Method() - async getPreviousIndex(): Promise { - const swiper = await this.getSwiper(); - return swiper.previousIndex; - } - - /** - * Get the total number of slides. - */ - @Method() - async length(): Promise { - const swiper = await this.getSwiper(); - return swiper.slides.length; - } - - /** - * Get whether or not the current slide is the last slide. - */ - @Method() - async isEnd(): Promise { - const swiper = await this.getSwiper(); - return swiper.isEnd; - } - - /** - * Get whether or not the current slide is the first slide. - */ - @Method() - async isBeginning(): Promise { - const swiper = await this.getSwiper(); - return swiper.isBeginning; - } - - /** - * Start auto play. - */ - @Method() - async startAutoplay() { - const swiper = await this.getSwiper(); - if (swiper.autoplay) { - swiper.autoplay.start(); - } - } - - /** - * Stop auto play. - */ - @Method() - async stopAutoplay() { - const swiper = await this.getSwiper(); - if (swiper.autoplay) { - swiper.autoplay.stop(); - } - } - - /** - * Lock or unlock the ability to slide to the next slide. - * - * @param lock If `true`, disable swiping to the next slide. - */ - @Method() - async lockSwipeToNext(lock: boolean) { - const swiper = await this.getSwiper(); - swiper.allowSlideNext = !lock; - } - - /** - * Lock or unlock the ability to slide to the previous slide. - * - * @param lock If `true`, disable swiping to the previous slide. - */ - @Method() - async lockSwipeToPrev(lock: boolean) { - const swiper = await this.getSwiper(); - swiper.allowSlidePrev = !lock; - } - - /** - * Lock or unlock the ability to slide to the next or previous slide. - * - * @param lock If `true`, disable swiping to the next and previous slide. - */ - @Method() - async lockSwipes(lock: boolean) { - const swiper = await this.getSwiper(); - swiper.allowSlideNext = !lock; - swiper.allowSlidePrev = !lock; - swiper.allowTouchMove = !lock; - } - - /** - * Get the Swiper instance. - * Use this to access the full Swiper API. - * See https://swiperjs.com/swiper-api for all API options. - */ - @Method() - async getSwiper(): Promise { - return this.swiper; - } - - private async initSwiper() { - const finalOptions = this.normalizeOptions(); - - // init swiper core - // eslint-disable-next-line - // @ts-ignore - const { Swiper } = await import('./swiper/swiper.bundle.js'); - await waitForSlides(this.el); - const swiper = new Swiper(this.el, finalOptions); - this.swiperReady = true; - this.readySwiper(swiper); - } - - private normalizeOptions(): SwiperOptions { - // Base options, can be changed - // TODO Add interface SwiperOptions - const swiperOptions: SwiperOptions = { - effect: undefined, - direction: 'horizontal', - initialSlide: 0, - loop: false, - parallax: false, - slidesPerView: 1, - spaceBetween: 0, - speed: 300, - slidesPerColumn: 1, - slidesPerColumnFill: 'column', - slidesPerGroup: 1, - centeredSlides: false, - slidesOffsetBefore: 0, - slidesOffsetAfter: 0, - touchEventsTarget: 'container', - autoplay: false, - freeMode: false, - freeModeMomentum: true, - freeModeMomentumRatio: 1, - freeModeMomentumBounce: true, - freeModeMomentumBounceRatio: 1, - freeModeMomentumVelocityRatio: 1, - freeModeSticky: false, - freeModeMinimumVelocity: 0.02, - autoHeight: false, - setWrapperSize: false, - zoom: { - maxRatio: 3, - minRatio: 1, - toggle: false, - }, - touchRatio: 1, - touchAngle: 45, - simulateTouch: true, - touchStartPreventDefault: false, - shortSwipes: true, - longSwipes: true, - longSwipesRatio: 0.5, - longSwipesMs: 300, - followFinger: true, - threshold: 0, - touchMoveStopPropagation: true, - touchReleaseOnEdges: false, - iOSEdgeSwipeDetection: false, - iOSEdgeSwipeThreshold: 20, - resistance: true, - resistanceRatio: 0.85, - watchSlidesProgress: false, - watchSlidesVisibility: false, - preventClicks: true, - preventClicksPropagation: true, - slideToClickedSlide: false, - loopAdditionalSlides: 0, - noSwiping: true, - runCallbacksOnInit: true, - coverflowEffect: { - rotate: 50, - stretch: 0, - depth: 100, - modifier: 1, - slideShadows: true, - }, - flipEffect: { - slideShadows: true, - limitRotation: true, - }, - cubeEffect: { - slideShadows: true, - shadow: true, - shadowOffset: 20, - shadowScale: 0.94, - }, - fadeEffect: { - crossFade: false, - }, - a11y: { - prevSlideMessage: 'Previous slide', - nextSlideMessage: 'Next slide', - firstSlideMessage: 'This is the first slide', - lastSlideMessage: 'This is the last slide', - }, - }; - - if (this.pager) { - swiperOptions.pagination = { - el: this.paginationEl!, - type: 'bullets', - clickable: false, - hideOnClick: false, - }; - } - - if (this.scrollbar) { - swiperOptions.scrollbar = { - el: this.scrollbarEl!, - hide: true, - }; - } - - // Keep the event options separate, we dont want users - // overwriting these - const eventOptions: SwiperOptions = { - on: { - init: () => { - setTimeout(() => { - this.ionSlidesDidLoad.emit(); - // Forces the swiper instance to update after initializing. - this.update(); - }, 20); - }, - slideChangeTransitionStart: this.ionSlideWillChange.emit, - slideChangeTransitionEnd: this.ionSlideDidChange.emit, - slideNextTransitionStart: this.ionSlideNextStart.emit, - slidePrevTransitionStart: this.ionSlidePrevStart.emit, - slideNextTransitionEnd: this.ionSlideNextEnd.emit, - slidePrevTransitionEnd: this.ionSlidePrevEnd.emit, - transitionStart: this.ionSlideTransitionStart.emit, - transitionEnd: this.ionSlideTransitionEnd.emit, - sliderMove: this.ionSlideDrag.emit, - reachBeginning: this.ionSlideReachStart.emit, - reachEnd: this.ionSlideReachEnd.emit, - touchStart: this.ionSlideTouchStart.emit, - touchEnd: this.ionSlideTouchEnd.emit, - tap: this.ionSlideTap.emit, - doubleTap: this.ionSlideDoubleTap.emit, - }, - }; - - const customEvents = !!this.options && !!this.options.on ? this.options.on : {}; - - // merge "on" event listeners, while giving our event listeners priority - const mergedEventOptions = { on: { ...customEvents, ...eventOptions.on } }; - - // Merge the base, user options, and events together then pas to swiper - return { ...swiperOptions, ...this.options, ...mergedEventOptions }; - } - - render() { - const mode = getIonMode(this); - return ( - -
- -
- {this.pager &&
(this.paginationEl = el)}>
} - {this.scrollbar &&
(this.scrollbarEl = el)}>
} - - ); - } -} - -const waitForSlides = (el: HTMLElement) => { - return Promise.all( - Array.from(el.querySelectorAll('ion-slide')).map((s) => new Promise((resolve) => componentOnReady(s, resolve))) - ); -}; diff --git a/core/src/components/slides/slides.vars.scss b/core/src/components/slides/slides.vars.scss deleted file mode 100644 index f0bed98927b..00000000000 --- a/core/src/components/slides/slides.vars.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import "../../themes/ionic.globals"; - -// Slides -// -------------------------------------------------- - - diff --git a/core/src/components/slides/test/app-intro/index.html b/core/src/components/slides/test/app-intro/index.html deleted file mode 100644 index 75b26ea9bd5..00000000000 --- a/core/src/components/slides/test/app-intro/index.html +++ /dev/null @@ -1,119 +0,0 @@ - - - - - Slides - App Intro - - - - - - - - - - - - - - - - Prev - - - Next - - - - - - - -
-

- Welcome to - ICA -

-

- The - ionic conference app is a practical preview of the ionic framework in action, and a demonstration - of proper code use. -

-
- - - - -
-

What is Ionic?

-

- Ionic Framework is an open source SDK that enables developers to build high quality mobile apps - with web technologies like HTML, CSS, and JavaScript. -

-
- - - - -
-

What is Ionic Pro?

-

- Ionic Pro is a powerful set of services and features built on top of Ionic Framework that brings - a totally new level of app development agility to mobile dev teams. -

-
- - - - - Back to the start - - - - - - - diff --git a/core/src/components/slides/test/basic/e2e.ts b/core/src/components/slides/test/basic/e2e.ts deleted file mode 100644 index 01279aefc87..00000000000 --- a/core/src/components/slides/test/basic/e2e.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('slides: basic', async () => { - const page = await newE2EPage({ - url: '/src/components/slides/test/basic?ionic:_testing=true', - }); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); diff --git a/core/src/components/slides/test/basic/index.html b/core/src/components/slides/test/basic/index.html deleted file mode 100644 index 197154b9563..00000000000 --- a/core/src/components/slides/test/basic/index.html +++ /dev/null @@ -1,179 +0,0 @@ - - - - - Slides - Basic - - - - - - - - - - - - - - - -

Slide 1

- - -

Slide 2

- - -

Slide 3

- - - Add slide - Remove slide - - Slide Prev - Slide Next - Get Active Index - Get Previous Index - - Is the End? - Is the beginning? - - Slide to slide index 2 - Get slide length - Start auto play - Stop auto play - Set options - - - - - diff --git a/core/src/components/slides/test/image/cat.jpeg b/core/src/components/slides/test/image/cat.jpeg deleted file mode 100644 index 36bd32d143c579dcfceea85e6aa35fa92ffe30de..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 11237 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 { - const page = await newE2EPage({ - url: '/src/components/slides/test/image?ionic:_testing=true', - }); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); diff --git a/core/src/components/slides/test/image/index.html b/core/src/components/slides/test/image/index.html deleted file mode 100644 index 5a82431e60e..00000000000 --- a/core/src/components/slides/test/image/index.html +++ /dev/null @@ -1,158 +0,0 @@ - - - - - Slides - Image - - - - - - - - - - - - - - - - - - - - - - - - - Slide Prev - Slide Next - Get Active Index - Get Previous Index - - Is the End? - Is the beginning? - - Slide to slide index 2 - Get slide length - Start auto play - Stop auto play - Set options - - - - - diff --git a/core/src/components/slides/test/pagination/index.html b/core/src/components/slides/test/pagination/index.html deleted file mode 100644 index c54c4e108f6..00000000000 --- a/core/src/components/slides/test/pagination/index.html +++ /dev/null @@ -1,140 +0,0 @@ - - - - - Slides - Pagination - - - - - - - - - - - - - - -

Default Slides

- - -

Slide 2

- - -

Slide 3

- - - - - -

Bullet Pagination

- - -

Slide 2

- - -

Slide 3

- - - - - -

Custom Bullet Pagination

- - -

Slide 2

- - -

Slide 3

- - - - - -

Progress Pagination

- - -

Slide 2

- - -

Slide 3

- - - - - -

Custom Progress Pagination

- - -

Slide 2

- - -

Slide 3

- - - - - -

Fraction Pagination

- - -

Slide 2

- - -

Slide 3

- - - - - - - - - - diff --git a/core/src/components/slides/test/prevent-default/e2e.ts b/core/src/components/slides/test/prevent-default/e2e.ts deleted file mode 100644 index e92c108342d..00000000000 --- a/core/src/components/slides/test/prevent-default/e2e.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('slides: prevent-default', async () => { - // For this specific test, _testing=false to import tap-click in app.tsx - const page = await newE2EPage({ - url: '/src/components/slides/test/prevent-default?ionic:_testing=false', - }); - - const screenshotCompares = []; - - screenshotCompares.push(await page.compareScreenshot()); - - const scroller = await page.find('#scrollDownButton'); - const button = await page.find('#changeBackgroundButton'); - const contentWithBackground = await page.find('#contentWithBackground'); - - await page.waitForTimeout(500); - - await scroller.click(); - await page.waitForTimeout(500); - - screenshotCompares.push(await page.compareScreenshot('scroll down button')); - - await button.click(); - - screenshotCompares.push(await page.compareScreenshot('change background')); - - expect(contentWithBackground).toHaveClasses(['blueBackground']); - - for (const screenshotCompare of screenshotCompares) { - expect(screenshotCompare).toMatchScreenshot(); - } -}); diff --git a/core/src/components/slides/test/prevent-default/index.html b/core/src/components/slides/test/prevent-default/index.html deleted file mode 100644 index 8c95e4ac88d..00000000000 --- a/core/src/components/slides/test/prevent-default/index.html +++ /dev/null @@ -1,53 +0,0 @@ - - - - - Slides - Prevent Default - - - - - - - - - - - - - - -
- Scroll down -
-
- Change Background -
- - - - - - - - diff --git a/core/src/components/slides/test/scrollbar/index.html b/core/src/components/slides/test/scrollbar/index.html deleted file mode 100644 index 92b74476213..00000000000 --- a/core/src/components/slides/test/scrollbar/index.html +++ /dev/null @@ -1,100 +0,0 @@ - - - - - Slides - Scrollbar - - - - - - - - - - - - - - -

Default Slides

- - -

Slide 2

- - -

Slide 3

- - - - - -

Scrollbar

- - -

Slide 2

- - -

Slide 3

- - - - - -

Visible Scrollbar

- - -

Slide 2

- - -

Slide 3

- - - - - -

Custom Visible Scrollbar

- - -

Slide 2

- - -

Slide 3

- - - - - - - - - - diff --git a/core/src/components/slides/test/standalone/e2e.ts b/core/src/components/slides/test/standalone/e2e.ts deleted file mode 100644 index e7f1bccff69..00000000000 --- a/core/src/components/slides/test/standalone/e2e.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('slides: standalone', async () => { - const page = await newE2EPage({ - url: '/src/components/slides/test/standalone?ionic:_testing=true', - }); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); diff --git a/core/src/components/slides/test/standalone/index.html b/core/src/components/slides/test/standalone/index.html deleted file mode 100644 index 671d1f683b9..00000000000 --- a/core/src/components/slides/test/standalone/index.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - - Slides - Standalone - - - - - - - - - - - -

Slide 1

- - - -

Slide 2

- - - -

Slide 3

- - - - - diff --git a/core/src/components/slides/test/vertical/e2e.ts b/core/src/components/slides/test/vertical/e2e.ts deleted file mode 100644 index d3c57a304a8..00000000000 --- a/core/src/components/slides/test/vertical/e2e.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('slides: vertical', async () => { - const page = await newE2EPage({ - url: '/src/components/slides/test/vertical?ionic:_testing=true', - }); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); diff --git a/core/src/components/slides/test/vertical/index.html b/core/src/components/slides/test/vertical/index.html deleted file mode 100644 index 6aeb0ec36b4..00000000000 --- a/core/src/components/slides/test/vertical/index.html +++ /dev/null @@ -1,50 +0,0 @@ - - - - - Slides - Vertical - - - - - - - - - - - - - - -

Slide 1

- - -

Slide 2

- - -

Slide 3

- - - - - - - - - - diff --git a/core/src/css/ionic-swiper.scss b/core/src/css/ionic-swiper.scss deleted file mode 100644 index 24e5eaaf4e9..00000000000 --- a/core/src/css/ionic-swiper.scss +++ /dev/null @@ -1,102 +0,0 @@ -@import "../themes/ionic.skip-warns.scss"; -@import "../components/slides/slides.ios.vars.scss"; - -// Slides -// -------------------------------------------------- - -.swiper { - - // These values are the same for iOS and MD - // We just do not add a .md or .ios class beforehand - // so the styles are easier to override by the user. - --bullet-background: #{$slides-ios-bullet-background}; - --bullet-background-active: #{$slides-ios-bullet-background-active}; - --progress-bar-background: #{$slides-ios-progress-bar-background}; - --progress-bar-background-active: #{$slides-ios-progress-bar-background-active}; - --scroll-bar-background: #{$slides-ios-scroll-bar-background}; - --scroll-bar-background-active: #{$slides-ios-scroll-bar-drag-background}; - /** - * @prop --bullet-background: Background of the pagination bullets - * @prop --bullet-background-active: Background of the active pagination bullet - * - * @prop --progress-bar-background: Background of the pagination progress-bar - * @prop --progress-bar-background-active: Background of the active pagination progress-bar - * - * @prop --scroll-bar-background: Background of the pagination scroll-bar - * @prop --scroll-bar-background-active: Background of the active pagination scroll-bar - */ - display: block; - - user-select: none; -} - -// Pagination Bullets -// -------------------------------------------------- - -.swiper .swiper-pagination-bullet { - background: var(--bullet-background); -} - -.swiper .swiper-pagination-bullet-active { - background: var(--bullet-background-active); -} - - -// Pagination Progress Bar -// -------------------------------------------------- - -.swiper .swiper-pagination-progressbar { - background: var(--progress-bar-background); -} - -.swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { - background: var(--progress-bar-background-active); -} - -// Scrollbar -// -------------------------------------------------- - -.swiper .swiper-scrollbar { - background: var(--scroll-bar-background); -} - -.swiper .swiper-scrollbar-drag { - background: var(--scroll-bar-background-active); -} - -// Slide -// -------------------------------------------------- - -.swiper .slide-zoom { - display: block; - - width: 100%; - - text-align: center; -} - -.swiper .swiper-slide { - - // Center slide text vertically - display: flex; - position: relative; - - flex-shrink: 0; - align-items: center; - justify-content: center; - - width: 100%; - height: 100%; - - font-size: 18px; - - text-align: center; - box-sizing: border-box; -} - -.swiper .swiper-slide img { - width: auto; - max-width: 100%; - height: auto; - max-height: 100%; -} diff --git a/core/src/index.ts b/core/src/index.ts index 7d0c7131cff..69443064338 100644 --- a/core/src/index.ts +++ b/core/src/index.ts @@ -27,5 +27,4 @@ export { popoverController, toastController, } from './utils/overlays'; -export { IonicSwiper } from './components/slides/IonicSwiper'; export { IonicSlides } from './components/slides/IonicSlides'; diff --git a/core/src/utils/test/modes/e2e.ts b/core/src/utils/test/modes/e2e.ts index d814245e524..e62af3e366e 100644 --- a/core/src/utils/test/modes/e2e.ts +++ b/core/src/utils/test/modes/e2e.ts @@ -48,7 +48,6 @@ test('component: modes', async () => { 'ion-list', 'ion-picker', 'ion-refresher', - 'ion-slides', 'ion-split-pane', ]; @@ -130,8 +129,6 @@ test('component: modes', async () => { 'ion-select-option', 'ion-select-popover', 'ion-skeleton-text', - 'ion-slide', - 'ion-slides', 'ion-spinner', 'ion-split-pane', 'ion-tab-bar', diff --git a/core/src/utils/test/modes/index.html b/core/src/utils/test/modes/index.html index 6139084cf03..27b9fc24f9e 100644 --- a/core/src/utils/test/modes/index.html +++ b/core/src/utils/test/modes/index.html @@ -93,8 +93,6 @@ - - diff --git a/core/stencil.config.ts b/core/stencil.config.ts index 0c4fd477d65..00bc7a9219c 100644 --- a/core/stencil.config.ts +++ b/core/stencil.config.ts @@ -45,7 +45,6 @@ export const config: Config = { { components: ['ion-searchbar'] }, { components: ['ion-segment', 'ion-segment-button'] }, { components: ['ion-select', 'ion-select-option', 'ion-select-popover'] }, - { components: ['ion-slides', 'ion-slide'] }, { components: ['ion-spinner'] }, { components: ['ion-split-pane'] }, { components: ['ion-tabs', 'ion-tab'] }, diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 99c47be63ce..3f0e1156ec9 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -6,7 +6,6 @@ export { createGesture, iosTransitionAnimation, mdTransitionAnimation, - IonicSwiper, IonicSlides, getTimeGivenProgression, diff --git a/packages/react/src/components/proxies.ts b/packages/react/src/components/proxies.ts index aa2b07fb80e..99897431763 100644 --- a/packages/react/src/components/proxies.ts +++ b/packages/react/src/components/proxies.ts @@ -60,8 +60,6 @@ import { defineCustomElement as defineIonSegmentButton } from '@ionic/core/compo import { defineCustomElement as defineIonSelect } from '@ionic/core/components/ion-select.js'; import { defineCustomElement as defineIonSelectOption } from '@ionic/core/components/ion-select-option.js'; import { defineCustomElement as defineIonSkeletonText } from '@ionic/core/components/ion-skeleton-text.js'; -import { defineCustomElement as defineIonSlide } from '@ionic/core/components/ion-slide.js'; -import { defineCustomElement as defineIonSlides } from '@ionic/core/components/ion-slides.js'; import { defineCustomElement as defineIonSpinner } from '@ionic/core/components/ion-spinner.js'; import { defineCustomElement as defineIonSplitPane } from '@ionic/core/components/ion-split-pane.js'; import { defineCustomElement as defineIonTab } from '@ionic/core/components/ion-tab.js'; @@ -127,8 +125,6 @@ export const IonSegmentButton = /*@__PURE__*/createReactComponent('ion-select', undefined, undefined, defineIonSelect); export const IonSelectOption = /*@__PURE__*/createReactComponent('ion-select-option', undefined, undefined, defineIonSelectOption); export const IonSkeletonText = /*@__PURE__*/createReactComponent('ion-skeleton-text', undefined, undefined, defineIonSkeletonText); -export const IonSlide = /*@__PURE__*/createReactComponent('ion-slide', undefined, undefined, defineIonSlide); -export const IonSlides = /*@__PURE__*/createReactComponent('ion-slides', undefined, undefined, defineIonSlides); export const IonSpinner = /*@__PURE__*/createReactComponent('ion-spinner', undefined, undefined, defineIonSpinner); export const IonSplitPane = /*@__PURE__*/createReactComponent('ion-split-pane', undefined, undefined, defineIonSplitPane); export const IonTab = /*@__PURE__*/createReactComponent('ion-tab', undefined, undefined, defineIonTab); diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts index 0c1426cb9c9..a7682b017cb 100644 --- a/packages/vue/src/index.ts +++ b/packages/vue/src/index.ts @@ -37,7 +37,6 @@ export { createGesture, iosTransitionAnimation, mdTransitionAnimation, - IonicSwiper, IonicSlides, getPlatforms, isPlatform, diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 39b0807b199..59ffa8f2282 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -66,8 +66,6 @@ import { defineCustomElement as defineIonSegmentButton } from '@ionic/core/compo import { defineCustomElement as defineIonSelect } from '@ionic/core/components/ion-select.js'; import { defineCustomElement as defineIonSelectOption } from '@ionic/core/components/ion-select-option.js'; import { defineCustomElement as defineIonSkeletonText } from '@ionic/core/components/ion-skeleton-text.js'; -import { defineCustomElement as defineIonSlide } from '@ionic/core/components/ion-slide.js'; -import { defineCustomElement as defineIonSlides } from '@ionic/core/components/ion-slides.js'; import { defineCustomElement as defineIonSpinner } from '@ionic/core/components/ion-spinner.js'; import { defineCustomElement as defineIonSplitPane } from '@ionic/core/components/ion-split-pane.js'; import { defineCustomElement as defineIonText } from '@ionic/core/components/ion-text.js'; @@ -732,32 +730,6 @@ export const IonSkeletonText = /*@__PURE__*/ defineContainer('ion-slide', defineIonSlide); - - -export const IonSlides = /*@__PURE__*/ defineContainer('ion-slides', defineIonSlides, [ - 'options', - 'pager', - 'scrollbar', - 'ionSlidesDidLoad', - 'ionSlideTap', - 'ionSlideDoubleTap', - 'ionSlideWillChange', - 'ionSlideDidChange', - 'ionSlideNextStart', - 'ionSlidePrevStart', - 'ionSlideNextEnd', - 'ionSlidePrevEnd', - 'ionSlideTransitionStart', - 'ionSlideTransitionEnd', - 'ionSlideDrag', - 'ionSlideReachStart', - 'ionSlideReachEnd', - 'ionSlideTouchStart', - 'ionSlideTouchEnd' -]); - - export const IonSpinner = /*@__PURE__*/ defineContainer('ion-spinner', defineIonSpinner, [ 'color', 'duration', diff --git a/packages/vue/src/vue-component-lib/utils.ts b/packages/vue/src/vue-component-lib/utils.ts index e48debacfad..c04c013970e 100644 --- a/packages/vue/src/vue-component-lib/utils.ts +++ b/packages/vue/src/vue-component-lib/utils.ts @@ -1,7 +1,7 @@ import { VNode, defineComponent, getCurrentInstance, h, inject, ref, Ref } from 'vue'; -export interface InputProps { - modelValue?: T; +export interface InputProps { + modelValue?: string | boolean; } const UPDATE_VALUE_EVENT = 'update:modelValue'; @@ -49,7 +49,7 @@ const getElementClasses = (ref: Ref, componentClasses: * @prop externalModelUpdateEvent - The external event to fire from your Vue component when modelUpdateEvent fires. This is used for ensuring that v-model references have been * correctly updated when a user's event callback fires. */ -export const defineContainer = ( +export const defineContainer = ( name: string, defineCustomElement: any, componentProps: string[] = [], @@ -67,7 +67,7 @@ export const defineContainer = ( defineCustomElement(); } - const Container = defineComponent>((props: any, { attrs, slots, emit }) => { + const Container = defineComponent((props: any, { attrs, slots, emit }) => { let modelPropValue = props[modelProp]; const containerRef = ref(); const classes = new Set(getComponentClasses(attrs.class)); @@ -76,7 +76,7 @@ export const defineContainer = ( if (vnode.el) { const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent]; eventsNames.forEach((eventName: string) => { - vnode.el!.addEventListener(eventName.toLowerCase(), (e: Event) => { + vnode.el.addEventListener(eventName.toLowerCase(), (e: Event) => { modelPropValue = (e?.target as any)[modelProp]; emit(UPDATE_VALUE_EVENT, modelPropValue); diff --git a/packages/vue/test-app/src/router/index.ts b/packages/vue/test-app/src/router/index.ts index 7f6f9422d95..3cc2de01fec 100644 --- a/packages/vue/test-app/src/router/index.ts +++ b/packages/vue/test-app/src/router/index.ts @@ -33,10 +33,6 @@ const routes: Array = [ path: '/inputs', component: () => import('@/views/Inputs.vue') }, - { - path: '/slides', - component: () => import('@/views/Slides.vue') - }, { path: '/default-href', component: () => import('@/views/DefaultHref.vue') diff --git a/packages/vue/test-app/src/views/Home.vue b/packages/vue/test-app/src/views/Home.vue index cbd4155feab..6e4ded880f2 100644 --- a/packages/vue/test-app/src/views/Home.vue +++ b/packages/vue/test-app/src/views/Home.vue @@ -23,9 +23,6 @@ Inputs - - Slides - Navigation diff --git a/packages/vue/test-app/src/views/Slides.vue b/packages/vue/test-app/src/views/Slides.vue deleted file mode 100644 index 1114a909e6f..00000000000 --- a/packages/vue/test-app/src/views/Slides.vue +++ /dev/null @@ -1,118 +0,0 @@ - - - - - diff --git a/packages/vue/types/proxies.d.ts b/packages/vue/types/proxies.d.ts index 6c199f708e6..7a302ea122a 100644 --- a/packages/vue/types/proxies.d.ts +++ b/packages/vue/types/proxies.d.ts @@ -69,8 +69,6 @@ export declare const IonSegmentButton: import("vue").FunctionalComponent; export declare const IonSelectOption: import("vue").FunctionalComponent; export declare const IonSkeletonText: import("vue").FunctionalComponent; -export declare const IonSlide: import("vue").FunctionalComponent; -export declare const IonSlides: import("vue").FunctionalComponent; export declare const IonSpinner: import("vue").FunctionalComponent; export declare const IonSplitPane: import("vue").FunctionalComponent; export declare const IonTab: import("vue").FunctionalComponent; From bcaed9a3bc87aed0206b571a4f2c2fd9d0305e32 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Wed, 31 Aug 2022 12:24:12 -0500 Subject: [PATCH 02/10] chore(): update breaking changes --- BREAKING.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/BREAKING.md b/BREAKING.md index ba3edd34cd9..4f427a8c748 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -15,6 +15,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver - [Components](#version-7x-components) - [Overlays](#version-7x-overlays) - [Virtual Scroll](#version-7x-virtual-scroll) + - [Slides](#version-7x-slides) - [Browser and Platform Support](#version-7x-browser-platform-support) - [Utilities](#version-7x-utilities) - [hidden attribute](#version-7x-hidden-attribute) @@ -37,6 +38,16 @@ Developers using the component will need to migrate to a virtual scroll solution Any references to the virtual scroll types from `@ionic/core` have been removed. Please remove or replace these types: `Cell`, `VirtualNode`, `CellType`, `NodeChange`, `HeaderFn`, `ItemHeightFn`, `FooterHeightFn`, `ItemRenderFn` and `DomRenderFn`. +

Slides

+ +`ion-slides`, `ion-slide`, and the `IonicSwiper` module have been removed from Ionic. + +Developers using these components will need to migrate to using Swiper.js directly, optionally using the `IonicSlides` module. Guides for migration and usage are linked below: + +- [Angular](https://ionicframework.com/docs/angular/slides) +- [React](https://ionicframework.com/docs/react/slides) +- [Vue](https://ionicframework.com/docs/vue/slides) +

Browser and Platform Support

This section details the desktop browser, JavaScript framework, and mobile platform versions that are supported by Ionic 7. From 76760fd171d41f26934adcb036410e3394510aba Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Wed, 31 Aug 2022 12:36:22 -0500 Subject: [PATCH 03/10] chore(): lint --- angular/src/directives/proxies-list.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/angular/src/directives/proxies-list.ts b/angular/src/directives/proxies-list.ts index 77ae2f4ab74..96aeedcdfb2 100644 --- a/angular/src/directives/proxies-list.ts +++ b/angular/src/directives/proxies-list.ts @@ -1,4 +1,3 @@ - import * as d from './proxies'; export const DIRECTIVES = [ @@ -75,5 +74,5 @@ export const DIRECTIVES = [ d.IonThumbnail, d.IonTitle, d.IonToggle, - d.IonToolbar + d.IonToolbar, ]; From 4c0d5f80f8d99382ea45c9331c6aa458dfcf983f Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Wed, 31 Aug 2022 12:46:42 -0500 Subject: [PATCH 04/10] fix(): revert ionic-swiper.scss deletion --- core/src/css/ionic-swiper.scss | 102 +++++++++++++++++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 core/src/css/ionic-swiper.scss diff --git a/core/src/css/ionic-swiper.scss b/core/src/css/ionic-swiper.scss new file mode 100644 index 00000000000..24e5eaaf4e9 --- /dev/null +++ b/core/src/css/ionic-swiper.scss @@ -0,0 +1,102 @@ +@import "../themes/ionic.skip-warns.scss"; +@import "../components/slides/slides.ios.vars.scss"; + +// Slides +// -------------------------------------------------- + +.swiper { + + // These values are the same for iOS and MD + // We just do not add a .md or .ios class beforehand + // so the styles are easier to override by the user. + --bullet-background: #{$slides-ios-bullet-background}; + --bullet-background-active: #{$slides-ios-bullet-background-active}; + --progress-bar-background: #{$slides-ios-progress-bar-background}; + --progress-bar-background-active: #{$slides-ios-progress-bar-background-active}; + --scroll-bar-background: #{$slides-ios-scroll-bar-background}; + --scroll-bar-background-active: #{$slides-ios-scroll-bar-drag-background}; + /** + * @prop --bullet-background: Background of the pagination bullets + * @prop --bullet-background-active: Background of the active pagination bullet + * + * @prop --progress-bar-background: Background of the pagination progress-bar + * @prop --progress-bar-background-active: Background of the active pagination progress-bar + * + * @prop --scroll-bar-background: Background of the pagination scroll-bar + * @prop --scroll-bar-background-active: Background of the active pagination scroll-bar + */ + display: block; + + user-select: none; +} + +// Pagination Bullets +// -------------------------------------------------- + +.swiper .swiper-pagination-bullet { + background: var(--bullet-background); +} + +.swiper .swiper-pagination-bullet-active { + background: var(--bullet-background-active); +} + + +// Pagination Progress Bar +// -------------------------------------------------- + +.swiper .swiper-pagination-progressbar { + background: var(--progress-bar-background); +} + +.swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { + background: var(--progress-bar-background-active); +} + +// Scrollbar +// -------------------------------------------------- + +.swiper .swiper-scrollbar { + background: var(--scroll-bar-background); +} + +.swiper .swiper-scrollbar-drag { + background: var(--scroll-bar-background-active); +} + +// Slide +// -------------------------------------------------- + +.swiper .slide-zoom { + display: block; + + width: 100%; + + text-align: center; +} + +.swiper .swiper-slide { + + // Center slide text vertically + display: flex; + position: relative; + + flex-shrink: 0; + align-items: center; + justify-content: center; + + width: 100%; + height: 100%; + + font-size: 18px; + + text-align: center; + box-sizing: border-box; +} + +.swiper .swiper-slide img { + width: auto; + max-width: 100%; + height: auto; + max-height: 100%; +} From 3fb1bfd14ae3a870db0ce319793e6de7edcfb7bb Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Wed, 31 Aug 2022 12:55:51 -0500 Subject: [PATCH 05/10] fix(): revert slides.ios.vars.scss deletion --- .../components/slides/slides.ios.vars.scss | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 core/src/components/slides/slides.ios.vars.scss diff --git a/core/src/components/slides/slides.ios.vars.scss b/core/src/components/slides/slides.ios.vars.scss new file mode 100644 index 00000000000..73aec90e3e3 --- /dev/null +++ b/core/src/components/slides/slides.ios.vars.scss @@ -0,0 +1,28 @@ +@import "../../themes/ionic.globals.ios"; + +/// @prop - Background color of the bullet +$slides-ios-bullet-background: $text-color-step-800 !default; + +/// @prop - Background color of the active bullet +$slides-ios-bullet-background-active: ion-color(primary, base) !default; + +/// @prop - Alpha to use for the background color of the progress bar +$slides-ios-progress-bar-background-alpha: .25 !default; + +/// @prop - Background color of the progress bar +$slides-ios-progress-bar-background: rgba($text-color-rgb, $slides-ios-progress-bar-background-alpha) !default; + +/// @prop - Background color of the active progress bar +$slides-ios-progress-bar-background-active: ion-color(primary, shade) !default; + +/// @prop - Alpha to use for the background color of the scroll bar +$slides-ios-scroll-bar-background-alpha: .1 !default; + +/// @prop - Background color of the scroll bar +$slides-ios-scroll-bar-background: rgba($text-color-rgb, $slides-ios-scroll-bar-background-alpha) !default; + +/// @prop - Alpha to use for the background color of the scroll bar while dragging +$slides-ios-scroll-bar-drag-background-alpha: .5 !default; + +/// @prop - Background color of the scroll bar drag handle +$slides-ios-scroll-bar-drag-background: rgba($text-color-rgb, $slides-ios-scroll-bar-drag-background-alpha) !default; From 6bfbc8f9edfded6564abe6b3cc04f44fbd2ecb66 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Thu, 1 Sep 2022 13:02:35 -0500 Subject: [PATCH 06/10] fix(): remove dead slides code --- core/.stylelintrc.yml | 1 - core/src/components/slides/slides-vendor.scss | 621 ------------------ 2 files changed, 622 deletions(-) delete mode 100644 core/src/components/slides/slides-vendor.scss diff --git a/core/.stylelintrc.yml b/core/.stylelintrc.yml index 70a8b0c17b9..ce59b8ca208 100644 --- a/core/.stylelintrc.yml +++ b/core/.stylelintrc.yml @@ -8,7 +8,6 @@ ignoreFiles: - src/css/normalize.scss - src/css/text-alignment.scss - src/css/display.scss - - src/components/slides/slides-vendor.scss - src/themes/ionic.mixins.scss - src/themes/ionic.functions.color.scss - src/themes/ionic.functions.string.scss diff --git a/core/src/components/slides/slides-vendor.scss b/core/src/components/slides/slides-vendor.scss deleted file mode 100644 index 549f361a951..00000000000 --- a/core/src/components/slides/slides-vendor.scss +++ /dev/null @@ -1,621 +0,0 @@ -/** - * Swiper 4.3.5 - * Most modern mobile touch slider and framework with hardware accelerated transitions - * http://www.idangero.us/swiper/ - * - * Copyright 2014-2018 Vladimir Kharlampidi - * - * Released under the MIT License - * - * Released on: July 31, 2018 - */ -.swiper-container { - margin: 0 auto; - position: relative; - overflow: hidden; - list-style: none; - padding: 0; - /* Fix of Webkit flickering */ - z-index: 1; -} -.swiper-container-no-flexbox .swiper-slide { - float: left; -} -.swiper-container-vertical { - height: 100%; -} -.swiper-container-vertical > .swiper-wrapper { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} -.swiper-wrapper { - position: relative; - width: 100%; - height: 100%; - z-index: 1; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-transition-property: -webkit-transform; - transition-property: -webkit-transform; - -o-transition-property: transform; - transition-property: transform; - transition-property: transform, -webkit-transform; - -webkit-box-sizing: content-box; - box-sizing: content-box; -} -.swiper-container-android .swiper-slide, -.swiper-wrapper { - -webkit-transform: translate3d(0px, 0, 0); - transform: translate3d(0px, 0, 0); -} -.swiper-container-multirow > .swiper-wrapper { - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} -.swiper-container-free-mode > .swiper-wrapper { - -webkit-transition-timing-function: ease-out; - -o-transition-timing-function: ease-out; - transition-timing-function: ease-out; - margin: 0 auto; -} -.swiper-slide { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - width: 100%; - height: 100%; - position: relative; - -webkit-transition-property: -webkit-transform; - transition-property: -webkit-transform; - -o-transition-property: transform; - transition-property: transform; - transition-property: transform, -webkit-transform; -} -.swiper-invisible-blank-slide { - visibility: hidden; -} -/* Auto Height */ -.swiper-container-autoheight, -.swiper-container-autoheight .swiper-slide { - height: auto; -} -.swiper-container-autoheight .swiper-wrapper { - -webkit-box-align: start; - -webkit-align-items: flex-start; - -ms-flex-align: start; - align-items: flex-start; - -webkit-transition-property: height, -webkit-transform; - transition-property: height, -webkit-transform; - -o-transition-property: transform, height; - transition-property: transform, height; - transition-property: transform, height, -webkit-transform; -} -/* 3D Effects */ -.swiper-container-3d { - -webkit-perspective: 1200px; - perspective: 1200px; -} -.swiper-container-3d .swiper-wrapper, -.swiper-container-3d .swiper-slide, -.swiper-container-3d .swiper-slide-shadow-left, -.swiper-container-3d .swiper-slide-shadow-right, -.swiper-container-3d .swiper-slide-shadow-top, -.swiper-container-3d .swiper-slide-shadow-bottom, -.swiper-container-3d .swiper-cube-shadow { - -webkit-transform-style: preserve-3d; - transform-style: preserve-3d; -} -.swiper-container-3d .swiper-slide-shadow-left, -.swiper-container-3d .swiper-slide-shadow-right, -.swiper-container-3d .swiper-slide-shadow-top, -.swiper-container-3d .swiper-slide-shadow-bottom { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - pointer-events: none; - z-index: 10; -} -.swiper-container-3d .swiper-slide-shadow-left { - background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); - background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); - background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); - background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); -} -.swiper-container-3d .swiper-slide-shadow-right { - background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); - background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); - background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); - background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); -} -.swiper-container-3d .swiper-slide-shadow-top { - background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); - background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); - background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); - background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); -} -.swiper-container-3d .swiper-slide-shadow-bottom { - background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); - background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); - background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); -} -/* IE10 Windows Phone 8 Fixes */ -.swiper-container-wp8-horizontal, -.swiper-container-wp8-horizontal > .swiper-wrapper { - -ms-touch-action: pan-y; - touch-action: pan-y; -} -.swiper-container-wp8-vertical, -.swiper-container-wp8-vertical > .swiper-wrapper { - -ms-touch-action: pan-x; - touch-action: pan-x; -} -.swiper-button-prev, -.swiper-button-next { - position: absolute; - top: 50%; - width: 27px; - height: 44px; - margin-top: -22px; - z-index: 10; - cursor: pointer; - background-size: 27px 44px; - background-position: center; - background-repeat: no-repeat; -} -.swiper-button-prev.swiper-button-disabled, -.swiper-button-next.swiper-button-disabled { - opacity: 0.35; - cursor: auto; - pointer-events: none; -} -.swiper-button-prev, -.swiper-container-rtl .swiper-button-next { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); - left: 10px; - right: auto; -} -.swiper-button-next, -.swiper-container-rtl .swiper-button-prev { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); - right: 10px; - left: auto; -} -.swiper-button-prev.swiper-button-white, -.swiper-container-rtl .swiper-button-next.swiper-button-white { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); -} -.swiper-button-next.swiper-button-white, -.swiper-container-rtl .swiper-button-prev.swiper-button-white { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); -} -.swiper-button-prev.swiper-button-black, -.swiper-container-rtl .swiper-button-next.swiper-button-black { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); -} -.swiper-button-next.swiper-button-black, -.swiper-container-rtl .swiper-button-prev.swiper-button-black { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); -} -.swiper-button-lock { - display: none; -} -.swiper-pagination { - position: absolute; - text-align: center; - -webkit-transition: 300ms opacity; - -o-transition: 300ms opacity; - transition: 300ms opacity; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - z-index: 10; -} -.swiper-pagination.swiper-pagination-hidden { - opacity: 0; -} -/* Common Styles */ -.swiper-pagination-fraction, -.swiper-pagination-custom, -.swiper-container-horizontal > .swiper-pagination-bullets { - bottom: 10px; - left: 0; - width: 100%; -} -/* Bullets */ -.swiper-pagination-bullets-dynamic { - overflow: hidden; - font-size: 0; -} -.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { - -webkit-transform: scale(0.33); - -ms-transform: scale(0.33); - transform: scale(0.33); - position: relative; -} -.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); -} -.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); -} -.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { - -webkit-transform: scale(0.66); - -ms-transform: scale(0.66); - transform: scale(0.66); -} -.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { - -webkit-transform: scale(0.33); - -ms-transform: scale(0.33); - transform: scale(0.33); -} -.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { - -webkit-transform: scale(0.66); - -ms-transform: scale(0.66); - transform: scale(0.66); -} -.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { - -webkit-transform: scale(0.33); - -ms-transform: scale(0.33); - transform: scale(0.33); -} -.swiper-pagination-bullet { - width: 8px; - height: 8px; - display: inline-block; - border-radius: 100%; - background: #000; - opacity: 0.2; -} -button.swiper-pagination-bullet { - border: none; - margin: 0; - padding: 0; - -webkit-box-shadow: none; - box-shadow: none; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} -.swiper-pagination-clickable .swiper-pagination-bullet { - cursor: pointer; -} -.swiper-pagination-bullet-active { - opacity: 1; - background: #007aff; -} -.swiper-container-vertical > .swiper-pagination-bullets { - right: 10px; - top: 50%; - -webkit-transform: translate3d(0px, -50%, 0); - transform: translate3d(0px, -50%, 0); -} -.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { - margin: 6px 0; - display: block; -} -.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { - top: 50%; - -webkit-transform: translateY(-50%); - -ms-transform: translateY(-50%); - transform: translateY(-50%); - width: 8px; -} -.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { - display: inline-block; - -webkit-transition: 200ms top, 200ms -webkit-transform; - transition: 200ms top, 200ms -webkit-transform; - -o-transition: 200ms transform, 200ms top; - transition: 200ms transform, 200ms top; - transition: 200ms transform, 200ms top, 200ms -webkit-transform; -} -.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { - margin: 0 4px; -} -.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { - left: 50%; - -webkit-transform: translateX(-50%); - -ms-transform: translateX(-50%); - transform: translateX(-50%); - white-space: nowrap; -} -.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { - -webkit-transition: 200ms left, 200ms -webkit-transform; - transition: 200ms left, 200ms -webkit-transform; - -o-transition: 200ms transform, 200ms left; - transition: 200ms transform, 200ms left; - transition: 200ms transform, 200ms left, 200ms -webkit-transform; -} -.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { - -webkit-transition: 200ms right, 200ms -webkit-transform; - transition: 200ms right, 200ms -webkit-transform; - -o-transition: 200ms transform, 200ms right; - transition: 200ms transform, 200ms right; - transition: 200ms transform, 200ms right, 200ms -webkit-transform; -} -/* Progress */ -.swiper-pagination-progressbar { - background: rgba(0, 0, 0, 0.25); - position: absolute; -} -.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { - background: #007aff; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - -webkit-transform: scale(0); - -ms-transform: scale(0); - transform: scale(0); - -webkit-transform-origin: left top; - -ms-transform-origin: left top; - transform-origin: left top; -} -.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { - -webkit-transform-origin: right top; - -ms-transform-origin: right top; - transform-origin: right top; -} -.swiper-container-horizontal > .swiper-pagination-progressbar, -.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { - width: 100%; - height: 4px; - left: 0; - top: 0; -} -.swiper-container-vertical > .swiper-pagination-progressbar, -.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { - width: 4px; - height: 100%; - left: 0; - top: 0; -} -.swiper-pagination-white .swiper-pagination-bullet-active { - background: #ffffff; -} -.swiper-pagination-progressbar.swiper-pagination-white { - background: rgba(255, 255, 255, 0.25); -} -.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill { - background: #ffffff; -} -.swiper-pagination-black .swiper-pagination-bullet-active { - background: #000000; -} -.swiper-pagination-progressbar.swiper-pagination-black { - background: rgba(0, 0, 0, 0.25); -} -.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill { - background: #000000; -} -.swiper-pagination-lock { - display: none; -} -/* Scrollbar */ -.swiper-scrollbar { - border-radius: 10px; - position: relative; - -ms-touch-action: none; - background: rgba(0, 0, 0, 0.1); -} -.swiper-container-horizontal > .swiper-scrollbar { - position: absolute; - left: 1%; - bottom: 3px; - z-index: 50; - height: 5px; - width: 98%; -} -.swiper-container-vertical > .swiper-scrollbar { - position: absolute; - right: 3px; - top: 1%; - z-index: 50; - width: 5px; - height: 98%; -} -.swiper-scrollbar-drag { - height: 100%; - width: 100%; - position: relative; - background: rgba(0, 0, 0, 0.5); - border-radius: 10px; - left: 0; - top: 0; -} -.swiper-scrollbar-cursor-drag { - cursor: move; -} -.swiper-scrollbar-lock { - display: none; -} -.swiper-zoom-container { - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - text-align: center; -} -.swiper-zoom-container > img, -.swiper-zoom-container > svg, -.swiper-zoom-container > canvas { - max-width: 100%; - max-height: 100%; - -o-object-fit: contain; - object-fit: contain; -} -.swiper-slide-zoomed { - cursor: move; -} -/* Preloader */ -.swiper-lazy-preloader { - width: 42px; - height: 42px; - position: absolute; - left: 50%; - top: 50%; - margin-left: -21px; - margin-top: -21px; - z-index: 10; - -webkit-transform-origin: 50%; - -ms-transform-origin: 50%; - transform-origin: 50%; - -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; - animation: swiper-preloader-spin 1s steps(12, end) infinite; -} -.swiper-lazy-preloader:after { - display: block; - content: ''; - width: 100%; - height: 100%; - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); - background-position: 50%; - background-size: 100%; - background-repeat: no-repeat; -} -.swiper-lazy-preloader-white:after { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); -} -@-webkit-keyframes swiper-preloader-spin { - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@keyframes swiper-preloader-spin { - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} -/* a11y */ -.swiper-container .swiper-notification { - position: absolute; - left: 0; - top: 0; - pointer-events: none; - opacity: 0; - z-index: -1000; -} -.swiper-container-fade.swiper-container-free-mode .swiper-slide { - -webkit-transition-timing-function: ease-out; - -o-transition-timing-function: ease-out; - transition-timing-function: ease-out; -} -.swiper-container-fade .swiper-slide { - pointer-events: none; - -webkit-transition-property: opacity; - -o-transition-property: opacity; - transition-property: opacity; -} -.swiper-container-fade .swiper-slide .swiper-slide { - pointer-events: none; -} -.swiper-container-fade .swiper-slide-active, -.swiper-container-fade .swiper-slide-active .swiper-slide-active { - pointer-events: auto; -} -.swiper-container-cube { - overflow: visible; -} -.swiper-container-cube .swiper-slide { - pointer-events: none; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - z-index: 1; - visibility: hidden; - -webkit-transform-origin: 0 0; - -ms-transform-origin: 0 0; - transform-origin: 0 0; - width: 100%; - height: 100%; -} -.swiper-container-cube .swiper-slide .swiper-slide { - pointer-events: none; -} -.swiper-container-cube.swiper-container-rtl .swiper-slide { - -webkit-transform-origin: 100% 0; - -ms-transform-origin: 100% 0; - transform-origin: 100% 0; -} -.swiper-container-cube .swiper-slide-active, -.swiper-container-cube .swiper-slide-active .swiper-slide-active { - pointer-events: auto; -} -.swiper-container-cube .swiper-slide-active, -.swiper-container-cube .swiper-slide-next, -.swiper-container-cube .swiper-slide-prev, -.swiper-container-cube .swiper-slide-next + .swiper-slide { - pointer-events: auto; - visibility: visible; -} -.swiper-container-cube .swiper-slide-shadow-top, -.swiper-container-cube .swiper-slide-shadow-bottom, -.swiper-container-cube .swiper-slide-shadow-left, -.swiper-container-cube .swiper-slide-shadow-right { - z-index: 0; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; -} -.swiper-container-cube .swiper-cube-shadow { - position: absolute; - left: 0; - bottom: 0px; - width: 100%; - height: 100%; - background: #000; - opacity: 0.6; - -webkit-filter: blur(50px); - filter: blur(50px); - z-index: 0; -} -.swiper-container-flip { - overflow: visible; -} -.swiper-container-flip .swiper-slide { - pointer-events: none; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - z-index: 1; -} -.swiper-container-flip .swiper-slide .swiper-slide { - pointer-events: none; -} -.swiper-container-flip .swiper-slide-active, -.swiper-container-flip .swiper-slide-active .swiper-slide-active { - pointer-events: auto; -} -.swiper-container-flip .swiper-slide-shadow-top, -.swiper-container-flip .swiper-slide-shadow-bottom, -.swiper-container-flip .swiper-slide-shadow-left, -.swiper-container-flip .swiper-slide-shadow-right { - z-index: 0; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; -} -.swiper-container-coverflow .swiper-wrapper { - /* Windows 8 IE 10 fix */ - -ms-perspective: 1200px; -} From 8e7792adfc1c24cf49b8f2bfea00a958bf7507d7 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Thu, 1 Sep 2022 13:06:16 -0500 Subject: [PATCH 07/10] fix(): revert change to vue-component-lib/utils.ts --- packages/vue/src/vue-component-lib/utils.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/vue/src/vue-component-lib/utils.ts b/packages/vue/src/vue-component-lib/utils.ts index c04c013970e..f4ee3845347 100644 --- a/packages/vue/src/vue-component-lib/utils.ts +++ b/packages/vue/src/vue-component-lib/utils.ts @@ -1,7 +1,7 @@ import { VNode, defineComponent, getCurrentInstance, h, inject, ref, Ref } from 'vue'; -export interface InputProps { - modelValue?: string | boolean; +export interface InputProps { + modelValue?: T; } const UPDATE_VALUE_EVENT = 'update:modelValue'; @@ -49,7 +49,7 @@ const getElementClasses = (ref: Ref, componentClasses: * @prop externalModelUpdateEvent - The external event to fire from your Vue component when modelUpdateEvent fires. This is used for ensuring that v-model references have been * correctly updated when a user's event callback fires. */ -export const defineContainer = ( +export const defineContainer = ( name: string, defineCustomElement: any, componentProps: string[] = [], @@ -67,7 +67,7 @@ export const defineContainer = ( defineCustomElement(); } - const Container = defineComponent((props: any, { attrs, slots, emit }) => { + const Container = defineComponent>((props: any, { attrs, slots, emit }) => { let modelPropValue = props[modelProp]; const containerRef = ref(); const classes = new Set(getComponentClasses(attrs.class)); @@ -76,7 +76,7 @@ export const defineContainer = ( if (vnode.el) { const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent]; eventsNames.forEach((eventName: string) => { - vnode.el.addEventListener(eventName.toLowerCase(), (e: Event) => { + vnode.el!.addEventListener(eventName.toLowerCase(), (e: Event) => { modelPropValue = (e?.target as any)[modelProp]; emit(UPDATE_VALUE_EVENT, modelPropValue); From 6ef433ea68d7d99c0c2e68ec082c0d8a39fcf1fa Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Thu, 1 Sep 2022 13:55:19 -0500 Subject: [PATCH 08/10] docs(breaking): clarify wording --- BREAKING.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/BREAKING.md b/BREAKING.md index 4f427a8c748..016cad3483e 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -40,9 +40,9 @@ Any references to the virtual scroll types from `@ionic/core` have been removed.

Slides

-`ion-slides`, `ion-slide`, and the `IonicSwiper` module have been removed from Ionic. +`ion-slides`, `ion-slide`, and the `IonicSwiper` plugin have been removed from Ionic. -Developers using these components will need to migrate to using Swiper.js directly, optionally using the `IonicSlides` module. Guides for migration and usage are linked below: +Developers using these components will need to migrate to using Swiper.js directly, optionally using the `IonicSlides` plugin. Guides for migration and usage are linked below: - [Angular](https://ionicframework.com/docs/angular/slides) - [React](https://ionicframework.com/docs/react/slides) From 290491125716978a0cb9c145a994cc538892ea5e Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Thu, 1 Sep 2022 13:56:14 -0500 Subject: [PATCH 09/10] chore(): revert formatting change --- packages/vue/src/vue-component-lib/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vue/src/vue-component-lib/utils.ts b/packages/vue/src/vue-component-lib/utils.ts index f4ee3845347..e48debacfad 100644 --- a/packages/vue/src/vue-component-lib/utils.ts +++ b/packages/vue/src/vue-component-lib/utils.ts @@ -49,7 +49,7 @@ const getElementClasses = (ref: Ref, componentClasses: * @prop externalModelUpdateEvent - The external event to fire from your Vue component when modelUpdateEvent fires. This is used for ensuring that v-model references have been * correctly updated when a user's event callback fires. */ -export const defineContainer = ( +export const defineContainer = ( name: string, defineCustomElement: any, componentProps: string[] = [], From b91cb09ab299ea0c15fd0f56b117543638637024 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Thu, 1 Sep 2022 14:04:07 -0500 Subject: [PATCH 10/10] refactor(): merge ios vars with ionic-swiper.scss --- .../components/slides/slides.ios.vars.scss | 28 ------------------- core/src/css/ionic-swiper.scss | 14 +++++----- 2 files changed, 7 insertions(+), 35 deletions(-) delete mode 100644 core/src/components/slides/slides.ios.vars.scss diff --git a/core/src/components/slides/slides.ios.vars.scss b/core/src/components/slides/slides.ios.vars.scss deleted file mode 100644 index 73aec90e3e3..00000000000 --- a/core/src/components/slides/slides.ios.vars.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import "../../themes/ionic.globals.ios"; - -/// @prop - Background color of the bullet -$slides-ios-bullet-background: $text-color-step-800 !default; - -/// @prop - Background color of the active bullet -$slides-ios-bullet-background-active: ion-color(primary, base) !default; - -/// @prop - Alpha to use for the background color of the progress bar -$slides-ios-progress-bar-background-alpha: .25 !default; - -/// @prop - Background color of the progress bar -$slides-ios-progress-bar-background: rgba($text-color-rgb, $slides-ios-progress-bar-background-alpha) !default; - -/// @prop - Background color of the active progress bar -$slides-ios-progress-bar-background-active: ion-color(primary, shade) !default; - -/// @prop - Alpha to use for the background color of the scroll bar -$slides-ios-scroll-bar-background-alpha: .1 !default; - -/// @prop - Background color of the scroll bar -$slides-ios-scroll-bar-background: rgba($text-color-rgb, $slides-ios-scroll-bar-background-alpha) !default; - -/// @prop - Alpha to use for the background color of the scroll bar while dragging -$slides-ios-scroll-bar-drag-background-alpha: .5 !default; - -/// @prop - Background color of the scroll bar drag handle -$slides-ios-scroll-bar-drag-background: rgba($text-color-rgb, $slides-ios-scroll-bar-drag-background-alpha) !default; diff --git a/core/src/css/ionic-swiper.scss b/core/src/css/ionic-swiper.scss index 24e5eaaf4e9..3161c5ca964 100644 --- a/core/src/css/ionic-swiper.scss +++ b/core/src/css/ionic-swiper.scss @@ -1,5 +1,5 @@ @import "../themes/ionic.skip-warns.scss"; -@import "../components/slides/slides.ios.vars.scss"; +@import "../themes/ionic.globals.ios.scss"; // Slides // -------------------------------------------------- @@ -9,12 +9,12 @@ // These values are the same for iOS and MD // We just do not add a .md or .ios class beforehand // so the styles are easier to override by the user. - --bullet-background: #{$slides-ios-bullet-background}; - --bullet-background-active: #{$slides-ios-bullet-background-active}; - --progress-bar-background: #{$slides-ios-progress-bar-background}; - --progress-bar-background-active: #{$slides-ios-progress-bar-background-active}; - --scroll-bar-background: #{$slides-ios-scroll-bar-background}; - --scroll-bar-background-active: #{$slides-ios-scroll-bar-drag-background}; + --bullet-background: $text-color-step-800; + --bullet-background-active: ion-color(primary, base); + --progress-bar-background: rgba($text-color-rgb, .25); + --progress-bar-background-active: ion-color(primary, shade); + --scroll-bar-background: rgba($text-color-rgb, .1); + --scroll-bar-background-active: rgba($text-color-rgb, .5); /** * @prop --bullet-background: Background of the pagination bullets * @prop --bullet-background-active: Background of the active pagination bullet