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>
|