Nikita Kiselev
f329bfa9d9
Some checks failed
Telegram Mini App Shop Builder / Compute version metadata (push) Has been cancelled
Telegram Mini App Shop Builder / Run Frontend tests (push) Has been cancelled
Telegram Mini App Shop Builder / Run Backend tests (push) Has been cancelled
Telegram Mini App Shop Builder / Run PHP_CodeSniffer (push) Has been cancelled
Telegram Mini App Shop Builder / Build module. (push) Has been cancelled
Telegram Mini App Shop Builder / release (push) Has been cancelled
73 lines
1.6 KiB
Vue
73 lines
1.6 KiB
Vue
<template>
|
|
<SettingsItem :label="label">
|
|
<template #default>
|
|
<InputGroup v-if="allowCopy && isSupported">
|
|
<Button
|
|
:key="copied ? 'copied' : 'copy'"
|
|
:icon="copied ? 'fa fa-check' : 'fa fa-copy'"
|
|
severity="secondary"
|
|
v-tooltip.top="{ value: copied ? 'Скопировано' : 'Скопировать' }"
|
|
@click="copyToClipboard"
|
|
/>
|
|
<InputText
|
|
:type="type"
|
|
v-model="model"
|
|
class="form-control"
|
|
:placeholder="placeholder"
|
|
:readonly="readonly"
|
|
/>
|
|
</InputGroup>
|
|
|
|
<InputText
|
|
v-else
|
|
:type="type"
|
|
v-model="model"
|
|
class="form-control"
|
|
:placeholder="placeholder"
|
|
:readonly="readonly"
|
|
/>
|
|
</template>
|
|
<template #help>
|
|
<slot></slot>
|
|
</template>
|
|
</SettingsItem>
|
|
</template>
|
|
|
|
<script setup>
|
|
import SettingsItem from "@/components/SettingsItem.vue";
|
|
import InputText from 'primevue/inputtext';
|
|
import InputGroup from 'primevue/inputgroup';
|
|
import Button from 'primevue/button';
|
|
import { useClipboard } from '@vueuse/core';
|
|
|
|
const props = defineProps({
|
|
label: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: 'Введите значение'
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'text',
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
allowCopy: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
const model = defineModel();
|
|
|
|
const { copy, copied, isSupported } = useClipboard({ source: model })
|
|
|
|
function copyToClipboard() {
|
|
copy();
|
|
}
|
|
</script>
|