Files
InvoiceShelf/resources/scripts/features/company/modules/components/CompanyModuleCard.vue
Darko Gjorgjijoski f3ab0f22fc chore(frontend): fix ESLint, add Pint+ESLint pre-commit hook, centralize v-html
Fix the broken ESLint setup: add vue-eslint-parser and @typescript-eslint/parser
and wire the TS parser into eslint.config.mjs so .ts and <script lang=ts> parse
(was failing outright). Clear the resulting backlog to a clean 0/0 baseline —
fix genuine issues, relax two intentional-pattern rules (multi-word-component-names,
no-required-prop-with-default).

Add a committed .githooks/pre-commit (enabled via core.hooksPath, auto-set by the
prepare script) that runs Pint on staged PHP and ESLint --max-warnings 0 on staged
resources/scripts JS/TS/Vue, blocking on failure. Add composer/npm lint scripts and
document the gate in CLAUDE.md.

Replace every scattered v-html with a single audited BaseSanitizedHtml component
that DOMPurify-sanitizes its input (new utils/markdown.ts sanitizeHtml), so
server/registry-provided HTML is actually sanitized and vue/no-v-html stays enabled
everywhere but one reviewed sink.
2026-06-11 11:11:12 +02:00

60 lines
1.6 KiB
Vue

<template>
<div
class="
flex flex-col p-6 rounded-lg border border-line-default bg-surface-secondary
shadow-sm hover:shadow-md transition-shadow
"
>
<div class="flex items-start justify-between gap-3">
<div class="flex items-center gap-3">
<div
class="
shrink-0 h-10 w-10 rounded-lg bg-primary-50 text-primary-600
flex items-center justify-center
">
<BaseIcon :name="iconName" class="h-5 w-5" />
</div>
<div>
<h3 class="text-base font-semibold text-heading">{{ data.display_name }}</h3>
<p class="text-xs text-muted">{{ $t('modules.version') }} {{ data.version }}</p>
</div>
</div>
</div>
<div class="mt-6 flex items-center justify-end">
<BaseButton
v-if="data.has_settings"
size="sm"
variant="primary-outline"
@click="emit('open-settings', data)"
>
<template #left="slotProps">
<BaseIcon name="CogIcon" :class="slotProps.class" />
</template>
{{ $t('modules.settings.open') }}
</BaseButton>
<span v-else class="text-xs text-subtle italic">
{{ $t('modules.settings.none') }}
</span>
</div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import type { CompanyModuleSummary } from '../store'
interface Props {
data: CompanyModuleSummary
}
const props = defineProps<Props>()
const emit = defineEmits<{
(e: 'open-settings', module: CompanyModuleSummary): void
}>()
const iconName = computed<string>(() => {
return props.data.menu?.icon ?? 'PuzzlePieceIcon'
})
</script>