Skip to content

Commit 412d780

Browse files
bblanchonbblanchon
committed
Upgrade to <script setup> 
1 parent 633f8df commit 412d780

File tree

4 files changed

+144
-153
lines changed

4 files changed

+144
-153
lines changed

‎src/App.vue‎

Lines changed: 43 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,46 @@
1+
<script setup>
2+
import { ref, onMounted, computed } from "vue"
3+
4+
import AssistanceModal from "./components/AssistanceModal.vue"
5+
import TroubleshooterStep from "./components/TroubleshooterStep.vue"
6+
import { getSteps, generateReport } from "./troubleshooter"
7+
8+
const sleep = (m) => new Promise((r) => setTimeout(r, m))
9+
10+
const reportCopied = ref(false)
11+
const hash = ref("")
12+
13+
onMounted(() => {
14+
hash.value = location.hash
15+
window.addEventListener("hashchange", () => (hash.value = location.hash))
16+
})
17+
18+
const steps = computed(() => getSteps(hash.value))
19+
20+
const needsAssistance = computed(() => {
21+
const currentStep = steps.value[steps.value.length - 1]
22+
return !!currentStep.tags?.includes("needs_assistance")
23+
})
24+
25+
const report = computed(() => generateReport(steps.value))
26+
27+
function choose(option) {
28+
document.location.assign(option.hash)
29+
window.plausible("ArduinoJson Troubleshooter", {
30+
props: {
31+
hash: document.location.hash
32+
},
33+
});
34+
}
35+
36+
async function copyReport() {
37+
await navigator.clipboard.writeText(report.value)
38+
reportCopied.value = true
39+
await sleep(2000)
40+
reportCopied.value = false
41+
}
42+
</script>
43+
144
<template>
245
<div>
346
<div>
@@ -26,56 +69,6 @@
2669
</div>
2770
</template>
2871
29-
<script>
30-
import AssistanceModal from "./components/AssistanceModal.vue"
31-
import TroubleshooterStep from "./components/TroubleshooterStep.vue"
32-
import { getSteps, generateReport } from "./troubleshooter"
33-
34-
const sleep = (m) => new Promise((r) => setTimeout(r, m))
35-
36-
export default {
37-
components: { AssistanceModal, TroubleshooterStep },
38-
data() {
39-
return {
40-
reportCopied: false,
41-
hash: ""
42-
}
43-
},
44-
mounted() {
45-
this.hash = location.hash
46-
window.addEventListener("hashchange", () => (this.hash = location.hash))
47-
},
48-
computed: {
49-
needsAssistance() {
50-
const currentStep = this.steps[this.steps.length - 1]
51-
return !!currentStep.tags?.includes("needs_assistance")
52-
},
53-
steps() {
54-
return getSteps(this.hash)
55-
},
56-
report() {
57-
return generateReport(this.steps)
58-
}
59-
},
60-
methods: {
61-
choose(option) {
62-
document.location.assign(option.hash)
63-
window.plausible("ArduinoJson Troubleshooter", {
64-
props: {
65-
hash: document.location.hash
66-
},
67-
});
68-
},
69-
async copyReport() {
70-
await navigator.clipboard.writeText(this.report)
71-
this.reportCopied = true
72-
await sleep(2000)
73-
this.reportCopied = false
74-
},
75-
}
76-
}
77-
</script>
78-
7972
<style lang="scss">
8073
.fade-enter-active,
8174
.fade-leave-active {

‎src/components/AssistanceModal.vue‎

Lines changed: 54 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,57 @@
1+
<script setup>
2+
import { useTemplateRef } from "vue"
3+
4+
const { report } = defineProps({
5+
report: {
6+
type: String,
7+
required: true
8+
}
9+
})
10+
11+
const formRef = useTemplateRef("issueForm")
12+
13+
function createIssue() {
14+
const formData = new FormData(formRef.value)
15+
16+
const title = formData.get("title")
17+
let body = ""
18+
19+
const description = formData.get("description")
20+
if (description) body += `**Description**\n${description}\n\n`
21+
22+
body += `**Troubleshooter's report**\n${report}\n\n`
23+
24+
const mcu = formData.get("mcu")
25+
const framework = formData.get("framework")
26+
const ide = formData.get("ide")
27+
if (mcu || framework || ide) {
28+
body += "**Environment**\n"
29+
if (mcu) body += "* Microcontroller: " + mcu + "\n"
30+
if (framework) body += "* Core/Framework: " + framework + "\n"
31+
if (ide) body += "* IDE: " + ide + "\n"
32+
body += "\n"
33+
}
34+
35+
const repro = formData.get("repro")
36+
if (repro) {
37+
body += "**Reproduction code**\n```c++\n"
38+
body += repro
39+
body += "\n```\n\n"
40+
}
41+
42+
const remarks = formData.get("remarks")
43+
if (remarks) body += `**Remarks**\n${remarks}\n\n`
44+
45+
const queryString = new URLSearchParams({ title, body }).toString()
46+
const url =
47+
"https://github.com/bblanchon/ArduinoJson/issues/new?" + queryString
48+
console.log("URL", url)
49+
window.open(url, "_blank")
50+
51+
bootstrap.Modal.getInstance(this.$el).hide()
52+
}
53+
</script>
54+
155
<template>
256
<div class="modal fade">
357
<div class="modal-dialog modal-dialog-scrollable modal-lg">
@@ -72,58 +126,3 @@
72126
</div>
73127
</div>
74128
</template>
75-
76-
<script>
77-
import { defineComponent } from "vue"
78-
79-
export default defineComponent({
80-
props: {
81-
report: {
82-
type: String,
83-
required: true
84-
}
85-
},
86-
methods: {
87-
createIssue() {
88-
const formData = new FormData(this.$refs.issueForm)
89-
90-
const title = formData.get("title")
91-
let body = ""
92-
93-
const description = formData.get("description")
94-
if (description) body += `**Description**\n${description}\n\n`
95-
96-
body += `**Troubleshooter's report**\n${this.report}\n\n`
97-
98-
const mcu = formData.get("mcu")
99-
const framework = formData.get("framework")
100-
const ide = formData.get("ide")
101-
if (mcu || framework || ide) {
102-
body += "**Environment**\n"
103-
if (mcu) body += "* Microcontroller: " + mcu + "\n"
104-
if (framework) body += "* Core/Framework: " + framework + "\n"
105-
if (ide) body += "* IDE: " + ide + "\n"
106-
body += "\n"
107-
}
108-
109-
const repro = formData.get("repro")
110-
if (repro) {
111-
body += "**Reproduction code**\n```c++\n"
112-
body += repro
113-
body += "\n```\n\n"
114-
}
115-
116-
const remarks = formData.get("remarks")
117-
if (remarks) body += `**Remarks**\n${remarks}\n\n`
118-
119-
const queryString = new URLSearchParams({ title, body }).toString()
120-
const url =
121-
"https://github.com/bblanchon/ArduinoJson/issues/new?" + queryString
122-
console.log("URL", url)
123-
window.open(url, "_blank")
124-
125-
bootstrap.Modal.getInstance(this.$el).hide()
126-
}
127-
}
128-
})
129-
</script>

‎src/components/TroubleshooterStep.vue‎

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,35 @@
1+
<script setup>
2+
import { inject, onMounted, useTemplateRef } from 'vue'
3+
4+
import TroubleshooterStepOption from "./TroubleshooterStepOption.vue"
5+
6+
const debug = inject("debug")
7+
8+
const emit = defineEmits(["choose"])
9+
10+
const props = defineProps({
11+
step: {
12+
type: Object,
13+
required: true
14+
},
15+
active: {
16+
type: Boolean,
17+
default: false
18+
}
19+
})
20+
21+
const containerRef = useTemplateRef('container')
22+
23+
onMounted(() => {
24+
const { top, bottom } = containerRef.value.getBoundingClientRect();
25+
const minVisibleHeight = 50
26+
const isVisible = top + minVisibleHeight < window.innerHeight;
27+
if (!isVisible) containerRef.value.scrollIntoView({ behavior: "smooth" })
28+
})
29+
</script>
30+
131
<template>
2-
<div v-if="step.options" class="troubleshooter-step mb-4">
32+
<div v-if="step.options" class="troubleshooter-step mb-4" ref="container">
333
<h2>
434
<div class="troubleshooter-step-number">
535
<div class="text-white rounded-circle" :class="active ? 'bg-primary' : 'bg-secondary'">
@@ -18,36 +48,9 @@
1848
</a>
1949
</p>
2050
</div>
21-
<div v-else v-html="step.content" class="troubleshooter-step-content" />
51+
<div v-else v-html="step.content" class="troubleshooter-step-content" ref="container" />
2252
</template>
2353

24-
<script>
25-
import { defineComponent } from "vue"
26-
import TroubleshooterStepOption from "./TroubleshooterStepOption.vue"
27-
28-
export default defineComponent({
29-
inject: ["debug"],
30-
emits: ["choose"],
31-
props: {
32-
step: {
33-
type: Object,
34-
required: true
35-
},
36-
active: {
37-
type: Boolean,
38-
default: false
39-
}
40-
},
41-
components: { TroubleshooterStepOption },
42-
async mounted() {
43-
const { top, bottom } = this.$el.getBoundingClientRect();
44-
const minVisibleHeight = 50
45-
const isVisible = top + minVisibleHeight < window.innerHeight;
46-
if (!isVisible) this.$el.scrollIntoView({ behavior: "smooth" })
47-
}
48-
})
49-
</script>
50-
5154
<style lang="scss">
5255
@use "../assets/highlight.scss";
5356

‎src/components/TroubleshooterStepOption.vue‎

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,18 @@
1+
<script setup>
2+
import { inject } from 'vue'
3+
4+
defineProps({
5+
option: {
6+
type: Object,
7+
required: true
8+
}
9+
})
10+
11+
const debug = inject("debug")
12+
13+
const emit = defineEmits(["check"])
14+
</script>
15+
116
<template>
217
<div class="form-check">
318
<input type="radio" :id="option.inputId" class="form-check-input" :checked="option.selected" @click="$emit('check')"
@@ -8,22 +23,3 @@
823
</div>
924
</div>
1025
</template>
11-
12-
<script>
13-
import { defineComponent } from "vue"
14-
15-
export default defineComponent({
16-
inject: ["debug"],
17-
emits: ["check"],
18-
props: {
19-
option: {
20-
type: Object,
21-
required: true
22-
}
23-
}
24-
})
25-
</script>
26-
27-
<style lang="scss" scoped>
28-
29-
</style>

0 commit comments

Comments
 (0)