d4dab8c03f
Migrates every component from class-based vue-property-decorator to
<script setup> + Composition API. Replaces Vuex 3 + vuex-class with a
single Pinia store (persisted via pinia-plugin-persistedstate). Swaps
Bulma + bulma-{checkradio,switch,pricingtable} for DaisyUI 5 utilities
on Tailwind 4. Replaces register-service-worker with vite-plugin-pwa
(workbox, skipWaiting/clientsClaim preserved).
Plugins replaced:
- vue-class-component / vue-property-decorator -> <script setup>
- vuex / vuex-class / vuex-persist -> pinia + persistedstate
- vue-i18n 8 -> vue-i18n 11 (composition mode, legacy: false)
- vue-click-outside -> @vueuse/core onClickOutside
- @xkeshi/vue-qrcode -> qrcode.vue
- vue-currency-input 1 -> vue-currency-input 3 (composable wrapper)
- bus-event (Vue instance) -> mitt
- Vue filters -> plain functions imported per component
BREAKING: drops Stripe / pricing entirely (Payment, PricingTable,
/pricing route, vue-stripe-checkout, bulma-pricingtable).
Clears unused Cypress and Jest test scaffolding; leaves a Vitest
harness behind for future tests.
60 lines
1.5 KiB
Vue
60 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch, onMounted } from 'vue'
|
|
import type ISlice from '@/models/ISlice'
|
|
|
|
const props = defineProps<{ slices: ISlice[] }>()
|
|
const chart = ref<SVGSVGElement | null>(null)
|
|
|
|
const getCoordinatesForPercent = (percent: number): [number, number] => [
|
|
Math.cos(2 * Math.PI * percent),
|
|
Math.sin(2 * Math.PI * percent)
|
|
]
|
|
|
|
const clearSvg = () => {
|
|
const svg = chart.value
|
|
if (!svg) return
|
|
while (svg.lastChild) svg.removeChild(svg.lastChild)
|
|
}
|
|
|
|
const constructChart = () => {
|
|
const svg = chart.value
|
|
if (!svg) return
|
|
clearSvg()
|
|
let cumulativePercent = 0
|
|
props.slices.forEach((slice) => {
|
|
const [startX, startY] = getCoordinatesForPercent(cumulativePercent)
|
|
cumulativePercent += slice.percent
|
|
const [endX, endY] = getCoordinatesForPercent(cumulativePercent)
|
|
const largeArcFlag = slice.percent > 0.5 ? 1 : 0
|
|
const pathData = [
|
|
`M ${startX} ${startY}`,
|
|
`A 1 1 0 ${largeArcFlag} 1 ${endX} ${endY}`,
|
|
`L 0 0`
|
|
].join(' ')
|
|
const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path')
|
|
pathEl.setAttribute('d', pathData)
|
|
pathEl.setAttribute('fill', slice.color)
|
|
svg.appendChild(pathEl)
|
|
})
|
|
}
|
|
|
|
onMounted(constructChart)
|
|
watch(() => props.slices, constructChart, { deep: true })
|
|
</script>
|
|
|
|
<template>
|
|
<svg
|
|
id="chart-pie"
|
|
ref="chart"
|
|
class="chart-pie"
|
|
viewBox="-1 -1 2 2"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.chart-pie {
|
|
transform: rotate(-90deg);
|
|
max-width: 400pt;
|
|
}
|
|
</style>
|