ERP-node/frontend/lib/registry/pop-components/pop-search/index.tsx

50 lines
1.5 KiB
TypeScript

"use client";
import { PopComponentRegistry } from "../../PopComponentRegistry";
import { PopSearchComponent } from "./PopSearchComponent";
import { PopSearchConfigPanel } from "./PopSearchConfig";
import type { PopSearchConfig } from "./types";
const defaultConfig: PopSearchConfig = {
inputType: "text",
fieldName: "",
placeholder: "검색어 입력",
debounceMs: 500,
triggerOnEnter: true,
labelPosition: "top",
labelText: "",
labelVisible: true,
};
function PopSearchPreviewComponent({ config, label }: { config?: PopSearchConfig; label?: string }) {
const cfg = config || defaultConfig;
const displayLabel = label || cfg.fieldName || "검색";
return (
<div className="flex h-full w-full flex-col items-center justify-center gap-1 p-2">
<span className="text-[10px] font-medium text-muted-foreground">
{displayLabel}
</span>
<div className="flex h-6 w-full items-center rounded border border-dashed border-muted-foreground/30 px-2">
<span className="text-[9px] text-muted-foreground">
{cfg.placeholder || cfg.inputType}
</span>
</div>
</div>
);
}
PopComponentRegistry.registerComponent({
id: "pop-search",
name: "검색",
description: "조건 입력 (텍스트/날짜/선택/모달)",
category: "input",
icon: "Search",
component: PopSearchComponent,
configPanel: PopSearchConfigPanel,
preview: PopSearchPreviewComponent,
defaultProps: defaultConfig,
touchOptimized: true,
supportedDevices: ["mobile", "tablet"],
});