From 8af4759f2de31cb7965db6030665dbd9906e901e Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Thu, 11 May 2023 08:15:44 -0700 Subject: [PATCH 01/32] fix(tabs): correct router playground src (#2957) --- static/usage/v7/tabs/router/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/usage/v7/tabs/router/index.md b/static/usage/v7/tabs/router/index.md index c7e59ac79bc..77161af269f 100644 --- a/static/usage/v7/tabs/router/index.md +++ b/static/usage/v7/tabs/router/index.md @@ -88,6 +88,6 @@ import react_search_page_tsx from './react/search_page_tsx.md'; }, }, }} - src="usage/v6/tabs/router/demo.html" + src="usage/v7/tabs/router/demo.html" devicePreview /> From 0e98782d382eabd8b4b9a79b13970546ad13f070 Mon Sep 17 00:00:00 2001 From: Joost Jansen <87212060+jstjnsn@users.noreply.github.com> Date: Thu, 11 May 2023 18:25:56 +0200 Subject: [PATCH 02/32] docs(app-store): add reference to App Store Connect (#2198) Co-authored-by: Brandy Carney --- docs/deployment/app-store.md | 7 +++---- versioned_docs/version-v5/deployment/app-store.md | 7 +++---- versioned_docs/version-v6/deployment/app-store.md | 7 +++---- 3 files changed, 9 insertions(+), 12 deletions(-) diff --git a/docs/deployment/app-store.md b/docs/deployment/app-store.md index e82e5b4e515..f6b2ffcf1c9 100644 --- a/docs/deployment/app-store.md +++ b/docs/deployment/app-store.md @@ -50,17 +50,16 @@ There are two types of certificates that matter here, Development, and Distribut Distribution certs are meant for distributing an app to the store. When an app is signed with a Distribution cert, it can be installed on any device. -## Signing the App in Xcode. +## Signing the App in Xcode After generating the correct certificates, there are options to either have Xcode automatically manage certificates or manually manage them. It's suggested to let Xcode automatically manage certificates. This will make sure that the correct Development and Distribution certs are used, based on the build type selected. With this option selected, select `Archive` from the `Product > Archive` menu. This will build a version of the app that is ready for distribution in the app stores. After archive has been created, Xcode Organizer is opened. Xcode Organizer displays a list with builds of the current app. Pick the last build and click 'Upload to App Store'. -There should be a place to select the team followed by some more information on the app and a "Upload" button to click. +There should be a place to select the team followed by some more information on the app and an 'Upload' button to click. -If the upload successfully, the app should be listed on [iTunes Connect](https://itunesconnect.apple.com) and listed in 'Activities'. -From there, TestFlight can be enabled for beta testing, or the App can be sent for approval from Apple. +If the upload is successful the app should be listed under 'Activities' on [iTunes Connect](https://itunesconnect.apple.com) or listed under 'Apps' on [App Store Connect](https://appstoreconnect.apple.com/). From there, the app can be published to TestFlight, or it can be sent to Apple for approval for the App Store. ## Updating an app diff --git a/versioned_docs/version-v5/deployment/app-store.md b/versioned_docs/version-v5/deployment/app-store.md index 8d741787dcc..9319ead3e0d 100644 --- a/versioned_docs/version-v5/deployment/app-store.md +++ b/versioned_docs/version-v5/deployment/app-store.md @@ -43,17 +43,16 @@ There are two types of certificates that matter here, Development, and Distribut Distribution certs are meant for distributing an app to the store. When an app is signed with a Distribution cert, it can be installed on any device. -## Signing the App in Xcode. +## Signing the App in Xcode After generating the correct certificates, there are options to either have Xcode automatically manage certificates or manually manage them. It's suggested to let Xcode automatically manage certificates. This will make sure that the correct Development and Distribution certs are used, based on the build type selected. With this option selected, select `Archive` from the `Product > Archive` menu. This will build a version of the app that is ready for distribution in the app stores. After archive has been created, Xcode Organizer is opened. Xcode Organizer displays a list with builds of the current app. Pick the last build and click 'Upload to App Store'. -There should be a place to select the team followed by some more information on the app and a "Upload" button to click. +There should be a place to select the team followed by some more information on the app and an 'Upload' button to click. -If the upload successfully, the app should be listed on [iTunes Connect](https://itunesconnect.apple.com) and listed in 'Activities'. -From there, TestFlight can be enabled for beta testing, or the App can be sent for approval from Apple. +If the upload is successful the app should be listed under 'Activities' on [iTunes Connect](https://itunesconnect.apple.com) or listed under 'Apps' on [App Store Connect](https://appstoreconnect.apple.com/). From there, the app can be published to TestFlight, or it can be sent to Apple for approval for the App Store. ## Updating an app diff --git a/versioned_docs/version-v6/deployment/app-store.md b/versioned_docs/version-v6/deployment/app-store.md index e82e5b4e515..f6b2ffcf1c9 100644 --- a/versioned_docs/version-v6/deployment/app-store.md +++ b/versioned_docs/version-v6/deployment/app-store.md @@ -50,17 +50,16 @@ There are two types of certificates that matter here, Development, and Distribut Distribution certs are meant for distributing an app to the store. When an app is signed with a Distribution cert, it can be installed on any device. -## Signing the App in Xcode. +## Signing the App in Xcode After generating the correct certificates, there are options to either have Xcode automatically manage certificates or manually manage them. It's suggested to let Xcode automatically manage certificates. This will make sure that the correct Development and Distribution certs are used, based on the build type selected. With this option selected, select `Archive` from the `Product > Archive` menu. This will build a version of the app that is ready for distribution in the app stores. After archive has been created, Xcode Organizer is opened. Xcode Organizer displays a list with builds of the current app. Pick the last build and click 'Upload to App Store'. -There should be a place to select the team followed by some more information on the app and a "Upload" button to click. +There should be a place to select the team followed by some more information on the app and an 'Upload' button to click. -If the upload successfully, the app should be listed on [iTunes Connect](https://itunesconnect.apple.com) and listed in 'Activities'. -From there, TestFlight can be enabled for beta testing, or the App can be sent for approval from Apple. +If the upload is successful the app should be listed under 'Activities' on [iTunes Connect](https://itunesconnect.apple.com) or listed under 'Apps' on [App Store Connect](https://appstoreconnect.apple.com/). From there, the app can be published to TestFlight, or it can be sent to Apple for approval for the App Store. ## Updating an app From ba7a19fc68cc5c43dae868e2fc5b21e9362f844c Mon Sep 17 00:00:00 2001 From: Austine A <8253869+AustineA@users.noreply.github.com> Date: Thu, 11 May 2023 18:18:16 +0100 Subject: [PATCH 03/32] docs(developing): update Java instructions to mention JDK 11 for latest cordova-android (#2200) Updates the developing android documentation to reflect the latest Cordova guide here: https://cordova.apache.org/docs/en/11.x/guide/platforms/android/#java-development-kit-jdk --------- Co-authored-by: Brandy Carney --- docs/developing/android.md | 4 ++-- versioned_docs/version-v5/developing/android.md | 4 ++-- versioned_docs/version-v6/developing/android.md | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/developing/android.md b/docs/developing/android.md index 3b7baaca186..daa73c8a920 100644 --- a/docs/developing/android.md +++ b/docs/developing/android.md @@ -112,10 +112,10 @@ Additional setup is required for Cordova to support programmatic builds. This se ### Java -Native Android apps are compiled with the Java programming language. Download JDK8 from the download page. +Native Android apps are compiled with the Java programming language. Download the Java Development Kit (JDK) 11 if you are using **`cordova-android`** `10.0.0` or greater. :::note -Unfortunately, Cordova is not compatible with the latest version of Java. +If you are using any version of **`cordova-android`** below `10.0.0`, install the Java Development Kit (JDK) 8. ::: ### Gradle diff --git a/versioned_docs/version-v5/developing/android.md b/versioned_docs/version-v5/developing/android.md index 63d7eef663a..8faf6779d2d 100644 --- a/versioned_docs/version-v5/developing/android.md +++ b/versioned_docs/version-v5/developing/android.md @@ -104,10 +104,10 @@ Additional setup is required for Cordova to support programmatic builds. This se ### Java -Native Android apps are compiled with the Java programming language. Download JDK8 from the download page. +Native Android apps are compiled with the Java programming language. Download the Java Development Kit (JDK) 11 if you are using **`cordova-android`** `10.0.0` or greater. :::note -Unfortunately, Cordova is not compatible with the latest version of Java. +If you are using any version of **`cordova-android`** below `10.0.0`, install the Java Development Kit (JDK) 8. ::: ### Gradle diff --git a/versioned_docs/version-v6/developing/android.md b/versioned_docs/version-v6/developing/android.md index d27d9ae62f2..e52453ab98e 100644 --- a/versioned_docs/version-v6/developing/android.md +++ b/versioned_docs/version-v6/developing/android.md @@ -112,10 +112,10 @@ Additional setup is required for Cordova to support programmatic builds. This se ### Java -Native Android apps are compiled with the Java programming language. Download JDK8 from the download page. +Native Android apps are compiled with the Java programming language. Download the Java Development Kit (JDK) 11 if you are using **`cordova-android`** `10.0.0` or greater. :::note -Unfortunately, Cordova is not compatible with the latest version of Java. +If you are using any version of **`cordova-android`** below `10.0.0`, install the Java Development Kit (JDK) 8. ::: ### Gradle From a27bbc415d85e7c2b8476bbc13534e1d96922530 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 12 May 2023 10:04:48 -0400 Subject: [PATCH 04/32] docs(react): remove IonContent from tabs example (#2958) --- docs/react/navigation.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/react/navigation.md b/docs/react/navigation.md index 310f39635e6..34c2cdd9d6a 100644 --- a/docs/react/navigation.md +++ b/docs/react/navigation.md @@ -420,7 +420,7 @@ Let's start by taking a look at our `Tabs` component: ```tsx import { Redirect, Route } from 'react-router-dom'; -import { IonContent, IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react'; +import { IonPage, IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react'; import { IonReactRouter } from '@ionic/react-router'; import { ellipse, square, triangle } from 'ionicons/icons'; import Tab1 from './pages/Tab1'; @@ -428,7 +428,7 @@ import Tab2 from './pages/Tab2'; import Tab3 from './pages/Tab3'; const Tabs: React.FC = () => ( - + @@ -460,7 +460,7 @@ const Tabs: React.FC = () => ( - + ); export default Tabs; From 860713ae9d6da0aa8a348e758e4406f65cbc4f71 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 12 May 2023 10:05:08 -0400 Subject: [PATCH 05/32] docs(vue): remove IonContent from tabs example (#2959) --- docs/vue/navigation.md | 42 +++++++++++++++++++----------------------- 1 file changed, 19 insertions(+), 23 deletions(-) diff --git a/docs/vue/navigation.md b/docs/vue/navigation.md index d264a062d0e..205e146cec9 100644 --- a/docs/vue/navigation.md +++ b/docs/vue/navigation.md @@ -393,27 +393,25 @@ Let's start by taking a look at our `Tabs` component: ```html @@ -422,7 +420,6 @@ Let's start by taking a look at our `Tabs` component: IonTabBar, IonTabButton, IonTabs, - IonContent, IonLabel, IonIcon, IonPage, @@ -433,7 +430,6 @@ Let's start by taking a look at our `Tabs` component: export default { name: 'Tabs', components: { - IonContent, IonLabel, IonTabs, IonTabBar, From 8dad7c349fd8ff227f1c96db553cfb5d6d7b8f62 Mon Sep 17 00:00:00 2001 From: Stephan Schmitz Date: Wed, 17 May 2023 17:14:16 +0200 Subject: [PATCH 06/32] docs(dark-mode): replace deprecated addListener() usage (#1908) Co-authored-by: Maria Hutt --- docs/theming/dark-mode.md | 4 ++-- versioned_docs/version-v5/theming/dark-mode.md | 4 ++-- versioned_docs/version-v6/theming/dark-mode.md | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/theming/dark-mode.md b/docs/theming/dark-mode.md index ea4fd1f1e33..8d42d01a0ea 100644 --- a/docs/theming/dark-mode.md +++ b/docs/theming/dark-mode.md @@ -74,7 +74,7 @@ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); toggleDarkTheme(prefersDark.matches); // Listen for changes to the prefers-color-scheme media query -prefersDark.addListener((mediaQuery) => toggleDarkTheme(mediaQuery.matches)); +prefersDark.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches)); // Add or remove the "dark" class based on if the media query matches function toggleDarkTheme(shouldAdd) { @@ -106,7 +106,7 @@ toggle.addEventListener('ionChange', (ev) => { const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); // Listen for changes to the prefers-color-scheme media query -prefersDark.addListener((e) => checkToggle(e.matches)); +prefersDark.addEventListener('change', (e) => checkToggle(e.matches)); // Called when the app loads function loadApp() { diff --git a/versioned_docs/version-v5/theming/dark-mode.md b/versioned_docs/version-v5/theming/dark-mode.md index 3bcf5bbe79e..1aee84ed326 100644 --- a/versioned_docs/version-v5/theming/dark-mode.md +++ b/versioned_docs/version-v5/theming/dark-mode.md @@ -67,7 +67,7 @@ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); toggleDarkTheme(prefersDark.matches); // Listen for changes to the prefers-color-scheme media query -prefersDark.addListener((mediaQuery) => toggleDarkTheme(mediaQuery.matches)); +prefersDark.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches)); // Add or remove the "dark" class based on if the media query matches function toggleDarkTheme(shouldAdd) { @@ -99,7 +99,7 @@ toggle.addEventListener('ionChange', (ev) => { const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); // Listen for changes to the prefers-color-scheme media query -prefersDark.addListener((e) => checkToggle(e.matches)); +prefersDark.addEventListener('change', (e) => checkToggle(e.matches)); // Called when the app loads function loadApp() { diff --git a/versioned_docs/version-v6/theming/dark-mode.md b/versioned_docs/version-v6/theming/dark-mode.md index ea4fd1f1e33..8d42d01a0ea 100644 --- a/versioned_docs/version-v6/theming/dark-mode.md +++ b/versioned_docs/version-v6/theming/dark-mode.md @@ -74,7 +74,7 @@ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); toggleDarkTheme(prefersDark.matches); // Listen for changes to the prefers-color-scheme media query -prefersDark.addListener((mediaQuery) => toggleDarkTheme(mediaQuery.matches)); +prefersDark.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches)); // Add or remove the "dark" class based on if the media query matches function toggleDarkTheme(shouldAdd) { @@ -106,7 +106,7 @@ toggle.addEventListener('ionChange', (ev) => { const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); // Listen for changes to the prefers-color-scheme media query -prefersDark.addListener((e) => checkToggle(e.matches)); +prefersDark.addEventListener('change', (e) => checkToggle(e.matches)); // Called when the app loads function loadApp() { From d0cf7e16723eaa9eb08bb458d048de72d80a945e Mon Sep 17 00:00:00 2001 From: praxxys <65581743+praxxys@users.noreply.github.com> Date: Wed, 17 May 2023 23:30:52 +0800 Subject: [PATCH 07/32] docs(quickstart): remove typescript for imports and tests (#2216) * Update quickstart.md Currently, the "use Javascript" section is incomplete as Jest is still configured to use Typescript and running `npm run test:unit` will throw errors. The section was revised to to include Jest Javascript configuration changes. --------- Co-authored-by: Shawn Taylor --- docs/vue/quickstart.md | 14 ++++++++------ versioned_docs/version-v5/vue/quickstart.md | 14 ++++++++------ versioned_docs/version-v6/vue/quickstart.md | 14 ++++++++------ 3 files changed, 24 insertions(+), 18 deletions(-) diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md index 6738b35511f..a5289b589cc 100644 --- a/docs/vue/quickstart.md +++ b/docs/vue/quickstart.md @@ -48,17 +48,19 @@ So, if you’d prefer to use JavaScript instead of TypeScript, you can. After ge npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript ``` -2. Change all `.ts` files to `.js`. In a blank Ionic Vue app, this should only be `src/router/index.ts` and `src/main.ts`. +2. Change all `.ts` files to `.js`. In a blank Ionic Vue app, this should only be `src/router/index.ts` and `src/main.ts`. If you're using tests, also change the extension of files in the `tests` directory. -3. Remove `@vue/typescript/recommended` and `@typescript-eslint/no-explicit-any: ‘off’, `from `.eslintrc.js`. +3. In `index.html`, change the imported ` + + + + + + + + + + +
+ + + + + + + + +
+ + + + + diff --git a/static/usage/v7/input/mask/index.md b/static/usage/v7/input/mask/index.md new file mode 100644 index 00000000000..eb86243efb9 --- /dev/null +++ b/static/usage/v7/input/mask/index.md @@ -0,0 +1,39 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_app_module_ts from './angular/app_module_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + +import MY_DEPS from './angular/dependencies.js'; + + diff --git a/static/usage/v7/input/mask/javascript/index_html.md b/static/usage/v7/input/mask/javascript/index_html.md new file mode 100644 index 00000000000..7ae6159033f --- /dev/null +++ b/static/usage/v7/input/mask/javascript/index_html.md @@ -0,0 +1,45 @@ +```html + + + + + + + + + + +``` diff --git a/static/usage/v7/input/mask/javascript/index_ts.md b/static/usage/v7/input/mask/javascript/index_ts.md new file mode 100644 index 00000000000..89d38873488 --- /dev/null +++ b/static/usage/v7/input/mask/javascript/index_ts.md @@ -0,0 +1,28 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { Maskito } from '@maskito/core'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/* Theme variables */ +import './theme/variables.css'; + +defineCustomElements(); + +(window as any).Maskito = Maskito; +``` diff --git a/static/usage/v7/input/mask/react.md b/static/usage/v7/input/mask/react.md new file mode 100644 index 00000000000..ff799a11f62 --- /dev/null +++ b/static/usage/v7/input/mask/react.md @@ -0,0 +1,31 @@ +```tsx +import React from 'react'; +import { IonInput, IonItem, IonList } from '@ionic/react'; + +function Example() { + return ( + + + + + + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/input/mask/vue.md b/static/usage/v7/input/mask/vue.md new file mode 100644 index 00000000000..cfdca09244a --- /dev/null +++ b/static/usage/v7/input/mask/vue.md @@ -0,0 +1,34 @@ +```html + + + +``` From 2dd0e3fbe0d39fae8876965af6911a46e505de47 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Mon, 22 May 2023 23:44:04 -0400 Subject: [PATCH 15/32] chore: use inline deps --- static/usage/v7/input/mask/angular/dependencies.js | 6 ------ static/usage/v7/input/mask/index.md | 7 ++++--- 2 files changed, 4 insertions(+), 9 deletions(-) delete mode 100644 static/usage/v7/input/mask/angular/dependencies.js diff --git a/static/usage/v7/input/mask/angular/dependencies.js b/static/usage/v7/input/mask/angular/dependencies.js deleted file mode 100644 index 44b5956c6c2..00000000000 --- a/static/usage/v7/input/mask/angular/dependencies.js +++ /dev/null @@ -1,6 +0,0 @@ -const MY_DEPS = { - '@maskito/angular': '^0.11.0', - '@maskito/core': '^0.11.0', -}; - -export default MY_DEPS; diff --git a/static/usage/v7/input/mask/index.md b/static/usage/v7/input/mask/index.md index eb86243efb9..5b830c9583d 100644 --- a/static/usage/v7/input/mask/index.md +++ b/static/usage/v7/input/mask/index.md @@ -9,8 +9,6 @@ import angular_app_module_ts from './angular/app_module_ts.md'; import angular_example_component_html from './angular/example_component_html.md'; import angular_example_component_ts from './angular/example_component_ts.md'; -import MY_DEPS from './angular/dependencies.js'; - Date: Thu, 25 May 2023 14:42:27 -0400 Subject: [PATCH 16/32] chore: bump version --- static/usage/v7/input/mask/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/static/usage/v7/input/mask/index.md b/static/usage/v7/input/mask/index.md index 5b830c9583d..571fcc4cd0b 100644 --- a/static/usage/v7/input/mask/index.md +++ b/static/usage/v7/input/mask/index.md @@ -18,7 +18,7 @@ import angular_example_component_ts from './angular/example_component_ts.md'; 'index.ts': javascript_index_ts, }, dependencies: { - '@maskito/core': '^0.11.0', + '@maskito/core': '^0.12.0', }, }, react, @@ -30,8 +30,8 @@ import angular_example_component_ts from './angular/example_component_ts.md'; 'src/app/example.component.ts': angular_example_component_ts, }, dependencies: { - '@maskito/angular': '^0.11.0', - '@maskito/core': '^0.11.0', + '@maskito/angular': '^0.12.0', + '@maskito/core': '^0.12.0', }, }, }} From 44acaf52fec4c3892a837603d47fcca9ce67d63e Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Tue, 6 Jun 2023 12:25:31 -0400 Subject: [PATCH 17/32] fix(angular): async mask predicate --- .../input/mask/angular/example_component_html.md | 14 ++++++++++++-- .../v7/input/mask/angular/example_component_ts.md | 2 ++ 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/static/usage/v7/input/mask/angular/example_component_html.md b/static/usage/v7/input/mask/angular/example_component_html.md index c5b199bdb1a..9151cdc2083 100644 --- a/static/usage/v7/input/mask/angular/example_component_html.md +++ b/static/usage/v7/input/mask/angular/example_component_html.md @@ -1,10 +1,20 @@ ```html - + - + ``` diff --git a/static/usage/v7/input/mask/angular/example_component_ts.md b/static/usage/v7/input/mask/angular/example_component_ts.md index 3949cf3964b..dc3d27142d4 100644 --- a/static/usage/v7/input/mask/angular/example_component_ts.md +++ b/static/usage/v7/input/mask/angular/example_component_ts.md @@ -25,5 +25,7 @@ export class ExampleComponent { ...Array(4).fill(/\d/), ], }; + + readonly maskPredicate: MaskitoElementPredicate = async (el) => (el as HTMLIonInputElement).getInputElement(); } ``` From 3c6444c82b8a19ac97df4702903d63bfec02de30 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Tue, 6 Jun 2023 15:58:36 -0400 Subject: [PATCH 18/32] chore: react and vue examples --- static/usage/v7/input/mask/index.md | 6 ++-- static/usage/v7/input/mask/react.md | 38 ++++++++++++++--------- static/usage/v7/input/mask/vue.md | 47 +++++++++++++++++------------ 3 files changed, 53 insertions(+), 38 deletions(-) diff --git a/static/usage/v7/input/mask/index.md b/static/usage/v7/input/mask/index.md index 571fcc4cd0b..2e75e4edb56 100644 --- a/static/usage/v7/input/mask/index.md +++ b/static/usage/v7/input/mask/index.md @@ -18,7 +18,7 @@ import angular_example_component_ts from './angular/example_component_ts.md'; 'index.ts': javascript_index_ts, }, dependencies: { - '@maskito/core': '^0.12.0', + '@maskito/core': '^0.13.0', }, }, react, @@ -30,8 +30,8 @@ import angular_example_component_ts from './angular/example_component_ts.md'; 'src/app/example.component.ts': angular_example_component_ts, }, dependencies: { - '@maskito/angular': '^0.12.0', - '@maskito/core': '^0.12.0', + '@maskito/angular': '^0.13.0', + '@maskito/core': '^0.13.0', }, }, }} diff --git a/static/usage/v7/input/mask/react.md b/static/usage/v7/input/mask/react.md index ff799a11f62..7bbe00d715d 100644 --- a/static/usage/v7/input/mask/react.md +++ b/static/usage/v7/input/mask/react.md @@ -1,28 +1,36 @@ ```tsx import React from 'react'; import { IonInput, IonItem, IonList } from '@ionic/react'; +import { useMaskito } from '@maskito/react'; function Example() { - return ( - - - - - - - - + const cardRef = useMaskito({ + options: { + mask: [ + ...Array(4).fill(/\d/), + ' ', + ...Array(4).fill(/\d/), + ' ', + ...Array(4).fill(/\d/), + ' ', + ...Array(4).fill(/\d/), + ], + }, + }); - - - + const phoneRef = useMaskito({ + options: { + mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/], + }, + }); + return ( + - + - - + ); diff --git a/static/usage/v7/input/mask/vue.md b/static/usage/v7/input/mask/vue.md index cfdca09244a..343d0627fb7 100644 --- a/static/usage/v7/input/mask/vue.md +++ b/static/usage/v7/input/mask/vue.md @@ -2,33 +2,40 @@ - ``` From f06a4f0b9bc35a29322f30c28dcbe35a9f574b6d Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Fri, 9 Jun 2023 12:00:04 -0400 Subject: [PATCH 19/32] docs: input masking examples Fixes the dependencies feature for react/vue. --- .../global/Playground/stackblitz.utils.ts | 23 +++++++++++-- .../mask/angular/example_component_ts.md | 4 +-- static/usage/v7/input/mask/demo.html | 4 +-- static/usage/v7/input/mask/index.md | 32 +++++++++++++++---- .../v7/input/mask/javascript/index_html.md | 4 +-- static/usage/v7/input/mask/vue.md | 20 ++++-------- 6 files changed, 57 insertions(+), 30 deletions(-) diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts index acfcc0adf3b..6123142915a 100644 --- a/src/components/global/Playground/stackblitz.utils.ts +++ b/src/components/global/Playground/stackblitz.utils.ts @@ -183,6 +183,15 @@ const openReactEditor = async (code: string, options?: EditorOptions) => { options.version ); + const package_json = JSON.parse(defaultFiles[4]); + + if (options?.dependencies) { + package_json.dependencies = { + ...package_json.dependencies, + ...options.dependencies, + }; + } + const appTsx = 'src/App.tsx'; const files = { 'public/index.html': defaultFiles[6], @@ -191,10 +200,9 @@ const openReactEditor = async (code: string, options?: EditorOptions) => { 'src/main.tsx': code, 'src/theme/variables.css': defaultFiles[2], 'tsconfig.json': defaultFiles[3], - 'package.json': defaultFiles[4], + 'package.json': JSON.stringify(package_json, null, 2), 'package-lock.json': defaultFiles[5], ...options?.files, - ...options?.dependencies, '.stackblitzrc': `{ "startCommand": "yarn run start" }`, @@ -227,6 +235,15 @@ const openVueEditor = async (code: string, options?: EditorOptions) => { options.version ); + const package_json = JSON.parse(defaultFiles[0]); + + if (options?.dependencies) { + package_json.dependencies = { + ...package_json.dependencies, + ...options.dependencies, + }; + } + const mainTs = 'src/main.ts'; const files = { 'src/App.vue': defaultFiles[6], @@ -236,7 +253,7 @@ const openVueEditor = async (code: string, options?: EditorOptions) => { 'src/theme/variables.css': defaultFiles[3], 'index.html': defaultFiles[2], 'vite.config.ts': defaultFiles[4], - 'package.json': defaultFiles[0], + 'package.json': JSON.stringify(package_json, null, 2), 'package-lock.json': defaultFiles[1], 'tsconfig.json': defaultFiles[7], 'tsconfig.node.json': defaultFiles[8], diff --git a/static/usage/v7/input/mask/angular/example_component_ts.md b/static/usage/v7/input/mask/angular/example_component_ts.md index dc3d27142d4..2294a2e3403 100644 --- a/static/usage/v7/input/mask/angular/example_component_ts.md +++ b/static/usage/v7/input/mask/angular/example_component_ts.md @@ -1,7 +1,7 @@ ```ts import { Component } from '@angular/core'; -import { MaskitoOptions, MaskitoElementPredicate } from '@maskito/core'; +import { MaskitoOptions, MaskitoElementPredicateAsync } from '@maskito/core'; @Component({ selector: 'app-example', @@ -26,6 +26,6 @@ export class ExampleComponent { ], }; - readonly maskPredicate: MaskitoElementPredicate = async (el) => (el as HTMLIonInputElement).getInputElement(); + readonly maskPredicate: MaskitoElementPredicateAsync = async (el) => (el as HTMLIonInputElement).getInputElement(); } ``` diff --git a/static/usage/v7/input/mask/demo.html b/static/usage/v7/input/mask/demo.html index b7f67ada49b..708b3b9bccb 100644 --- a/static/usage/v7/input/mask/demo.html +++ b/static/usage/v7/input/mask/demo.html @@ -64,10 +64,10 @@ }); } - setTimeout(() => { + window.addEventListener('appload', () => { initCardMask(); initPhoneMask(); - }, 300); + }); diff --git a/static/usage/v7/input/mask/index.md b/static/usage/v7/input/mask/index.md index 2e75e4edb56..108a68ea187 100644 --- a/static/usage/v7/input/mask/index.md +++ b/static/usage/v7/input/mask/index.md @@ -2,8 +2,10 @@ import Playground from '@site/src/components/global/Playground'; import javascript_index_html from './javascript/index_html.md'; import javascript_index_ts from './javascript/index_ts.md'; -import react from './react.md'; -import vue from './vue.md'; + +import react_main_tsx from './react.md'; + +import vue_example_vue from './vue.md'; import angular_app_module_ts from './angular/app_module_ts.md'; import angular_example_component_html from './angular/example_component_html.md'; @@ -18,11 +20,27 @@ import angular_example_component_ts from './angular/example_component_ts.md'; 'index.ts': javascript_index_ts, }, dependencies: { - '@maskito/core': '^0.13.0', + '@maskito/core': '^0.14.0', + }, + }, + react: { + files: { + 'src/main.tsx': react_main_tsx, + }, + dependencies: { + '@maskito/react': '^0.14.0', + '@maskito/core': '^0.14.0', + }, + }, + vue: { + files: { + 'src/components/Example.vue': vue_example_vue, + }, + dependencies: { + '@maskito/vue': '^0.14.0', + '@maskito/core': '^0.14.0', }, }, - react, - vue, angular: { files: { 'src/app/app.module.ts': angular_app_module_ts, @@ -30,8 +48,8 @@ import angular_example_component_ts from './angular/example_component_ts.md'; 'src/app/example.component.ts': angular_example_component_ts, }, dependencies: { - '@maskito/angular': '^0.13.0', - '@maskito/core': '^0.13.0', + '@maskito/angular': '^0.14.0', + '@maskito/core': '^0.14.0', }, }, }} diff --git a/static/usage/v7/input/mask/javascript/index_html.md b/static/usage/v7/input/mask/javascript/index_html.md index 7ae6159033f..53830a25c60 100644 --- a/static/usage/v7/input/mask/javascript/index_html.md +++ b/static/usage/v7/input/mask/javascript/index_html.md @@ -37,9 +37,9 @@ }); } - setTimeout(() => { + window.addEventListener('appload', () => { initCardMask(); initPhoneMask(); - }, 300); + }); ``` diff --git a/static/usage/v7/input/mask/vue.md b/static/usage/v7/input/mask/vue.md index 343d0627fb7..cbb82d50d1a 100644 --- a/static/usage/v7/input/mask/vue.md +++ b/static/usage/v7/input/mask/vue.md @@ -2,34 +2,26 @@ + new window.Maskito(nativeEl, { + mask: [ + ...Array(4).fill(/\d/), + ' ', + ...Array(4).fill(/\d/), + ' ', + ...Array(4).fill(/\d/), + ' ', + ...Array(4).fill(/\d/), + ' ', + ...Array(4).fill(/\d/), + ], + }); + } + + window.addEventListener('appload', () => { + initCardMask(); + initPhoneMask(); + }); + + + + ``` From 43da93133187c3e891590c55e6d6b87ff69524cd Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Mon, 12 Jun 2023 13:24:19 -0400 Subject: [PATCH 25/32] chore: angular respects mode selection --- static/usage/v7/input/mask/angular/app_module_ts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/usage/v7/input/mask/angular/app_module_ts.md b/static/usage/v7/input/mask/angular/app_module_ts.md index 74c16070a86..653793d4262 100644 --- a/static/usage/v7/input/mask/angular/app_module_ts.md +++ b/static/usage/v7/input/mask/angular/app_module_ts.md @@ -11,7 +11,7 @@ import { ExampleComponent } from './example.component'; import { MaskitoModule } from '@maskito/angular'; @NgModule({ - imports: [BrowserModule, FormsModule, MaskitoModule, IonicModule.forRoot()], + imports: [BrowserModule, FormsModule, MaskitoModule, IonicModule.forRoot({})], declarations: [AppComponent, ExampleComponent], bootstrap: [AppComponent], }) From 7777a373aef95dfc0d3bb3f4f74399f763cd4d11 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Mon, 12 Jun 2023 13:25:32 -0400 Subject: [PATCH 26/32] chore: phone number casing --- static/usage/v7/input/mask/javascript/index_html.md | 2 +- static/usage/v7/input/mask/react.md | 2 +- static/usage/v7/input/mask/vue.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/static/usage/v7/input/mask/javascript/index_html.md b/static/usage/v7/input/mask/javascript/index_html.md index 9e9470ad6fc..ba3e3271a76 100644 --- a/static/usage/v7/input/mask/javascript/index_html.md +++ b/static/usage/v7/input/mask/javascript/index_html.md @@ -12,7 +12,7 @@ - + diff --git a/static/usage/v7/input/mask/react.md b/static/usage/v7/input/mask/react.md index 7bbe00d715d..8c52b353e0b 100644 --- a/static/usage/v7/input/mask/react.md +++ b/static/usage/v7/input/mask/react.md @@ -30,7 +30,7 @@ function Example() { - + ); diff --git a/static/usage/v7/input/mask/vue.md b/static/usage/v7/input/mask/vue.md index cbb82d50d1a..959cd31abf9 100644 --- a/static/usage/v7/input/mask/vue.md +++ b/static/usage/v7/input/mask/vue.md @@ -5,7 +5,7 @@ - + From ff7da42dfc8a2f9874ce398bf09e74639d7d2bfb Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Fri, 16 Jun 2023 08:06:08 -0600 Subject: [PATCH 27/32] chore: relocate masking examples above theming --- docs/api/input.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/api/input.md b/docs/api/input.md index ba8a383d1c3..4ec260b9ab4 100644 --- a/docs/api/input.md +++ b/docs/api/input.md @@ -94,6 +94,14 @@ import FilteringData from '@site/static/usage/v7/input/filtering/index.md'; +## Input Masking + +Input masks are expressions that constrain input to support valid input values. Ionic recommends using [Maskito](https://tinkoff.github.io/maskito/getting-started/what-is-maskito) for input masking. Maskito is a lightweight, dependency-free library for masking input fields. It supports a wide range of masks, including phone numbers, credit cards, dates, and more. + +import Masking from '@site/static/usage/v7/input/mask/index.md'; + + + ## Theming ### Colors @@ -134,14 +142,6 @@ import Migration from '@site/static/usage/v7/input/migration/index.md'; Ionic uses heuristics to detect if an app is using the modern input syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-input` to `true` to force that instance of the input to use the legacy syntax. -## Input Masking - -Input masks are expressions that constrain input to support valid input values. Ionic recommends using [Maskito](https://tinkoff.github.io/maskito/getting-started/what-is-maskito) for input masking. Maskito is a lightweight, dependency-free library for masking input fields. It supports a wide range of masks, including phone numbers, credit cards, dates, and more. - -import Masking from '@site/static/usage/v7/input/mask/index.md'; - - - ## Interfaces ### InputChangeEventDetail From 3241459830b71feeb0e9fc6332a83762c70e1535 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Fri, 16 Jun 2023 08:07:19 -0600 Subject: [PATCH 28/32] fix: use ion-content and padding for js example --- .../v7/input/mask/javascript/index_html.md | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/static/usage/v7/input/mask/javascript/index_html.md b/static/usage/v7/input/mask/javascript/index_html.md index ba3e3271a76..512a34ff9f5 100644 --- a/static/usage/v7/input/mask/javascript/index_html.md +++ b/static/usage/v7/input/mask/javascript/index_html.md @@ -7,14 +7,16 @@ - - - - - - - - + + + + + + + + + + ``` From 0367ecb945532f09e08dcba98bd8b003bfcd061c Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Tue, 20 Jun 2023 12:57:30 -0400 Subject: [PATCH 31/32] docs: install steps, bug reports/support --- docs/api/input.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/docs/api/input.md b/docs/api/input.md index 4ec260b9ab4..12ad8c3f1b0 100644 --- a/docs/api/input.md +++ b/docs/api/input.md @@ -98,10 +98,22 @@ import FilteringData from '@site/static/usage/v7/input/filtering/index.md'; Input masks are expressions that constrain input to support valid input values. Ionic recommends using [Maskito](https://tinkoff.github.io/maskito/getting-started/what-is-maskito) for input masking. Maskito is a lightweight, dependency-free library for masking input fields. It supports a wide range of masks, including phone numbers, credit cards, dates, and more. +To get started with Maskito, install the library: + +```bash +npm install @maskito/core @maskito/{angular,react,vue} +``` + import Masking from '@site/static/usage/v7/input/mask/index.md'; +:::note + +Please submit bug reports with Maskito to the [Maskito Github repository](https://github.com/Tinkoff/maskito/issues). For technical support, please use the [Ionic Forum](https://forum.ionicframework.com/) or [Ionic Discord](http://chat.ionicframework.com/). + +::: + ## Theming ### Colors From ec24dcf50c8653403bc38027f79fe551d207d340 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Tue, 20 Jun 2023 13:02:25 -0400 Subject: [PATCH 32/32] chore: revert formatting --- docs/vue/navigation.md | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/docs/vue/navigation.md b/docs/vue/navigation.md index 205e146cec9..1286ab01537 100644 --- a/docs/vue/navigation.md +++ b/docs/vue/navigation.md @@ -416,15 +416,7 @@ Let's start by taking a look at our `Tabs` component: