Compare commits

..

1 Commits

Author SHA1 Message Date
Maria Hutt
1f0192d588 test(chip): update the basic preview 2024-06-28 16:07:11 -07:00
28 changed files with 170 additions and 211 deletions

View File

@@ -3,17 +3,6 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03)
### Features
* **vue:** add optional IonicConfig type parameter to IonicVue plugin ([#29637](https://github.com/ionic-team/ionic-framework/issues/29637)) ([90893f4](https://github.com/ionic-team/ionic-framework/commit/90893f46c930dbccd4251fa2f56bdde30b669158))
## [8.2.4](https://github.com/ionic-team/ionic-framework/compare/v8.2.2...v8.2.4) (2024-06-28)

View File

@@ -3,14 +3,6 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03)
**Note:** Version bump only for package @ionic/core
## [8.2.4](https://github.com/ionic-team/ionic-framework/compare/v8.2.2...v8.2.4) (2024-06-28)

24
core/package-lock.json generated
View File

@@ -1,15 +1,15 @@
{
"name": "@ionic/core",
"version": "8.2.5",
"version": "8.2.4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/core",
"version": "8.2.5",
"version": "8.2.4",
"license": "MIT",
"dependencies": {
"@stencil/core": "^4.19.2",
"@stencil/core": "^4.19.1",
"ionicons": "^7.2.2",
"tslib": "^2.1.0"
},
@@ -723,7 +723,7 @@
},
"node_modules/@clack/prompts/node_modules/is-unicode-supported": {
"version": "1.3.0",
"extraneous": true,
"dev": true,
"inBundle": true,
"license": "MIT",
"engines": {
@@ -1824,9 +1824,9 @@
}
},
"node_modules/@stencil/core": {
"version": "4.19.2",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.2.tgz",
"integrity": "sha512-ZdnbHmHEl8E5vN0GWDtONe5w6j3CrSqqxZM4hNLBPkV/aouWKug7D5/Mi6RazfYO5U4fmHQYLwMz60rHcx0G4g==",
"version": "4.19.1",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.1.tgz",
"integrity": "sha512-fjSBctHrobeSL2+XcuX7GVk/eaUhZ/lvIu21RJmzHAPcNyueuSAEv7J/Isn4UlYNk70o+yOK72H0FTlNkUibvw==",
"bin": {
"stencil": "bin/stencil"
},
@@ -10795,7 +10795,7 @@
"is-unicode-supported": {
"version": "1.3.0",
"bundled": true,
"extraneous": true
"dev": true
}
}
},
@@ -11583,9 +11583,9 @@
"requires": {}
},
"@stencil/core": {
"version": "4.19.2",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.2.tgz",
"integrity": "sha512-ZdnbHmHEl8E5vN0GWDtONe5w6j3CrSqqxZM4hNLBPkV/aouWKug7D5/Mi6RazfYO5U4fmHQYLwMz60rHcx0G4g=="
"version": "4.19.1",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.1.tgz",
"integrity": "sha512-fjSBctHrobeSL2+XcuX7GVk/eaUhZ/lvIu21RJmzHAPcNyueuSAEv7J/Isn4UlYNk70o+yOK72H0FTlNkUibvw=="
},
"@stencil/react-output-target": {
"version": "0.5.3",
@@ -17745,4 +17745,4 @@
"dev": true
}
}
}
}

View File

@@ -1,6 +1,6 @@
{
"name": "@ionic/core",
"version": "8.2.5",
"version": "8.2.4",
"description": "Base components for Ionic",
"keywords": [
"ionic",
@@ -31,7 +31,7 @@
"loader/"
],
"dependencies": {
"@stencil/core": "^4.19.2",
"@stencil/core": "^4.19.1",
"ionicons": "^7.2.2",
"tslib": "^2.1.0"
},

View File

@@ -0,0 +1,74 @@
export async function createPlayground(componentTag, propDefinitions, innerContent = '') {
const playground = document.createElement('div');
const form = document.createElement('form');
const preview = document.createElement('div');
preview.classList.add('preview');
function renderComponent(props) {
const component = document.createElement(componentTag);
Object.keys(props).forEach(propName => {
if (props[propName] !== undefined && props[propName] !== '') {
component.setAttribute(propName, props[propName]);
}
});
// Set inner HTML content if provided
if (innerContent) {
component.innerHTML = innerContent;
}
preview.innerHTML = '';
preview.appendChild(component);
}
propDefinitions.forEach(prop => {
const label = document.createElement('label');
const labelText = document.createElement('span');
labelText.textContent = `${prop.name}: `;
const input = document.createElement('input');
input.type = prop.type === 'boolean' ? 'checkbox' : 'text';
input.name = prop.name;
input.value = prop.defaultValue || '';
if (prop.type === 'boolean') {
input.checked = prop.defaultValue === 'true';
}
input.addEventListener('input', () => {
const formData = new FormData(form);
const props = {};
formData.forEach((value, key) => {
const field = form.elements[key];
if (field.type === 'checkbox') {
props[key] = field.checked;
} else {
props[key] = value;
}
});
renderComponent(props);
});
label.appendChild(labelText);
label.appendChild(input);
form.appendChild(label);
form.appendChild(document.createElement('br'));
});
playground.appendChild(preview);
// add a divider
playground.appendChild(document.createElement('hr'));
playground.appendChild(form);
// Initial render with default props
const defaultProps = Object.fromEntries(
propDefinitions.map(prop => [prop.name, prop.defaultValue || ''])
);
renderComponent(defaultProps);
return playground;
}

View File

@@ -12,6 +12,21 @@
<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>
<style>
.preview {
min-height: 50px;
}
label {
display: flex;
align-items: center;
}
label span {
min-width: 100px;
text-align: left;
margin-inline-end: 10px;
}
</style>
</head>
<body>
@@ -21,86 +36,34 @@
<ion-title>Chip - Basic</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding" id="content" style="text-align: center">
<h2>Basic Chips</h2>
<ion-chip>
<ion-label>Default</ion-label>
</ion-chip>
<ion-chip style="border-radius: 4px">
<ion-label>Border Radius</ion-label>
</ion-chip>
<ion-chip>
<ion-icon name="checkmark-circle"></ion-icon>
<ion-label>With Icon</ion-label>
</ion-chip>
<ion-chip>
<ion-avatar>
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
/>
</ion-avatar>
<ion-label>With Avatar</ion-label>
</ion-chip>
<ion-chip>
<ion-avatar>
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
/>
</ion-avatar>
<ion-label>With Icon and Avatar</ion-label>
<ion-icon name="close-circle"></ion-icon>
</ion-chip>
<h2>Color Chips</h2>
<ion-chip color="primary">
<ion-label>Primary</ion-label>
</ion-chip>
<ion-chip color="danger">
<ion-label>Danger</ion-label>
</ion-chip>
<ion-chip color="tertiary">
<ion-icon name="checkmark-circle"></ion-icon>
<ion-label>Tertiary with Icon</ion-label>
</ion-chip>
<ion-chip color="primary">
<ion-avatar>
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
/>
</ion-avatar>
<ion-label>Primary with Avatar</ion-label>
</ion-chip>
<ion-chip color="success">
<ion-label>Success with Icon</ion-label>
<ion-icon name="calendar"></ion-icon>
</ion-chip>
<h2>Outline Chips</h2>
<ion-chip outline>
<ion-label>Outline</ion-label>
</ion-chip>
<ion-chip outline color="danger">
<ion-label>Danger Outline</ion-label>
</ion-chip>
<ion-chip outline color="secondary">
<ion-icon name="checkmark-circle"></ion-icon>
<ion-label>Secondary Outline with Icon</ion-label>
</ion-chip>
<ion-chip outline color="primary">
<ion-label>Primary Outline with Avatar</ion-label>
<ion-avatar>
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
/>
</ion-avatar>
</ion-chip>
<ion-chip outline>
<ion-icon name="git-pull-request"></ion-icon>
<ion-label>Outline with Icon and Avatar</ion-label>
<ion-icon name="close-circle"></ion-icon>
</ion-chip>
<div id="playground"></div>
</ion-content>
</ion-app>
<script type="module">
import { createPlayground } from '../../../../../scripts/testing/createPlayground.js';
const chipProps = [
{
name: 'color',
type: 'string',
description:
'The color to use from your application\'s color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".',
defaultValue: 'primary',
},
{
name: 'outline',
type: 'boolean',
description: 'If true, the chip will have a basic style.',
defaultValue: 'false',
},
];
const innerContent = '<span>Hi</span>';
createPlayground('ion-chip', chipProps, innerContent).then((playground) => {
document.getElementById('playground').appendChild(playground);
});
</script>
</body>
</html>

View File

@@ -3,5 +3,5 @@
"core",
"packages/*"
],
"version": "8.2.5"
"version": "8.2.4"
}

View File

@@ -3,14 +3,6 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03)
**Note:** Version bump only for package @ionic/angular-server
## [8.2.4](https://github.com/ionic-team/ionic-framework/compare/v8.2.2...v8.2.4) (2024-06-28)
**Note:** Version bump only for package @ionic/angular-server

View File

@@ -1,15 +1,15 @@
{
"name": "@ionic/angular-server",
"version": "8.2.5",
"version": "8.2.4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/angular-server",
"version": "8.2.5",
"version": "8.2.4",
"license": "MIT",
"dependencies": {
"@ionic/core": "^8.2.5"
"@ionic/core": "^8.2.4"
},
"devDependencies": {
"@angular-eslint/eslint-plugin": "^16.0.0",
@@ -10301,4 +10301,4 @@
}
}
}
}
}

View File

@@ -1,6 +1,6 @@
{
"name": "@ionic/angular-server",
"version": "8.2.5",
"version": "8.2.4",
"description": "Angular SSR Module for Ionic",
"keywords": [
"ionic",
@@ -64,6 +64,6 @@
},
"prettier": "@ionic/prettier-config",
"dependencies": {
"@ionic/core": "^8.2.5"
"@ionic/core": "^8.2.4"
}
}

View File

@@ -3,14 +3,6 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03)
**Note:** Version bump only for package @ionic/angular
## [8.2.4](https://github.com/ionic-team/ionic-framework/compare/v8.2.2...v8.2.4) (2024-06-28)

View File

@@ -1,15 +1,15 @@
{
"name": "@ionic/angular",
"version": "8.2.5",
"version": "8.2.4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/angular",
"version": "8.2.5",
"version": "8.2.4",
"license": "MIT",
"dependencies": {
"@ionic/core": "^8.2.5",
"@ionic/core": "^8.2.4",
"ionicons": "^7.0.0",
"jsonc-parser": "^3.0.0",
"tslib": "^2.3.0"
@@ -15020,4 +15020,4 @@
}
}
}
}
}

View File

@@ -1,6 +1,6 @@
{
"name": "@ionic/angular",
"version": "8.2.5",
"version": "8.2.4",
"description": "Angular specific wrappers for @ionic/core",
"keywords": [
"ionic",
@@ -47,7 +47,7 @@
}
},
"dependencies": {
"@ionic/core": "^8.2.5",
"@ionic/core": "^8.2.4",
"ionicons": "^7.0.0",
"jsonc-parser": "^3.0.0",
"tslib": "^2.3.0"

View File

@@ -3,14 +3,6 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03)
**Note:** Version bump only for package @ionic/docs
## [8.2.4](https://github.com/ionic-team/ionic-framework/compare/v8.2.2...v8.2.4) (2024-06-28)
**Note:** Version bump only for package @ionic/docs

View File

@@ -1,13 +1,13 @@
{
"name": "@ionic/docs",
"version": "8.2.5",
"version": "8.2.4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/docs",
"version": "8.2.5",
"version": "8.2.4",
"license": "MIT"
}
}
}
}

View File

@@ -1,6 +1,6 @@
{
"name": "@ionic/docs",
"version": "8.2.5",
"version": "8.2.4",
"description": "Pre-packaged API documentation for the Ionic docs.",
"main": "core.json",
"types": "core.d.ts",

View File

@@ -3,14 +3,6 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03)
**Note:** Version bump only for package @ionic/react-router
## [8.2.4](https://github.com/ionic-team/ionic-framework/compare/v8.2.2...v8.2.4) (2024-06-28)
**Note:** Version bump only for package @ionic/react-router

View File

@@ -1,15 +1,15 @@
{
"name": "@ionic/react-router",
"version": "8.2.5",
"version": "8.2.4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/react-router",
"version": "8.2.5",
"version": "8.2.4",
"license": "MIT",
"dependencies": {
"@ionic/react": "^8.2.5",
"@ionic/react": "^8.2.4",
"tslib": "*"
},
"devDependencies": {
@@ -6666,4 +6666,4 @@
"dev": true
}
}
}
}

View File

@@ -1,6 +1,6 @@
{
"name": "@ionic/react-router",
"version": "8.2.5",
"version": "8.2.4",
"description": "React Router wrapper for @ionic/react",
"keywords": [
"ionic",
@@ -36,7 +36,7 @@
"dist/"
],
"dependencies": {
"@ionic/react": "^8.2.5",
"@ionic/react": "^8.2.4",
"tslib": "*"
},
"peerDependencies": {

View File

@@ -3,14 +3,6 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03)
**Note:** Version bump only for package @ionic/react
## [8.2.4](https://github.com/ionic-team/ionic-framework/compare/v8.2.2...v8.2.4) (2024-06-28)
**Note:** Version bump only for package @ionic/react

View File

@@ -1,15 +1,15 @@
{
"name": "@ionic/react",
"version": "8.2.5",
"version": "8.2.4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/react",
"version": "8.2.5",
"version": "8.2.4",
"license": "MIT",
"dependencies": {
"@ionic/core": "^8.2.5",
"@ionic/core": "^8.2.4",
"ionicons": "^7.0.0",
"tslib": "*"
},
@@ -21825,4 +21825,4 @@
}
}
}
}
}

View File

@@ -1,6 +1,6 @@
{
"name": "@ionic/react",
"version": "8.2.5",
"version": "8.2.4",
"description": "React specific wrapper for @ionic/core",
"keywords": [
"ionic",
@@ -39,7 +39,7 @@
"css/"
],
"dependencies": {
"@ionic/core": "^8.2.5",
"@ionic/core": "^8.2.4",
"ionicons": "^7.0.0",
"tslib": "*"
},

View File

@@ -3,14 +3,6 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03)
**Note:** Version bump only for package @ionic/vue-router
## [8.2.4](https://github.com/ionic-team/ionic-framework/compare/v8.2.2...v8.2.4) (2024-06-28)
**Note:** Version bump only for package @ionic/vue-router

View File

@@ -1,15 +1,15 @@
{
"name": "@ionic/vue-router",
"version": "8.2.5",
"version": "8.2.4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/vue-router",
"version": "8.2.5",
"version": "8.2.4",
"license": "MIT",
"dependencies": {
"@ionic/vue": "^8.2.5"
"@ionic/vue": "^8.2.4"
},
"devDependencies": {
"@ionic/eslint-config": "^0.3.0",
@@ -12798,4 +12798,4 @@
"dev": true
}
}
}
}

View File

@@ -1,6 +1,6 @@
{
"name": "@ionic/vue-router",
"version": "8.2.5",
"version": "8.2.4",
"description": "Vue Router integration for @ionic/vue",
"scripts": {
"test.spec": "jest",
@@ -44,7 +44,7 @@
},
"homepage": "https://github.com/ionic-team/ionic-framework#readme",
"dependencies": {
"@ionic/vue": "^8.2.5"
"@ionic/vue": "^8.2.4"
},
"devDependencies": {
"@ionic/eslint-config": "^0.3.0",

View File

@@ -3,17 +3,6 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03)
### Features
* **vue:** add optional IonicConfig type parameter to IonicVue plugin ([#29637](https://github.com/ionic-team/ionic-framework/issues/29637)) ([90893f4](https://github.com/ionic-team/ionic-framework/commit/90893f46c930dbccd4251fa2f56bdde30b669158))
## [8.2.4](https://github.com/ionic-team/ionic-framework/compare/v8.2.2...v8.2.4) (2024-06-28)
**Note:** Version bump only for package @ionic/vue

View File

@@ -1,15 +1,15 @@
{
"name": "@ionic/vue",
"version": "8.2.5",
"version": "8.2.4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/vue",
"version": "8.2.5",
"version": "8.2.4",
"license": "MIT",
"dependencies": {
"@ionic/core": "^8.2.5",
"@ionic/core": "^8.2.4",
"ionicons": "^7.0.0"
},
"devDependencies": {
@@ -6551,4 +6551,4 @@
"dev": true
}
}
}
}

View File

@@ -1,6 +1,6 @@
{
"name": "@ionic/vue",
"version": "8.2.5",
"version": "8.2.4",
"description": "Vue specific wrapper for @ionic/core",
"scripts": {
"eslint": "eslint src",
@@ -66,7 +66,7 @@
"vue-router": "^4.0.16"
},
"dependencies": {
"@ionic/core": "^8.2.5",
"@ionic/core": "^8.2.4",
"ionicons": "^7.0.0"
},
"vetur": {