переименования папок

src/component/BasicElements/SelectElement.tsx

@@ -0,0 +1,128 @@
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { ElementDefinition } from '@/lib/element-registry'
+import { ElementOption } from '@/type/template'
+import { ChevronDown, Plus, Trash2 } from 'lucide-react'
+
+interface SelectConfig {
+  placeholder?: string
+  required?: boolean
+  options: ElementOption[]
+  targetCells: any[]
+}
+
+export const selectDefinition: ElementDefinition<SelectConfig, string> = {
+  type: 'select',
+  label: 'Выпадающий список',
+  icon: <ChevronDown className="h-4 w-4" />,
+  defaultConfig: {
+    placeholder: '',
+    required: false,
+    options: [],
+    targetCells: [],
+  },
+  Editor: ({ config, onChange }) => {
+    const handleAddOption = () => {
+      onChange({
+        ...config,
+        options: [...config.options, { value: '', label: '' }],
+      })
+    }
+
+    const handleUpdateOption = (
+      index: number,
+      field: 'value' | 'label',
+      value: string
+    ) => {
+      onChange({
+        ...config,
+        options: config.options.map((option, i) =>
+          i === index ? { ...option, [field]: value } : option
+        ),
+      })
+    }
+
+    const handleRemoveOption = (index: number) => {
+      onChange({
+        ...config,
+        options: config.options.filter((_, i) => i !== index),
+      })
+    }
+
+    return (
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <label className="text-sm font-medium">Варианты</label>
+            <Button variant="outline" size="sm" onClick={handleAddOption}>
+              <Plus className="mr-1 h-4 w-4" />
+              Добавить
+            </Button>
+          </div>
+          <div className="max-h-32 space-y-2 overflow-y-auto">
+            {config.options.map((option, index) => (
+              <div key={index} className="flex gap-2">
+                <Input
+                  placeholder="Значение"
+                  value={option.value}
+                  onChange={e =>
+                    handleUpdateOption(index, 'value', e.target.value)
+                  }
+                />
+                <Input
+                  placeholder="Подпись"
+                  value={option.label}
+                  onChange={e =>
+                    handleUpdateOption(index, 'label', e.target.value)
+                  }
+                />
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={() => handleRemoveOption(index)}
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    )
+  },
+  Preview: ({ config }) => (
+    <div className="space-y-3">
+      <div className="text-sm font-medium text-gray-700">Предпросмотр</div>
+      <div className="rounded-lg border border-gray-200 bg-white p-4">
+        <Select disabled>
+          <SelectTrigger className="w-full">
+            <span className="text-gray-500">
+              {config.placeholder || 'Выберите значение'}
+            </span>
+          </SelectTrigger>
+        </Select>
+      </div>
+    </div>
+  ),
+  Render: ({ config, value, onChange }) => (
+    <Select value={value} onValueChange={onChange}>
+      <SelectTrigger>
+        <SelectValue placeholder={config.placeholder || 'Выберите значение'} />
+      </SelectTrigger>
+      <SelectContent>
+        {config.options.map((option, index) => (
+          <SelectItem key={index} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  ),
+}