a721e82a4f
This commit upgrades TypeScript to the latest version 5.3 and introduces `verbatimModuleSyntax` in line with the official Vue guide recommendatinos (vuejs/docs#2592). By enforcing `import type` for type-only imports, this commit improves code clarity and supports tooling optimization, ensuring imports are only bundled when necessary for runtime. Changes: - Bump TypeScript to 5.3.3 across the project. - Adjust import statements to utilize `import type` where applicable, promoting cleaner and more efficient code.
77 lines
1.5 KiB
Vue
77 lines
1.5 KiB
Vue
<template>
|
|
<section>
|
|
<p class="description">
|
|
<AppIcon :icon="icon" class="icon" />
|
|
<span>{{ description }}</span>
|
|
</p>
|
|
<p
|
|
v-if="considerations.length > 0"
|
|
class="considerations"
|
|
>
|
|
<AppIcon icon="triangle-exclamation" class="icon" />
|
|
<span>
|
|
Considerations:
|
|
<ul>
|
|
<li
|
|
v-for="considerationItem in considerations"
|
|
:key="considerationItem"
|
|
>
|
|
{{ considerationItem }}
|
|
</li>
|
|
</ul>
|
|
</span>
|
|
</p>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { type PropType, defineComponent } from 'vue';
|
|
import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
|
|
import type { IconName } from '@/presentation/components/Shared/Icon/IconName';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
AppIcon,
|
|
},
|
|
props: {
|
|
icon: {
|
|
type: String as PropType<IconName>,
|
|
required: true,
|
|
},
|
|
description: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
considerations: {
|
|
type: Array as PropType<ReadonlyArray<string>>,
|
|
required: true,
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
|
|
@mixin horizontal-stack {
|
|
display: flex;
|
|
gap: 0.5em;
|
|
}
|
|
|
|
@mixin apply-icon-color($color) {
|
|
.icon {
|
|
color: $color;
|
|
}
|
|
}
|
|
|
|
.considerations {
|
|
@include horizontal-stack;
|
|
@include apply-icon-color($color-caution);
|
|
}
|
|
.description {
|
|
@include horizontal-stack;
|
|
@include apply-icon-color($color-success);
|
|
align-items: center;
|
|
}
|
|
</style>
|