Squashed commit message

frontend/admin/src/components/Settings/ItemInput.vue

@@ -0,0 +1,72 @@
+<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>