pre form builder handler

2026-03-23 00:47:20 +03:30
commit 6a1ed57d23
50 changed files with 5738 additions and 0 deletions
@@ -0,0 +1,67 @@
+<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>