chore(front): replace components in embed modal

This commit is contained in:
ArneBo 2025-04-01 11:42:53 +02:00
parent d0819c9ffa
commit aa6b0ad325
1 changed files with 23 additions and 17 deletions

View File

@ -5,6 +5,11 @@ import { useStore } from '~/store'
import { useClipboard } from '@vueuse/core'
import { useI18n } from 'vue-i18n'
import Button from '~/components/ui/Button.vue'
import Alert from '~/components/ui/Alert.vue'
import Input from '~/components/ui/Input.vue'
import Spacer from '~/components/ui/Spacer.vue'
interface Props {
type: string
id: number
@ -69,54 +74,55 @@ const { copy, copied } = useClipboard({ source: embedCode })
<p>
{{ t('components.audio.EmbedWizard.help.width') }}
</p>
<input
<Input
id="embed-width"
v-model.number="width"
type="number"
min="0"
step="10"
>
/>
</div>
<template v-if="type != 'track'">
<br>
<div class="field">
<label for="embed-height">{{ t('components.audio.EmbedWizard.label.height') }}</label>
<input
<Input
id="embed-height"
v-model="height"
type="number"
:min="minHeight"
max="1000"
step="10"
>
/>
</div>
</template>
</div>
<Spacer />
<div class="field">
<button
class="ui right accent labeled icon floated button"
<Button
class="right floated"
@click="copy()"
icon="bi-copy"
secondary
>
<i class="copy icon" />
{{ t('components.audio.EmbedWizard.button.copy') }}
</button>
</Button>
<label for="embed-width">{{ t('components.audio.EmbedWizard.label.embed') }}</label>
<p>
{{ t('components.audio.EmbedWizard.help.embed') }}
</p>
<textarea
v-model="embedCode"
rows="5"
rows="3"
readonly
style="width: 100%;"
/>
<div class="ui right">
<p
<Alert
v-if="copied"
class="message"
green
>
{{ t('components.audio.EmbedWizard.message.copy') }}
</p>
</div>
</Alert>
</div>
</div>
</div>