Skip to content

Commit e3d28dc

Browse files
prettier
1 parent 793a6fa commit e3d28dc

File tree

5 files changed

+132
-108
lines changed

5 files changed

+132
-108
lines changed

packages/vue/src/components/IonApp.ts

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,24 @@ import type { VNode } from "vue";
33
import { h, defineComponent, shallowRef } from "vue";
44

55
const userComponents = shallowRef([]);
6-
export const IonApp = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
7-
defineCustomElement();
8-
return () => {
9-
return h(
10-
"ion-app",
11-
{
12-
name: "IonApp",
13-
...attrs,
14-
},
15-
[slots.default && slots.default(), ...userComponents.value]
16-
);
17-
};
18-
}, {
19-
name: "IonApp",
20-
});
6+
export const IonApp = /*@__PURE__*/ defineComponent(
7+
(_, { attrs, slots }) => {
8+
defineCustomElement();
9+
return () => {
10+
return h(
11+
"ion-app",
12+
{
13+
name: "IonApp",
14+
...attrs,
15+
},
16+
[slots.default && slots.default(), ...userComponents.value]
17+
);
18+
};
19+
},
20+
{
21+
name: "IonApp",
22+
}
23+
);
2124

2225
/**
2326
* When rendering user components inside of

packages/vue/src/components/IonBackButton.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ export const IonBackButton = /*@__PURE__*/ defineComponent(
3434
slots.default && slots.default()
3535
);
3636
};
37-
}, {
37+
},
38+
{
3839
name: "IonBackButton",
3940
}
4041
);

packages/vue/src/components/IonNav.ts

Lines changed: 49 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -4,53 +4,56 @@ import { defineComponent, h, shallowRef } from "vue";
44

55
import { VueDelegate } from "../framework-delegate";
66

7-
export const IonNav = /*@__PURE__*/ defineComponent((props) => {
8-
defineCustomElement();
9-
const views = shallowRef([]);
7+
export const IonNav = /*@__PURE__*/ defineComponent(
8+
(props) => {
9+
defineCustomElement();
10+
const views = shallowRef([]);
1011

11-
/**
12-
* Allows us to create the component
13-
* within the Vue application context.
14-
*/
15-
const addView = (component: VNode) =>
16-
(views.value = [...views.value, component]);
17-
const removeView = (component: VNode) =>
18-
(views.value = views.value.filter((cmp) => cmp !== component));
12+
/**
13+
* Allows us to create the component
14+
* within the Vue application context.
15+
*/
16+
const addView = (component: VNode) =>
17+
(views.value = [...views.value, component]);
18+
const removeView = (component: VNode) =>
19+
(views.value = views.value.filter((cmp) => cmp !== component));
1920

20-
const delegate = VueDelegate(addView, removeView);
21-
return () => {
22-
return h("ion-nav", { ...props, delegate }, views.value);
23-
};
24-
}, {
25-
name: "IonNav",
26-
/**
27-
* The default values follow what is defined at
28-
* https://ionicframework.com/docs/api/nav#properties
29-
* otherwise the default values on the Web Component
30-
* may be overridden. For example, if the default animated value
31-
* is not `true` below, then Vue would default the prop to `false`
32-
* which would override the Web Component default of `true`.
33-
*/
34-
props: {
35-
animated: {
36-
type: Boolean,
37-
default: true,
38-
},
39-
animation: {
40-
type: Function,
41-
default: undefined,
42-
},
43-
root: {
44-
type: [Function, Object, String],
45-
default: undefined,
46-
},
47-
rootParams: {
48-
type: Object,
49-
default: undefined,
50-
},
51-
swipeGesture: {
52-
type: Boolean,
53-
default: undefined,
21+
const delegate = VueDelegate(addView, removeView);
22+
return () => {
23+
return h("ion-nav", { ...props, delegate }, views.value);
24+
};
25+
},
26+
{
27+
name: "IonNav",
28+
/**
29+
* The default values follow what is defined at
30+
* https://ionicframework.com/docs/api/nav#properties
31+
* otherwise the default values on the Web Component
32+
* may be overridden. For example, if the default animated value
33+
* is not `true` below, then Vue would default the prop to `false`
34+
* which would override the Web Component default of `true`.
35+
*/
36+
props: {
37+
animated: {
38+
type: Boolean,
39+
default: true,
40+
},
41+
animation: {
42+
type: Function,
43+
default: undefined,
44+
},
45+
root: {
46+
type: [Function, Object, String],
47+
default: undefined,
48+
},
49+
rootParams: {
50+
type: Object,
51+
default: undefined,
52+
},
53+
swipeGesture: {
54+
type: Boolean,
55+
default: undefined,
56+
},
5457
},
5558
}
56-
});
59+
);

packages/vue/src/components/IonRouterOutlet.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export const IonRouterOutlet = /*@__PURE__*/ defineComponent({
4444
let previousMatchedRouteRef: Ref | undefined;
4545
let previousMatchedPath: string | undefined;
4646

47-
provide(viewDepthKey, depth + 1 as 0);
47+
provide(viewDepthKey, (depth + 1) as 0);
4848
provide(matchedRouteKey, matchedRouteRef);
4949

5050
const ionRouterOutlet = ref();

packages/vue/src/utils/overlays.ts

Lines changed: 62 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import type { VNode, ComponentOptions } from 'vue';
2-
import { defineComponent, h, ref, onMounted } from 'vue';
1+
import type { VNode, ComponentOptions } from "vue";
2+
import { defineComponent, h, ref, onMounted } from "vue";
33

44
// TODO(FW-2969): types
55

@@ -20,10 +20,10 @@ export const defineOverlayContainer = <Props extends object>(
2020
const createControllerComponent = (options: ComponentOptions) => {
2121
return defineComponent<Props & OverlayProps>((props, { slots, emit }) => {
2222
const eventListeners = [
23-
{ componentEv: `${name}-will-present`, frameworkEv: 'willPresent' },
24-
{ componentEv: `${name}-did-present`, frameworkEv: 'didPresent' },
25-
{ componentEv: `${name}-will-dismiss`, frameworkEv: 'willDismiss' },
26-
{ componentEv: `${name}-did-dismiss`, frameworkEv: 'didDismiss' },
23+
{ componentEv: `${name}-will-present`, frameworkEv: "willPresent" },
24+
{ componentEv: `${name}-did-present`, frameworkEv: "didPresent" },
25+
{ componentEv: `${name}-will-dismiss`, frameworkEv: "willDismiss" },
26+
{ componentEv: `${name}-did-dismiss`, frameworkEv: "didDismiss" },
2727
];
2828

2929
if (defineCustomElement !== undefined) {
@@ -33,8 +33,8 @@ export const defineOverlayContainer = <Props extends object>(
3333
const overlay = ref();
3434
const onVnodeMounted = async () => {
3535
const isOpen = props.isOpen;
36-
isOpen && (await present(props))
37-
}
36+
isOpen && (await present(props));
37+
};
3838

3939
const onVnodeUpdated = async (node: VNode, prevNode: VNode) => {
4040
const isOpen = node.props!.isOpen;
@@ -51,11 +51,11 @@ export const defineOverlayContainer = <Props extends object>(
5151
} else {
5252
await dismiss();
5353
}
54-
}
54+
};
5555

5656
const onVnodeBeforeUnmount = async () => {
5757
await dismiss();
58-
}
58+
};
5959

6060
const dismiss = async () => {
6161
if (!overlay.value) return;
@@ -67,7 +67,7 @@ export const defineOverlayContainer = <Props extends object>(
6767
await overlay.value;
6868

6969
overlay.value = undefined;
70-
}
70+
};
7171

7272
const present = async (props: Readonly<Props>) => {
7373
/**
@@ -93,7 +93,10 @@ export const defineOverlayContainer = <Props extends object>(
9393
*/
9494
for (const key in props) {
9595
const value = props[key] as any;
96-
if (Object.prototype.hasOwnProperty.call(props, key) && value !== EMPTY_PROP) {
96+
if (
97+
Object.prototype.hasOwnProperty.call(props, key) &&
98+
value !== EMPTY_PROP
99+
) {
97100
restOfProps[key] = value;
98101
}
99102
}
@@ -110,32 +113,29 @@ export const defineOverlayContainer = <Props extends object>(
110113
const component = slots.default && slots.default()[0];
111114
overlay.value = controller.create({
112115
...restOfProps,
113-
component
116+
component,
114117
});
115118

116119
overlay.value = await overlay.value;
117120

118-
eventListeners.forEach(eventListener => {
121+
eventListeners.forEach((eventListener) => {
119122
overlay.value.addEventListener(eventListener.componentEv, () => {
120123
emit(eventListener.frameworkEv);
121124
});
122-
})
125+
});
123126

124127
await overlay.value.present();
125-
}
128+
};
126129

127130
return () => {
128-
return h(
129-
'div',
130-
{
131-
style: { display: 'none' },
132-
onVnodeMounted,
133-
onVnodeUpdated,
134-
onVnodeBeforeUnmount,
135-
isOpen: props.isOpen === true
136-
}
137-
);
138-
}
131+
return h("div", {
132+
style: { display: "none" },
133+
onVnodeMounted,
134+
onVnodeUpdated,
135+
onVnodeBeforeUnmount,
136+
isOpen: props.isOpen === true,
137+
});
138+
};
139139
}, options);
140140
};
141141
const createInlineComponent = (options: any) => {
@@ -147,9 +147,18 @@ export const defineOverlayContainer = <Props extends object>(
147147
const elementRef = ref();
148148

149149
onMounted(() => {
150-
elementRef.value.addEventListener('ion-mount', () => isOpen.value = true);
151-
elementRef.value.addEventListener('will-present', () => isOpen.value = true);
152-
elementRef.value.addEventListener('did-dismiss', () => isOpen.value = false);
150+
elementRef.value.addEventListener(
151+
"ion-mount",
152+
() => (isOpen.value = true)
153+
);
154+
elementRef.value.addEventListener(
155+
"will-present",
156+
() => (isOpen.value = true)
157+
);
158+
elementRef.value.addEventListener(
159+
"did-dismiss",
160+
() => (isOpen.value = false)
161+
);
153162
});
154163

155164
return () => {
@@ -163,7 +172,10 @@ export const defineOverlayContainer = <Props extends object>(
163172
*/
164173
for (const key in props) {
165174
const value = (props as any)[key];
166-
if (Object.prototype.hasOwnProperty.call(props, key) && value !== EMPTY_PROP) {
175+
if (
176+
Object.prototype.hasOwnProperty.call(props, key) &&
177+
value !== EMPTY_PROP
178+
) {
167179
restOfProps[key] = value;
168180
}
169181
}
@@ -174,11 +186,11 @@ export const defineOverlayContainer = <Props extends object>(
174186
*/
175187
const renderChildren = () => {
176188
if (hasDelegateHost) {
177-
return h('div', { className: 'ion-delegate-host ion-page' }, slots);
189+
return h("div", { className: "ion-delegate-host ion-page" }, slots);
178190
}
179191

180192
return slots;
181-
}
193+
};
182194

183195
return h(
184196
name,
@@ -190,27 +202,32 @@ export const defineOverlayContainer = <Props extends object>(
190202
* the value of the prop will be the empty string which is
191203
* why we still call renderChildren() in that case.
192204
*/
193-
(isOpen.value || restOfProps.keepContentsMounted || restOfProps.keepContentsMounted === '') ? renderChildren() : undefined
194-
)
195-
}
205+
isOpen.value ||
206+
restOfProps.keepContentsMounted ||
207+
restOfProps.keepContentsMounted === ""
208+
? renderChildren()
209+
: undefined
210+
);
211+
};
196212
}, options);
197-
}
213+
};
198214

199215
const options: ComponentOptions = {
200216
name,
201217
props: {
202-
'isOpen': DEFAULT_EMPTY_PROP,
203-
...(componentProps.reduce((acc, prop) => {
218+
isOpen: DEFAULT_EMPTY_PROP,
219+
...componentProps.reduce((acc, prop) => {
204220
acc[prop] = DEFAULT_EMPTY_PROP;
205221
return acc;
206-
}, {} as Record<string, unknown>)),
222+
}, {} as Record<string, unknown>),
207223
},
208-
emits: typeof controller !== 'undefined'
209-
? ['willPresent', 'didPresent', 'willDismiss', 'didDismiss']
210-
: undefined
211-
}
224+
emits:
225+
typeof controller !== "undefined"
226+
? ["willPresent", "didPresent", "willDismiss", "didDismiss"]
227+
: undefined,
228+
};
212229

213230
return controller !== undefined
214231
? createControllerComponent(options)
215232
: createInlineComponent(options);
216-
}
233+
};

0 commit comments

Comments
 (0)