javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-02-04 13:16:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

add poc

Browse Source
This commit is contained in:
Liam DeBeasi
2024-02-09 10:04:11 -05:00
parent 1ca9aa5246
commit 243cf92600
3 changed files with 95 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
core/src/components.d.ts vendored
View File

@@ -1948,6 +1948,9 @@ export namespace Components {
*/
"mode"?: "ios" | "md";
}
interface IonPasswordStrength {
"strength"?: 'weak' | 'medium' | 'strong';
}
interface IonPicker {
/**
* If `true`, the picker will animate.
@@ -4035,6 +4038,12 @@ declare global {
prototype: HTMLIonNoteElement;
new (): HTMLIonNoteElement;
};
interface HTMLIonPasswordStrengthElement extends Components.IonPasswordStrength, HTMLStencilElement {
}
var HTMLIonPasswordStrengthElement: {
prototype: HTMLIonPasswordStrengthElement;
new (): HTMLIonPasswordStrengthElement;
};
interface HTMLIonPickerElementEventMap {
"ionPickerDidPresent": void;
"ionPickerWillPresent": void;
@@ -4672,6 +4681,7 @@ declare global {
"ion-nav": HTMLIonNavElement;
"ion-nav-link": HTMLIonNavLinkElement;
"ion-note": HTMLIonNoteElement;
"ion-password-strength": HTMLIonPasswordStrengthElement;
"ion-picker": HTMLIonPickerElement;
"ion-picker-column": HTMLIonPickerColumnElement;
"ion-picker-column-internal": HTMLIonPickerColumnInternalElement;
@@ -6606,6 +6616,9 @@ declare namespace LocalJSX {
*/
"mode"?: "ios" | "md";
}
interface IonPasswordStrength {
"strength"?: 'weak' | 'medium' | 'strong';
}
interface IonPicker {
/**
* If `true`, the picker will animate.
@@ -8127,6 +8140,7 @@ declare namespace LocalJSX {
"ion-nav": IonNav;
"ion-nav-link": IonNavLink;
"ion-note": IonNote;
"ion-password-strength": IonPasswordStrength;
"ion-picker": IonPicker;
"ion-picker-column": IonPickerColumn;
"ion-picker-column-internal": IonPickerColumnInternal;
@@ -8224,6 +8238,7 @@ declare module "@stencil/core" {
"ion-nav": LocalJSX.IonNav & JSXBase.HTMLAttributes<HTMLIonNavElement>;
"ion-nav-link": LocalJSX.IonNavLink & JSXBase.HTMLAttributes<HTMLIonNavLinkElement>;
"ion-note": LocalJSX.IonNote & JSXBase.HTMLAttributes<HTMLIonNoteElement>;
"ion-password-strength": LocalJSX.IonPasswordStrength & JSXBase.HTMLAttributes<HTMLIonPasswordStrengthElement>;
"ion-picker": LocalJSX.IonPicker & JSXBase.HTMLAttributes<HTMLIonPickerElement>;
"ion-picker-column": LocalJSX.IonPickerColumn & JSXBase.HTMLAttributes<HTMLIonPickerColumnElement>;
"ion-picker-column-internal": LocalJSX.IonPickerColumnInternal & JSXBase.HTMLAttributes<HTMLIonPickerColumnInternalElement>;

34
core/src/components/password-strength/password-strength.tsx Normal file
View File

@@ -0,0 +1,34 @@
import type { ComponentInterface } from '@stencil/core';
import { Component, Host, Prop, h } from '@stencil/core';
const progressBarValue: any = {
'weak': {
value: 0.2,
},
'medium': {
value: 0.6,
},
'strong': {
value: 1,
}
}
@Component({
tag: 'ion-password-strength',
shadow: true
})
export class PasswordStrength implements ComponentInterface {
@Prop() strength?: 'weak' | 'medium' | 'strong';
render() {
// TODO need a mode virtual prop
// TODO need to add colors
const data = this.strength !== undefined ? progressBarValue[this.strength] : undefined;
return (
<Host>
<ion-progress-bar value={data?.value || 0}></ion-progress-bar>
{ this.strength !== undefined && <slot name={this.strength}></slot> }
</Host>
);
}
}

46
core/src/components/password-strength/test/basic/index.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Password Strength - Basic</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>
<body class="ion-padding">
<ion-input label="Password" type="password" fill="outline"></ion-input>
<br />
<ion-password-strength>
<div slot="weak">Your password is weak</div>
<div slot="medium">Your password is medium</div>
<div slot="strong">Your password is strong</div>
</ion-password-strength>
<script>
const input = document.querySelector('ion-input');
const ps = document.querySelector('ion-password-strength');
input.addEventListener('ionInput', () => {
const val = input.value;
if (val.length === 0) {
ps.strength = undefined;
} else if (val.length < 4) {
ps.strength = 'weak';
} else if (val.length < 8) {
ps.strength = 'medium';
} else {
ps.strength = 'strong';
}
});
</script>
</body>
</html>