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