137 lines
3.0 KiB
Vue
137 lines
3.0 KiB
Vue
|
<template>
|
|||
|
|
<div class="partner-urls-field">
|
|||
|
|
<div
|
|||
|
|
v-for="(row, index) in rows"
|
|||
|
|
:key="index"
|
|||
|
|
class="partner-urls-field__row"
|
|||
|
|
>
|
|||
|
|
<span class="partner-urls-field__index">{{ index + 1 }}</span>
|
|||
|
|
|
|||
|
|
<a-input
|
|||
|
|
:value="row.url"
|
|||
|
|
:disabled="disabled"
|
|||
|
|
allow-clear
|
|||
|
|
dir="ltr"
|
|||
|
|
class="partner-urls-field__url"
|
|||
|
|
:placeholder="index === 0 ? 'آدرس اصلی، مثلاً https://price.zaarbox.ir/api/free' : 'آدرس جایگزین (اختیاری)'"
|
|||
|
|
@update:value="(val) => updateRow(index, String(val ?? ''))"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<a-button
|
|||
|
|
type="text"
|
|||
|
|
danger
|
|||
|
|
:disabled="disabled || rows.length <= 1"
|
|||
|
|
aria-label="حذف"
|
|||
|
|
@click="removeRow(index)"
|
|||
|
|
>
|
|||
|
|
حذف
|
|||
|
|
</a-button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<a-button
|
|||
|
|
v-if="rows.length < MAX"
|
|||
|
|
type="dashed"
|
|||
|
|
block
|
|||
|
|
:disabled="disabled"
|
|||
|
|
class="partner-urls-field__add"
|
|||
|
|
@click="addRow"
|
|||
|
|
>
|
|||
|
|
افزودن آدرس سرور
|
|||
|
|
</a-button>
|
|||
|
|
|
|||
|
|
<p class="partner-urls-field__hint">
|
|||
|
|
اگر آدرس اول پاسخ ندهد، بهترتیب سراغ آدرسهای بعدی میرود. حداکثر {{ MAX }} آدرس.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, watch } from 'vue'
|
|||
|
|
import {
|
|||
|
|
formatPartnerServerUrls,
|
|||
|
|
parsePartnerServerUrlsDraft,
|
|||
|
|
PARTNER_SERVER_URLS_MAX,
|
|||
|
|
type PartnerUrlRow,
|
|||
|
|
} from './settingTypes'
|
|||
|
|
|
|||
|
|
const props = withDefaults(
|
|||
|
|
defineProps<{
|
|||
|
|
modelValue: string
|
|||
|
|
disabled?: boolean
|
|||
|
|
}>(),
|
|||
|
|
{ disabled: false },
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
const emit = defineEmits<{ 'update:value': [value: string] }>()
|
|||
|
|
|
|||
|
|
const MAX = PARTNER_SERVER_URLS_MAX
|
|||
|
|
|
|||
|
|
const rows = ref<PartnerUrlRow[]>(parsePartnerServerUrlsDraft(props.modelValue))
|
|||
|
|
let skipExternalSync = false
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => props.modelValue,
|
|||
|
|
(value) => {
|
|||
|
|
if (skipExternalSync) {
|
|||
|
|
skipExternalSync = false
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
rows.value = parsePartnerServerUrlsDraft(value)
|
|||
|
|
},
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
function commit(nextRows: PartnerUrlRow[]) {
|
|||
|
|
rows.value = nextRows
|
|||
|
|
skipExternalSync = true
|
|||
|
|
emit('update:value', formatPartnerServerUrls(nextRows))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateRow(index: number, url: string) {
|
|||
|
|
const next = rows.value.map((row, i) => (i === index ? { ...row, url } : row))
|
|||
|
|
commit(next)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function addRow() {
|
|||
|
|
if (rows.value.length >= MAX) return
|
|||
|
|
commit([...rows.value, { url: '' }])
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function removeRow(index: number) {
|
|||
|
|
const next = rows.value.filter((_, i) => i !== index)
|
|||
|
|
commit(next.length > 0 ? next : [{ url: '' }])
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.partner-urls-field {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.partner-urls-field__row {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 24px 1fr auto;
|
|||
|
|
gap: 8px;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.partner-urls-field__index {
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #6b7280;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.partner-urls-field__hint {
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #6b7280;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 640px) {
|
|||
|
|
.partner-urls-field__row {
|
|||
|
|
grid-template-columns: 20px 1fr auto;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|