4531645b4c
These updates ensure better adherence to Vue 3 standards and improve overall code quality and readability. - Update ESLint configuration from Vue 2.x to Vue 3 rules. - Switch from "essential" to strictest "recommended" ESLint ruleset. - Adjust ESLint script to treat warnings as errors by using `--max-warnings=0` flag. This enforces stricter code quality controls provided by Vue 3 rules.
87 lines
1.9 KiB
Vue
87 lines
1.9 KiB
Vue
<template>
|
|
<span class="code-wrapper">
|
|
<span class="dollar">$</span>
|
|
<code ref="codeElement"><slot /></code>
|
|
<div class="copy-action-container">
|
|
<TooltipWrapper>
|
|
<AppIcon
|
|
icon="copy"
|
|
class="copy-button"
|
|
@click="copyCode"
|
|
/>
|
|
<template #tooltip>
|
|
Copy
|
|
</template>
|
|
</TooltipWrapper>
|
|
</div>
|
|
</span>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, shallowRef } from 'vue';
|
|
import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
|
|
import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
|
|
import { injectKey } from '@/presentation/injectionSymbols';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
TooltipWrapper,
|
|
AppIcon,
|
|
},
|
|
setup() {
|
|
const { copyText } = injectKey((keys) => keys.useClipboard);
|
|
|
|
const codeElement = shallowRef<HTMLElement | undefined>();
|
|
|
|
async function copyCode() {
|
|
const element = codeElement.value;
|
|
if (!element) {
|
|
throw new Error('Code element could not be found.');
|
|
}
|
|
const code = element.textContent;
|
|
if (!code) {
|
|
throw new Error('Code element does not contain any text.');
|
|
}
|
|
await copyText(code);
|
|
}
|
|
|
|
return {
|
|
copyCode,
|
|
codeElement,
|
|
};
|
|
},
|
|
});
|
|
</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-action-container {
|
|
margin-left: 1rem;
|
|
}
|
|
.copy-button {
|
|
@include clickable;
|
|
@include hover-or-touch {
|
|
color: $color-primary;
|
|
}
|
|
}
|
|
code {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
</style>
|