Skip to content

Commit fa77e36

Browse files
vchan14vchan14
committed
add event examples
1 parent d75f385 commit fa77e36

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+594
-421
lines changed

‎.prettierrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"plugins": ["prettier-plugin-tailwindcss"]
3+
}

‎package-lock.json

+76-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@
2929
"eslint-plugin-playwright": "^1.5.4",
3030
"eslint-plugin-vue": "^9.23.0",
3131
"postcss": "^8.4.38",
32-
"prettier": "^3.2.5",
32+
"prettier": "^3.3.2",
33+
"prettier-plugin-tailwindcss": "^0.6.5",
3334
"tailwindcss": "^3.4.4",
3435
"vite": "^5.2.8"
3536
}

‎src/App.vue

+25-8
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
<script setup>
2-
import { RouterView } from 'vue-router'
3-
import RouterButton from '@/components/RouterButton.vue'
4-
import { ALL_EXAMPLES } from '@/examplelists.js'
2+
import { RouterView } from "vue-router";
3+
import RouterButton from "@/components/RouterButton.vue";
4+
import { ALL_EXAMPLES } from "@/examplelists.js";
55
</script>
66

77
<template>
8-
<div class="flex flex-row gap-x-2 h-full w-full">
9-
<div class="flex flex-col h-full gap-y-4 w-64 py-2 px-3 bg-green-300 rounded overflow-y-auto">
10-
<div class="text-3xl font-semibold sticky">Vue 3 Examples</div>
11-
<div v-for="{ name, examples } in ALL_EXAMPLES" :key="name" class="flex flex-col gap-y-2">
8+
<div class="flex h-full w-full flex-row gap-x-2">
9+
<div
10+
class="scrollable-area flex h-full w-64 flex-col gap-y-4 overflow-y-auto rounded bg-green-300 px-3 py-2"
11+
>
12+
<div class="sticky text-3xl font-semibold">Vue 3 Examples</div>
13+
<div
14+
v-for="{ name, examples } in ALL_EXAMPLES"
15+
:key="name"
16+
class="flex flex-col gap-y-2"
17+
>
1218
<p class="text-xl font-bold">{{ name }}</p>
1319
<RouterButton
1420
v-for="example in examples"
@@ -19,8 +25,19 @@ import { ALL_EXAMPLES } from '@/examplelists.js'
1925
</div>
2026
<RouterButton to-path="/test" name="test me" />
2127
</div>
22-
<div class="w-full h-full border-gray-400 border-2 rounded">
28+
<div class="h-full w-full rounded border-2 border-gray-400">
2329
<RouterView />
2430
</div>
2531
</div>
2632
</template>
33+
34+
<style scoped>
35+
.scrollable-area::-webkit-scrollbar {
36+
width: 3px; /* for vertical scrollbars */
37+
height: 3px; /* for horizontal scrollbars */
38+
}
39+
40+
.scrollable-area:hover::-webkit-scrollbar-thumb {
41+
background: #999; /* darker gray color on hover */
42+
}
43+
</style>

‎src/ReplFactory.js

+83-72
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,119 @@
11
// createReplComponent.js
2-
import { defineComponent, h } from 'vue'
3-
import ReplWrapper from '@/components/ReplWrapper.vue' // Adjust the path accordingly
2+
import { defineComponent, h } from "vue";
3+
import ReplWrapper from "@/components/ReplWrapper.vue"; // Adjust the path accordingly
44

55
// Introduction
6-
import HelloAppVue from '@/views/introduction/HelloWorldView.vue?raw'
7-
import DynamicAttributesAppVue from '@/views/introduction/dynamicattributes/DynamicAttributesView.vue?raw'
8-
import StylingAppVue from '@/views/introduction/StylingView.vue?raw'
9-
import MainComponentVue from '@/views/introduction/nestedcomponents/NestedAppView.vue?raw'
10-
import SubComponentVue from '@/views/introduction/nestedcomponents/NestedComponentsView.vue?raw'
11-
import HtmlDirectiveAppVue from '@/views/introduction/HtmlDirectiveView.vue?raw'
6+
import HelloAppVue from "@/views/introduction/HelloWorldView.vue?raw";
7+
import DynamicAttributesAppVue from "@/views/introduction/dynamicattributes/DynamicAttributesView.vue?raw";
8+
import StylingAppVue from "@/views/introduction/StylingView.vue?raw";
9+
import MainComponentVue from "@/views/introduction/nestedcomponents/NestedAppView.vue?raw";
10+
import SubComponentVue from "@/views/introduction/nestedcomponents/NestedComponentsView.vue?raw";
11+
import HtmlDirectiveAppVue from "@/views/introduction/HtmlDirectiveView.vue?raw";
1212

1313
// Reactivity
14-
import ReactivityAssignmentView from '@/views/reactivity/ReactivityAssignmentView.vue?raw'
15-
import ReactivityDeclarationView from '@/views/reactivity/ReactiveDeclarationView.vue?raw'
16-
import ReactivityStatementsView from '@/views/reactivity/ReactiveStatementsView.vue?raw'
14+
import ReactivityAssignmentView from "@/views/reactivity/ReactivityAssignmentView.vue?raw";
15+
import ReactivityDeclarationView from "@/views/reactivity/ReactiveDeclarationView.vue?raw";
16+
import ReactivityStatementsView from "@/views/reactivity/ReactiveStatementsView.vue?raw";
1717

1818
// Props
19-
import DeclaringPropsAppVue from '@/views/props/declaringprops/DeclaringPropsView.vue?raw'
20-
import DeclaringPropsNestedVue from '@/views/props/declaringprops/NestedView.vue?raw'
19+
import DeclaringPropsAppVue from "@/views/props/declaringprops/DeclaringPropsView.vue?raw";
20+
import DeclaringPropsNestedVue from "@/views/props/declaringprops/NestedView.vue?raw";
2121

22-
import DefaultValuesAppVue from '@/views/props/defaultvalues/DefaultValuesView.vue?raw'
23-
import DefaultValuesNestedVue from '@/views/props/defaultvalues/NestedView.vue?raw'
22+
import DefaultValuesAppVue from "@/views/props/defaultvalues/DefaultValuesView.vue?raw";
23+
import DefaultValuesNestedVue from "@/views/props/defaultvalues/NestedView.vue?raw";
2424

25-
import SpreadPropsAppVue from '@/views/props/spreadprops/SpreadPropsView.vue?raw'
26-
import SpreadPropsNestedVue from '@/views/props/spreadprops/InfoView.vue?raw'
25+
import SpreadPropsAppVue from "@/views/props/spreadprops/SpreadPropsView.vue?raw";
26+
import SpreadPropsNestedVue from "@/views/props/spreadprops/InfoView.vue?raw";
2727

2828
// Events
29-
import ComponentEventsAppVue from '@/views/events/componentevents/AppView.vue?raw'
30-
import ComponentEventsInnerVue from '@/views/events/componentevents/InnerView.vue?raw'
31-
import DomEventForwardingAppVue from '@/views/events/domeventforwarding/AppView.vue?raw'
32-
import DomEventForwardingInnerVue from '@/views/events/domeventforwarding/InnerView.vue?raw'
33-
import EventForwardingAppVue from '@/views/events/eventforwarding/GrandParentView.vue?raw'
34-
import EventForwardingChildVue from '@/views/events/eventforwarding/ChildView.vue?raw'
35-
import EventForwardingParentVue from '@/views/events/eventforwarding/ParentView.vue?raw'
36-
import DomEventViewAppVue from '@/views/events/DomEventView.vue?raw'
37-
import EventModifiersAppVue from '@/views/events/EventModifiersView.vue?raw'
38-
import InlineHandlerAppVue from '@/views/events/InlineHandlersView.vue?raw'
29+
import ComponentEventsAppVue from "@/views/events/componentevents/AppView.vue?raw";
30+
import ComponentEventsInnerVue from "@/views/events/componentevents/InnerView.vue?raw";
31+
import DomEventForwardingAppVue from "@/views/events/domeventforwarding/AppView.vue?raw";
32+
import DomEventForwardingInnerVue from "@/views/events/domeventforwarding/InnerView.vue?raw";
33+
import EventForwardingAppVue from "@/views/events/eventforwarding/GrandParentView.vue?raw";
34+
import EventForwardingChildVue from "@/views/events/eventforwarding/ChildView.vue?raw";
35+
import EventForwardingParentVue from "@/views/events/eventforwarding/ParentView.vue?raw";
36+
import DomEventViewAppVue from "@/views/events/DomEventView.vue?raw";
37+
import EventModifiersAppVue from "@/views/events/EventModifiersView.vue?raw";
38+
import InlineHandlerAppVue from "@/views/events/InlineHandlersView.vue?raw";
3939

4040
// Logic
41-
import AwaitBlocksAppVue from '@/views/logic/awaitblocksview/AppView.vue?raw'
42-
import AwaitBlocksSupportVue from '@/views/logic/awaitblocksview/utils.js?raw'
43-
import KeyedEachBlocksAppVue from '@/views/logic/keyedeachblocks/AppView.vue?raw'
44-
import KeyedEachBlocksSupportVue from '@/views/logic/keyedeachblocks/ThingView.vue?raw'
45-
import EachBlocksAppVue from '@/views/logic/EachBlocksView.vue?raw'
46-
import ElseBlocksAppVue from '@/views/logic/ElseBlocksView.vue?raw'
47-
import ElseIfBlocksAppVue from '@/views/logic/ElseIfBlocksView.vue?raw'
48-
import IfBlocksAppVue from '@/views/logic/IfBlocksView.vue?raw'
41+
import AwaitBlocksAppVue from "@/views/logic/awaitblocksview/AppView.vue?raw";
42+
import AwaitBlocksSupportVue from "@/views/logic/awaitblocksview/utils.js?raw";
43+
import KeyedEachBlocksAppVue from "@/views/logic/keyedeachblocks/AppView.vue?raw";
44+
import KeyedEachBlocksSupportVue from "@/views/logic/keyedeachblocks/ThingView.vue?raw";
45+
import EachBlocksAppVue from "@/views/logic/EachBlocksView.vue?raw";
46+
import ElseBlocksAppVue from "@/views/logic/ElseBlocksView.vue?raw";
47+
import ElseIfBlocksAppVue from "@/views/logic/ElseIfBlocksView.vue?raw";
48+
import IfBlocksAppVue from "@/views/logic/IfBlocksView.vue?raw";
4949

5050
export function createReplComponent(codeString, files = {}) {
5151
return defineComponent({
5252
render() {
53-
return h(ReplWrapper, { codeString, files })
54-
}
55-
})
53+
return h(ReplWrapper, { codeString, files });
54+
},
55+
});
5656
}
5757

5858
// Introduction
59-
export const HelloWorldVue = createReplComponent(HelloAppVue)
60-
export const DynamicAttributesVue = createReplComponent(DynamicAttributesAppVue)
61-
export const StylingVue = createReplComponent(StylingAppVue)
59+
export const HelloWorldVue = createReplComponent(HelloAppVue);
60+
export const DynamicAttributesVue = createReplComponent(
61+
DynamicAttributesAppVue,
62+
);
63+
export const StylingVue = createReplComponent(StylingAppVue);
6264
export const NestedComponentsVue = createReplComponent(MainComponentVue, {
63-
'NestedComponent.vue': SubComponentVue
64-
})
65-
export const HtmlDirectiveVue = createReplComponent(HtmlDirectiveAppVue)
65+
"NestedComponent.vue": SubComponentVue,
66+
});
67+
export const HtmlDirectiveVue = createReplComponent(HtmlDirectiveAppVue);
6668

6769
// Reactivity
68-
export const ReactivityAssignmentVue = createReplComponent(ReactivityAssignmentView)
69-
export const ReactivityDeclarationVue = createReplComponent(ReactivityDeclarationView)
70-
export const ReactivityStatementsVue = createReplComponent(ReactivityStatementsView)
70+
export const ReactivityAssignmentVue = createReplComponent(
71+
ReactivityAssignmentView,
72+
);
73+
export const ReactivityDeclarationVue = createReplComponent(
74+
ReactivityDeclarationView,
75+
);
76+
export const ReactivityStatementsVue = createReplComponent(
77+
ReactivityStatementsView,
78+
);
7179

7280
// Props
7381
export const DeclaringPropsVue = createReplComponent(DeclaringPropsAppVue, {
74-
'NestedView.vue': DeclaringPropsNestedVue
75-
})
82+
"NestedView.vue": DeclaringPropsNestedVue,
83+
});
7684
export const DefaultValuesVue = createReplComponent(DefaultValuesAppVue, {
77-
'NestedView.vue': DefaultValuesNestedVue
78-
})
85+
"NestedView.vue": DefaultValuesNestedVue,
86+
});
7987
export const SpreadPropsVue = createReplComponent(SpreadPropsAppVue, {
80-
'InfoView.vue': SpreadPropsNestedVue
81-
})
88+
"InfoView.vue": SpreadPropsNestedVue,
89+
});
8290

8391
// Logic
8492
export const AwaitBlocksVue = createReplComponent(AwaitBlocksAppVue, {
85-
'utils.js': AwaitBlocksSupportVue
86-
})
93+
"utils.js": AwaitBlocksSupportVue,
94+
});
8795
export const KeyedEachBlocksVue = createReplComponent(KeyedEachBlocksAppVue, {
88-
'ThingView.vue': KeyedEachBlocksSupportVue
89-
})
90-
export const EachBlocksVue = createReplComponent(EachBlocksAppVue)
91-
export const ElseBlocksVue = createReplComponent(ElseBlocksAppVue)
92-
export const ElseIfBlocksVue = createReplComponent(ElseIfBlocksAppVue)
93-
export const IfBlocksVue = createReplComponent(IfBlocksAppVue)
96+
"ThingView.vue": KeyedEachBlocksSupportVue,
97+
});
98+
export const EachBlocksVue = createReplComponent(EachBlocksAppVue);
99+
export const ElseBlocksVue = createReplComponent(ElseBlocksAppVue);
100+
export const ElseIfBlocksVue = createReplComponent(ElseIfBlocksAppVue);
101+
export const IfBlocksVue = createReplComponent(IfBlocksAppVue);
94102

95103
// Events
96104
export const ComponentEventsVue = createReplComponent(ComponentEventsAppVue, {
97-
'InnerView.vue': ComponentEventsInnerVue
98-
})
99-
export const DomEventForwardingVue = createReplComponent(DomEventForwardingAppVue, {
100-
'InnerView.vue': DomEventForwardingInnerVue
101-
})
105+
"InnerView.vue": ComponentEventsInnerVue,
106+
});
107+
export const DomEventForwardingVue = createReplComponent(
108+
DomEventForwardingAppVue,
109+
{
110+
"InnerView.vue": DomEventForwardingInnerVue,
111+
},
112+
);
102113
export const EventForwardingVue = createReplComponent(EventForwardingAppVue, {
103-
'ChildView.vue': EventForwardingChildVue,
104-
'ParentView.vue': EventForwardingParentVue
105-
})
106-
export const DomEventViewVue = createReplComponent(DomEventViewAppVue)
107-
export const EventModifiersVue = createReplComponent(EventModifiersAppVue)
108-
export const InlineHandlersVue = createReplComponent(InlineHandlerAppVue)
114+
"ChildView.vue": EventForwardingChildVue,
115+
"ParentView.vue": EventForwardingParentVue,
116+
});
117+
export const DomEventViewVue = createReplComponent(DomEventViewAppVue);
118+
export const EventModifiersVue = createReplComponent(EventModifiersAppVue);
119+
export const InlineHandlersVue = createReplComponent(InlineHandlerAppVue);

‎src/assets/base.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -70,14 +70,14 @@ body {
7070
Inter,
7171
-apple-system,
7272
BlinkMacSystemFont,
73-
'Segoe UI',
73+
"Segoe UI",
7474
Roboto,
7575
Oxygen,
7676
Ubuntu,
7777
Cantarell,
78-
'Fira Sans',
79-
'Droid Sans',
80-
'Helvetica Neue',
78+
"Fira Sans",
79+
"Droid Sans",
80+
"Helvetica Neue",
8181
sans-serif;
8282
font-size: 15px;
8383
text-rendering: optimizeLegibility;

‎src/assets/main.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import './base.css';
1+
@import "./base.css";
22

33
#app {
44
height: 100vh;

0 commit comments

Comments
 (0)