javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 10:01:59 +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

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

@ -20,9 +20,13 @@ interface ComponentOptions {
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 ]
.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 { modelValue, ...restOfProps } = props;
const containerRef = ref<HTMLElement>();
const classes: string[] = (attrs.class as string)?.split(' ') || [];
const classes = new Set(getComponentClasses(attrs.class));
const onVnodeBeforeMount = (vnode: VNode) => {
// Add a listener to tell Vue to update the v-model
if (vnode.el) {
@ -86,6 +90,10 @@ export const defineContainer = <Props extends object>(name: string, componentPro
}
return () => {
getComponentClasses(attrs.class).forEach(value => {
classes.add(value);
});
let propsToAdd = {
...finalProps,
ref: containerRef,