javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 18:17:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(vue): ensure dynamic classes are synced with internal Ionic component classes (#22096)

Browse Source 
resolves #22051
This commit is contained in:
Liam DeBeasi
2020-09-16 10:09:52 -04:00
committed by GitHub
parent 67fbb3b963
commit 9cb22be91a
3 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "@ionic/core", "name": "@ionic/core",
"version": "5.4.0-dev.202009101933.5ffa65f", "version": "5.4.0-dev.202009151947.352e16b",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
@ -1385,9 +1385,9 @@
"dev": true "dev": true
}, },
"@stencil/vue-output-target": { "@stencil/vue-output-target": {
"version": "0.1.2", "version": "0.1.3",
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.1.2.tgz", "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.1.3.tgz",
"integrity": "sha512-UgaDR1PHqWO5XE41NK6YGj3IZLfnZQry0mxilnMHEegCdhp7dMrG4VaRw35BFbgnL9rRYJ0xvpergYkoT946uA==", "integrity": "sha512-+X1/gjiHh88Q+sQ9EWEHb4PIQs0k4pjTYxqsjqF5Yq9oaQGOPoKzOzjiIs2PEcE0fB6yu/dtRNQUUsBo613dpA==",
"dev": true "dev": true
}, },
"@stylelint/postcss-css-in-js": { "@stylelint/postcss-css-in-js": {

4
core/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ionic/core", "name": "@ionic/core",
"version": "5.4.0-dev.202009101933.5ffa65f", "version": "5.4.0-dev.202009151947.352e16b",
"description": "Base components for Ionic", "description": "Base components for Ionic",
"keywords": [ "keywords": [
"ionic", "ionic",
@ -38,7 +38,7 @@
"@rollup/plugin-virtual": "^2.0.3", "@rollup/plugin-virtual": "^2.0.3",
"@stencil/core": "1.17.3", "@stencil/core": "1.17.3",
"@stencil/sass": "1.3.2", "@stencil/sass": "1.3.2",
"@stencil/vue-output-target": "0.1.2", "@stencil/vue-output-target": "0.1.3",
"@types/jest": "^26.0.10", "@types/jest": "^26.0.10",
"@types/node": "^14.6.0", "@types/node": "^14.6.0",
"@types/puppeteer": "3.0.1", "@types/puppeteer": "3.0.1",

14
packages/vue/src/vue-component-lib/utils.ts
View File

@ -20,9 +20,13 @@ interface ComponentOptions {
routerLinkComponent?: boolean; routerLinkComponent?: boolean;
} }
const getElementClasses = (ref: Ref<HTMLElement | undefined>, componentClasses: string[], defaultClasses: string[] = []) => { const getComponentClasses = (classes: unknown) => {
return (classes as string)?.split(' ') || [];
};
const getElementClasses = (ref: Ref<HTMLElement | undefined>, componentClasses: Set<string>, defaultClasses: string[] = []) => {
return [ ...Array.from(ref.value?.classList || []), ...defaultClasses ] return [ ...Array.from(ref.value?.classList || []), ...defaultClasses ]
.filter((c: string, i, self) => !componentClasses.includes(c) && self.indexOf(c) === i); .filter((c: string, i, self) => !componentClasses.has(c) && self.indexOf(c) === i);
}; };
/** /**
@ -47,7 +51,7 @@ export const defineContainer = <Props extends object>(name: string, componentPro
const Container: FunctionalComponent<Props & InputProps> = defineComponent((props, { attrs, slots, emit }) => { const Container: FunctionalComponent<Props & InputProps> = defineComponent((props, { attrs, slots, emit }) => {
const { modelValue, ...restOfProps } = props; const { modelValue, ...restOfProps } = props;
const containerRef = ref<HTMLElement>(); const containerRef = ref<HTMLElement>();
const classes: string[] = (attrs.class as string)?.split(' ') || []; const classes = new Set(getComponentClasses(attrs.class));
const onVnodeBeforeMount = (vnode: VNode) => { const onVnodeBeforeMount = (vnode: VNode) => {
// Add a listener to tell Vue to update the v-model // Add a listener to tell Vue to update the v-model
if (vnode.el) { if (vnode.el) {
@ -86,6 +90,10 @@ export const defineContainer = <Props extends object>(name: string, componentPro
} }
return () => { return () => {
getComponentClasses(attrs.class).forEach(value => {
classes.add(value);
});
let propsToAdd = { let propsToAdd = {
...finalProps, ...finalProps,
ref: containerRef, ref: containerRef,