mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-04-15 17:24:10 +00:00
88adfe0e50
Define 13 semantic color tokens (surface, text, border, hover) with light/dark values in themes.css. Register with Tailwind via @theme inline. Migrate all 335 Vue files from hardcoded gray/white classes to semantic tokens. Add theme toggle (sun/moon/system) in user avatar dropdown. Replace @tailwindcss/forms with custom form reset using theme vars. Add status badge and alert tokens for dark mode. Theme-aware chart grid/labels, skeleton placeholders, and editor. Inline script in <head> prevents flash of wrong theme on load. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
109 lines
2.4 KiB
Vue
109 lines
2.4 KiB
Vue
<template>
|
|
<div class="flex items-center justify-between w-full mt-2 text-sm">
|
|
<label v-if="tax.calculation_type === 'percentage'" class="font-semibold leading-5 text-muted uppercase">
|
|
{{ tax.name }} ({{ tax.percent }} %)
|
|
</label>
|
|
<label v-else class="font-semibold leading-5 text-muted uppercase">
|
|
{{ tax.name }} (<BaseFormatMoney :amount="tax.fixed_amount" :currency="currency" />)
|
|
</label>
|
|
<label class="flex items-center justify-center text-lg text-heading">
|
|
<BaseFormatMoney :amount="tax.amount" :currency="currency" />
|
|
|
|
<BaseIcon
|
|
name="TrashIcon"
|
|
class="h-5 ml-2 cursor-pointer"
|
|
@click="$emit('remove', tax.id)"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, watch, inject, watchEffect } from 'vue'
|
|
|
|
const props = defineProps({
|
|
index: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
tax: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
taxes: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
currency: {
|
|
type: [Object, String],
|
|
required: true,
|
|
},
|
|
store: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
storeProp: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
data: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['update', 'remove'])
|
|
|
|
const utils = inject('$utils')
|
|
|
|
const taxAmount = computed(() => {
|
|
if (props.tax.calculation_type === 'fixed') {
|
|
return props.tax.fixed_amount;
|
|
}
|
|
|
|
if (props.tax.compound_tax && props.store.getSubtotalWithDiscount) {
|
|
return Math.round(
|
|
((props.store.getSubtotalWithDiscount + props.store.getTotalSimpleTax) *
|
|
props.tax.percent) /
|
|
100
|
|
)
|
|
}
|
|
if (props.store.getSubtotalWithDiscount && props.tax.percent && props.store[props.storeProp].tax_included) {
|
|
return Math.round(
|
|
props.store.getSubtotalWithDiscount - (
|
|
props.store.getSubtotalWithDiscount / (1 + (props.tax.percent / 100))
|
|
)
|
|
)
|
|
}
|
|
if (props.store.getSubtotalWithDiscount && props.tax.percent) {
|
|
return Math.round(
|
|
(props.store.getSubtotalWithDiscount * props.tax.percent) / 100
|
|
)
|
|
}
|
|
return 0
|
|
})
|
|
|
|
watchEffect(() => {
|
|
if (props.store.getSubtotalWithDiscount) {
|
|
updateTax()
|
|
}
|
|
if (props.store.getTotalSimpleTax) {
|
|
updateTax()
|
|
}
|
|
})
|
|
|
|
watch(
|
|
() => props.store[props.storeProp].tax_included,
|
|
(val) => {
|
|
updateTax()
|
|
}, { deep: true },
|
|
)
|
|
|
|
function updateTax() {
|
|
emit('update', {
|
|
...props.tax,
|
|
amount: taxAmount.value,
|
|
})
|
|
}
|
|
</script>
|