67 lines
1.8 KiB
Vue
67 lines
1.8 KiB
Vue
<template>
|
|
<div class="flex h-full flex-col overflow-hidden">
|
|
<div class="border-b border-slate-100 px-3 py-2">
|
|
<div class="flex items-center justify-between gap-2">
|
|
<div class="min-w-0">
|
|
<p class="mb-0! truncate text-xs font-semibold text-slate-800">
|
|
{{ field.label || 'بدون عنوان' }}
|
|
</p>
|
|
<p class="mb-0! mt-1 text-[10px] text-slate-400">
|
|
Range Slider
|
|
</p>
|
|
</div>
|
|
|
|
<span
|
|
v-if="field.required"
|
|
class="shrink-0 rounded-full bg-red-50 px-2 py-1 text-[10px] font-medium text-red-600"
|
|
>
|
|
required
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 px-3 py-3 overflow-hidden">
|
|
<div class="space-y-3">
|
|
<a-slider
|
|
disabled
|
|
:min="safeMin"
|
|
:max="safeMax"
|
|
:step="safeStep"
|
|
/>
|
|
|
|
<div class="flex items-center justify-between text-[10px] text-slate-400">
|
|
<span>min: {{ safeMin }}</span>
|
|
<span>step: {{ safeStep }}</span>
|
|
<span>max: {{ safeMax }}</span>
|
|
</div>
|
|
|
|
<div class="rounded-lg bg-slate-50 px-3 py-2 text-[10px] text-slate-500 border border-slate-200">
|
|
بازه: {{ safeMin }} تا {{ safeMax }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import {FormFieldConfig} from "@/models/form";
|
|
|
|
const props = defineProps<{
|
|
field: FormFieldConfig
|
|
}>()
|
|
|
|
const safeMin = computed(() =>
|
|
typeof props.field.min === 'number' ? props.field.min : 0
|
|
)
|
|
|
|
const safeMax = computed(() =>
|
|
typeof props.field.max === 'number' ? props.field.max : 100
|
|
)
|
|
|
|
const safeStep = computed(() =>
|
|
typeof props.field.step === 'number' && props.field.step > 0
|
|
? props.field.step
|
|
: 1
|
|
)
|
|
</script> |