48730bca05
- Introduce `AppIcon.vue`, offering improved performance over the previous `fort-awesome` dependency. This implementation reduces bundle size by 67.31KB (tested for web using `npm run build -- --mode prod`). - Migrate Font Awesome 5 icons to Font Awesome 6. This commit facilitates migration to Vue 3.0 (#230) and ensures no Vue component remains tightly bound to a specific Vue version, enhancing code portability. Font Awesome license is not included because Font Awesome revokes its right: > "Attribution is no longer required as of Font Awesome 3.0" > > Sources: > > - https://fontawesome.com/v4/license/ (archived: https://web.archive.org/web/20231003213441/https://fontawesome.com/v4/license/, https://archive.ph/Yy9j5) > - https://github.com/FortAwesome/Font-Awesome/wiki (archived: https://web.archive.org/web/20231003214646/https://github.com/FortAwesome/Font-Awesome/wiki, https://archive.ph/C6sXv) This commit removes following third-party production dependencies: - `@fortawesome/vue-fontawesome` - `@fortawesome/free-solid-svg-icons` - `@fortawesome/free-regular-svg-icons` - `@fortawesome/free-brands-svg-icons` - `@fortawesome/fontawesome-svg-core`
73 lines
1.4 KiB
Vue
73 lines
1.4 KiB
Vue
<template>
|
|
<span class="code-wrapper">
|
|
<span class="dollar">$</span>
|
|
<code><slot /></code>
|
|
<TooltipWrapper>
|
|
<AppIcon
|
|
class="copy-button"
|
|
icon="copy"
|
|
@click="copyCode"
|
|
/>
|
|
<template v-slot:tooltip>
|
|
Copy
|
|
</template>
|
|
</TooltipWrapper>
|
|
</span>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, useSlots } from 'vue';
|
|
import { Clipboard } from '@/infrastructure/Clipboard';
|
|
import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
|
|
import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
TooltipWrapper,
|
|
AppIcon,
|
|
},
|
|
setup() {
|
|
const slots = useSlots();
|
|
|
|
function copyCode() {
|
|
const code = slots.default()[0].text;
|
|
Clipboard.copyText(code);
|
|
}
|
|
|
|
return {
|
|
copyCode,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
|
|
.code-wrapper {
|
|
display:flex;
|
|
white-space: nowrap;
|
|
justify-content: space-between;
|
|
font-family: $font-normal;
|
|
background-color: $color-primary-darker;
|
|
color: $color-on-primary;
|
|
align-items: center;
|
|
padding: 0.2rem;
|
|
.dollar {
|
|
margin-right: 0.5rem;
|
|
font-size: 0.8rem;
|
|
user-select: none;
|
|
}
|
|
.copy-button {
|
|
margin-left: 1rem;
|
|
@include clickable;
|
|
@include hover-or-touch {
|
|
color: $color-primary;
|
|
}
|
|
}
|
|
code {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
</style>
|