feat!: rewrite frontend in Vue 3 with Pinia, DaisyUI, vite-plugin-pwa
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.
This commit is contained in:
50
src/components/CurrencyInput.vue
Normal file
50
src/components/CurrencyInput.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<script setup lang="ts">
|
||||
import { watch } from 'vue'
|
||||
import { useCurrencyInput } from 'vue-currency-input'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue: number | null
|
||||
locale?: string
|
||||
precision?: number
|
||||
allowNegative?: boolean
|
||||
valueRange?: { min?: number; max?: number }
|
||||
placeholder?: string
|
||||
}>(),
|
||||
{
|
||||
locale: 'fr-FR',
|
||||
precision: 2,
|
||||
allowNegative: false,
|
||||
valueRange: () => ({ min: 0, max: 1_000_000 }),
|
||||
placeholder: ''
|
||||
}
|
||||
)
|
||||
|
||||
defineEmits<{ 'update:modelValue': [value: number | null] }>()
|
||||
|
||||
const { inputRef, setValue } = useCurrencyInput({
|
||||
currency: undefined as unknown as string,
|
||||
locale: props.locale,
|
||||
precision: props.precision,
|
||||
hideCurrencySymbolOnFocus: false,
|
||||
hideGroupingSeparatorOnFocus: false,
|
||||
valueRange: props.valueRange,
|
||||
autoDecimalDigits: false
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(value) => {
|
||||
setValue(value)
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<input
|
||||
ref="inputRef"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
:placeholder="placeholder"
|
||||
/>
|
||||
</template>
|
||||
Reference in New Issue
Block a user