setting changed 3

2026-06-05 22:01:10 +03:30
parent f89df02a90
commit c828c8f971
10 changed files with 1152 additions and 774 deletions
@@ -0,0 +1,125 @@
+<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>
+
+    <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 {
+  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 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>