boursecu_admin/src/pages/menuPages/configuration/SettingValueField.vue

<template>
  <div class="setting-value-field">
    <a-switch
      v-if="fieldType === 'switch'"
      :checked="switchChecked"
      :disabled="disabled"
      @change="onSwitchChange"
    >
      <template #checkedChildren>فعال</template>
      <template #unCheckedChildren>غیرفعال</template>
    </a-switch>

    <ZaarboxPriceKeyField
      v-else-if="isZaarboxPriceKey"
      :model-value="modelValue"
      :disabled="disabled"
      @update:value="emit('update:value', $event)"
    />

    <a-select
      v-else-if="fieldType === 'select'"
      :value="modelValue || undefined"
      :disabled="disabled"
      allow-clear
      placeholder="انتخاب کنید"
      class="w-full"
      @update:value="onSelectChange"
    >
      <a-select-option v-for="opt in selectItems" :key="opt.key" :value="opt.key">
        {{ opt.value }}
      </a-select-option>
    </a-select>

    <a-input-number
      v-else-if="fieldType === 'number'"
      :value="numberValue"
      :disabled="disabled"
      class="w-full"
      :formatter="(v: string) => `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
      :parser="(v: string) => v.replace(/,/g, '')"
      @update:value="onNumberChange"
    />

    <a-textarea
      v-else-if="fieldType === 'longtext'"
      :value="modelValue"
      :disabled="disabled"
      :rows="rows"
      class="w-full font-mono text-sm"
      @update:value="emit('update:value', $event)"
    />

    <a-input
      v-else
      :value="modelValue"
      :disabled="disabled"
      allow-clear
      @update:value="emit('update:value', $event)"
    />
  </div>
</template>

<script setup lang="ts">
import ZaarboxPriceKeyField from './ZaarboxPriceKeyField.vue'
import {
  isSwitchOn,
  parseSelectOptions,
  resolveSettingFieldType,
  switchToString,
  type SettingFieldType
} from './settingTypes'

const props = withDefaults(
  defineProps<{
    modelValue: string
    settingKey?: string
    settingType?: string
    description?: string
    disabled?: boolean
    rows?: number
  }>(),
  { disabled: false, rows: 10 }
)

const emit = defineEmits<{ 'update:value': [value: string] }>()

const fieldType = computed<SettingFieldType>(() =>
  resolveSettingFieldType({
    key: props.settingKey,
    type: props.settingType
  })
)

const isZaarboxPriceKey = computed(() => props.settingKey === 'zaarbox_price_key')

const selectItems = computed(() =>
  parseSelectOptions({
    key: props.settingKey,
    description: props.description,
    type: props.settingType
  })
)

const switchChecked = computed(() => isSwitchOn(props.modelValue))

function onSwitchChange(checked: boolean) {
  emit('update:value', switchToString(checked))
}

function onSelectChange(val: string | undefined) {
  emit('update:value', val ?? '')
}

const numberValue = computed(() => {
  const n = parseFloat(String(props.modelValue || '').replace(/,/g, ''))
  return Number.isFinite(n) ? n : undefined
})

function onNumberChange(val: number | string | null) {
  if (val === null || val === undefined || val === '') {
    emit('update:value', '')
    return
  }
  emit('update:value', String(val))
}
</script>

<style scoped>
.setting-value-field {
  width: 100%;
}
.setting-value-field :deep(.ant-input-number) {
  width: 100%;
}
</style>